Canvas Support

Top cart icon with loading cart content with ajax

4 replies · opened Aug 17, 2020

SswwammpAug 17, 2020

Hi,

I would like to load the content of .top-cart-content via ajax call, when the user clicked on the shopping cart icon.
However I tried to catch the event via jquery it doesn't work as you use it as a trigger.
I've also found this part in functions.js, and also tried to add the ajax call but does not work.

I'd keep <div class="top-cart-content"></div> blank as default and I'd call the content with these 2 lines:
$('.top-cart-content').html( '<h4 class="center"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading basket ...</h4>' );
$('.top-cart-content').load('ajax_url_to_load');

Do you have any great solution for this?
(I'd prefer not to modify the original functions.js if possible due to keep canvas code untouched, but if no other solution that would also be ok...)

Thanks very much,
A.

SswwammpAug 18, 2020

Hi, I found the solution, I needed to put the whole onclick event inside topcart function, underneath of your trigger function.
Thanks anyway, A.

SSemicolon WebSTAFFAug 18, 2020

Hello,

Thanks for your Patience!

This would be our Suggestion for a more optimized solution:

  1. Find the following code in the js/functions.js File inside the topcart: function() Function Block:

$topCart.toggleClass('top-cart-open');

and add the following code just after the above line:


if( $topCart.hasClass( 'top-cart-open' ) ) {
	$topCart.trigger( 'topCartOpenEvent' );
}
  1. Now you can simply use the following code in a Custom JS File for better management:

$('#top-cart').on( 'topCartOpenEvent', function(){
	// Your AJAX Functions
});

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SswwammpAug 19, 2020

Hi there,
Brilliant, that works perfectly!
Thanks so much again!
A.

SSemicolon WebSTAFFAug 20, 2020

Hello,

Very Happy to Help!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard