Ändern der Produktbeschreibung basierend auf der Variante in Shopify

Question

Ich möchte die Produktbeschreibung basierend auf Variantenname ändern können. Ich verfolge das Tutorial hier ==>https://ecommerce.shopify.com/c/ecommerce-design/t/demo-change-description-in-product-with-different-variants-296509

ich den Code ein wenig, um

Scheint, wie ich kein Glück haben, wie die Beschreibung ändert sich nicht geändert zu verwenden variant.option1 statt variant.id. Option 1 hat „Unisex-T-Stück“ und „Frauen-T-Stück“

Unten ist der 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 
} 

Jede Hilfe wäre sehr, wie ich mit JS nicht wirklich gut bin geschätzt. Vielen Dank.

Answer 1

Ändern Sie den Code zurück, um die Varianten-IDs zu verwenden. Die option1 Eigenschaft des variant Objekts ist nicht garantiert, Ihnen gültige id Namen zur Verfügung zu stellen, was in Ihrem Fall passiert. Zum Beispiel sind Leerzeichen in id Attributen nicht erlaubt und auch nicht das einfache Zitat. Lesen Sie this und this für weitere Details. Aus diesem Grund verwendete der Autor dieses Beitrags die Varianten-ID. Es ist ein eindeutiger Bezeichner und es ist auch ein gültiger id für HTML-Elemente.

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>