根據Shopify中的變體更改產品說明

Question

我希望能夠根據變體名稱更改產品說明。我在這裏以下教程==>https://ecommerce.shopify.com/c/ecommerce-design/t/demo-change-description-in-product-with-different-variants-296509

我修改一下代碼才能使用，而不是variant.id

variant.option1好像我有沒有運氣的描述並沒有改變。選項1有「中性T恤」和「女裝Tee」

下面是代碼：

<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不勝感激。謝謝。

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>