Converting Liquid Variables to Javascript

Technical Q&A
1

Hi Everyone!

Excuse me for my ignorance, I am fairly new to liquid and javascript. I currently have some liquid variables that I am trying to use in javascript and I can’t seem to get them to work correctly. Can anyone help explain, how I can translate this into javascript? The HTML part of the code below I can get to appear correctly in javascript. But when I try to add the liquid in, it doesn’t work. We have custom addon boxes on our product pages that use liquid to pull what addons are available for that product. We are looking to remove it from the product page itself and add it to the ajax cart. I am able to get it to come up correctly in the cart until the customer changes the quantity of the products in the ajax cart, then the ajax cart rebuilds itself using javascript.

Again I apologize for my ignorance, and I look forward to hearing some of the solutions you guys have! I will also attach a link to a product on our website so that you can see the addons I am speaking of as well as attaching the code I am using below.
https://hornblasters.com/products/psychoblasters-228v-air-horn-kit


{% assign addons = product.metafields.custom_fields.addons | split: ‘,’ %}
{% for addon_handle in addons %}
{% assign addon = all_products[addon_handle] %}
{% if addon.available %}
{% assign fields = addon.metafields.custom_fields %}
{% if fields.addon_title %}
{% assign addon_title = fields.addon_title %}
{% else %}
{% assign addon_title = addon.title %}
{% endif %}
{% if addon_title == blank %}

{% else %}




{% if addon_title == ‘Gold Extended Warranty’ or addon_title == ‘Platinum Extended Warranty’ %}

{% else %}

{% endif %}

{% endif %}
{% endif %}
{% endfor %}

Add {{ addon_title }}
{% if fields.addon_description %}

Tooltip


{{ fields.addon_description }}


addons


{% endif %}
+See price in cart
+{{ addon.price | money }}

2

Hi @Tyler_Rich ,

You want to show all the ‘addon boxes’ at the cart drawer. It will have 2 solutions for you:

#1: You let the HTML show ‘addon boxes’ outside of the ajax cart’s load div, so that when reloading the ajax cart it won’t reload the ‘addon boxes’. Or you only set reload at product items and subtotal, you don’t reload the whole cart drawer when updating quantity.

#2: You declare ‘product.metafields.custom_fields.addons’ as a javascript array variable. It will be an array containing the product information you need. After you reload the cart drawer, you need to rerun the function that shows all the ‘addon boxes’ with previously saved variables.

This is a complex request, so it will be difficult for someone to describe it in detail for you. If you still find it difficult, you can contact a specialist, they will help you quickly: https://community.shopify.com/c/Shopify-Ecommerce-Jobs/bd-p/shopify-job-board

Hope it helps!

1 Like
3

Hi @Tyler_Rich ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.