Shopifyのバリアントに基づいて製品説明を変更

Question

バリアント名に基づいて製品の説明を変更したいと考えています。私が代わりにvariant.id

のvariant.option1使用するために、コードを少し変更==>https://ecommerce.shopify.com/c/ecommerce-design/t/demo-change-description-in-product-with-different-variants-296509

ここでチュートリアルを以下の私は説明が変更されていないよう運を持っていないように思えるのです。

<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 
} 

私はJSで本当に良いではないよと任意の助けをいただければ幸いです：オプション1「ユニセックスTシャツ」と「女性のTシャツ」

以下

はコードでいます。ありがとう。

Answer 1

バリアントIDを使用するようにコードを修正してください。 variantオブジェクトのoption1プロパティは、有効なidの名前を提供することを保証するものではありません。たとえば、スペースはidの属性では許可されず、いずれも一重引用符ではありません。詳細はthisとthisをご覧ください。これは、その投稿の作者がバリアントIDを使用していた理由です。これは一意の識別子であり、HTML要素に対しても有効なidです。ヒントについて

Answer 2

<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> 

Answer 3

<!--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>