Load product on home page by ajax cs cart

Question

I am new to cs cart 4.2.4, having some problems to load products on home page by AJAX to optimize website speed.I have 5 tabs on home page. I want to load them by Ajax. For this I have created a custom page with all product tabs, On home page I have added a custom block with smarty and call that page by Ajax. Now page is successfully loading on home page but when I click on add to wishlist button the event runs twice. so every time when I click on a wish list button it shows a message that product is already exist. Actually this button is running two times on one click.

my code on custom block is

{literal}
<script>
var count = 1; 
$(window).unbind('scroll');
$(window).scroll(function(){
if(count==1){
$('.span16.homepg-product-block').html("<img class='loadimg' src='images/common_imgs/loading.gif' style='margin:15px auto 25px 43%'>");

$.ajax({
    url:'/ajax-products',
        type:'GET,
        success: function(data){
        $('.span16.homepg-product-block').html(data);

        }
});}
count++;
});

</script>
{/literal}

Answer 1

We suggest you to use built-in functions to make ajax requests. Most possible they will solve the issue. E.g.

function fn_change_tab(obj_id, id, option_id)
{
    var $ = Tygh.$;
    var url = fn_url('products.get_tab_content);

    $.ceAjax('request', url, {
        result_ids: 'my_block_content',
        caching: true,
        force_exec: true,
        method: 'get'
    });
}

Your template and returned content should contain a div in the following format:

<div id="my_block_content">
    YOUR CONTENT HERE
<!--my_block_content--></div>

Only this content will be reniewed

Answer 2

I got a new way to make my page size smaller. I just use lazy load jquery plugin to load all images.