shopify 产品的颜色样本/变体下拉列表答案

【问题标题】：Color Swatch / Variant dropdown list for shopify productsshopify 产品的颜色样本/变体下拉列表
【发布时间】：2013-09-24 10:00:39
【问题描述】：

我打算做的是为产品“颜色”变体做一个下拉列表，但是与选项值有某种关联，会显示图像样本或 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

【问题讨论】：

标签： shopify variant

【解决方案1】：

我使用您在问题中链接到的 Shopify 文章 (Add color swatches to your products) 中的代码作为起点，并将其调整为仅显示一个根据所选选项改变颜色的正方形。

创建一个新的 sn-p，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 属性。

下面是实际效果：

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

编辑： gist available here

【讨论】：