Magento 2 добавить в корзину с помощью ajax не работает для бесконечной прокрутки


У меня есть модуль бесконечной прокрутки. Это удаляет разбивку на страницы категорий и показывает кнопку, при нажатии на которую загружается больше товаров.

Функция добавления ajax в корзину работает неправильно, только для первых загруженных товаров (в данном случае для первой страницы). Когда я нажимаю кнопку загрузить больше, появляются новые товары (так что теперь это страница 2), но для этих товаров добавление в корзину с помощью ajax не работает, вместо этого он обновляет страницу, и после этого товар добавляется в корзину.

Теперь ссылка изменена, и теперь я могу снова добавлять товары ajax в корзину для страницы 2. Таким образом, ссылка изменяется, например, loremipsum.com/categoryname?p=2&_=1510315834548 что-то в этом роде.

Если я нажму сейчас кнопку "Загрузить больше", это должна быть страница 3, но снова ссылка не изменится, она будет с ?p=2, и если я добавлю товар в корзину из тех, которые принадлежат странице 3, ajax добавить в корзину не работает, страница снова загружается, и ссылка изменится на ?p=3. И так на

Если я ничего не добавляю в корзину и только нажимаю кнопку загрузки снова и снова, ссылка остается без разбивки на страницы, что-то вроде: loremipsum.com/categoryname

Поэтому я думаю, что проблема в том, что в ссылке нет страницы, которая была загружена, и только после обновления она добавляется, и добавление ajax в корзину работает для товаров, которые принадлежат странице в ссылке.

Я должен добавить пользовательский код js в файл init.phtml, когда модуль ajax загрузится полностью. Но не знаю, что точно. Кто-нибудь знает, как заставить это работать?

Это файл init.phtml

<?php  
$helper = $this->helper('Lof\AjaxScroll\Helper\Data'); 
$productListMode = $block->getProductListMode(); 
$enable = $block->isEnable(); 

