Question

我试图重构代码，所以当选择了选项时即vhose更大的尺寸，价格的变化。我一直在尝试下面的代码；我们在下面的Shopify中使用我们的可变价格来具有数据价格属性；

      <div class="price">
        {%- if product.available -%}
        <span class="price-old money{% unless current_variant.compare_at_price > current_variant.price %} hide{% endunless %}">{{current_variant.compare_at_price | money}}</span>
        <span class="price-new money">{% if product.variants.size > 1 %}{%- endif -%}<span class="money" data-product-id="{{ product.id }}"></span></span>
        {%- else -%}
        <span class="price-new money"><span class="money" data-product-id="{{ product.id }}">{{current_variant.price | money}}</span></span>
        {%- endif -%}
      </div>

和我们有2个选择选项，这一个改变当一个新的选项被选择的图像;

    <!-- This one changes the image when an option is selected -->
    <div class="product-item-option" 
         data-id="#ProductItemJson-{{- product.id -}}"
         data-swatch_id="ProductSwatchItemJson-{{ product.id }}">
      <div class="variations-item-{{product.id}} variations">
        <div class="variations-content variations-content-{{product.id}}">

          {%- for option in product.options_with_values -%}
          <div class="selector-wrapper{{- " " -}}{{- option.name | handlezie -}}{{- " " -}}variation-select-{{ product.id }}-{{ forloop.index0 }}">
            <select id="single-option-selector-{{ product.id }}-{{ forloop.index0 }}" data-id="single-option-selector-{{ product.id }}-{{ forloop.index0 }}" class="single-option-selector-item single-option-selector single-option-selector-{{ product.id }}" data-index="option{{ forloop.index }}" data-option="option{{ forloop.index }}" data-price="{{current_variant.price | money}}">
              {%- for value in option.values -%}
              <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
              {%- endfor -%}
            </select>
          </div>
          {%- endfor -%}

        </div>
      </div>
    </div>
    <!-- End -->

但是我们也希望变动价格也发生变化，这是该选择选项的一部分；

    <!-- This one changes the price and adds to cart as its within the form -->
    <div class="product-item"
         data-id="#ProductItemJson-{{- product.id -}}"
         data-swatch_id="ProductSwatchItemJson-{{ product.id }}">
      {% comment %} Cart form {% endcomment %}
      <form action="/cart/add" method="post" enctype="multipart/form-data">
        <input type="hidden" name="quantity" value="1" />
        <div class="info-select-wrapper">
        <div class="varient-select-wrapper variation-select-{{ product.id }}-{{ forloop.index0 }}">

        <select name="id" id="ProductItemSelect-{{ product.id }}" class="variation-select no-js" >
          {%- for variant in product.variants -%}
          {%- if variant.available -%}
          <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
            {{- variant.title -}}
          </option>
          {%- else -%}
          <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t | escape }}</option>
          {%- endif -%}
          {%- endfor -%}
        </select>

        </div>
        <button type="submit" class="btn-action addtocart-item-js add-to-cart" data-loading-text="{{'products.product.loading' | t | escape}}" title="{{'products.product.add_to_cart' | t | escape}}" {% unless product.available %}disabled{% endunless %}><span>{%- if product.available -%}{{'products.product.add_to_cart' | t | escape}}{%- else -%}{{'products.product.sold_out' | t}}{%- endif -%}</span></button>
       </div>
      </form>

    </div>
   <!-- End -->

{%- unless product == empty -%}
<script type="application/json" id="ProductItemJson-{{- product.id -}}">
    {{- product | json -}}
</script>
<script type="application/json" id="ProductSwatchItemJson-{{- product.id -}}">
    {{- product.metafields.texture | json -}}
</script>
{%- endunless -%}

问题在于两者都需要工作，我们希望在选择一个选项后更改图像和价格，并使添加到购物车也能正常工作。

使用select时更新产品varinat价格的问题

0 个答案: