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: