Your IP : 216.73.216.43
/**
* Buy button generator adapter for Shopify.
* It exposes all standard methods of the adapter for HTML generation.
* - generate and return the buy button HTML based on the parameters (getBuyButtonHtmlAsync)
*/
class ShopifyAdapter {
/**
* Generates and returns the buy button HTML based on the specified parameters.
*
* @param {object} buyButtonParameters the parameters required by the buy button as described in the graphql schema
* @returns a promise that will resolve in an object with the buy button's HTML string, a string with the javascript function for generating the element,
* and a script for generating the preview html (returning it in a callback)
*/
getBuyButtonHtmlAsync(buyButtonParameters) {
return new Promise((resolve) => resolve({
html: this._buildHtml(buyButtonParameters),
previewScript: this._buildPreviewScript(buyButtonParameters)
}));
}
_buildHtml(buyButtonParameters) {
return `${this._buildContainer(buyButtonParameters)}
${this._buildScript(buyButtonParameters)}`;
}
_buildContainer(buyButtonParameters) {
return `<div id='${this._getContainerId(buyButtonParameters.type, buyButtonParameters.itemId)}'></div>`;
}
_buildPreviewScript(buyButtonParameters) {
return `var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = () => {
var container = document.createElement('div');
var client = ShopifyBuy.buildClient({
domain: '${process.env.STOREFRONT_DOMAIN}',
storefrontAccessToken: '${process.env.STOREFRONT_ID}',
language: 'it-IT'
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('${this._getContainerType(buyButtonParameters.type)}', {
id: '${buyButtonParameters.itemId}',
node: container,
moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
options: {
"product": {
${this._buildProductStyle(buyButtonParameters)}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"option": {},
"cart": {
${this._buildCartStyle(buyButtonParameters)}
},
"toggle": {
${this._buildToggleStyle(buyButtonParameters)}
}
}
});
callback(container);
});
}`;
}
_buildScript(buyButtonParameters) {
const script = `/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
${this._buildInitFunction(buyButtonParameters)}
})();
/*]]>*/`;
return `<script type="text/javascript">${script}</script>`;
}
_buildInitFunction(buyButtonParameters) {
return `function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: '${process.env.STOREFRONT_DOMAIN}',
storefrontAccessToken: '${process.env.STOREFRONT_ID}',
language: 'it-IT'
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('${this._getContainerType(buyButtonParameters.type)}', {
id: '${buyButtonParameters.itemId}',
node: document.getElementById('${this._getContainerId(buyButtonParameters.type, buyButtonParameters.itemId)}'),
moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
options: {
"product": {
${this._buildProductStyle(buyButtonParameters)}
},
"productSet": {
"styles": {
"products": {
"@media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
},
"option": {},
"cart": {
${this._buildCartStyle(buyButtonParameters)}
},
"toggle": {
${this._buildToggleStyle(buyButtonParameters)}
}
},
});
});
}`
}
_buildProductStyle(buyButtonParameters) {
return `"styles": {
"product": {
"@media (min-width: 601px)": {
"max-width": "calc(25% - 20px)",
"margin-left": "20px",
"margin-bottom": "50px",
"width": "calc(25% - 20px)"
},
"text-align": "right",
"img": {
"height": "calc(100% - 15px)",
"position": "absolute",
"left": "0",
"right": "0",
"top": "0"
},
"imgWrapper": {
"padding-top": "calc(75% + 15px)",
"position": "relative",
"height": "0"
}
},
"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "bold",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"color": "${buyButtonParameters.buttonsForegroundColor}",
":hover": {
"color": "${buyButtonParameters.buttonsForegroundColor}",
"background-color": "${buyButtonParameters.buttonsHoverBackgroundColor}"
},
"background-color": "${buyButtonParameters.buttonsBackgroundColor}",
":focus": {
"background-color": "${buyButtonParameters.buttonsHoverBackgroundColor}"
},
"border-radius": "40px",
"padding-left": "60px",
"padding-right": "60px"
},
"quantityInput": {
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px"
}
},`.concat(
buyButtonParameters.addToCartButtonText ?
`"text": {
"button": "${buyButtonParameters.addToCartButtonText}"
},`: '').concat(
`"googleFonts": [
"Open Sans"
]`);
}
_buildCartStyle(buyButtonParameters) {
const localeCheckoutFunction = buyButtonParameters.checkoutLocale ? `"events": {
afterInit: (cart) => {
cart.onCheckout = () => {
const checkoutUrl = cart.model.webUrl + '&locale=${buyButtonParameters.checkoutLocale}';
cart.checkout.open(checkoutUrl);
};
},
},` : ''
return localeCheckoutFunction
.concat(`"styles": {`)
.concat(
`"button": {
"font-family": "Open Sans, sans-serif",
"font-weight": "bold",
"font-size": "18px",
"padding-top": "17px",
"padding-bottom": "17px",
"color": "${buyButtonParameters.buttonsForegroundColor}",
":hover": {
"color": "${buyButtonParameters.buttonsForegroundColor}",
"background-color": "${buyButtonParameters.buttonsHoverBackgroundColor}"
},
"background-color": "${buyButtonParameters.buttonsBackgroundColor}",
":focus": {
"background-color": "${buyButtonParameters.buttonsHoverBackgroundColor}"
},
"border-radius": "40px"
}
},
"text": {
`)
.concat(buyButtonParameters.totalText ? `"total": "${buyButtonParameters.totalText}",` : '')
.concat(buyButtonParameters.checkoutButtonText ? `"button": "${buyButtonParameters.checkoutButtonText}",` : '')
.concat(buyButtonParameters.cartTitleText ? `"title": "${buyButtonParameters.cartTitleText}",` : '')
.concat(buyButtonParameters.cartEmptyText ? `"empty": "${buyButtonParameters.cartEmptyText}",` : '')
.concat(buyButtonParameters.cartNoticeText ? `"notice": "${buyButtonParameters.cartNoticeText}",` : '')
.concat(buyButtonParameters.noteText ? `"noteDescription": "${buyButtonParameters.noteText}"` : '')
.concat(`},
"googleFonts": [
"Open Sans"
]`);
}
_buildToggleStyle(buyButtonParameters) {
return `"styles": {
"toggle": {
"font-family": "Open Sans, sans-serif",
"font-weight": "bold",
"background-color": "${buyButtonParameters.buttonsBackgroundColor}",
":hover": {
"background-color": "${buyButtonParameters.buttonsHoverBackgroundColor}"
},
":focus": {
"background-color": "${buyButtonParameters.buttonsHoverBackgroundColor}"
}
},
"count": {
"font-size": "18px",
"color": "${buyButtonParameters.buttonsForegroundColor}",
":hover": {
"color": "${buyButtonParameters.buttonsForegroundColor}"
}
},
"iconPath": {
"fill": "${buyButtonParameters.buttonsForegroundColor}"
}
},
"googleFonts": [
"Open Sans"
]`;
}
_getContainerId(type, id) {
return `${this._getContainerType(type)}-component-${id}`;
}
_getContainerType(type) {
switch (type) {
case 'PRODUCT':
return 'product';
case 'COLLECTION':
return 'collection';
}
}
}
// EXPORTS ==================================================
module.exports = { adapter: new ShopifyAdapter() };