if($helper->isEnabled() && $enable) { ?>  
<script>
    require(['jquery',
        'Lof_AjaxScroll/js/script'  
        ], function ($) {

            $('<?php echo $helper->getConfig('lofajaxscroll/selectors/toolbar') ?>').<?php echo $helper->getConfig('lofajaxscroll/design/hide_toolbar') ? 'hide' : 'show' ?>();
            windowLoadedFlag = false;
            window.onload = function () {
                windowLoadedFlag = true;
            };   
            var jQueryWaiter = function () {
                var functions = [];
                var timer = function() {
                    if( typeof window.jQuery != 'undefined') {
                        while (functions.length) {
                            functions.shift()(window.jQuery);
                        }
                    } else {
                        window.setTimeout(timer, 100);
                    }
                };
                timer();
                return {
                    execute: function(onJQueryReady) {
                        if (window.jQuery) {
                            onJQueryReady(window.jQuery);
                        } else {
                            functions.push(onJQueryReady);
                        }
                    }
                };
            }();

            window.SgyIAS = {
                debug: false,
                _log: function(object) { 
                    //console.log(object); 
                },
                init: function(){ 
                    jQuery(function($) {
                        var config = {
                            item: '<?php echo $productListMode == 'grid' ? $helper->getConfig('lofajaxscroll/selectors/grid_mode') : $helper->getConfig('lofajaxscroll/selectors/list_mode') ?>',
                            container : '<?php echo $helper->getConfig('lofajaxscroll/selectors/content') ?>',
                            next: '<?php echo $helper->getConfig('lofajaxscroll/selectors/next') ?>',
                            pagination: '<?php echo $helper->getConfig('lofajaxscroll/selectors/pagination') ?>',
                            parameter: '<?php echo $helper->getConfig('lofajaxscroll/instances/enable_parameter') ?>',
                            delay: 600,
                            negativeMargin: <?php echo (int) $helper->getConfig('lofajaxscroll/design/buffer') ?>,
                            history: {
                                prev: '.prev'
                            },
                            noneleft: {
                                text: '<?php echo $helper->jsQuoteEscape(__($helper->getConfigData('lofajaxscroll/design/done_text'))) ?>',
                                html: '<div class="ias-noneleft" style="text-align: center;">{text}</div>'
                            },
                            spinner: {
                                <?php if($block->getLoaderImage() !== false): ?>
                                src: '<?php echo $block->getLoaderImage(); ?>',
                            <?php endif; ?>
                            html: '<div class="ias-spinner" style="text-align: center;"><img style="display:inline" src="{src}"/> <?php echo $helper->jsQuoteEscape(__($helper->getConfigData('lofajaxscroll/design/loading_text'))); ?></div>'
                        },  
                        trigger: {
                            text: '<?php echo $helper->jsQuoteEscape(__($helper->getConfigData('lofajaxscroll/design/load_more_text'))) ?>',
                            html: '<div class="ias-trigger ias-trigger-next" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
                            textPrev: '<?php echo $helper->jsQuoteEscape(__($helper->getConfigData('lofajaxscroll/design/load_more_text'))) ?>',
                            htmlPrev: '<div class="ias-trigger ias-trigger-prev" style="text-align: center; cursor: pointer;"><a>{text}</a></div>',
                            offset: <?php echo (int) $helper->getConfigData('lofajaxscroll/design/load_more') ?>
                        }

                    };


                    if (window.ias_config){
                        $.extend(config, window.ias_config);
                    }


                    SgyIAS._log({extension: 'ias', config: config});
                    window.ias = $.ias(config);

                    SgyIAS._log({extension: 'paging'});
                    window.ias.extension(new IASPagingExtension());

                    SgyIAS._log({extension: 'spinner'});
                    window.ias.extension(new IASSpinnerExtension(config.spinner));

                    SgyIAS._log({extension: 'noneleft'});
                    window.ias.extension(new IASNoneLeftExtension(config.noneleft));

                    SgyIAS._log({extension: 'trigger'});
                    window.ias.extension(new IASTriggerExtension(config.trigger));  

                        // debug events
                        window.ias.on('scroll', function(scrollOffset, scrollThreshold){
                            SgyIAS._log({eventName: 'scroll', scrollOffset: scrollOffset, scrollThreshold: scrollThreshold});
                        });
                        window.ias.on('load', function(event){
                            SgyIAS._log({eventName:'load', event: event});
                        });
                        window.ias.on('loaded', function(data, items){
                            SgyIAS._log({eventName: 'loaded', data: data, items: items});
                        });
                        window.ias.on('render', function(items){
                            SgyIAS._log({eventName: 'render', items: items});
                            if (typeof($(items).find('.lof-lazy').lazy) === 'function') {
                                $(items).find('.lof-lazy').lazy({
                                    bind: "event",
                                    delay: 0
                                });


                                // add code here  working ajax add to cart after load more button is pressed


                            }
                        }); 
                        window.ias.on('noneLeft', function(){
                            SgyIAS._log({eventName: 'noneLeft'});
                        });
                        window.ias.on('next', function(url){
                            SgyIAS._log({eventName: 'next', url: url});
                        });
                        window.ias.on('ready', function(){
                            SgyIAS._log({eventName: 'ready'});
                        });
                        if(windowLoadedFlag){
                            $(window).load();
                        }

                        SgyIAS._log('Done loading IAS.');

                    });

                }
            };
            jQueryWaiter.execute(function(){
                SgyIAS.init();

            });
        });


//]]>
</script>
<?php } ?>

Пользовательский код должен быть добавлен там, где этот комментарий

Author: Nolwennig, 2017-11-14

1 answers

Эта проблема уже решена в Magento 2 Загрузите больше скрипта продукта

Вы можете напрямую использовать фиксированный модуль, доступный здесь - https://github.com/harrigo/Magento2-InfiniteScroll

 1
Author: Vivek Kumar, 2017-11-14 09:20:43