JavaScript API - Online store

Globo Preorder provides a JavaScript API for custom integrations within your Shopify theme. This API is accessible through the window.Globo.Preorder object when our app loads into your theme.

1. Global variable

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 window.GloboPreorderParams to redefine the selectors.

• Go to theme.liquid, add Javascript code before </body>

• Example override selector productAddToCartTextElement 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

window.GloboPreorderParams.selectors

Key	Type	Page	​Define
cartFormSelector	string	cart	cart container
cartRowSelector	string	cart	cart item row
cartElementHandle	string	cart	element handle product, must be inside the cartRowSelector element.
cartQuantitySelector	string	cart	quantity product container, must be inside cartRowSelector element
cartInputQuantitySelector	string	cart	input quantity product
cartPositionLimitMessage	string	cart	position display limit product message
cartProductParentSelector	string	cart	use to show Line item badge in cart page.
cartProductTitleSelector	string	cart	use to show Line item badge in cart page.
minusQuantitySelector	string	product	disable click button minus qty when input quantity reach to limit
addQuantitySelector	string	product	disable click button plus qty when input quantity reach to limit
productDetailSelector	string	product	product detail container
productDetailImagesSelector	string	product	product detail image selector
productImageSelectors	array	product collection	product image selector
pricePositionSelectors	string	product	price product position show label preorder
priceSelectors	string	product	price product wrapper
productForm	array	product	product form action add to cart
paymentButton	string	product	payment button selector
productVariantActivator	string	product	product variant selector add event listener click , change and rerender Pre-order status
variantSelector	string	product	product variant id selector [name="id"]
productQuantityWrapperSelector	string	product	product quantity wrapper, use show limit message
productQuantitySelector	string	product	input quantity selector
productAddToCartSelector	string	product	selector button add to cart,
productAddToCartBtn	array	product, quickview	button add to cart
productAddToCartTextElement	string	product, quickview	add to cart text
spinnerAtcElement	string	product	hide spinner selector in product add to cart
productSoldOutBadge	string	product	hide badge sold out selector when product show pre-order
productPositionMessage	string	product	position show message above text
productPositionLimitMessage	string	product	position show warning limit quantity message
productPositionPaymentOption	string	product	position show payment option
productPositionBis	string	product	position show back in stock butotn