I need to get a variable to refresh in a script I am using when a new product variant is selected.

Highlighted
New Member
2 0 0

I was sent a script from a 3rd party company that we are trying to integrate into our product pages.  The script is below, and currently in product-template.liquid between the Add to Cart button and the product description.  We are using the Debut theme.

 

<div class="lcly-container">
  		<div id="lcly-button-0">
    		<a id="lcly-link-0" href="http://brands.locally.com" target="_blank">Product Locator by Locally</a>
  		</div>
    <script id="lcly-script-0" async></script>
  	<script id="lcly-config-0">
 		var lcly_config_0 = {
      		"company_name": "Appalachian Outfitters",
     		"button_text": ":heart:",
      		"button_id": "HTML",
      		"company_id": "68",
      		"css": "6",
      		"color_0": "#CBA155",
            "upc": {{current_variant.barcode}},
      		"always_hide_button": "1",
      		"n_related_styles": "3",
      		"show_dealers": "1",
      		"n_dealers": "3",
      		"show_only_stocking_dealers": "1",
      		"no_link": "1",
      		"hide_all_when_no_stock": "1"
    		};
    	var lcly_query_0 = Object.keys(lcly_config_0)
    		.reduce(function(a,k){a.push(encodeURIComponent(k) + '=' 
    		+ encodeURIComponent(lcly_config_0[k]));return a},[]).join('&');
    	var lcly_endpoint_0 = 'https://appalachianoutfitters.locally.com/stores/map.js?' + lcly_query_0;
    		document.getElementById('lcly-script-0').src=lcly_endpoint_0;
            lcly_config_0.upc[upc2] = {{current_variant.barcode}};                  	
  	</script>
</div>

I need the {{current_varient.barcode}} to refresh when the customer selects a different variant and update the script.  I have added the code in the theme.js to make sure the barcode is being refreshed, and verified that it is refreshing the barcode by placing it on the site as text, but I can not get it to refresh within the script, so the script does not update when the variant selection changes.  An example of the script on our site is here: https://www.appalachianoutfitters.com/collections/featured/products/renegade-gtx-mid-ws?variant=2555....  The box below the Add to Cart button should be updating.

 

Thanks,

Kevin

0 Likes
Shopify Partner
1043 112 165

There are many ways to implement this, here is one of it. In theme.js, create a global variable and assign the variant id to it any time the variant is changed (and initialized at page load):

...
var myVariantId = <selected variant Id>;
...

Then, in your thirdparty script instead of using liquid code reference the variable like this:

...
lcly_config_0.upc[upc2] = window.myVariantId; 
... 

 

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
New Member
2 0 0

I am not exactly sure where the code you suggested should be placed.  Is there any additional code that would be needed or just those 2 lines?

0 Likes