Cart

show-cart-count

• Purpose: live cart line count. Subscribes to the store’s lean cart and writes totalQuantity to its textContent.
• Attributes: none. Required ancestor: storesynk-store (consumes storeContext).
• Events / state: none.

show-cart-total

• Purpose: live cart total, money-formatted. Subscribes to the cart and writes cost.totalAmount.amount.
• Attributes: none. Required ancestor: storesynk-store (consumes storeContext).
• Events / state: none.

checkout-link

• Purpose: keeps a checkout link current. Sets href on a child <a> to the cart’s checkoutUrl (or makes the element navigate on click if no <a>).
• Attributes: none. Required ancestor: storesynk-store (consumes storeContext).
• Children: typically an <a>.
• Events / state: none.

Cart totals & discount displayers (rich-cart)

show-cart-subtotal, show-cart-tax, show-cart-duties, show-cart-discount, show-discount-code

• Purpose: subscribe to the rich cart and write a money amount - subtotal / tax / duties / total order-level discount - or the applied discount code(s) as text.
• Attributes: none. Required ancestor: storesynk-store (consumes storeContext).
• State: each sets [ss-empty] (and clears its text) when its value is absent - tax/duties are unknown until checkout; discount/code are absent when none applies - so a row can be hidden via CSS, e.g. show-cart-tax[ss-empty] { display: none }.

apply-discount

• Purpose: applies a discount code. Owns a nested <input> (the code field); applies on Enter or a nested <button> click via updateCart({ discountCodes }), then clears the input.
• Attributes: none. Required ancestor: storesynk-store.
• Children: a nested <input> (required) + optionally a <button>. Label the input yourself (aria-label / <label>) - it is an author-provided field.

remove-discount

• Purpose: removes applied discount code(s). Keyboard-operable (role="button", aria-label="Remove discount").
• Attributes: code : string = "" - remove just that code; empty removes all applied codes.
• Required ancestor: storesynk-store.

cart-note

• Purpose: two-way cart note. Owns a nested <textarea>/<input>, seeded once from the loaded cart, saved on debounced input via updateCart({ note }).
• Attributes: debounce : number = 500 (ms). Required ancestor: storesynk-store.
• Children: a nested <textarea> or <input> (required) - label it yourself.

clear-cart

• Purpose: clears the cart - sets every line to quantity 0. Keyboard-operable (role="button", aria-label="Clear cart"). A destructive control, not a status box - it was renamed from empty-cart because that name read like “the empty-cart message” and got authored as one. For a “your cart is empty” message, style a plain element via storesynk-cart[ss-empty].
• Attributes: none. Required ancestor: storesynk-store.

show-cart-savings, show-discount-error

• show-cart-savings - total savings (all line-level + order-level discounts summed), money-formatted; [ss-empty] when zero.
• show-discount-error - a visibility gate: clears [ss-empty] when the cart holds a code that Shopify kept but marked not applicable (invalid / expired / ineligible); you own the message copy inside it. Style show-discount-error[ss-empty] { display: none }.
• Attributes: none. Required ancestor: storesynk-store (both are rich-cart displayers).

Cart discounts (chips & order rows)

cart-discount-list, cart-order-discount-list, cart-discount, show-discount-amount

• cart-discount-list - one cart-discount per applied code (removable chips). cart-order-discount-list - one cart-discount per order-level allocation (code or automatic, with an amount). Both are TEMPLATE-CLONE containers (first cart-discount child is the template), and set [ss-empty] when there are none. Required ancestor: storesynk-store.
• cart-discount - provides discountContext ({ code, label, amount }) to its descendants; it is the clone template. Required ancestor: cart-discount-list / cart-order-discount-list.
• show-discount-amount - writes the discount’s amount (”−€4.80”), money-formatted; [ss-empty] when none. Required ancestor: cart-discount (consumes discountContext).
• Attributes: none. show-discount-amount renders the amount; the discount’s code/label are carried in the context (no dedicated label displayer yet).

open-cart

• Purpose: click control that opens the cart drawer via the global window.Shopify.actions.openCart. Plain HTMLElement; placeable anywhere.
• Attributes: none.
• Required ancestor / context: none - but a storesynk-store and a storesynk-cart must exist on the page for the open action to be registered.
• Events / state: none.

close-cart

• Purpose: click control that closes the nearest cart drawer (storesynk-cart.close()). Plain HTMLElement.
• Attributes: none.
• Required ancestor / context: storesynk-cart (SSK-109). (Prefer open-cart when you need a trigger outside the drawer.)
• Events / state: none.

---

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