Skip to content

OnwardSetup

Helpers to attach Onward widgets, buttons, etc to Storefront DOM.

Use in theme Javascript like so:

window.addEventListener('DOMContentLoaded', () => {
  const onward = new OnwardSetup();
  onward.addContainer('.ajaxcart__footer', { position: 'beforebegin' });
  onward.attachCheckoutButton('button.checkout', {
    optOutSelector: '.cart__footer',
    optOutPosition: 'afterbegin',
  });
});

Constructors

Constructor

new OnwardSetup(documentNode): OnwardSetup

Parameters

documentNode

Document | ShadowRoot

Returns

OnwardSetup

General Usage

addContainer()

addContainer(selector, options): void

Adds the Onward cart widget to the end of any elements matching the given selector.

onward.addContainer('.ajaxcart__footer');

By default the container will be appended to the matching element. You can control this with position:

onward.addContainer('.cart__footer', { position: 'beforebegin' });

Parameters

selector

string

CSS selector to match now and observe for addition to the DOM later

options

AddContainerOptions = {}

Returns

void

addRebuy()

addRebuy(options): void

Adds the Onward widget to the top of the Rebuy checkout button. MUST use the rebuy event rebuy:smartcart.ready

document.addEventListener('rebuy:smartcart.ready', function () {
  const onward = new OnwardSetup();
  onward.addRebuy();
});

Parameters

options

AttachCheckoutOptions = ...

Returns

void

addShadowRoot()

addShadowRoot(selector, handler): void

Adds an observer to the ShadowRoot of any elements matching the given selector.

const onward = new OnwardSetup();
onward.addShadowRoot('#myShadowRoot', function(builder) {
  builder.addContainer(...);
  builder.attachCheckoutButton(...);
});

Parameters

selector

any

CSS selector to match now and observe for addition to the DOM later

handler

any

callback to execute when the selector matches

Returns

void

attachCheckoutButton()

attachCheckoutButton(checkoutButtonSelector, options): void

Convert a checkout button to a Checkout+ button with opt-out link. Under-the-hood this will either setup the Cart or Checkout variant of Checkout+ depending on your settings.

onward.attachCheckoutButton('button.checkout', { optOutSelector: '.cart__footer' });

By default the opt-out link will be appended to the matching element. You can customize this placement with optOutPosition:

onward.attachCheckoutButton('button.checkout', { optOutSelector: '.cart__footer', optOutPosition: 'afterbegin' });

By default the opt-out will be styled as a link. You can customize it with optOutCustomClasses by adding classes from the MX's theme, also the classes coming from the compiled widget tailwind: class prefixed with 'onward-'. It will override the default classes with the new specified ones.

onward.attachCheckoutButton('button.checkout', { optOutSelector: '.cart__footer', optOutCustomClasses: 'btn' });

By default, Checkout+ advances the user to checkout by clicking the original checkout button. You can customize this behavior with continueToCheckout:

onward.attachCheckoutButton('button.checkout', {
  continueToCheckout: function(originalButton) {
    // Do what you need to advance to checkout here
  }
});

Parameters

checkoutButtonSelector

string

CSS selector to match now and observe for addition to the DOM later

options

AttachCheckoutOptions

Returns

void

Checkout+ Cart Variant

addPDP()

addPDP(selector, options): void

Adds the Onward product detail page (PDP) widget to the end of any elements matching the given selector and converts the PDP Wallets/ShopPay 'More payment options' link to a Checkout+ opt-out link.

onward.addPDP('.product-single__add .shopify-payment-button #more-payment-options-link');

If necessary, you can specify a custom selector for the 'More payment options' link

onward.addPDP('.product-single__add .shopify-payment-button', { optOutSelector: '#more-payment-options-link' });

Parameters

selector

string

CSS selector to match now and observe for addition to the DOM later

options

AddPDPOptions = {}

Returns

void

addPDPContainer()

addPDPContainer(selector, options): void

Adds the Onward product detail page (PDP) widget to the end of any elements matching the given selector.

onward.addPDPContainer('.product-single__add .shopify-payment-button #more-payment-options-link');

By default the container will be inserted right before the matching element. You can control this with position:

onward.addPDPContainer('.product-single__add .shopify-payment-button #more-payment-options-link', { position: 'beforeend' });

Parameters

selector

string

CSS selector to match now and observe for addition to the DOM later

options

AddContainerOptions = {}

Returns

void

addPDPOptOut()

addPDPOptOut(selector): void

Converts the PDP Wallets/ShopPay 'More payment options' link to a Checkout+ opt-out link.

onward.addPDPOptOut('#more-payment-options-link');

Parameters

selector

string

CSS selector to match now and observe for addition to the DOM later

Returns

void

addShopPayCheckoutButton()

addShopPayCheckoutButton(selector): void

Convert a ShopPay checkout button to a Checkout+ button.

onward.addShopPayCheckoutButton('#selector-to-button shop-pay-wallet-button');

Parameters

selector

string

CSS selector to match now and observe for addition to the DOM later

Returns

void

autoAddShopPayCheckoutButtons()

autoAddShopPayCheckoutButtons(): void

Convert common ShopPay checkout buttons to Checkout+ buttons.

onward.autoAddShopPayCheckoutButtons();

Returns

void

Previous page
Next page