0

製品には最初の options-color 、2番目の options-size のような2つのオプションがあります。たとえば、色1には6つの異なるサイズがあるとしましょう。最初のオプションのタイトルは1、1、1、1、1、1になり、2番目のオプション(サイズ)のタイトルは1 インチ、2 インチ、3 インチなどこの場合、最初のオプション (色) ドロップダウン セレクタ ボックスを非表示にして、最初のオプション (色) ドロップダウンを表示する代わりに 2 番目のオプション (サイズ) ドロップダウン ボックスを表示するにはどうすればよいですか?ボックスに「あなたの色：1」のようなテキストを入れて、2番目のオプションドロップダウンボックス（サイズセレクタードロップダウン）を表示するので、最終的には次のようになります

あなたの色: 1 [サイズ セレクター ドロップ ダウン ボックス-6 つのオプション タイトル]

Shopify管理ページで最初のオプションを削除できることは知っていますが、何らかの理由で最初のオプションを削除するだけではできず、非表示にする必要があります

誰かお願いします...

よろしくお願いします。

4

1 に答える 1

0

これを解決するためにJavascriptを使用することを検討します。

最初に色を表示することから始めましょう。最も簡単な方法は、製品テンプレートに要素を作成し、最初は非表示にすることだと思います。

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

選択ボックスは、OptionSelectors が作成されると、option_selection.js のヘルパー メソッドによって生成されます。

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

最初に生成されたドロップダウンには、select 要素 id + "-option-0" (この場合はproduct-select-option-0 ) の id が割り当てられ、2 番目には select 要素 id + "-option-1"が割り当てられます。すぐ。各選択は div.selector-wrapper でラップされます。

それで、すべてをまとめて...新しい Shopify.OptionSelectorsが呼び出された直後に、このようなものを挿入します。これは、jQuery が使用可能であることを前提としています。基本的に、色のドロップダウンに 1 つの要素があるかどうかを確認し、その場合は選択要素を非表示にして色を表示します。

if (jQuery('#product-select-option-0 option').size() == 1) {
  jQuery('#product-select-option-0').parent('.selector-wrapper').hide();
  jQuery('#color-label').show();
}
于 2012-09-21T22:36:50.510 に答える