Adding Product Metafields and update the cart via AJAX

[asprincean]

Hi All,

I am quite new in Shopify and I hope someone can help me with an idea.

I am trying to enhance the cart functionality by integrating product add-ons stored in metafields. I’ve updated my Liquid template to display these add-ons, but I need help with the JavaScript to handle add-on selections and update the cart total dynamically.

Here’s a brief overview of my setup:

Liquid Template: Displays add-ons for each cart item using metafields.
Javascript: Needs to update the cart total when add-ons are selected or deselected.
I’d appreciate any guidance or examples on implementing the JavaScript part, especially for updating the cart total and handling interactions with Shopify’s AJAX API if necessary.

Thanks in advance for your help!

[Small_Task_Help]

Hi,

Please share your store url. If you want you can contact us details given at Signature

[asprincean]

This is what I have done so far:

{{ ‘component-cart-addons.css’ | asset_url | stylesheet_tag }}

Enhancements

{% for item in cart.items %} {% assign product_addons_metafield = item.variant.metafields.product_add_ons.addon.value %}

{% if product_addons_metafield %} {% for addon in product_addons_metafield %}

• {{ addon.title.value }}

  {% assign description = addon.description | metafield_tag %}

  {{ description }}

  Add for {{ addon.price.value | money }}
{% endfor %} {% else %}

No add-ons available for this product.

{% endif %}

{% endfor %}

[asprincean]

The store url is: https://everymandrivingexperiences.co.uk/

[asprincean]

Also, the UI I currently made in a copy of the theme and looks like this: