Product detail and combined purchases

{% assign current_variant = product.selected_or_first_available_variant %}
<h1>{{ product.title | escape }}</h1>
<p>{{ current_variant.title | escape }} — {{ current_variant.price | money_with_currency }}</p>
<form action="{{ product.url }}" method="get">
  <label for="Variant-{{ section.id }}">Variant</label>
  <select id="Variant-{{ section.id }}" name="variant">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}"{% if variant.id == current_variant.id %} selected{% endif %}>
        {{ variant.title | escape }}{% unless variant.available %} — Sold out{% endunless %}
      </option>
    {% endfor %}
  </select>
  <button type="submit">View this variant</button>
</form>
{% assign purchase_form_id = 'Purchase-' | append: section.id %}
{% form 'product', product, id: purchase_form_id %}
  <input type="hidden" name="id" value="{{ current_variant.id }}">
  <button type="submit"{% unless current_variant.available %} disabled{% endunless %}>
    {% if current_variant.available %}Add to cart{% else %}Sold out{% endif %}
  </button>
{% endform %}

<ol aria-label="Product media">
  {% for media in product.media %}
    <li id="Media-{{ section.id }}-{{ media.id }}">
      {% case media.media_type %}
        {% when 'image' %}
          {{ media | image_url: width: 1400 | image_tag: widths: '480, 800, 1400', sizes: '(max-width: 749px) 100vw, 60vw', loading: 'lazy' }}
        {% when 'video' %}
          {{ media | video_tag: controls: true, autoplay: false, preload: 'none' }}
        {% else %}
          <a href="{{ product.url | escape }}">View media on the product page</a>
      {% endcase %}
    </li>
  {% endfor %}
</ol>

{% assign accessories = product.metafields.custom.compatible_accessories.value %}
{% if accessories != blank %}
  <section aria-labelledby="Accessories-{{ section.id }}">
    <h2 id="Accessories-{{ section.id }}">Accessories for this model</h2>
    <ul>
      {% for accessory in accessories %}
        <li>
          <a href="{{ accessory.url | escape }}">{{ accessory.title | escape }}</a>
          <span>{{ accessory.price | money_with_currency }}</span>
        </li>
      {% endfor %}
    </ul>
  </section>
{% endif %}

export async function addSelection(root, items) {
  if (!root.startsWith('/') || root.startsWith('//')) throw new Error('Invalid store route');
  if (!items.length || items.some(item => !Number.isSafeInteger(item.id) || item.id <= 0 ||
      !Number.isSafeInteger(item.quantity) || item.quantity <= 0)) {
    throw new Error('Select valid variants and quantities');
  }
  const response = await fetch(`${root}cart/add.js`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
    body: JSON.stringify({items})
  });
  const result = await response.json();
  if (!response.ok) throw new Error(result.description || 'The selection could not be added');
  return result;
}
// Pass window.Shopify.routes.root from a Shopify theme.
// Disable repeat submission while pending, then refresh actual cart state.
// A network error must not trigger an automatic second add request.

<details>
  <summary>Specifications and compatibility</summary>
  {% render 'ww-specifications', product: product %}
  {% assign compatibility = product.metafields.custom.compatibility.value %}
  {% if compatibility != blank %}<p>{{ compatibility | escape }}</p>{% endif %}
</details>
<details>
  <summary>Shipping and returns</summary>
  {% if shop.shipping_policy != blank %}<a href="{{ shop.shipping_policy.url | escape }}">Shipping policy</a>{% endif %}
  {% if shop.refund_policy != blank %}<a href="{{ shop.refund_policy.url | escape }}">Returns policy</a>{% endif %}
</details>

{% assign rows = product.metafields.custom.specification_rows.value %}
{% if rows != blank %}
  <table>
    <caption>{{ product.title | escape }} — specifications</caption>
    <tbody>
      {% for row in rows %}
        {% if row.label.value != blank and row.spec_value.value != blank %}
          <tr>
            <th scope="row">{{ row.label.value | escape }}</th>
            <td>{{ row.spec_value.value | escape }} {{ row.unit.value | escape }}</td>
          </tr>
        {% endif %}
      {% endfor %}
    </tbody>
  </table>
{% endif %}

{% assign related = product.metafields.custom.related_products.value %}
{% if related != blank %}
  <section aria-labelledby="Related-{{ section.id }}">
    <h2 id="Related-{{ section.id }}">Other models to consider</h2>
    <ul>
      {% for related_product in related %}
        {% unless related_product.id == product.id %}
          <li><a href="{{ related_product.url | escape }}">{{ related_product.title | escape }}</a></li>
        {% endunless %}
      {% endfor %}
    </ul>
  </section>
{% endif %}