The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 10-26-2015, 11:54 PM
ukcfacademy's Avatar
ukcfacademy is offline
Junior Member
 
Join Date: Oct 2015
Posts: 2
Default

Is it possible to Call xSingleProduct() widget on click?


Hi all,

I am attempting to postpone the load of ECWID until I activate the div in which it is stored, and generally gain more control over when the xSingleProduct() widget is loaded.

Currently, if I call the function xSingleProudct() in line in a script tag, as the documentation states, it all works fine.

However if I call the function after the page finished loading (e.g. on click, or on $(document).ready(...) ). then it replaces the entire contents of the page with:

<body><div id="SingleProduct-1"></div></body>

jsfiddle: https://jsfiddle.net/Lgxn8v3c/1/

Is there a way to do something like this or is there some kind of obvious scope issue I am missing here?

Many thanks!
  #2  
Old 10-28-2015, 10:21 AM
Qetzal's Avatar
Qetzal Qetzal is offline
Ecwid Team
 
Join Date: Sep 2009
Posts: 10,847
Default

Quote:
Originally Posted by ukcfacademy View Post
Hi all,

I am attempting to postpone the load of ECWID until I activate the div in which it is stored, and generally gain more control over when the xSingleProduct() widget is loaded.

Currently, if I call the function xSingleProudct() in line in a script tag, as the documentation states, it all works fine.

However if I call the function after the page finished loading (e.g. on click, or on $(document).ready(...) ). then it replaces the entire contents of the page with:

<body><div id="SingleProduct-1"></div></body>

jsfiddle: https://jsfiddle.net/Lgxn8v3c/1/

Is there a way to do something like this or is there some kind of obvious scope issue I am missing here?

Many thanks!
Hi,

Try to replace our Single product widgets with custom buttons that use our JavaScript API to add items to a bag: https://help.ecwid.com/customer/en/p...CartaddProduct
__________________
Eugene K.
Ecwid Team

@ecwid | Facebook | Ecwid Knowledge Base
  #3  
Old 11-04-2015, 04:56 PM
ukcfacademy's Avatar
ukcfacademy ukcfacademy is offline
Junior Member
 
Join Date: Oct 2015
Posts: 2
Default

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 http://www.ukcfacademy.co.uk/, specifically the Book Now box, which is an element present on the vast majority of pages on the site.
  #4  
Old 03-22-2016, 08:33 PM
enot's Avatar
enot enot is offline
 
Join Date: Oct 2014
Posts: 499
Default

Quote:
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 http://www.ukcfacademy.co.uk/, specifically the Book Now box, which is an element present on the vast majority of pages on the site.
Hello,
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:

Code:
<div class="ecwid ecwid-SingleProduct ecwid-Product ecwid-Product-PRODUCT_ID" itemscope itemtype="http://schema.org/Product" data-single-product-id="PRODUCT_ID"><div itemprop="image"></div>
<div class="ecwid-title" itemprop="name"></div>
<div itemtype="http://schema.org/Offer" 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='http://app.ecwid.com/script.js?STORE_ID';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: https://developers.ecwid.com/api-doc...#get-a-product
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: https://developers.ecwid.com/api-doc...art-addproduct

Hope this helps someone!

Last edited by enot; 03-22-2016 at 08:54 PM. Reason: Updated second solution with a few details
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
on click, single product widget, xsingleproduct

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:43 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.