Изменить описание товара на основе варианта в Shopify

Question

Я хочу иметь возможность изменять описание продукта на основе имени варианта. Я следую учебник здесь ==>https://ecommerce.shopify.com/c/ecommerce-design/t/demo-change-description-in-product-with-different-variants-296509

Я изменил код немного для того, чтобы использовать variant.option1 вместо variant.id

Похоже, я не везёт, как описание не меняется. Вариант 1 имеет «Мужская Мишень» и «Женская Мишень»

Ниже приведен код:

<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

Изменить код для использования идентификаторов вариантов. Объект option1 объекта variant не гарантирует предоставление вам действительных id наименований, что и как раз то, что происходит в вашем случае. Например, пробелы не допускаются в атрибутах id, и ни одна из них не является котировкой. Прочтите this и this для более подробной информации. Вот почему автор этого сообщения использовал вариант ID. Это уникальный идентификатор, а также действительный id для элементов HTML.

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>