I'm currently using a GraphQL mutation within the Shopify Theme to apply a discount code and automatically update the cart.json. While the cart.json is successfully updating with the applied discount, the Dawn theme's UI is not reflecting the discounted price. To achieve this functionality, I've created a custom input field where users can enter the discount code, along with a custom button to trigger the discount application process. const button = document.getElementById("applyDiscountBtn"); const clearButton = document.getElementById("clearCartBtn"); clearButton.addEventListener("click", function () { fetch(window.Shopify.routes.root + 'cart/clear.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, }) .then(response => { return response.json(); }) .catch((error) => { console.error('Error:', error); }); window.location.reload(); console.log('Cart has been cleared'); }); button.addEventListener("click", async function () { applyDiscountCode(); await updateCartDiscountCodes(); clearCookie('discount_code'); await fetch(window.Shopify.routes.root + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: {"sections": "main-cart-footer"} }) .then(response => { return response.json(); }) .catch((error) => { console.error('Error:', error); }); window.location.reload(); console.log('Click Completed'); }); function setCookie(cookieName, cookieValue, expirationDays) { const date = new Date(); date.setTime(date.getTime() + (expirationDays * 24 * 60 * 60 * 1000)); const expires = "expires=" + date.toUTCString(); document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/"; } function applyDiscountCode() { const discountCodeInput = document.getElementById("discountCode"); const discountCode = discountCodeInput.value.trim(); // Check if the discount code is not empty if (discountCode !== "") { // Store discount code in cookie setCookie("discount_code", discountCode, 1); console.log("Discount code applied successfully!"); } else { console.log("Please enter a valid discount code."); } } function getCookie(cookieName) { const name = cookieName + "="; const decodedCookie = decodeURIComponent(document.cookie); const cookieArray = decodedCookie.split(';'); for(let i = 0; i <cookieArray.length; i++) { let cookie = cookieArray[i]; while (cookie.charAt(0) === ' ') { cookie = cookie.substring(1); } if (cookie.indexOf(name) === 0) { return cookie.substring(name.length, cookie.length); } } return ""; } function updateCartDiscountCodes() { try { const cartId = getCookie("cart"); // You need to implement this function to get the cartId from the cookie const discount_code = getCookie("discount_code"); const discountCodes = [discount_code]; // Example discount codes const variables = { cartId: "gid://shopify/Cart/" + cartId, discountCodes: discountCodes }; console.log(variables.cartId, variables.discountCodes); const mutation = ` mutation cartDiscountCodesUpdate($cartId: ID!, $discountCodes: [String!]) { cartDiscountCodesUpdate(cartId: $cartId, discountCodes: $discountCodes) { cart { checkoutUrl } userErrors { field message } } } `; const response = fetch('/api/2024-04/graphql.json', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Shopify-Storefront-Access-Token': 'xxxx-xxxx-xxxx' // Add your authentication token here }, body: JSON.stringify({ query: mutation, variables: variables }) }); if (!response.ok) { throw new Error('Network response was not ok'); } const data = response.json(); console.log('Mutation Response:', data); } catch (error) { console.error('Mutation Error:', error); // Handle error } } function clearCookie(cookieName) { document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; }