Jquery-将下拉菜单转换为单选按钮
我有一个Shopify产品页面,当前以下拉菜单的形式显示我的变体,如下所示: 但是,我想将所有可用的期权(库存)显示为一组如下所示的期权。这些选项应可单击/选择: 这是下拉菜单的代码,如何将其更改为类似于上面屏幕截图的输出:Jquery-将下拉菜单转换为单选按钮,jquery,css,forms,shopify,Jquery,Css,Forms,Shopify,我有一个Shopify产品页面,当前以下拉菜单的形式显示我的变体,如下所示: 但是,我想将所有可用的期权(库存)显示为一组如下所示的期权。这些选项应可单击/选择: 这是下拉菜单的代码,如何将其更改为类似于上面屏幕截图的输出: // <![CDATA[ var selectCallback = function(variant, selector) { if (variant && variant.available == true) { // selected
// <![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 %}
});
// ]]>
//product.price%}
jQuery('.price field').html(Shopify.formatMoney(variant.price,“{{shop.money_format}}”);//更新价格字段
jQuery('.price字段').addClass('sale').attr('sale','sale');
jQuery('.compare field').html(Shopify.formatMoney(variant.compare_at_price,“Was{shop.money_format}”);//更新比较字段
{%else%}
jQuery('.price field').html(Shopify.formatMoney(variant.price,“{{shop.money_format}}”);//更新价格字段
{%endif%}
}否则{
//变体不存在
jQuery('.button').addClass('disabled').attr('disabled','disabled');//将“添加到购物车”按钮设置为“不可用”类并禁用按钮
var消息=变体?“售罄”:“不可用”;
jQuery('.price字段').text(消息);//更新价格字段消息
}
};
//初始化产品的多选择器
jQuery(函数(){
新的Shopify.OptionSelectors(“产品选择“,{product:{{product | json}},onVariantSelected:selectCallback});
jQuery('.selector包装器').addClass('clearfix');
{%if product.options.size==1%}
jQuery('.selector包装器').prepend(“{product.options.first}”);
{%endif%}
});
// ]]>
我建议在Shopify文档中学习本教程:
本教程显然实现了色样,但它也实现了不作为单独按钮而不是下拉菜单的颜色的选项。从:
{if($group.group_type=='select')}
大小
{foreach from=$group.attributes key=id\u attribute item=group\u attribute}
{$group_属性|转义:'html':'UTF-8'}
{/foreach}
这是一个伟大的发现!甚至都不知道这个存在!Thanks@egr103无问题:)仅包含代码的答案不完整。请阅读
{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>