1. Add a snippet "simple-preorder-bootstrap.liquid" with next code:
<style id="simple_preorder_style"></style>
<script>
// Bootstrap for Simple Preorder app
var SimplePreorderBootstrap = {
"page": {{ template | json }},
"product": {
"id": {{ product.id | json }},
"title": {{ product.title | json }},
"variants": [
{% for variant in product.variants %}
{
"id": {{variant.id}},
"inventory_quantity": '{{variant.inventory_quantity}}',
"inventory_management": '{{variant.inventory_management}}',
"inventory_policy": '{{variant.inventory_policy}}'
},
{% endfor %}
]
},
"cart": {
"items": [
{% for item in cart.items %}
{
"variant_id": {{item.variant.id}},
"product_id": {{item.product.id}},
"quantity": {{item.quantity}},
"inventory_quantity": '{{item.variant.inventory_quantity}}',
"inventory_management": '{{item.variant.inventory_management}}',
"inventory_policy": '{{item.variant.inventory_policy}}',
"properties": {{ item.properties | json }}
},
{% endfor %}
]
},
// "startupDelay": 100,
// "productFormSelector": '/cart/add',
// "productSelector": 'form[action="/cart/add"] [type="submit"]',
// "variantsSelector": 'form[action="/cart/add"] .variants-selector',
// "nativeVariantsSelector": 'form[action="/cart"] [name^="id"]',
// "checkoutSelector": 'form[action="/cart"] [type="submit"][name="checkout"]',
// "updateSelector": 'form[action="/cart"] [type="submit"][name="update"]',
// "updateInputsSelector": 'form[action="/cart"] [name^="updates["]',
// "preorderBadgeContainerSelector": '.product-item__image-wrapper',
// "updateInputsSelector": 'input[name="quantity"]',
// "debug": true,
};
</script>
<script id="kad-preorder-config-loader">
(() => {
try {
function loadPersonalConfig() {
let personalConfig = localStorage.getItem('SimplePreorderBootstrap')
if (typeof personalConfig === 'string') {
return JSON.parse(personalConfig)
}
}
function savePersonalConfig(config) {
localStorage.setItem('SimplePreorderBootstrap', JSON.stringify(config, null, 2))
}
function isDevParamSpecified() {
return new URLSearchParams(window.location.search).get('kad-dev') !== null
}
let personalConfig = loadPersonalConfig()
if (isDevParamSpecified()) {
personalConfig = personalConfig || {}
personalConfig.dev = true
}
if (personalConfig) {
Object.assign(SimplePreorderBootstrap, personalConfig)
savePersonalConfig(personalConfig)
}
} catch (err) {}
})()
</script>
<script id="kad-preorder-injector">
(() => {
let lastScript = document.getElementById('kad-preorder-injector')
function injectScript(url, type) {
const script = document.createElement('script')
script.src = url
script.type = type || ''
script.async = false
script.defer = true
lastScript = lastScript.parentNode.insertBefore(script, lastScript.nextSibling)
}
if (SimplePreorderBootstrap.dev && SimplePreorderBootstrap.devScriptUrl) {
injectScript(SimplePreorderBootstrap.devScriptUrl, SimplePreorderBootstrap.devScriptType)
}
if (SimplePreorderBootstrap.dataScriptUrl) {
injectScript(SimplePreorderBootstrap.dataScriptUrl, SimplePreorderBootstrap.dataScriptType)
}
if (SimplePreorderBootstrap.settingsScriptUrl) {
injectScript(SimplePreorderBootstrap.settingsScriptUrl, SimplePreorderBootstrap.settingsScriptType)
}
if (SimplePreorderBootstrap.appScriptUrl) {
injectScript(SimplePreorderBootstrap.appScriptUrl, SimplePreorderBootstrap.appScriptType)
}
})()
</script>
Important: At the very bottom of the snippet in the last line, replace the text "NAME-OF-YOUR-SHOP" with the address of your store from the address bar of the browser when you are in the admin area of the store (like "simple-pre-order-demo-shop.myshopify.com", and not, for example, "spo-demo.shop").
2. In the theme template "theme.liquid" right before the closing tag "</head>" add the code to connect the snippet:
<!-- Snippet for Simple Preorder app -->
{% include 'simple-preorder-bootstrap' %}
3. (Not mandatory) In the snippet adjust the selectors for following buttons:
If this does not work, please write to support@kad.systems