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 } ?>
Пользовательский код должен быть добавлен там, где этот комментарий
1 answers
Эта проблема уже решена в Magento 2 Загрузите больше скрипта продукта
Вы можете напрямую использовать фиксированный модуль, доступный здесь - https://github.com/harrigo/Magento2-InfiniteScroll