loading related products using ajax

Hi all,

I have a block on the product page which shows related products using hot deal template.

I want this block to load as an ajax request and not as a part of the page, so that the page loads faster.

Can anyone show me a similar example or point me in the right direction.



What's your page load with the block enabled/disabled?

You'd have to create a custom block. You'd then use jQuery to go back to your server and get the content. My guess is that this will be VERY visually unappealing to your customers, but you could make the block hidden until it's filled. But then having a block appear after the user thinks the page load is done might be surprising to them too.

Thanks Tbirnseth.

Yes this is what I want to do ? How to create a custom block and add jquery to it ?

When I create a block from blocks manager, all I see are standard non-jquery options.



Create a template file in an addon (like my_changes) diirectory for a skin and it should pick it up by nature of it's presence. Ie.


Thanks tibrnseth,

Worked just the way I wanted.

I wonder why this isn't mentioned in the developer doc or if mentioned how'd I missed it !!

Because the developers guide is intended for only very minor and cosmetic changes only and does not get into any detail anywhere. If they did, they would have to publish it like an API and maintain compatibility across versions which they have no desire to do.

Thats strange, One of the top reasons why I chose cs-cart was the customization api only !!!

What api are you referring to? I'm not aware of any published API that will remain constant.

I meant the customization docs only.

Anyways forget it and thanks once again !!


I have a 5 blocks on the home page.

One block shows best sellers products using my custom template. and others are products template (like grid, scroller etc.).

I want to load my page faster, So I want to load all these blocks using an Ajax.

Can anyone help me or give some idea for this.

You'd have to change the blocks to be empty containers with a jQuery function to fill it after the page loads. But it's going to look funny to the user to have these blocks filling asynchronously. Note that using Ajax simply defers the time for page completion. In fact, it actually makes the process longer since there are more transactions. Also note that once you start getting any appreciable load related to simultaneous users that you're going to need much more of a server to service a high ajax intensity system than letting a single php process create the entire page.

hello tbirnseth,

thanks for your reply,

Ok, in other way it is possible to load all the product images of the index page after the index page loads.? using any jQuery trick.

I think that the loading of the products images are cause of the slow page load. every time it sends request for image and increase the page load time.

Should i go with this trick…?? can this trick decrease the page load time?

Is it feasible…? If yes, then can you give me any link or some bit of code for that.

I'm not a jQuery guru… I can only suggest that you look at your image sizes and quality. I don't think you can defer the loading of the images other than doing it via an ajax request. But do note that you might not get the browser caching you expect by loading your blocks via ajax. I.e. all loads will be slow rather than just the first load.

:confused: :confused: :-( :-( :confused: :confused:

I have an ajax request which runs once in every minute. Am using ceAjax function. The problem is, the loader is poping up everytime which I don't want. I want to make the Ajax request silent. Is there a way to do that?

Depends on what you ajax request is doing. You can always just use standard jQuery if you don't need it to run the template editor.