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 产品变体下拉列表