How AI Saved 30 Minutes of Debugging and Fixing JavaScript Errors

Swift Support in Action: How We Resolved a Wishlist Implementation Bug Quickly Using AI's Help

For any e-commerce business, a smooth customer experience isn't just a feature—it's essential. When an Enterprise customer recently reported that their Wishlist button wasn't working correctly on collection pages, I understood the urgency. Shoppers couldn't save items after selecting a different product variant, creating friction in the path to purchase.

Jumping into action immediately.

A Systematic Approach to Problem-Solving

The initial investigation quickly confirmed that a JavaScript error was the culprit, preventing product details from rendering correctly when a variant was changed. The specific error was an Uncaught TypeError, indicating that the code was trying to read a value that didn't exist.

Uncaught TypeError: Cannot read properties of null (reading 'amount')

In situations like this, speed and accuracy are paramount. While I could have manually traced the code line-by-line, our commitment to efficient resolution means leveraging the best tools for the job. To accelerate the process, we framed the problem for an AI assistant to act as a diagnostic co-pilot.

AI as an Efficiency Co-Pilot, Not the Pilot

I provided the relevant code snippet to AI to rapidly test our hypothesis. This allowed me to bypass a lengthy manual search and instantly pinpoint the source of the issue.

The analysis confirmed the suspicion: the code was accessing a product's compareAtPrice field without first checking if the product was actually on sale. If a product variant didn't have a "compare at" price, the value was null, causing the script to fail.

The problematic line was a simple conditional check:

if(item.node.variants.edges[0].node.compareAtPrice.amount > item.node.variants.edges[0].node.price.amount) {

It explained that I was trying to access .amount from compareAtPrice without first checking if compareAtPrice even existed. If a product wasn't on sale, that object would be null, and the code would crash.

Next, it became my guide. A good theory needs proof. It didn't just tell me what was wrong; it gave me the exact ways to confirm it. It suggested I add a series of console.log statements to act as a trail of breadcrumbs, letting me watch the data as it flowed through the script.

const firstVariant = item.node.variants.edges[0]?.node; console.log("Debugging Product Variants:", item.node.variants.edges); console.log("First Variant:", firstVariant); console.log("compareAtPrice:", firstVariant?.compareAtPrice); console.log("compareAtPrice.amount:", firstVariant?.compareAtPrice?.amount); console.log("price:", firstVariant?.price?.amount);

I dropped the logs in and re-ran the code.

Then came the "Aha!" moment. The console lit up, and the evidence was undeniable. Staring right back at me was the proof:

Debugging Product Variants: (5) [{…}, {…}, {…}, {…}, {…}] First Variant: {id: 'gid://shopify/ProductVariant/321', title: 'abc', sku: '123', availableForSale: false, quantityAvailable: 0, …} compareAtPrice: null compareAtPrice.amount: undefined price: 109.99

We had our culprit. The theory was correct. The hunt was over.

Finally, it provided the elegant solution. It immediately recommended a safe way to access the property: assign it a default value of “0“ when passed null, and proceed to the IF condition only then.

The existing IF condition was replaced by the below:

const firstVariant = item.node.variants.edges[0]?.node; const compareAtPrice = firstVariant?.compareAtPrice?.amount ?? 0; // Set default to 0 if null const price = firstVariant?.price?.amount ?? 0; if (compareAtPrice > price) {

The Outcome: Support That Just Works

The result? From diagnosis to the entire fix was completed in under five minutes.

The Wishlist button now works flawlessly, ensuring their customers enjoy the seamless shopping experience they expect.

This incident is a perfect example of our support philosophy. AI isn't a replacement for expertise; it's a powerful enabler. By using AI as a co-pilot, we empower our skilled team to achieve business goals faster. It allows us to accelerate debugging, pinpoint issues with incredible speed, and deliver the fast, effective support that helps our clients succeed.