Jquery - 将下拉菜单转换为单选按钮

Question

我有一个Shopify产品页面，当前显示我的变体作为下拉菜单，如下所示：

但是，我想将所有可用选项（库存中）显示为一组选项，如下所示。这些选项应该是可点击/可选择的：

以下是下拉菜单的代码，如何将其更改为输出类似于上面的屏幕截图：

  // <![CDATA[  
var selectCallback = function(variant, selector) {
if (variant && variant.available == true) {
// selected a valid variant
jQuery('.button').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button

{% if product.compare_at_price > product.price %}
    jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_format}}"));  // update price field

    jQuery('.price-field').addClass('sale').attr('sale', 'sale');

    jQuery('.compare-field').html(Shopify.formatMoney(variant.compare_at_price, "Was     {{shop.money_format}}"));  // update compare field
{% else %}

    jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_format}}"));  // update price field

{% endif %}

} else {
// variant doesn't exist
jQuery('.button').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button
var message = variant ? "Sold Out" : "Unavailable";    
jQuery('.price-field').text(message); // update price-field message
}

};

// initialize multi selector for product
jQuery(function() {
new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
jQuery('.selector-wrapper').addClass('clearfix');
{% if product.options.size == 1 %}
jQuery('.selector-wrapper').prepend("<label for='product-select-option-0'>{{ product.options.first }}    </label>");
{% endif %}
});
// ]]>

Answer 1

我建议您在Shopify文档中使用本教程：Adding color swatches to your products

本教程显然实现了颜色样本，但它也实现了不是颜色的选项而不是单独的按钮而不是下拉菜单。来自demo shop：

Answer 2

{if ($group.group_type == 'select')}
    <label class="size_attrib">Size</label>
    <select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="form-control attribute_select no-print">
    {foreach from=$group.attributes key=id_attribute item=group_attribute}
        <option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'html':'UTF-8'}">{$group_attribute|escape:'html':'UTF-8'}</option>
    {/foreach}
    </select>