Theme Design, SEO and Performance

{
  "sections": {
    "hero": {
      "type": "hero-banner",
      "settings": {
        "heading": "Freshly roasted, shipped in 24 hours",
        "button_label": "Shop beans"
      }
    }
  },
  "order": ["hero"]
}

{
  "sections": {
    "main": {
      "type": "product",
      "settings": {}
    }
  },
  "order": ["main"]
}

{% comment %}
  Pocket Coffee product page. Reading order: media, title, price, variant, add to cart, details.
{% endcomment %}

{%- liquid
  assign current_variant = product.selected_or_first_available_variant
-%}

<div class="product">
  <div class="product__media">
    {%- for media in product.media limit: 6 -%}
      {%- if media.media_type == 'image' -%}
        {%- assign alt = media.alt | default: product.title -%}
        {%- if forloop.first -%}
          {{ media | image_url: width: 1500 | image_tag: sizes: '(min-width: 750px) 50vw, 100vw', widths: '375, 750, 1100, 1500', loading: 'eager', fetchpriority: 'high', alt: alt }}
        {%- else -%}
          {{ media | image_url: width: 1500 | image_tag: sizes: '(min-width: 750px) 25vw, 50vw', widths: '375, 750, 1100', loading: 'lazy', alt: alt }}
        {%- endif -%}
      {%- endif -%}
    {%- endfor -%}
  </div>

  <div class="product__info">
    <h1>{{ product.title }}</h1>

    {% render 'price', product: product, variant: current_variant %}

    {%- assign roast_date = product.metafields.custom.roast_date.value | date: '%-d %B %Y' -%}
    {%- if roast_date != blank -%}
      <p class="roast-badge">
        {{ 'products.roast_date' | t: date: roast_date }}
      </p>
    {%- endif -%}

    {% form 'product', product, id: 'product-form' %}
      <label for="variant-id">{{ 'products.variant' | t }}</label>
      <select id="variant-id" name="id">
        {%- for variant in product.variants -%}
          <option
            value="{{ variant.id }}"
            {% if variant == current_variant %}selected{% endif %}
            {% unless variant.available %}disabled{% endunless %}
          >
            {{- variant.title }} - {{ variant.price | money -}}
          </option>
        {%- endfor -%}
      </select>

      <label for="quantity">{{ 'products.quantity' | t }}</label>
      <input
        type="number"
        id="quantity"
        name="quantity"
        value="1"
        min="1"
        inputmode="numeric"
        autocomplete="off"
      >

      <button
        type="submit"
        name="add"
        data-add-to-cart
        {% unless current_variant.available %}disabled{% endunless %}
      >
        {%- if current_variant.available -%}
          {{ 'products.add_to_cart' | t }}
        {%- else -%}
          {{ 'products.sold_out' | t }}
        {%- endif -%}
      </button>

      <p class="product__error" role="alert" data-product-error hidden></p>
    {% endform %}

    <div class="product__description">
      {{ product.description }}
    </div>
  </div>
</div>

