JavaScript API

AndOr puts four public objects on window. Use only these. Anything else AndOr adds can change in any release.

Public objects

Scripts load only on pages that need them, so check that an object exists before you call it.

refresh()

AndOrEvents.refresh(), AndOrWidgets.refresh() and AndOrDisplay.refresh() are safe to call as often as you like. They read the current page and keep no references to elements between calls.

Call them after your theme swaps product markup with Ajax or the Section Rendering API, so the new AndOr markup is checked and priced:

• AndOrDisplay.refresh() re-prices sale price hosts. The variant script calls it after a variant change.
• AndOrWidgets.refresh() hides or reveals badges, countdowns and offers rows on their sale windows.
• AndOrEvents.refresh() runs one events pass now, so mount and change events fire without waiting for the next one-second pass.

The theme editor’s shopify:section:load is already handled. See Events.

AndOrQuickview.open(options)

Opens the gift chooser dialog and returns the <andor-quickview> element. The cart gift slot is the only caller today.

Options:

• into: the element to append the dialog to. Keep it inside the cart drawer.
• title: the dialog’s heading.
• slots: how many picks. Default 1.
• products: a list of { id, title, image, options, variants, swatches }. options is [{ name, values }]. Each variant is { id, title, price, available, options, image }. A variant that is not available may add reason, read out instead of “Sold out”.
• price(product, variant): returns [was, now] or null. variant is null on a card. Return null when you are not sure of a price or “Free”. The chooser then shows no price.
• strings: close, back, add, addMany, slot, products, optionsTitle, options, chosen, soldOut, clear, error. @ and # are filled in.
• onSubmit(picks): gets [{ product, variant }]. Resolve to close, reject to show the error and keep the dialog open.
• onClose(): runs after it closes, added or not.
• buttonClass: extra classes for the Add button.

Everything is drawn with textContent. No product data becomes HTML.

See Gift chooser JavaScript API for the dialog’s steps and styling.