Shopify Question posted in
The Shopify help center can be found here.

Change product description based on variant in Shopify

I want to be able to change product description based on variant name. I am following the tutorial here ==> https://ecommerce.shopify.com/c/ecommerce-design/t/demo-change-description-in-product-with-different-variants-296509

I modified the code a bit in order to use variant.option1 instead of variant.id

Seems like I have no luck as the description is not changing. Option 1 has “Unisex Tee” and “Women’s Tee”

Below is the code: 

<p class="description" id="Unisex Tee">Unisex Tee</p>
<p class="description" id="Women's Tee" style="display: none;">Women's Tee</p>

// selectCallback is the callback name in Timber
var selectCallback = function(variant, selector) {

   // Simply toggle on/off the panel according to the variant selected
    $('.description').css('display', 'none');
    $('#' + variant.option1).css('display', 'block');
// rest of the Timber code
}

Any help would be greatly appreciated as I am not really good with JS. Thanks.

Tags:

3

Answers


  1. 0

    Modify the code back to use the variant IDs. The option1 property of the variant object is not guaranteed to provide you valid id names, as is what is happening in your case. For instance, spaces are not allowed in id attributes and neither is the single quote. Read this and this for more details. This is why the author of that post was using variant ID. It is a unique identifier and it is also a valid id for HTML elements.

    Login or Signup to reply.
  2. 0 
        <div id="a">
<ul class="ptabs">
<li><a href="#tab-1">Overview</a></li>
<li><a href="#tab-2">Details</a></li>
<li><a href="#tab-3">Dimensions</a></li>
</ul>
<div id="tab-1">
<p><span face="Raleway,sans-serif" color="black" style="color: black; font-family: Raleway,sans-serif; font-size: 14px;"><br />Overview set of 6</span></p>
</div>
<div id="tab-2">
<p><span face="Raleway,sans-serif" color="black" style="color: black; font-family: Raleway,sans-serif; font-size: 14px;">Details set of 6</span></p>
</div>
<div id="tab-3">
<p><span face="Raleway,sans-serif" color="black" style="color: black; font-family: Raleway,sans-serif; font-size: 14px;">Dimensions of set of 6</span></p>
</div>
</div>
<div id="b">
<ul class="ptabs">
<li><a href="#tab-4">Overview</a></li>
<li><a href="#tab-5">Details</a></li>
<li><a href="#tab-6">Dimensions</a></li>
</ul>
<div id="tab-4">
<p><span face="Raleway,sans-serif" color="black" style="color: black; font-family: Raleway,sans-serif; font-size: 14px;"><br />Overview set of 12</span></p>
</div>
<div id="tab-5">
<p><span face="Raleway,sans-serif" color="black" style="color: black; font-family: Raleway,sans-serif; font-size: 14px;">Details set of 12</span></p>
</div>
<div id="tab-6">
<p><span face="Raleway,sans-serif" color="black" style="color: black; font-family: Raleway,sans-serif; font-size: 14px;">Dimensions of set of 12</span></p>
</div>
</div>
<style><!--
#a ,#b {display:none;}
--></style>


<script>
$(document).ready(function(){
    $("select").change(function(){
       var s = document.getElementById('product-variants-4452185735-option-0');
var item1 = s.options[s.selectedIndex].value;

if (item1 == "Set of 6") {
   document.getElementById('a').style.display="block";
    document.getElementById('b').style.display="none";
}
else if (item1 == "Set of 12") {

   document.getElementById('a').style.display="none";
    document.getElementById('b').style.display="block";
}
    });
});
</script>
    Login or Signup to reply.
  3. 0 
    <!--First of all variants Must be defined in shopify backend.then you can see handler name by inspecting element in browser.jquery library files required. -->




    <!--start-->
            <div id="a" style="display: none;">
            <ul class="ptabs">
            <li><a href="#tab-1" class="active">Overview</a></li>
            <li><a href="#tab-2" class="">Details</a></li>
            </ul>
            <div id="tab-1" style="display: block;">
            <p>tab 1 content</p>
            </div>
            <div id="tab-2" style="display: none;">
            <p>tab 2 content</p>
            </div>
            </div>
            <!--end First tab Content Div-->

            <!--start-->
            <div id="b" style="display: block;">
            <ul class="ptabs">
            <li><a href="#tab-1" class="active">Overview</a></li>
            <li><a href="#tab-2" class="">Details</a></li>
            </ul>
            <div id="tab-1" style="display: block;">
            <p>tab 1 content</p>
            </div>
            <div id="tab-2" style="display: none;">
            <p>tab 2 content</p>
            </div>
            </div>
            <!--end Second  tab Content Div-->

            <style>#a ,#b {display:none;}</style>

        <script>
        $(document).ready(function(){
            $("select").change(function(){
              var select = document.querySelector("select"); //Select element selected
        var get_Handler_Name = select.options[select.selectedIndex].value; //Get selected option handler name 

        //checks whether selected option is "handler_1"
        if (get_Handler_Name == "handler_1") {
           document.getElementById('a').style.display="block";
            document.getElementById('b').style.display="none";
        }

        //checks whether selected option is "handler_2"
        else if (get_Handler_Name == "handler_2") {

           document.getElementById('a').style.display="none";
            document.getElementById('b').style.display="block";
        }
            });
        });
        </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search