Product variant title not correct and quantity is not written in datalayer

Shopify Discussion
1

Hello, I am trying to set up my GTM with my shop which uses New Dawn theme. I created an “add_to_cart” event when the customer adds an item to the cart I should see the item_name, item_variant_title, price, quantity. So far everything works fine except item_variant_title and quantity. When a customer selects an item variant I see only the default variant and not the right one. It looks like if the customer selects another variant the {{ product.selected_or_first_available_variant.title }} is not updated. Quantity is also not working. Can someone help me to get this right?

Here is my button and datalyer code:

          <button
            id="ProductSubmitButton-{{ section_id }}"
            type="submit"
            name="add"
            class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
            {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
              disabled
            {% endif %}

                        onclick="dataLayer.push({ 'ecommerce': null });dataLayer.push({
'event': 'add_to_cart',
'ecommerce': {
		'items': [{
		'item_name': '{{ product.title | remove: "'" | remove: '"' }}',
		'item_category': '{{ product.collections[0].title | remove: "'" | remove: '"' }}',
		'item_variant': '{{ product.selected_or_first_available_variant.title }}',
		'currency': '{{ shop.currency }}',
		'price': '{{ product.price  | times: 0.01}}',
        'quantity': '{{ quantity }}'
		}]
	}
});" 
         
           >
            <span>
              {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                {{ 'products.product.sold_out' | t }}
              {%- else -%}
                {{ 'products.product.add_to_cart' | t }}
              {%- endif -%}
            </span>
            {%- render 'loading-spinner' -%}   
          </button>
2

You need to reload a page to update liquid data. Variants are dynamic, and you have to update them. Use AJAX, for example, or pass the product’s data to the data layer.

window.customHandleAddToCart = function (data, flag) {
    window.dataLayer.push({
      event: "event",
      event_id: newRandomUserId ? newRandomUserId : "",
      customer_id: customerId ? customerId : "not logged in",
      event_time: new Date().toString(),
      add_to_cart_flag: cartFlag ? cartFlag : "",
      ecommerce: {
        items: [{
          item_id: data ? data.items[0].sku.trim().toString() : productSku.toString(),
          item_name: data ? data.items[0].product_title : productName,
          item_category: data ? data.items[0].product_type : productCollection,
        }]
      }
    });
}
3

Thanks for the answer. I tried your provided code but it is still not working :confused: