# Javascript API
# Introduction
Once you install to a theme. It will create/overwrite those files:
- snippets/laybuy.liquid (Configurations File)
- snippets/ps-announcement-popup.liquid (Announcement)
- snippets/ps-footer-payment-icons.liquid (Payment Icon)
- assets/laybuy-helper.js (Javascript)
And modified the layout/theme.liquid
<!DOCTYPE doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
...
// place your own logic here
{% render 'laybuy', product: product %}
</head>
<body>
// place your own styling here
...
{% render 'ps-announcement-popup' %}
{% render 'ps-footer-payment-icons' %}
</body>
</html>
# Overwrite
Our script provide you ability to custom some behaviors. If you familiar with web development, you can do it yourself. Or contact us, we can do it for you.
# Example
<script>
var LBConfigs = {overwrite: {
// your code ...
}};
</script>
{% render 'laybuy', product: product %}
</head>
# Custom Currency Setting
By default, we support 3 currency. They are AUD, NZD, GBP. Each of them have their individual settings. You can add more currencies or custom their settings.
<head>
...
<script>
var LBConfigs = {overwrite: {
configs: {
currencies: [
{iso_code: 'AUD', symbol: '$', max: 144000 },
{iso_code: 'NZD', symbol: '$', max: 144000 },
{iso_code: 'GBP', symbol: '£', max: 72000 },
]
}
}};
</script>
{% render 'laybuy', product: product %}
</head>
# Custom Paragraph
<head>
...
<script>
var LBConfigs = {overwrite: {
configs: {
shop: {
texts: {
global: {
"product_line_2": " with ",
"product_line_3": " today & 5 weekly payments of ",
"collection_line_2": " with ",
"collection_line_3": " today & 5 weekly interest-free payments of ",
"cart_line_2": " with ",
"cart_line_3": " today & 5 weekly interest-free payments of ",
},
standard: {
"product_line_1": "or 6 weekly payments from ",
"collection_line_1": "or 6 weekly interest-free payments from ",
"cart_line_1": "or 6 weekly interest-free payments from ",
},
over: {
"product_line_1": "or from ",
"collection_line_1": "or from ",
"cart_line_1": "or from ",
}
}
}
}
}};
</script>
{% render 'laybuy', product: product %}
</head>
# Custom Init Function
By default, the JS will be execute when the DOM Content Loaded. By editing the Init Function, you can call the JS whenever you like.
<head>
<script>
var LBConfigs = {
init: function() {
// place your logic here
// ...
document.addEventListener('DOMContentLoaded', function() {
let script = document.createElement('script');
script.onload = function () {
LaybuyHelper.run(window.LBConfigs)
};
script.src = '{{ "laybuy-helper.js" | asset_url }}';
document.head.appendChild(script);
})
}
}
</script>
{% render 'laybuy', product: product %}
</head>
# Custom Product Page Logic
<head>
<script>
var LBConfigs = {
overwrite: {
product_init: function() {
let config = this.configs.product, target_list, clone_dom, that = this;
// custom the logic
target_list = document.querySelectorAll(config.selector);
this.product_paragraph(config);
this.init_popup_iframe();
target_list.forEach(function(target) {
clone_dom = that.virtual_dom.cloneNode(true);
that.bind_popup_event(clone_dom);
// You can custom the logic here
that.inject_paragraph(target, clone_dom, config.inject, config.inject_pos);
});
// observer
this.construct_observe(config, 'product');
},
product_observe: function(config) {
// how to observe the price element
let observe, dom, clone_dom, that = this;
dom = this.query_observe_element(config.ajaxSelector);
observe = new MutationObserver(that.debounce(function() {
let text = dom.innerText;
let exclude = dom.querySelector('.price-item--regular');
if (exclude) text = text.replace(exclude.innerText, '');
that.price_mutation(parseInt(that.get_price_from_html(text)))
}, 250));
observe.observe(dom, {
childList: !0,
attributes: !1,
characterData: !0,
subtree: !0,
attributeOldValue: !1,
characterDataOldValue: !1
});
}
}
}
</script>
{% render 'laybuy', product: product %}
</head>
# Custom Cart Page Logic
<head>
<script>
var LBConfigs = {
overwrite: {
cart_init: function() {
// init function
},
cart_mutation: function(price) {
// when the price changed, this will be call
},
cart_observe: function(config) {
// how to observe the price element
let observe, dom, that = this, clone_dom, target;
dom = this.query_observe_element(config.ajaxSelector);
observe = new MutationObserver(that.debounce(function () {
target = document.querySelector(config.selector);
if (target.parentNode.querySelector('.laybuy-paragraph')) return;
fetch('/cart.json', {
method: 'get',
mode: "same-origin",
headers: {'Content-Type': 'application/json'}
}).then(function (res) {
return res.json()
}).then(function (res) {
that.cart_paragraph(res);
clone_dom = that.virtual_dom.cloneNode(true);
that.bind_popup_event(clone_dom);
that.inject_paragraph(target, clone_dom, config.inject, config.inject_pos);
})
}, 500));
observe.observe(dom, {
childList: !0,
attributes: !1,
characterData: !0,
subtree: !0,
attributeOldValue: !1,
characterDataOldValue: !1
});
}
}
}
</script>
{% render 'laybuy', product: product %}
</head>
# Custom Collection Page Logic
<head>
<script>
var LBConfigs = {
overwrite: {
collection_init: function() {
let config = this.configs.collection, target_list, clone_dom, that = this;
target_list = document.querySelectorAll(config.selector);
target_list.forEach(function(target, index) {
let text = target.innerText;
if (config.excludeSelector) {
let exclude = target.querySelector(config.excludeSelector);
if (exclude) text = text.replace(exclude.innerText, '');
}
that.collection_paragraph(text, index);
clone_dom = that.virtual_dom.cloneNode(true);
// You can custom the logic here
that.inject_paragraph(target, clone_dom, config.inject, config.inject_pos);
});
// observer
this.construct_observe(config, 'collection');
},
collection_observe: function(config) {
let observe, dom, clone_dom, that = this;
dom = this.query_observe_element(config.ajaxSelector);
observe = new MutationObserver(that.debounce(function() {
// Remove old elements
that.list_doms.forEach(function(target) {
target.parentNode.removeChild(target)
});
that.list_doms = [];
document.querySelectorAll(config.selector).forEach(function(target, index) {
// You can custom the logic here
let text = target.innerText;
if (config.excludeSelector) {
let exclude = target.querySelector(config.excludeSelector);
if (exclude) text = text.replace(exclude.innerText, '');
}
that.collection_paragraph(text, index);
clone_dom = that.virtual_dom.cloneNode(true);
that.inject_paragraph(target, clone_dom, config.inject, config.inject_pos);
});
}, 250));
}
}
}
</script>
{% render 'laybuy', product: product %}
</head>
# Home Page - Feature Product
{%- if product != nil -%}
<script>
(function() {
let LBConfigs = window.LBConfigs || {};
LBConfigs.product = {
enable: 1,
selector: '#shopify-section-{{ section.id }} .product__policies',
inject: 2,
inject_pos: 0,
productData: {{ product | json }},
variantID: {{ product.selected_or_first_available_variant.id | json }},
};
let clock = setInterval(function() {
if (!window.LaybuyHelper) return;
clearInterval(clock);
window.LaybuyHelper.product.call({configs: LBConfigs})
}, 500);
})();
</script>
{%- endif -%}