# OnwardSetup

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

Use in theme Javascript like so:


```javascript
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.


```javascript
onward.addContainer('.ajaxcart__footer');
```

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


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

#### Parameters

##### selector

`string`

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

##### options

[`AddContainerOptions`](/shopify_storefront_sdk/onward_setup/interfaces/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`


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

#### Parameters

##### options

[`AttachCheckoutOptions`](/shopify_storefront_sdk/onward_setup/interfaces/attachcheckoutoptions) = `...`

#### Returns

`void`

### addShadowRoot()

> **addShadowRoot**(`selector`, `handler`): `void`


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


```javascript
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.


```javascript
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`:


```javascript
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.


```javascript
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`:


```javascript
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`](/shopify_storefront_sdk/onward_setup/interfaces/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.


```javascript
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


```javascript
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`](/shopify_storefront_sdk/onward_setup/interfaces/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.


```javascript
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`:


```javascript
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`](/shopify_storefront_sdk/onward_setup/interfaces/addcontaineroptions) = `{}`

#### Returns

`void`

### addPDPOptOut()

> **addPDPOptOut**(`selector`): `void`


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


```javascript
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.


```javascript
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.


```javascript
onward.autoAddShopPayCheckoutButtons();
```

#### Returns

`void`