View Single Post
Old 03-22-2016, 08:33 PM
enot's Avatar
enot enot is offline
Join Date: Oct 2014
Posts: 499

Originally Posted by ukcfacademy View Post
Hi there,

Thank you for your response. That is in fact already how I am adding the products to the cart, but for an unrelated reason - to be able to add multiple items using one button.

I am however trying to fetch and initialize the products, price and available options, rather than add an item to the cart. Ideally I would like to avoid hard coding all of the names and options, as these are likely to get changed in the admin panel.

The problem I am having is that loading multiple single products on a page has a fairly severe performance hit on page load time, and if at all possible, I would like to minimize this - ideally by only loading the products when a tab element is accessed.

What I am hoping to do is only call the xSingleProduct() if a user wants to access the widget (which is hidden on page load). I am happy for all the products on the page to be loaded, after that point.

I have attempted to do this through every method I could think of (both through onclick handlers, appending javascript, ) with the same result each time - the page getting blanked out.

It seems like a fairly sensible thing to be able to do (e.g. - it would make a lot of sense for a user to want to initialize the widget within a JQuery $(document).ready() block for instance), so I am not sure if I have just not tried something obvious or I have stumbled into a bug.

Many thanks!

PS: The website in question is, specifically the Book Now box, which is an element present on the vast majority of pages on the site.
Terribly sorry for the radio silence!

If this can still help (or if someone else stumbles upon this thread with a similar question):

I believe two approaches could be used in this case:

1) First approach would be deferred initialisation of the widgets: in this case they won't try to load while the page is loading, so overall it will become significantly faster in case with many such widgets existing on one page.
Here's an example:

<div class="ecwid ecwid-SingleProduct ecwid-Product ecwid-Product-PRODUCT_ID" itemscope itemtype="" data-single-product-id="PRODUCT_ID"><div itemprop="image"></div>
<div class="ecwid-title" itemprop="name"></div>
<div itemtype="" itemscope itemprop="offers">
<div class="ecwid-productBrowser-price ecwid-price" itemprop="price"></div></div>
<div itemprop="options"></div><div itemprop="addtobag"></div></div>
<div id='xSingleProduct-place'></div>
<script type='text/javascript'> function onloadCallback() {xSingleProduct('id=xSingleProduct-place');}if (!window.ecwidScript) { window.ecwid_script_defer = true;window.ecwidScript = document.createElement('script');ecwidScript.defer=true;ecwidScript.src='';ecwidScript.charset='utf-8';if(ecwidScript.addEventListener) {ecwidScript.addEventListener('load', onloadCallback, false);} else if(ecwidScript.readyState) {ecwidScript.onreadystatechange = onloadCallback;}document.body.appendChild(ecwidScript);} else if (window.Ecwid) {onloadCallback();}</script>
You can test it after replacing the PRODUCT_ID with actual ID of a product, and STORE_ID with your store ID.

2) And there's an alternative - more difficult approach (but offering much more space for creativity!) with using Ecwid for checkout and and product info, while creating custom product layout (as an alternative to using single product widget, which does a similar thing):

Our product API, could be used to fetch product info from Ecwid's servers to add to the page:
This way info on the page will be updated and relevant, and you could still use "add to bag" buttons.

Also, if you'd prefer to get rid of the buttons as well, you can use our JavaScript API to add particular product to cart via Ecwid.Cart.addProduct(product);, where product is an object describing this product (options, quantity, ID, etc), as this part describes:

Hope this helps someone!

Last edited by enot; 03-22-2016 at 08:54 PM. Reason: Updated second solution with a few details