shopify产品的色板/变体下拉列表 [英] Color Swatch / Variant dropdown list for shopify products

问题描述

我打算做一个针对产品颜色"变体的下拉列表，但是与选项值有某种关联，会显示图像色板或jpg.

What I intend to do is to do a dropdown list for the product 'color' variant, however with some sort of association with the option value, an image swatch or jpg is displayed.

我发现本教程将颜色样本与产品颜色选择相关联. 但是，这会以按钮形式而不是默认下拉列表显示变体.

I found this tutorial to do association of color swatches with product color choice. However, this displays variants in a button form instead of the defaul dropdown.

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

我一直在想这些脚本，但是我从来没有得到我所需要的东西. 所以在这里我需要一点帮助.

I've been messing about with the scripts but I never got around to getting what I needed. so here I am for a little bit of help.

这是我的变体列表:

<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?

Is there a way for me to.. say, associate value="Red" with a 20x20 red square or say, red.jpg ?

下面是一个更好的主意的屏幕截图:

Here's a screenshot for a better idea:

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

推荐答案

我在问题中使用了链接到Shopify文章的代码(

I used the code from the Shopify article you linked to in your question (Add color swatches to your products) as a starting point and tweaked it to only display one square that changes color depending on the selected option.

创建一个新的代码段 swatch.liquid (这是

Create a new snippet, swatch.liquid (this is a reduced version of 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函数中添加如下内容:

Add something like this to the selectCallback function:

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

您可能需要根据变体的设置方式来调整该javascript.对我来说，颜色是option2，然后将其分配给色板的background-color css属性.

You'll probably need to adjust that javascript depending on how you have your variants set up. For me, the colour is option2, which is then assigned to the background-color css property of the swatch.

实际情况如下:

有些粗糙，但是希望它将为您提供一个起点.

It's a bit rough, but hopefully it will provide you with a starting point.

要点在这里可用

这篇关于shopify产品的色板/变体下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！