关键词：
【中文标题】Shopify - 将尺寸变体从选择下拉菜单更改为按钮【英文标题】：Shopify - Change size variant from select dropdown to buttons 【发布时间】：2020-07-28 07:13:45 【问题描述】：我想将我的变体显示从下拉（选择）更改为使用按钮。我在网上其他地方找不到任何最新的指南。我正在使用 Debut shopify 主题。
它目前看起来像这样 dropdown 但我想将其更改为具有大小的按钮。即，您单击所需尺寸按钮，然后单击其下方的标准“添加到购物车”按钮（该按钮已经到位，但当前用于下拉菜单）。
代码如下：
% capture "form_classes" -%
product-form product-form- section.id
%- unless section.settings.show_variant_labels % product-form--hide-variant-labels % endunless %
%- if section.settings.enable_payment_button and product.has_only_default_variant % product-form--payment-button-no-variants %- endif -%
%- if current_variant.available == false % product-form--variant-sold-out %- endif -%
%- endcapture %
% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %
% unless product.has_only_default_variant %
<div class="product-form__controls-group">
% for option in product.options_with_values %
<div class="selector-wrapper js product-form__item">
<label % if option.name == 'default' %class="label--hidden" % endif %for="SingleOptionSelector- forloop.index0 ">
option.name
</label>
<select class="single-option-selector single-option-selector- section.id product-form__input"
id="SingleOptionSelector- forloop.index0 "
data-index="option forloop.index "
>
% for value in option.values %
<option value=" value | escape "% if option.selected_value == value % selected="selected"% endif %> value </option>
% endfor %
</select>
</div>
% endfor %
</div>
% endunless %
<select name="id" id="ProductSelect- section.id " class="product-form__variants no-js">
% for variant in product.variants %
<option value=" variant.id "
%- if variant == current_variant % selected="selected" %- endif -%
>
variant.title %- if variant.available == false % - 'products.product.sold_out' | t % endif %
</option>
% endfor %
</select>
% if section.settings.show_quantity_selector %
<div class="product-form__controls-group">
<div class="product-form__item">
<label for="Quantity- section.id "> 'products.product.quantity' | t </label>
<input type="number" id="Quantity- section.id "
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input>
</div>
</div>
% endif %
<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden% if section.settings.enable_payment_button % product-form__error-message-wrapper--has-payment-button% endif %"
data-error-message-wrapper
role="alert"
>
<span class="visually-hidden"> 'general.accessibility.error' | t </span>
% include 'icon-error' %
<span class="product-form__error-message" data-error-message> 'products.product.quantity_minimum_message' | t </span>
</div>
<div class="product-form__controls-group product-form__controls-group--submit">
<div class="product-form__item product-form__item--submit
%- if section.settings.enable_payment_button % product-form__item--payment-button %- endif -%
%- if product.has_only_default_variant % product-form__item--no-variants %- endif -%"
>
<button type="submit" name="add"
% unless current_variant.available % aria-disabled="true"% endunless %
aria-label="% unless current_variant.available % 'products.product.sold_out' | t % else % 'products.product.add_to_cart' | t % endunless %"
class="btn btn--rounded product-form__cart-submit% if section.settings.enable_payment_button % btn--secondary-accent% endif %"
data-add-to-cart>
<span data-add-to-cart-text>
% unless current_variant.available %
'products.product.sold_out' | t
% else %
'products.product.add_to_cart' | t
% endunless %
</span>
<span class="hide" data-loader>
% include 'icon-spinner' %
</span>
</button>
% if section.settings.enable_payment_button %
form | payment_button
% endif %
</div>
</div>
% endform %
</div>
非常感谢！
【问题讨论】：
【参考方案1】：用输入单选按钮替换您的选择框：
%- for variant in product.variants -%
<input
type="radio"
name="id"
class="variant-option"
value=" variant.id "
id="variant-option- variant.id "
% unless variant.available % disabled% endunless %
% if product.selected_variant.id == variant.id % checked% endif %
>
<label for="variant-option- variant.id "> variant.title </label>
%- endfor -%
然后只需添加一些样式以将这些输入显示为按钮，例如：
.variant-option + label
background-color: #f2f2f2;
padding: 10px 15px;
margin: 0 5px;
.variant-option:checked + label
background-color: #000;
color: #fff;
.variant-option[disabled] + label
opacity: 0.5;
.variant-option
display: none;
【讨论】：
我使用主题默认，要修改的文件是product-template.liquid。感谢您的帮助shopify 产品的颜色样本/变体下拉列表
】shopify产品的颜色样本/变体下拉列表【英文标题】：ColorSwatch/Variantdropdownlistforshopifyproducts【发布时间】：2013-09-2410:00:39【问题描述】：我打算做的是为产品“颜色”变体做一个下拉列表，但是与选项值有某种关联，会显示图像... 查看详情
如何将滚轮选择器菜单更改为 React Native with Expo 中的下拉菜单？
】如何将滚轮选择器菜单更改为ReactNativewithExpo中的下拉菜单？【英文标题】：HowcanIchangeascrollwheelPickermenutoadropdownmenuinReactNativewithExpo?【发布时间】：2020-11-0815:21:21【问题描述】：我正在尝试使用Expo和React-native-picker创建一个下拉... 查看详情
Plotly交互式绘图python：将下拉菜单更改为输入框
...入框更改下拉按钮，这样我就可以通过开始输入名称然后选择来搜索项目。到目前为止，我有一个下拉框，您可以在其中选择一个项目或同时选择所有项目。但是，我希望用户能够开始输入项目的名称 查看详情
根据单选按钮选择将下拉菜单的值和显示名称更改为 SQL 查询结果
】根据单选按钮选择将下拉菜单的值和显示名称更改为SQL查询结果【英文标题】：Changingadropdownmenu\'svalueANDdisplaynametoSQLqueryresultsbasedonaradiobuttonselection【发布时间】：2011-08-2623:14:28【问题描述】：重要提示：我想要的大部分内容... 查看详情
Shopify- 获取属性形式 <select>
】Shopify-获取属性形式<select>【英文标题】：Shopify-gettingattributeform<select>【发布时间】：2021-10-0522:28:33【问题描述】：所以我有一个问题。我正在Sopify中开发一家商店，并且我有一个自定义部分，其中我有用于选择变体... 查看详情
将引导程序下拉更改为水平向右
...名称和图片已被删除以保护隐私）我正在尝试使此菜单在选择子项的右侧打开，而不是在其下方（参见图2，我想要获取的内容。图像将在下拉菜单的右侧打开，而不是在下方它）我当前的代码是：<divcla 查看详情
在 Shopify 中选择新变体时价格未更新
】在Shopify中选择新变体时价格未更新【英文标题】：PricenotupdatingwhenselectinganewvariantinShopify【发布时间】：2020-11-2016:04:44【问题描述】：我正在尝试编辑Debut主题以更好地满足我客户的需求。每当我在product-template.liquid文件中编辑... 查看详情
AngularJS 中的下拉菜单
...Angular应用中有两个下拉菜单。当我在第一个下拉菜单中选择一个选项时，我希望该选择影响第二个下拉菜单。示例：第一个菜单将包含状态消息列表。当我选择“需要维护”时，它会将第二个菜单更改为与维护相关的部门。或... 查看详情
如何将 html 中下拉菜单的默认突出显示颜色从蓝色更改为 <select><option> 标签的其他颜色
】如何将html中下拉菜单的默认突出显示颜色从蓝色更改为<select><option>标签的其他颜色【英文标题】：Howtochangethedefaulthighlightcolorofdropdowninhtmlfrombluetosomeothercolorfor<select><option>tag【发布时间】：2013-10-1720:33:15【问... 查看详情
如何将元素更改为角度形式的输入或下拉菜单？
】如何将元素更改为角度形式的输入或下拉菜单？【英文标题】：Howtochangeelementtoinputordropdowninangularform?【发布时间】：2019-05-0616:11:24【问题描述】：我正在制作angular6应用程序，其中我使用angular动态形式，并且值来自JSON..简单JS... 查看详情
MVC5中的自动完成下拉菜单？
...字段是客户，它是一个下拉字段。因为我将下拉菜单作为选择选项来选择值。但我喜欢将该字段更改为自动完成下拉菜单。在上图中，我将customerName字段作为下拉字段，但我通过搜索和选择选项保留它。但现在我想将其更改为自... 查看详情
统一更改下拉菜单的大小
...布时间】：2016-06-2314:55:03【问题描述】：我无法设置更大尺寸的下拉菜单...如您所见，下拉菜单的标准尺寸是160x30因此，当您单击下拉箭头时，下面的3个选项（AB和C）与上面的大小相同，并且都具有相同的字体大小...但是我需... 查看详情
将 Woocmmerce 结帐页面中的邮政编码字段更改为下拉菜单
】将Woocmmerce结帐页面中的邮政编码字段更改为下拉菜单【英文标题】：ChangingPostcodefieldinWoocmmerce\'scheckoutpagetodrop-down【发布时间】：2020-09-1200:10:44【问题描述】：我的Woocommerce商店的订单有基于邮政编码的最低订单金额。此外，... 查看详情
Shopify 在选择变体时触发功能，但不会覆盖现有功能
】Shopify在选择变体时触发功能，但不会覆盖现有功能【英文标题】：Shopifytriggerfunctiononvariantselectionbutdon\'toverrideexistingfunctionality【发布时间】：2019-11-1023:20:58【问题描述】：我在Shopify上使用“阁楼”主题。当我在产品页面上选... 查看详情
jQuery UI datepicker：如何将下拉列表中的月份名称从短名称更改为长名称？
...：2012-05-0420:56:31【问题描述】：我需要在我的jQueryUI日期选择器中将月份名称从短名称更改为长名称。我的属性是：$.datepicker.regi 查看详情
如何：将“Xaml 中的材料设计”`ComboBox` 行为更改为仅在单击箭头时显示下拉菜单？
...ml中的材料设计”`ComboBox`行为更改为仅在单击箭头时显示下拉菜单？【英文标题】：HowTo:Change"MaterialDesignInXaml"`ComboBox`behaviortoonlydisplaydropdownwhenyouclickthearrow?【发布时间】：2021-05-2601:43:04【问题描述】：如何修改MaterialDesig... 查看详情
使用按钮而不是下拉菜单的 Woocommerce 产品变体选择？
】使用按钮而不是下拉菜单的Woocommerce产品变体选择？【英文标题】：Woocommerceproductvariationselectionwithbuttonsinsteaddropdownmenu?【发布时间】：2016-08-1418:30:00【问题描述】：我是wordpress的新手。我正在使用wordpress4.5（最新）+woocommerge2.5... 查看详情
帮助将 DropDown 事件更改为单选按钮触发器 - javascript
...:34【问题描述】：我在我的表单中下拉（提供了代码），选择下拉下降中的第二个选项（OF2）时，某些表单元素会更改。一切正常。我希望能够将下拉菜单改为两个单选按钮。在选择第二个单选按钮时会发生 查看详情