{% stylesheet %}
  .product {
    display: grid;
    gap: 2rem;
    padding: 0 var(--page-margin);
  }
  @media (min-width: 750px) {
    .product {
      grid-template-columns: 1fr 1fr;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Product",
  "settings": [],
  "disabled_on": { "groups": ["header", "footer"] }
}
{% endschema %}

{% doc %}
  Renders a price so that sighted users and screen reader users get the same information.

  @param {product} product - The product whose price is rendered
  @param {variant} [variant] - The selected variant, defaults to the first available one
{% enddoc %}

{%- liquid
  assign target = variant | default: product.selected_or_first_available_variant
  assign on_sale = false
  if target.compare_at_price > target.price
    assign on_sale = true
  endif
-%}

<div class="price" data-price>
  {%- if on_sale -%}
    <p>
      <span class="visually-hidden">{{ 'products.price.regular' | t }}</span>
      <s>{{ target.compare_at_price | money }}</s>
      <span class="visually-hidden">{{ 'products.price.sale' | t }}</span>
      <strong>{{ target.price | money }}</strong>
    </p>
  {%- else -%}
    <p>
      <span class="visually-hidden">{{ 'products.price.regular' | t }}</span>
      <strong>{{ target.price | money }}</strong>
    </p>
  {%- endif -%}
  {%- if target.unit_price_measurement -%}
    <p class="price__unit">
      <span class="visually-hidden">{{ 'products.price.unit' | t }}</span>
      {{ target.unit_price | money }} / {{ target.unit_price_measurement.reference_value }}{{ target.unit_price_measurement.reference_unit }}
    </p>
  {%- endif -%}
</div>

<head>
  <title>
    {{ page_title -}}
    {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
    {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
    {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
  </title>

  {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}" />
  {% endif %}

  <link rel="canonical" href="{{ canonical_url }}" />
</head>

<script type="application/ld+json">
  {{ product | structured_data }}
</script>

{% # Organization and WebSite markup for the home page only %}
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Organization",
        "@id": {{ request.origin | append: '/#organization' | json }},
        "name": {{ shop.name | json }},
        "url": {{ request.origin | json }}
      },
      {
        "@type": "WebSite",
        "@id": {{ request.origin | append: '/#website' | json }},
        "name": {{ shop.name | json }},
        "url": {{ request.origin | json }},
        "publisher": { "@id": {{ request.origin | append: '/#organization' | json }} },
        "inLanguage": {{ request.locale.iso_code | json }}
      }
    ]
  }
</script>

{% # BreadcrumbList for a product, using the collection the visitor came from when there is one %}
{%- liquid
  assign position = 1
-%}
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": {{ shop.name | json }},
        "item": {{ request.origin | json }}
      }
      {%- if collection != blank -%}
        ,{
          "@type": "ListItem",
          "position": 2,
          "name": {{ collection.title | json }},
          "item": {{ collection.url | prepend: request.origin | json }}
        }
        {%- assign position = 3 -%}
      {%- else -%}
        {%- assign position = 2 -%}
      {%- endif -%}
      ,{
        "@type": "ListItem",
        "position": {{ position }},
        "name": {{ product.title | json }}
      }
    ]
  }
</script>

json-ld-site: valid JSON, @type = Organization+WebSite
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://pocket-coffee.example.com/#organization","name":"Pocket Coffee","url":"https://pocket-coffee.example.com"},{"@type":"WebSite","@id":"https://pocket-coffee.example.com/#website","name":"Pocket Coffee","url":"https://pocket-coffee.example.com","publisher":{"@id":"https://pocket-coffee.example.com/#organization"},"inLanguage":"es"}]}
json-ld-breadcrumbs: valid JSON, @type = BreadcrumbList
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Pocket Coffee",
      "item": "https://pocket-coffee.example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Beans",
      "item": "https://pocket-coffee.example.com/collections/beans"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Single-origin beans"
    }
  ]
}
no collection -> 1:Pocket Coffee > 2:Single-origin beans

