Cart line

All consume cartLineContext (money displayers also consume storeContext). Required ancestor: cart-line (SSK-105). Events: none emitted.

Displayers

Tag	Writes	Source
show-line-image	child <img> src/alt (creates one if missing)	merchandise.image
show-line-title	textContent	merchandise.product.title
show-line-variant	textContent	merchandise.title
show-line-price	textContent (money-formatted)	cost.totalAmount.amount
show-line-quantity	textContent	quantity
show-line-original-price	textContent (money) - the struck original; [ss-empty] when not > final total	max(compare-at, pre-discount subtotal, pre-subscription)
show-line-discount	textContent - “TITLE (−amount)”, joined; [ss-empty] when none	discountAllocations
show-line-selling-plan	textContent - subscription plan name; [ss-empty] when none	sellingPlanAllocation.sellingPlan.name

• Attributes: none for any of the above.
• Children: show-line-image manages its own <img>; the others write text.

Controls (plain HTMLElement, click handlers)

Tag	Action (window.Shopify.actions.updateCart on the nearest line)
increase-line-quantity	set line quantity to quantity + 1
decrease-line-quantity	set line quantity to max(0, quantity - 1)
remove-cart-line	set line quantity to 0 (removes it)

• Attributes: none. Required ancestor: cart-line (reads its .line). State: none.

In-cart subscription upsell (change-line-purchase-option / change-line-selling-plan)

The cart counterparts of the PDP’s change-purchase-option / change-selling-plan pair: they let a shopper flip an existing cart line between one-time and subscribe, and change its frequency, without going back to the product page. They author the same children as the PDP pair (purchase-option / a selling-plan-option template) and give them the same accessibility treatment (Clickable control + aria-pressed mirroring [ss-active]), but they are cart-line-scoped: they consume cartLineContext and require a cart-line ancestor (SSK-105) - the PDP tags inside a cart-line trip SSK-102 instead, because they look for a storesynk-product.

Both read the plans available on the line’s merchandise from the cart query (merchandise.sellingPlanAllocations) and write through the standard runtime: window.Shopify.actions.updateCart({ lines: [{ id, quantity, sellingPlanId }] }) - a plan id applies that plan, an explicit null strips it (subscription → one-time). Client-only: the cart is never server-rendered.

Both participate in the shared cart-line in-flight guard: the click stamps ss-loading on the enclosing cart-line, sets aria-disabled on that line’s controls, and ignores further clicks until the mutation settles (the same guard the quantity/remove controls use).

change-line-purchase-option

• Purpose: one-time-vs-subscribe toggle for this cart line. Clicking the value="single" option strips the line’s plan; value="recurring" applies the line’s current plan, else the last one chosen in this session, else the first plan available on the line’s merchandise. Not a template-clone container (no SSK-107).
• Attributes: none. (There is no default-option - the line’s own applied plan is the initial state.)
• Required ancestor / context: cart-line (consumes cartLineContext).
• Children: exactly two purchase-option elements - one value="single" and one value="recurring" (SSK-108).
• State it sets: [ss-active] + aria-pressed on the current-mode purchase-option; [ss-empty] on itself when the line’s merchandise offers no selling plans (hide with change-line-purchase-option[ss-empty] { display:none }).
• Events: none - it mutates the cart directly (no sf:selling-plan-change; that event is the PDP pair’s channel to storesynk-product).

change-line-selling-plan

• Purpose: frequency picker for this cart line, shown only while the line is subscribed. Captures its first selling-plan-option child as the template, removes it, and clones it once per plan on the line’s merchandise, filling show-selling-plan-name / show-selling-plan-price (money-formatted via the store formatter) and setting value to the real plan gid. Clicking a clone switches the line to that plan.
• Attributes:
  • labels : string = "" - optional comma-separated custom plan names, in plan order, overriding the Shopify names (identical to change-selling-plan’s labels).
• Required ancestor / context: cart-line (consumes cartLineContext; also storeContext to money-format each plan’s price).
• Children: exactly one selling-plan-option template (SSK-107 if missing).
• State it sets: value (a real plan id) + [ss-active] + aria-pressed on each clone; [ss-empty] on itself when the line has no plans or while the line is one-time - hide with change-line-selling-plan[ss-empty] { display:none }.
• Events: none (it mutates the cart directly).

---

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