> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/pre-order/app-api/javascript-api-online-store.md).

# JavaScript API - Online store

### **1. Global variable**

```javascript
window.Globo.Preorder 
// Use it with function app, after app loaded or window loaded
// Example reload preorder form in product page after variant change 
// Use: Globo.Preorder.initPreorder();
window.GloboPreorderParams
// Defined selectors, classes, postion display
```

### **2. Defined selector - integrate theme**

By default, the app defines selectors to display correctly in the right positions; however, themes may have updated versions, or there may be custom themes that the app doesn't yet support. You can use the variable <mark style="color:yellow;">`window.GloboPreorderParams`</mark> to redefine the selectors.

* Go to <mark style="color:yellow;">`theme.liquid`</mark>, add Javascript code <mark style="color:yellow;">before</mark> <mark style="color:yellow;"></mark><mark style="color:yellow;">`</body>`</mark>
* Example override selector <mark style="color:yellow;">`productAddToCartTextElement`</mark> on product page

```
<script>
window.GloboPreorderParams = window.GloboPreorderParams || {};
window.GloboPreorderParams.selectors = window.GloboPreorderParams.selectors || {};
window.GloboPreorderParams.selectors.productAddToCartTextElement = 'span[data-add-to-cart-text], .add-to-cart-text'; // class of the text element added to cart on product page
</script>
```

### 3 List keys&#x20;

<mark style="color:yellow;">`window.GloboPreorderParams.selectors`</mark>

<table><thead><tr><th width="316.15234375">Key</th><th width="85.640625">Type</th><th width="103.984375">Page</th><th width="405.5546875">​Define</th></tr></thead><tbody><tr><td><code>cartFormSelector</code></td><td>string</td><td>cart</td><td>cart container</td></tr><tr><td><code>cartRowSelector</code></td><td>string</td><td>cart</td><td>cart item row</td></tr><tr><td><code>cartElementHandle</code></td><td>string</td><td>cart</td><td>element handle product, must be inside the  <mark style="color:$info;"><code>cartRowSelector</code></mark>  element.</td></tr><tr><td><code>cartQuantitySelector</code></td><td>string</td><td>cart</td><td>quantity product container, must be inside <code>cartRowSelector</code> element</td></tr><tr><td><code>cartInputQuantitySelector</code></td><td>string</td><td>cart</td><td>input quantity product</td></tr><tr><td><code>cartPositionLimitMessage</code></td><td>string</td><td>cart</td><td>position display limit product message</td></tr><tr><td><code>cartProductParentSelector</code></td><td>string</td><td>cart</td><td>use to show <a href="#id-1.-global-variable">Line item</a> badge in cart page.</td></tr><tr><td><code>cartProductTitleSelector</code></td><td>string</td><td>cart</td><td>use to show <a href="#id-1.-global-variable">Line item</a> badge in cart page.</td></tr><tr><td><code>minusQuantitySelector</code></td><td>string</td><td>product</td><td>disable click button minus qty when input quantity reach to limit</td></tr><tr><td><code>addQuantitySelector</code></td><td>string</td><td>product</td><td>disable click button plus qty when input quantity reach to limit</td></tr><tr><td><code>productDetailSelector</code></td><td>string</td><td>product</td><td>product detail container</td></tr><tr><td><code>productDetailImagesSelector</code></td><td>string</td><td>product</td><td>product detail image selector </td></tr><tr><td><code>productImageSelectors</code></td><td>array</td><td><code>product</code> <code>collection</code> </td><td>product image selector</td></tr><tr><td><code>pricePositionSelectors</code></td><td>string</td><td>product</td><td>price product position show label preorder</td></tr><tr><td><code>priceSelectors</code></td><td>string</td><td>product</td><td>price product wrapper</td></tr><tr><td><code>productForm</code></td><td>array</td><td>product</td><td>product form action add to cart</td></tr><tr><td><code>paymentButton</code></td><td>string</td><td>product</td><td>payment button selector</td></tr><tr><td><code>productVariantActivator</code></td><td>string</td><td>product</td><td>product variant selector add event listener <code>click</code> , <code>change</code> and rerender <strong>Pre-order</strong> status</td></tr><tr><td><code>variantSelector</code></td><td>string</td><td>product</td><td>product variant id selector <code>[name="id"]</code></td></tr><tr><td><code>productQuantityWrapperSelector</code></td><td>string</td><td>product</td><td>product quantity wrapper, use show limit message </td></tr><tr><td><code>productQuantitySelector</code></td><td>string</td><td>product</td><td>input quantity selector</td></tr><tr><td><code>productAddToCartSelector</code></td><td>string</td><td>product</td><td>selector button add to cart,  </td></tr><tr><td><code>productAddToCartBtn</code></td><td>array</td><td>product, quickview</td><td>button add to cart </td></tr><tr><td><code>productAddToCartTextElement</code></td><td>string</td><td>product, quickview</td><td>add to cart text </td></tr><tr><td><code>spinnerAtcElement</code></td><td>string</td><td>product</td><td>hide spinner selector in product add to cart</td></tr><tr><td><code>productSoldOutBadge</code></td><td>string</td><td>product</td><td>hide badge sold out selector when product show pre-order</td></tr><tr><td><code>productPositionMessage</code></td><td>string</td><td>product</td><td>position show message above text</td></tr><tr><td><code>productPositionLimitMessage</code></td><td>string</td><td>product</td><td>position show warning limit quantity message</td></tr><tr><td><code>productPositionPaymentOption</code></td><td>string</td><td>product</td><td>position show payment option</td></tr><tr><td><code>productPositionBis</code></td><td>string</td><td>product</td><td>position show back in stock butotn</td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>