gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 17:51:26 25 4
gpt4 key购买 nike

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

enter image description here

但是,我想改为将所有可用选项(有货)显示为一组选项,如下所示。这些选项应该是可点击/可选择的:

这是下拉菜单的代码,如何将其更改为与上面的屏幕截图类似的输出:

  // <![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 %}
});
// ]]>

最佳答案

我建议按照 Shopify 文档中的教程进行操作:Adding color swatches to your products

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

enter image description here

关于Jquery - 将下拉菜单转换为单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27289721/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com