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

Posted

技术标签:

【中文标题】shopify 产品的颜色样本/变体下拉列表【英文标题】:Color Swatch / Variant dropdown list for shopify products 【发布时间】: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

【问题讨论】:

【参考方案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

【讨论】:

以上是关于shopify 产品的颜色样本/变体下拉列表的主要内容,如果未能解决你的问题,请参考以下文章

如何将变体库存状态添加到 Woocommerce 产品变体下拉列表

使用布鲁克林主题在 Shopify 的收藏页面上显示所有颜色变体

Shopify 多个产品选项,将事件添加到生成的下拉选项中

下拉转换为单选按钮,不再触发特定功能

通过单击变体图像 Woocommerce 更改产品变体

使用按钮而不是下拉菜单的 Woocommerce 产品变体选择?