text 阿贾克斯

Posted 2021-05-01

https://infiniteajaxscroll.com/

https://stackoverflow.com/questions/43338968/implement-an-endless-infinite-scroll-bigcommerce-stencil-category-list/43356548#43356548

https://www.themevale.com/extensions/bigcommerce-add-on-ajax-infinite-scroll-stencil-ready/

\!h get posts from New tag page

--- custom.js
/* Related articles on blog post */
function initNewArticlesAjax() {
    const tag = $('.new-articles-section').data('tag');
    const limit = $('.new-articles-section').data('limit');

    if(tag && limit){
        $.ajax({
            url: '/blog/tag/' + tag,
            success: function getResponse(response) {
                let counter = 0;
                $('.blog-posts-area .post-preview', $(response)).each(function getNewPosts() {
                    counter++;
                    if(counter > limit){
                        return false;
                    }else{
                        $('#new-articles').append($(this));    
                    }
                });
            },
        });
    }else{
        $('.new-articles-section').addClass('hidden');
    }
}

initNewArticlesAjax();

--- html
<div class="new-articles-section" data-tag="{{theme_settings.blog_tag_related_articles}}" data-limit="{{theme_settings.blog_limit_related_articles}}">
    <h3>{{lang 'blog.new_title'}}</h3>
    <div id="new-articles"></div>
</div>

\!h get products from category page

<ul class="productGrid" id="featured_product_new"></ul>

<script type="text/javascript">
  $.ajax({
    'url': '/shop-all/',
    'success': function(response){
        $('ul.productGrid li', $(response)).each(function(){
            $('#featured_product_new').append($(this));
        })
    }
  });
</script>