Question

我希望能够根据变体名称更改产品说明。我在这里按照教程==＆gt; 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对象的id属性无法保证为您提供有效的id名称，就像您的情况一样。例如，id属性中不允许使用空格，单引号也不允许使用空格。有关详细信息，请阅读this和this。这就是该帖子的作者使用变体ID的原因。它是唯一标识符，也是HTML元素的有效{{1}}。

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>

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

3 个答案: