@studiometa/ui

Appearance

JS API ​

The FetchShopifyPartial class extends the Fetch class and delegates fetching and DOM updates to Shopify's @shopify/partial-rendering package when partials are configured. All Fetch options, getters, methods and events are inherited; the additions and differences are documented below.

Options ​

partials ​

  • Type: string
  • Default: ''

The names of the Shopify partials to refresh, matching the names used in the corresponding {% partial %} tags. Provide them as a comma-separated list in the data-option-partials attribute; surrounding whitespace is trimmed. When empty, the component falls back to the base Fetch behaviour.

html
<a
  href="/collections/all"
  data-component="FetchShopifyPartial"
  data-option-partials="product-grid,product-count">
  Refresh
</a>

Behaviour ​

Fallback to Fetch ​

The Shopify partial rendering path is used only when the partials option lists at least one name and the @shopify/partial-rendering package resolves. In every other case the component behaves exactly like the base Fetch component and swaps content by matching id attributes from a full response. It falls back to Fetch when:

  • no partial is configured, or the package is not installed;
  • the request cannot be expressed as a plain GET — because the partials API only fetches a URL, any request carrying a body, a non-GET method, custom headers or any other request option makes the component fall back so those options are not silently dropped. This covers the headers / requestInit options and headers[] refs, a method="post" form, and per-call overrides such as fetch(url, { credentials: 'include' }). Framework-internal headers are ignored, so the click, submit and history navigation flows still use partial rendering.

The package is loaded lazily on the first request, so it never needs to be bundled when it is not used.

Events ​

FetchShopifyPartial emits the same events as Fetch, with two differences on the partial rendering path:

  • the fetch-response event is not emitted, as there is no Response object to expose;
  • the fetch-update event payload carries the opaque partials update object (as event.detail[0].update) instead of a parsed Document fragment.

On the fallback path, all events — including fetch-response — behave exactly like the base Fetch component.