{% # Basics: charset, viewport (zoom stays enabled) %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

{% # Title, description and canonical, as in the Shopify SEO metadata guide %}
<title>
  {{ page_title }}
  {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
  {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
  {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
</title>

{% if page_description %}
  <meta name="description" content="{{ page_description | escape }}">
{% endif %}

<link rel="canonical" href="{{ canonical_url }}">

{% # Open Graph and Twitter cards %}
{%- liquid
  assign og_title = page_title | default: shop.name
  assign og_description = page_description | default: shop.description | default: shop.name
  assign og_type = 'website'
  if request.page_type == 'product'
    assign og_type = 'product'
  elsif request.page_type == 'article'
    assign og_type = 'article'
  endif
-%}
<meta property="og:site_name" content="{{ shop.name | escape }}">
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:title" content="{{ og_title | escape }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description | escape }}">
{%- if page_image -%}
  <meta property="og:image" content="https:{{ page_image | image_url: width: 1200 }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{%- endif -%}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title | escape }}">
<meta name="twitter:description" content="{{ og_description | escape }}">

{% # Structured data: one source per page type, never the same markup twice %}
{%- case request.page_type -%}
  {%- when 'index' -%}
    {% render 'json-ld-site' %}
  {%- when 'product' -%}
    <script type="application/ld+json">
      {{ product | structured_data }}
    </script>
    {% render 'json-ld-breadcrumbs', collection: collection, product: product %}
  {%- when 'article' -%}
    <script type="application/ld+json">
      {{ article | structured_data }}
    </script>
{%- endcase -%}

{%- capture newline %}
{% endcapture -%}

{%- for group in robots.default_groups -%}
  {{- group.user_agent }}

  {%- for rule in group.rules -%}
    {{ rule }}
  {%- endfor -%}

  {%- if group.user_agent.value == '*' -%}
    {{ 'Disallow: /*?sort_by=*' | append: newline }}
  {%- endif -%}

  {%- if group.sitemap != blank -%}
    {{ group.sitemap }}
  {%- endif -%}
{% endfor %}

--- robots.txt ---
User-agent: *
Disallow: /admin
Disallow: /cart
Disallow: /*?sort_by=*
Sitemap: https://pocket-coffee.example.com/sitemap.xml
User-agent: adsbot-google
Disallow: /checkout

{% for group in robots.default_groups %}
  {{- group.user_agent }}

  {%- for rule in group.rules -%}
    {%- unless rule.directive == 'Disallow' and rule.value == '/policies/' -%}
      {{ rule }}
    {%- endunless -%}
  {%- endfor -%}

  {%- if group.sitemap != blank -%}
    {{ group.sitemap }}
  {%- endif -%}
{% endfor %}

User-agent: discobot
Disallow: /

Sitemap: [sitemap-url]

<img src="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200" alt="Health potion" srcset="//polinas-potent-potions.myshopify.com/cdn/shop/files/science-beakers-blue-light-new.jpg?v=1683744744&amp;width=200 200w" width="200" height="133">

{%- liquid
  # Only the first section of a template is above the fold. section.index is nil
  # for static sections, in the theme editor and in the Section Rendering API,
  # so the test must be written to fail safe (eager only when it is 1).
  assign is_first = false
  if section.index == 1
    assign is_first = true
  endif

  assign sizes = '100vw'
  assign widths = '375, 750, 1100, 1500, 1780, 2000, 3000'
-%}

<section class="hero" aria-labelledby="hero-heading-{{ section.id }}">
  {%- if section.settings.image != blank -%}
    <picture class="hero__media">
      {%- if section.settings.image_mobile != blank -%}
        <source
          media="(max-width: 749px)"
          srcset="
            {{ section.settings.image_mobile | image_url: width: 375 }} 375w,
            {{ section.settings.image_mobile | image_url: width: 750 }} 750w
          "
          sizes="100vw"
          width="{{ section.settings.image_mobile.width }}"
          height="{{ section.settings.image_mobile.height }}"
        >
      {%- endif -%}
      {%- if is_first -%}
        {{
          section.settings.image
          | image_url: width: 3000
          | image_tag:
            sizes: sizes,
            widths: widths,
            loading: 'eager',
            fetchpriority: 'high',
            class: 'hero__image'
        }}
      {%- else -%}
        {{
          section.settings.image
          | image_url: width: 3000
          | image_tag: sizes: sizes, widths: widths, class: 'hero__image'
        }}
      {%- endif -%}
    </picture>
  {%- endif -%}

  <div class="hero__content">
    <h1 id="hero-heading-{{ section.id }}">{{ section.settings.heading }}</h1>
    {%- if section.settings.text != blank -%}
      <p>{{ section.settings.text }}</p>
    {%- endif -%}
    {%- if section.settings.button_link != blank -%}
      <a class="button" href="{{ section.settings.button_link }}">{{ section.settings.button_label }}</a>
    {%- endif -%}
  </div>
</section>

{% stylesheet %}
  .hero {
    position: relative;
    display: grid;
  }
  .hero__media,
  .hero__content {
    grid-area: 1 / 1;
  }
  .hero__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
  .hero__content {
    align-self: end;
    padding: 2rem var(--page-margin);
    color: #fff;
    background: linear-gradient(transparent, rgb(0 0 0 / 70%));
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Hero banner",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "image_picker", "id": "image_mobile", "label": "Mobile image" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Freshly roasted, shipped in 24 hours" },
    { "type": "textarea", "id": "text", "label": "Text" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop beans" },
    { "type": "url", "id": "button_link", "label": "Button link" }
  ],
  "presets": [{ "name": "Hero banner" }]
}
{% endschema %}

<!doctype html>
<html lang="{{ request.locale.iso_code }}">
  <head>
    {% # Import map for the cart modules, above content_for_header so it is part of the first streamed chunk %}
    <script type="importmap">
      { "imports": { "cart-api": {{ 'cart-api.js' | asset_url | json }} } }
    </script>

    {% # Inlined CSS variables and fonts %}
    {% render 'css-variables' %}

    {% # Critical CSS, loaded synchronously and preloaded through the Link header %}
    {{ 'critical.css' | asset_url | stylesheet_tag: preload: true }}

    {% # Title, description, canonical, social tags and structured data %}
    {% render 'seo-head' %}

    {{ content_for_header }}
  </head>

  <body>
    <a class="skip-link" href="#MainContent">{{ 'accessibility.skip_to_content' | t }}</a>

    {% sections 'header-group' %}

    <main id="MainContent" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% sections 'footer-group' %}

    {% section 'cart-drawer' %}

    <script src="{{ 'pocket-cart.js' | asset_url }}" type="module"></script>
  </body>
</html>

$ shopify theme check
│  46 files inspected with no offenses found.                                  │
$ shopify theme check -C theme-check:all
│  46 files inspected with no offenses found.                                  │

<script src="https://cdn.example.com/slider.js"></script>
<script src="{{ 'theme.js' | asset_url }}"></script>
<img src="{{ product.featured_image | image_url: width: 800 }}" alt="">
<a href="/cart">Cart</a>
<link rel="stylesheet" href="https://fonts.example.com/css?family=Work+Sans">
{{ 'missing.css' | asset_url | stylesheet_tag }}

line 1  error    ParserBlockingScript   Avoid parser blocking scripts by adding `defer` or `async` on this tag
line 1  warning  RemoteAsset            Asset should be served by the Shopify CDN for better performance.
line 2  error    MissingAsset           'assets/theme.js' does not exist
line 2  error    ParserBlockingScript   Avoid parser blocking scripts by adding `defer` or `async` on this tag
line 3  error    ImgWidthAndHeight      Missing width and height attributes on img tag
line 4  warning  HardcodedRoutes        Use routes object {{ routes.cart_url }} instead of hardcoding /cart
line 5  warning  RemoteAsset            Asset should be served by the Shopify CDN for better performance.
line 6  error    MissingAsset           'assets/missing.css' does not exist

<header>
  <h2 class="header__title">
    {{ shop.name | link_to: routes.root_url }}
  </h2>

  <nav class="header__menu" aria-label="{{ 'accessibility.main_menu' | t }}">
    {%- for link in section.settings.menu.links -%}
      <a href="{{ link.url }}"{% if link.current %} aria-current="page"{% endif %}>{{ link.title }}</a>
    {%- endfor -%}
  </nav>

  <div class="header__icons">
    {% if shop.customer_accounts_enabled %}
      <a href="{{ routes.account_url }}" aria-label="{{ 'accessibility.account' | t }}">
        {{ 'icon-account.svg' | inline_asset_content }}
      </a>
    {% endif %}

    <a href="{{ routes.cart_url }}" aria-label="{{ 'cart.title' | t }}">
      <sup data-cart-count>{{ cart.item_count }}</sup>
      {{ 'icon-cart.svg' | inline_asset_content }}
    </a>
  </div>
</header>

/* Accessibility helpers used by the Pocket Coffee snippets */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 0;
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Primary controls are at least 44 by 44 CSS pixels */
button,
.button,
select,
input:not([type='hidden'], [type='radio'], [type='checkbox']) {
  min-block-size: 44px;
}

button,
.button {
  min-inline-size: 44px;
}

var cartContents = fetch(window.Shopify.routes.root + 'cart.js')
  .then(response => response.json())
  .then(data => { return data });

items: [
  { id: 36110175633573, quantity: 2 }
],
sections: "cart-items,cart-icon-bubble,cart-live-region-text,cart-footer",
sections_url: "/cart?some_param=foo"

/**
 * Thin wrapper around the Shopify Ajax Cart API (add.js, change.js, update.js, clear.js, cart.js).
 * No DOM access, so it can be unit-tested outside a browser.
 */

export class CartError extends Error {
  constructor({ status, message, description }) {
    super(description || message || 'Cart Error');
    this.name = 'CartError';
    this.status = status;
    this.description = description || message;
  }
}

/** Always build URLs from the locale-aware root, never from a hard-coded "/cart". */
const root = () => globalThis.Shopify?.routes?.root ?? '/';

/** POST endpoints live under cart/ (cart/add.js); the read endpoint is cart.js at the root. */
const endpoint = (name) => `${root()}cart/${name}.js`;

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function request(url, init = {}) {
  const response = await fetch(url, {
    ...init,
    headers: { Accept: 'application/json', ...(init.headers || {}) },
  });

  let data = null;
  try {
    data = await response.json();
  } catch {
    // A throttled (429) or proxied response is not always JSON.
  }

  // Cart errors carry an HTTP error status and a body with status/message/description.
  if (!response.ok || (data && data.status && data.message === 'Cart Error')) {
    throw new CartError({
      status: data?.status ?? response.status,
      message: data?.message ?? 'Cart Error',
      description: data?.description ?? response.statusText,
    });
  }
  return data;
}

function post(name, payload, { sections = [], sectionsUrl, signal } = {}) {
  const body = { ...payload };
  if (sections.length > 0) {
    // Bundled section rendering: up to five sections, rendered after the cart change.
    body.sections = sections.join(',');
    body.sections_url = sectionsUrl ?? globalThis.location?.pathname ?? '/';
  }
  return request(endpoint(name), {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
    signal,
  });
}

/**
 * Adds one or more variants. Each item: { id, quantity, properties?, selling_plan? }.
 * With retryUnknownVariant, a "Cannot find variant" error is retried with a growing delay
 * (products created or published through the Admin API take a few seconds to reach the cart).
 */
export async function addToCart(items, options = {}) {
  const { retryUnknownVariant = false, attempts = 3, baseDelayMs = 500 } = options;
  for (let attempt = 1; ; attempt += 1) {
    try {
      return await post('add', { items }, options);
    } catch (error) {
      // add.js reports an unknown variant as 422, update.js as 404: match the description, not the status.
      const unknownVariant = error instanceof CartError && /cannot find variant/i.test(error.description ?? '');
      if (!retryUnknownVariant || !unknownVariant || attempt >= attempts) throw error;
      await sleep(baseDelayMs * 2 ** (attempt - 1));
    }
  }
}

/** Changes one existing line by its 1-based position (the safe way to address duplicated variants). */
export function changeLine({ line, quantity, properties, selling_plan }, options = {}) {
  const payload = { line, quantity };
  if (properties !== undefined) payload.properties = properties;
  if (selling_plan !== undefined) payload.selling_plan = selling_plan;
  return post('change', payload, options);
}

/** Bulk update: { updates, note, attributes, discount }. update.js does not validate stock for lines already in the cart. */
export function updateCart(payload, options = {}) {
  return post('update', payload, options);
}

export function clearCart(options = {}) {
  return post('clear', {}, options);
}

export function getCart({ signal } = {}) {
  return request(`${root()}cart.js`, { signal });
}

import { addToCart, changeLine, CartError } from 'cart-api';

// Static section rendered by layout/theme.liquid with {% section 'cart-drawer' %}: its id is the file name.
const SECTIONS = ['cart-drawer'];

const drawer = () => document.querySelector('[data-cart-dialog]');
const live = () => document.querySelector('[data-cart-live]');

/** Replaces the cart body with the HTML Shopify rendered in the same response. Null means the section failed to render. */
function applySections(sections) {
  const html = sections?.['cart-drawer'];
  if (!html) return false;

  const incoming = new DOMParser().parseFromString(html, 'text/html');
  const body = incoming.querySelector('[data-cart-body]');
  const current = document.querySelector('[data-cart-body]');
  if (!body || !current) return false;
  current.replaceWith(body);

  const count = body.dataset.itemCount ?? '0';
  document.querySelectorAll('[data-cart-count]').forEach((el) => {
    el.textContent = count;
  });
  if (live()) live().textContent = body.dataset.announce ?? '';
  return true;
}

function openDrawer() {
  const dialog = drawer();
  if (dialog && !dialog.open) dialog.showModal();
}

async function onAddToCart(form) {
  const button = form.querySelector('[data-add-to-cart]');
  const errorBox = form.querySelector('[data-product-error]');
  const data = new FormData(form);
  const item = { id: Number(data.get('id')), quantity: Number(data.get('quantity')) || 1 };

  button.setAttribute('aria-disabled', 'true');
  errorBox.hidden = true;
  try {
    const result = await addToCart([item], { sections: SECTIONS });
    if (applySections(result.sections)) {
      openDrawer();
    } else {
      // Section failed to render: fall back to the cart page, the cart itself is already updated.
      window.location.assign(`${window.Shopify.routes.root}cart`);
    }
  } catch (error) {
    errorBox.textContent = error instanceof CartError ? error.description : 'Network error';
    errorBox.hidden = false;
  } finally {
    button.removeAttribute('aria-disabled');
  }
}

async function onChangeLine(line, quantity) {
  try {
    const cart = await changeLine({ line, quantity }, { sections: SECTIONS });
    applySections(cart.sections);
    // Keep keyboard users in place: back to the same line, or to the heading when it was removed.
    const next = document.querySelector(`[data-line-qty][data-line="${line}"]`) ?? document.querySelector('[data-cart-heading]');
    next?.focus();
  } catch (error) {
    if (live()) live().textContent = error instanceof CartError ? error.description : 'Network error';
  }
}

document.addEventListener('submit', (event) => {
  const form = event.target;
  if (!(form instanceof HTMLFormElement) || !form.matches('form[action*="/cart/add"]')) return;
  event.preventDefault();
  if (form.querySelector('[data-add-to-cart]').getAttribute('aria-disabled') === 'true') return;
  onAddToCart(form);
});

document.addEventListener('change', (event) => {
  const input = event.target.closest?.('[data-line-qty]');
  if (input) onChangeLine(Number(input.dataset.line), Number(input.value));
});

document.addEventListener('click', (event) => {
  const remove = event.target.closest?.('[data-line-remove]');
  if (remove) {
    event.preventDefault();
    onChangeLine(Number(remove.dataset.line), 0);
    return;
  }
  const cartLink = event.target.closest?.(`a[href="${window.Shopify.routes.root}cart"]`);
  if (cartLink && drawer()) {
    event.preventDefault();
    openDrawer();
  }
  if (event.target.closest?.('[data-cart-close]')) drawer()?.close();
});

{% comment %}
  Static section (id: cart-drawer). Re-rendered by the Ajax Cart API through bundled section rendering.
{% endcomment %}

{%- assign total = cart.total_price | money -%}

<dialog class="cart-drawer" data-cart-dialog aria-labelledby="cart-drawer-heading">
  <div class="cart-drawer__header">
    <h2 id="cart-drawer-heading" tabindex="-1" data-cart-heading>{{ 'cart.title' | t }}</h2>
    <button type="button" data-cart-close>{{ 'accessibility.close' | t }}</button>
  </div>

  <p class="visually-hidden" role="status" aria-live="polite" data-cart-live></p>

  <div
    data-cart-body
    data-item-count="{{ cart.item_count }}"
    data-announce="{{ 'cart.announce' | t: count: cart.item_count, total: total }}"
  >
    {%- if cart.item_count == 0 -%}
      <p>{{ 'cart.empty' | t }}</p>
    {%- else -%}
      <ul class="cart-drawer__lines">
        {%- for item in cart.items -%}
          <li>
            {%- if item.image -%}
              {%- assign alt = item.image.alt | default: item.product.title -%}
              {{ item.image | image_url: width: 160 | image_tag: width: 80, height: 80, loading: 'lazy', alt: alt }}
            {%- endif -%}
            <div>
              <a href="{{ item.url }}">{{ item.product.title }}</a>
              <p>{{ item.variant.title }} - {{ item.final_line_price | money }}</p>
              <label for="qty-{{ forloop.index }}">{{ 'products.quantity' | t }}</label>
              <input
                type="number"
                id="qty-{{ forloop.index }}"
                value="{{ item.quantity }}"
                min="0"
                inputmode="numeric"
                data-line-qty
                data-line="{{ forloop.index }}"
              >
              <a href="{{ item.url_to_remove }}" data-line-remove data-line="{{ forloop.index }}">{{ 'cart.remove' | t }}</a>
            </div>
          </li>
        {%- endfor -%}
      </ul>
      <p><strong>{{ 'cart.subtotal' | t }}</strong> {{ total }}</p>
      <a class="button" href="{{ routes.cart_url }}">{{ 'cart.view_cart' | t }}</a>
      <form action="{{ routes.cart_url }}" method="post">
        <button type="submit" name="checkout">{{ 'cart.checkout' | t }}</button>
      </form>
    {%- endif -%}
  </div>
</dialog>

{% stylesheet %}
  .cart-drawer {
    margin: 0 0 0 auto;
    height: 100dvh;
    max-height: 100dvh;
    width: min(28rem, 100vw);
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Cart drawer",
  "settings": []
}
{% endschema %}

$ node cart-api.test.mjs
ok  add.js uses the locale-aware root and bundles sections
ok  422 sold out -> CartError
ok  422 Cannot find variant retried once, then added
ok  no retry unless retryUnknownVariant is set
ok  429 without a JSON body -> CartError(429)
ok  change.js addresses the 1-based line and removes with quantity 0
ok  update.js passes discount and note
ok  without Shopify.routes the root falls back to /
$ node pocket-cart.test.mjs
ok  submit -> add.js with bundled section, body swapped, count and live region updated, drawer opened
ok  422 shows the description in the role=alert region
ok  quantity change -> change.js by line, focus returns to the same input
ok  remove -> quantity 0, focus moves to the drawer heading
ok  header cart link opens the drawer (and still works as a link without JavaScript)

import { updateCart } from 'cart-api';

await updateCart({
  note: 'Gift for Ada, please include a card.',
  attributes: { 'Gift wrap': 'Yes' },
  discount: 'COFFEECLUB',
});

POST /cart/prepare_shipping_rates.json?shipping_address%5Bzip%5D=28001&shipping_address%5Bcountry%5D=Spain
GET  /cart/async_shipping_rates.json?shipping_address%5Bzip%5D=28001&shipping_address%5Bcountry%5D=Spain