根据 Shopify 中的变体更改产品描述

Question

我希望能够根据变体名称更改产品描述。我在这里学习教程 ==> https://ecommerce.shopify.com/c/ecommerce-design/t/demo-change-description-in-product-with-different-variants-296509

为了使用 variant.option1 而不是 variant.id，我稍微修改了代码

似乎我没有运气，因为描述没有改变。选项 1 有“Unisex Tee”和“Women's 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>