@storesynk/hydrogen

Storesynk widgets inside an existing classic Hydrogen storefront (React Router, createCartHandler, CartForm), without converting it. A volume discount, a bundle, a build-your-own-box or product add-ons render in your markup and add to your cart.

Classic Hydrogen only. A storefront on the Hydrogen developer preview toolkit already ships the standard cart actions: use @storesynk/react/embed there, no bridge needed.

Install

npm install @storesynk/hydrogen

Pre-1.0 prereleases (0.1.0-beta.N) are published to npm's latest tag, so a plain install gets the current release. Do not install @beta: that dist-tag is frozen at an old build.

1. The cart bridge, once

Classic Hydrogen has no window.Shopify.actions; every cart write is a form POST to your cart route. <StoresynkCartBridge> turns a widget's add into your own CartForm submission, sent through a React Router fetcher, so your optimistic cart, header count and cart aside update as if your own button had been clicked.

It needs to open your cart aside, and useAside is your template's own code, so give it a three-line home inside <Aside.Provider>:

// app/components/PageLayout.jsx
import {StoresynkCartBridge} from '@storesynk/hydrogen';
import {Aside, useAside} from '~/components/Aside';

function StoresynkBridge() {
  const {open} = useAside();
  return <StoresynkCartBridge onAddToCart={() => open('cart')} />;
}

// inside <Aside.Provider>:
<StoresynkBridge />

Props: route (default /cart), onAddToCart(result), onError(error).

The bridge also makes your storefront dispatch the standard shopify:cart:lines-update event for every cart write, your own buttons included. That is what lets the add-ons widget ride along with your add-to-cart button.

2. A widget

// app/routes/products.$handle.jsx
import {StoresynkEmbed} from '@storesynk/hydrogen';

<StoresynkEmbed handle={product.handle} variantId={selectedVariant?.id}>
  {/* widget markup from the Storesynk docs, unchanged */}
</StoresynkEmbed>

No token prop: the store domain, the public Storefront token and the locale come from your root loader, which the Hydrogen skeleton already sends to the browser (publicStoreDomain, consent.storefrontAccessToken, consent.country, consent.language). Pass token / domain explicitly if your root loader differs.

className works on the Storesynk tags even on React 18.

Deal names in your cart

import {StoresynkLineDeals} from '@storesynk/hydrogen';

<StoresynkLineDeals line={line} locale="en-US" />

Add discountAllocations to your CART_QUERY_FRAGMENT first. See the docs guide.