Need Help Saving Cookie Values and UTM Parameters to Cart Attributes in Shopify

Retired Boards Appdev Store Design
, ,

Topic summary

Issue: A Shopify store owner is trying to save cookie values and UTM parameters from local storage to cart attributes, but the current implementation only works when visitors view the cart page. The goal is to capture this data even when customers use “Buy Now” buttons or proceed directly to checkout from product pages.

Proposed Solution: Use Shopify’s AJAX API to update cart attributes directly when products are added, bypassing the need for cart page visits or hidden input fields. The suggested approach involves listening to “Add to Cart” and “Buy Now” button clicks, then sending attribution data via POST request to /cart/update.js.

Current Problem: After implementing the suggested code with e.preventDefault(), the “Add to Cart” button becomes unresponsive. The “Buy Now” button briefly redirects to checkout but then quickly returns to the homepage. Removing e.preventDefault() makes “Add to Cart” work properly and updates cart attributes, but causes issues with the “Buy Now” functionality.

Status: The implementation remains problematic. The original poster has tested different approaches and confirmed via Chrome DevTools that cart attributes are updating, but the button behavior is broken. They’ve requested step-by-step guidance to resolve the redirect and responsiveness issues.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
2

Hi Sharif7,

To achieve what you’re looking for, you could use the AJAX API to update the cart attributes directly when a product is added to the cart, regardless of whether the Cart page is visited or not. This can be done by listening to the ‘Add to Cart’ or ‘Buy Now’ button click event, and then updating the cart attributes accordingly. Here is an example of how you could do this:

$(document).ready(function() {
  $('[name="add"], .buy-now-button').on('click', function(e) {
    e.preventDefault();

    // Get the value from local storage
    var sharifAttribution = localStorage.getItem("sharif_attribution");

    // Update the cart attributes
    $.ajax({
      type: 'POST',
      url: '/cart/update.js',
      data: {
        attributes: {
          sharif_attribution: sharifAttribution
        }
      },
      dataType: 'json'
    });

    // If it's the 'Buy Now button, redirect to checkout
    if ($(this).hasClass('buy-now-button')) {
      window.location.href = '/checkout';
    }
  });
});

Just replace .buy-now-button with the actual class of your ‘Buy Now’ button. This script should be placed in the product template or in a global script file.

As for your second question, the cart attributes need to be sent to the server, which usually requires an HTML form. However, the above AJAX method allows you to send data to the server without the need for an actual form or input field in your HTML. This is because AJAX allows for asynchronous communication with the server, meaning it can send and retrieve data without requiring a page reload. It can send the data straight from your JavaScript code to the server.

I hope this helps! Let me know if you have any further questions.

1 Like