Shopify cart values only update when I use hardcoded values

I have written some code to allow my client to add free products to cart when its value goes above a fixed threshold. I get these values in my file through the theme settings. The problem is that the free product code only works if I use hardcoded values. Otherwise, I get 404 erro in the cart update.js file. This is the code that works: $.ajax({ type: 'get', url: '/cart.js', dataType: 'json', success: function(data) { var total_cart_price = 0; total_cart_price = data.total_price / 100; var free_product_id = settings.first_free_product; var first_free_price_threshold = settings.first_free_price_threshold; console.log(Free product ID: ${free_product_id} and price threshold: ${first_free_price_threshold}); const cartItems = data.items.map(item => item.id); let updates = {}; if (total_cart_price < 60) { updates = { 48270424670533: 0 }; } if (total_cart_price >= 60) { updates = { 48270424670533: 1 }; } fetch(window.Shopify.routes.root + 'cart/update.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ updates }) }).then(response => { myCartRefresher(); return response.json(); }).catch((error) => { console.error('Error:', error); }); } }); This is the code that doesn't: $.ajax({ type: 'get', url: '/cart.js', dataType: 'json', success: function(data) { var total_cart_price = 0; total_cart_price = data.total_price / 100; var free_product_id = {{ settings.first_free_product }}; var first_free_price_threshold = {{ settings.first_free_price_threshold }}; console.log(Free product ID: ${free_product_id} and price threshold: ${first_free_price_threshold}); const cartItems = data.items.map(item => item.id); let updates = {}; if (total_cart_price < first_free_price_threshold) { updates = { free_product_id: 0 }; } if (total_cart_price >= first_free_price_threshold) { updates = { free_product_id: 1 }; } fetch(window.Shopify.routes.root + 'cart/update.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ updates }) }).then(response => { myCartRefresher(); return response.json(); }).catch((error) => { console.error('Error:', error); }); } }); What am I doing wrong? Thanks.

Comment (1)

Jese Leos

August 19, 2024

Verified user

The syntax of key/object looks a bit broken. Try this: if (total_cart_price < first_free_price_threshold) { updates = { [free_product_id]: 0 }; } if (total_cart_price >= first_free_price_threshold) { updates = { [free_product_id]: 1 }; }

You’ll be in good company