Shopify產品的顏色色板/變體下拉列表

我打算做的是爲產品「顏色」變體做一個下拉列表，但與選項值有某種關聯時，會顯示圖像樣本或jpg。Shopify產品的顏色色板/變體下拉列表

我發現本教程將顏色色板與產品顏色選擇進行關聯。但是，這會顯示按鈕形式中的變體而不是默認下拉列表。

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 %}

是否有我..說，聯想值=「紅樓夢」與20×20的紅色正方形或者說一種方式，red.jpg？

下面是一個更好的主意截圖：

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

來源

2013-09-24 wsgg

我使用的代碼，你在你的問題（Add color swatches to your products）爲起點連接到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屬性。

下面是它看起來像在行動：

Color swatch gif

這是一個有點粗糙，但希望它會爲你提供一個起點。

編輯：gist available here

來源

2013-09-26 01:20:03

Shopify產品的顏色色板/變體下拉列表

回答

相關問題