3

私がやろうとしているのは、製品の「色」バリアントのドロップダウン リストを作成することですが、オプション値との何らかの関連付けにより、画像見本または jpg が表示されます。

色見本と製品の色の選択を関連付けるために、このチュートリアルを見つけました。ただし、これはバリアントをデフォルトのドロップダウンではなくボタン形式で表示します。

http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products

私はスクリプトをいじっていましたが、必要なものを手に入れることはできませんでした。だからここに私は少し助けを求めています。

これが私のバリアントリストです：

<select id="product-select-option-1" class="single-option-selector">
  <option value="Red">Red</option>
  <option value="White">White</option>
  <option value="Black">Black</option>
</select>

によって生成されます ：

{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}  
</option>
{% endfor %}

value="Red" を 20x20 の赤い正方形に関連付けるか、 red.jpg と言う方法はありますか?

より良いアイデアのスクリーンショットを次に示します。

http://i.imgur.com/XgW2qHa.png

4

1 に答える 1

2

質問でリンクした Shopify 記事のコード ( Add color swatches to your products ) を出発点として使用し、選択したオプションに応じて色が変わる 1 つの正方形のみを表示するように調整しました。

新しいスニペットswatch.liquidを作成します (これはswatches.liquidの縮小版です):

<style>

/* Style the swatch */
.swatch { margin:15px 0; }
.swatch ul { list-style-type:none; margin:0; padding:0; }
.swatch li {
  /* Rounded corners */
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  /* Cross-browser inline-block */
  display:-moz-inline-stack;
  display:inline-block;
  zoom:1;
  *display:inline;
  /* Content must stretch all the way to borders */
  padding:0;
  /* Background color */
  background-color:#ddd;
  /* Spacing between buttons */
  margin:0px 5px 10px 0;
  /* Fake that those are buttons, i.e. clicky */
  cursor:pointer;
  /* The border when the button is not selected */
  border: #DDD 1px solid !important;
}

/* Styles for the text or color container within the swatch button */
.swatch li span { display:block; margin:5px 10px; }
/* Special styles for color swatches */
/* They don't contain text so they need to have a width and height */
.swatch li.color { width:50px; height:35px; }
/* The container of the image/color must be as big as its container */
.swatch li.color span { width:100%; height:100%; margin:0; }

</style>

<div class="swatch clearfix">
  <ul>
    <li class="color">
      <span></span>
    </li>
  </ul>
</div>

product.liquidで表示したい場所にスウォッチを含めます。

{% include 'swatch' %}

selectCallback関数に次のようなものを追加します。

if (variant) {
  jQuery('.swatch li span').css("background-color", variant.option2); // or whichever option 'colour' is in your case...
}

バリアントの設定方法に応じて、おそらくその JavaScript を調整する必要があります。私にとって、色はで、スウォッチの css プロパティにoption2割り当てられます。background-color

実際の動作は次のとおりです。

色見本GIF

少し大雑把ですが、出発点となれば幸いです。

編集： ここで利用可能な要点

于 2013-09-26T01:20:03.067 に答える