商品カードの追加・バリアント選択フォーム

{% comment %}
  Renders an "Add to cart" button or a "Quick view" button if the product has multiple variants
  Usually it is used with the product card

  Accepts:
  - product: {object} The product object
  - btn_color {string} (Optional) The button color class (bootstrap) to apply to the button

  Usage:
  {% render 'product-card-form' product: product  %}
{% endcomment %}

{% liquid 
  assign btn_color = btn_color | default: settings.product_card_atc_btn_color
%}

<product-form>
  {% form 'product', product, data-productid: product.id %}
    {% if product.has_only_default_variant %}
      <input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.first_available_variant.id }}">
    {% else %}
      <select 
        class="form-select form-select-sm mb-3"
        name="id" 
        aria-label="{{ 'product.select_variant' | t }}">
        {% for variant in product.variants %}
          <option value="{{ variant.id }}" {% unless variant.available %}disabled{% endunless %}>
            {{ variant.title }} - {{ variant.price | money_without_trailing_zeros }}
          </option>
        {% endfor %}
      </select>
    {% endif %}
    <button
      class="btn btn-atc btn-sm {{ btn_color }}"
      type="submit"
      name="add"
      {% unless product.available %}disabled{% endunless %}>
      {% if product.available %}
        {{ 'product.add_to_cart' | t }}
      {% else %}
        {{ 'product.sold_out' | t }}
      {% endif %}
    </button>
  {% endform %}
</product-form>