Customer accounts

The customer-accounts module is a separate customer.js chunk, loaded on demand only when a <storesynk-store customer-client-id="shp_…"> is on the page. It is the browser half of core’s isomorphic customer session (Shopify Customer Account API, OAuth2 + PKCE): login/logout, the show-customer-* displayers, buyer-identified carts (the session’s buyer token attaches to the cart so buyer-keyed automatic discounts fire pre-checkout), and the <storesynk-customer-pricing> widget. Login state flows three ways off the store: storeContext.customer, the [ss-logged-in] CSS hook on <storesynk-store>, and the bubbling sf:customer-change event. Anonymous is the SSR default; an SSR host that restored the _storesynk-customer-session cookie renders member state server-side, and the module holds that state (customerStatus: 'pending') until the async restore settles so it never flashes anonymous.

log-in / log-out

• Purpose: the auth action verbs. <log-in> starts the Customer Account login (redirects to Shopify’s hosted login, PKCE verifier stashed across the redirect); <log-out> ends the local session and Shopify’s hosted session.
• Attributes: none.
• Required ancestor / context: a <storesynk-store> anywhere on the page (they drive the store’s single module-level session - they do not consume context, so they need no ancestor; SSK-101 just requires a store present). No-op until the customer module initializes.
• Accessibility (built in): each uses the Clickable primitive - role="button" + tabindex
  • Enter/Space + an accessible name ("Log in" / "Log out") when the host isn’t a native control.
• State it sets: none (gate their visibility with storesynk-store[ss-logged-in]).

account-link

• Purpose: links slotted content to the account destination.
• Attributes:
  • path : string = "" - optional account sub-page appended to the destination (e.g. path="orders").
• Required ancestor / context: storesynk-store (consumes storeContext; SSK-101). The destination comes off the store’s customer-account-pages/customer-account-url and is resolved lazily (only pages that place an <account-link> pay the portal derivation).
• Children: a nested <a> gets its href stamped (native link semantics - also what the server transform stamps); with no <a>, the host itself becomes the keyboard-operable link, named by its slotted text.
• State it sets: none.

show-customer-email / show-customer-first-name / show-customer-last-name / show-customer-name

• Purpose: passive displayers of the logged-in customer’s field (email / firstName / lastName / displayName).
• Attributes: none.
• Required ancestor / context: storesynk-store (consumes storeContext.customer; SSK-101).
• State it sets: hidden + [ss-empty] when anonymous (the exact state the server transform pre-stamps for builds/anonymous requests, so a logged-out hydration is byte-stable). While the session restore is pending, the DOM is left untouched so an SSR’d member render never flashes.

---

Imported from the Storesynk skill v0.1.0 (references/component-reference.md). To change this page, change it there.