Shopify - 将尺寸变体从选择下拉菜单更改为按钮

Posted 2023-02-15

【中文标题】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。感谢您的帮助