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 文章中的代码（将颜色样本添加到您的产品）作为起点，并将其调整为仅显示一个根据所选选项改变颜色的正方形。

创建一个新片段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。对我来说，颜色是option2，然后分配给background-color样本的 css 属性。

这是它的实际效果：

色板gif

这有点粗糙，但希望它能为您提供一个起点。

编辑： 此处提供要点

于 2013-09-26T01:20:03.067 回答