視覺隱藏特定選項（選擇下拉框）

我有產品有兩個選項，如第一個選項 - 顏色，第二個選項 - 尺寸比方說顏色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

視覺隱藏特定選項（選擇下拉框）

回答

相關問題