视觉隐藏特定选项（选择下拉框）

我有产品有两个选项，如第一个选项 - 颜色，第二个选项 - 尺寸比方说颜色1有6个不同的尺寸，所以第一个选项标题将是1,1,1,1 ，1,1和第二个选项（大小）标题将像1英寸，2英寸，3英寸等在这种情况下，我如何隐藏第一选项（颜色）下拉选择框，只显示第二个选项（大小）下拉框，而不是显示第一个选项（颜色）下拉框我想把这样的文字“你的颜色：1”，然后显示第二个选项下拉框（尺寸选择器下拉）所以最后它会看起来像视觉隐藏特定选项（选择下拉框）

您的颜色：1 [尺寸选择器下拉框 - 带六个选项标题]

我知道我可以删除shopify管理页面第一选择，但由于某种原因，我不能只是简单地删除我都只是隐藏起来

有谁请第一选项...

谢谢你很多人提前.....

来源

2012-09-21 Max

我会看看使用Javascript来解决这个问题。

让我们先从显示颜色开始。我认为，最简单的方法是创建产品模板中的元素，并它最初隐藏：

<p id="color-label" style="display:none">{{ product.variants.first.option1 }}</p>

在option_selection.js的select boxes are generated via helper methods当OptionSelectors创建：

new Shopify.OptionSelectors("product-select", ...

产生的第一下拉菜单中会分配一个选择元素id +“-option-0”（在这种情况下product-select-option-0），第二个元素将具有选择元素id +“-option-1”等等上。每个选择都包装在一个div.selector-wrapper中。

因此，把它们放在一起......插入这样的东西后新的Shopify.OptionSelectors被称为。这假定jQuery可用。基本上它是检查是否颜色下拉了1元，如果是它隐藏了select元素，并显示颜色：

if (jQuery('#product-select-option-0 option').size() == 1) { 
    jQuery('#product-select-option-0').parent('.selector-wrapper').hide(); 
    jQuery('#color-label').show(); 
}

来源

2012-09-21 22:36:50

非常感谢我的意思是谢谢SOOOOO多少“BBG”它的工作原理是完全相同我想.. .. – Max

视觉隐藏特定选项（选择下拉框）

回答

相关问题