Delayed widget initialization
Sometimes it is necessary to delay widget initialization while the website page finishes the initialization procedures. This is useful when the website is built dynamically using libraries such as ReactJs.
See the example of delayed initialization of different Ecwid widgets below.
<div id="my-store-1003"></div>
<div id="my-categories-1003"></div>
<div id="my-search-1003"></div>
<div class="ec-cart-widget"></div>
<script>
window.ecwid_script_defer = true;
var script = document.createElement('script');
script.charset = 'utf-8';
script.type = 'text/javascript';
script.src = 'https://app.ecwid.com/script.js?1003';
document.getElementById('my-store-1003').appendChild(script);
window._xnext_initialization_scripts = [
// Storefront widget
{
widgetType: 'ProductBrowser', id: 'my-store-1003', arg: [
'id=my-store-1003'
]
},
// Horizontal categories widget
{
widgetType: 'CategoriesV2', id: 'id=my-categories-1003', arg: [
'id=my-categories-1003'
]
},
// Search widget
{
widgetType: 'SearchWidget', id: 'my-search-1003', arg: [
'id=my-search-1003'
]
},
// 'Buy now' button for product
{
widgetType: 'SingleProduct', id: 'Product-1', arg: [
'id=Product-1'
]
}
];
// Initialize Minicart Widget. A div with class '.ec-cart-widget' must be present on a page
Ecwid.init();
</script>
Dynamic embedding of Ecwid storefront widget
In some cases it is necessary to dynamically create and destroy Ecwid widget within the HTML page. This is useful for dynamic sitebuilders that switch to online store page without actually reloading page (e.g. making it visible).
This method of embedding Ecwid is slower than direct embedding of Ecwid widget. Please use it only when you need the storefront embedded on the fly.
<div id="my-store-1003"></div>
<script>
window.ecwid_script_defer = true;
window.ecwid_dynamic_widgets = true;
if (typeof Ecwid != 'undefined') Ecwid.destroy();
window._xnext_initialization_scripts = [{
widgetType: 'ProductBrowser',
id: 'my-store-1003',
arg: ["id=productBrowser"]
}];
if (!document.getElementById('ecwid-script')) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.type = 'text/javascript';
script.src = 'https://app.ecwid.com/script.js?1003';
script.id = 'ecwid-script'
document.body.appendChild(script);
} else {
ecwid_onBodyDone();
}
</script>
You should use window.ecwid_dynamic_widgets variable to enable dynamic widget creating in Ecwid. See the example above that shows how to create and destroy Ecwid widget through the JavaScript functions.
Please note that this method allows to embed the storefront widget only. If you need to embed other widgets dynamically, please, use the code for deferred widget initialization