Rich-text Reply

Inserting script to product page template

shulegoing 07-19-16
Accepted Solution

Inserting script to product page template

[ Edited ]

Hi

 

I am trying to insert the following script into the variantion code. I have done this before with external scripts using optimizelys reccomeneded method. But I'm unsure how to handle this one?


We use shopify. This code is to insert into the template called product.liquid

 

Our site is http://maap.cc/

 

<script>
$(document).ready(function () {
setTimeout(function () {
var optionSelector = $(".single-option-selector");
optionSelector.eq(0).change(function() {
selectEvent();
});
}, 100);
var selectEvent = function () {
var optionSelector = $(".single-option-selector");
// get color
var colorSelected = $( ".single-option-selector:first option:selected" ).text(),
colorClass = $("span.hide."+colorSelected);

// second option
optionSelector.eq(1).find("option").each(function(e){
var self = $(this);
itemLeftMessage = '';
colorClassText = colorClass.eq(e).text();
if(colorClassText > 0){
if(colorClassText == 1){
itemLeftMessage = " - 1 unit left";
}else if(colorClassText < 5 ){
itemLeftMessage = " - Low stock";
}else{
itemLeftMessage = "";
}
}else{
itemLeftMessage = " - Out of stock";
}
var val = self.attr("value") + itemLeftMessage;
self.html(val);
});
};
setTimeout(selectEvent, 100)
})
</script>

 

I also need to add to the variation 

 

{% include 'partial--inventory-table' %}

 

Thanks

 

Shule 

David_Orr 07-20-16
 

Re: Inserting script to product page template

Hi Shule,

The code within the &lt;script&gt; &lt;/script&gt; tags is javascript. You may insert the code, excluding the &lt;script&gt; and &lt;/script&gt; tags in the variation code by clicking on the blue "edit code" box on the lower right of the editor.

Here is a link for more info on how to access the code editor:

https://help.optimizely.com/Build_Experiments/The_Code_Editor_and_Variation_Code

Here is a link for more info on how and when Optimizely evaluates javascript&colon;

https://help.optimizely.com/Build_Experiments/How_Optimizely_Works%3A_Snippet_order_of_execution%2C_...

David
Senior Technical Support Engineer
Optimizely
shulegoing 07-21-16
 

Re: Inserting script to product page template

Hi David. Thanks so much for your help. I have set the test up now as advised and it is working well.

Cheers

Shule