Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Не работает скрипт Ajax "Показать ещё"

coder0x7b

Автор: ,
в Opencart 2.x: Пісочниця

 Share

Recommended Posts

coder0x7b Contributor

coder0x7b

Опубліковано:
Опубліковано: (змінено)

Есть сайт -- подопытный
Попытался прикрутить js скрипт AJAX-пагинации по кнопке "Показать ещё"
Кнопка появилась, но при нажатии на неё ничего не происходит. Знатоки, прошу помочь, подскажите в чём ошибка (я несильно шарю)
КОД:

Спойлер

category.tpl
 

Спойлер 


<?php echo $header; ?>
<?php echo $content_top; ?>
<section class="catalog-header">
	<div class="container">
		<div class="row">
			<div class="breadcrumbs col-12">
				<?php $last_breadcrumb = array_pop($breadcrumbs); ?>
				<ul>
					<?php foreach ($breadcrumbs as $breadcrumb) { ?>
						<li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
					<?php } ?>
					<li class="active"><?php echo $last_breadcrumb['text']; ?></li>
				</ul>
			</div>
			<h1 class="col-12"><?php echo $heading_title; ?></h1>
			<div class="catalog-sort col-12 col-md-auto ml-auto mb-3 mb-md-0">
				<div class="dropdown d-flex justify-content-end">
					<button class="dropdown-toggle catalog-sort" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<?php foreach ($sorts as $item) { ?>
							<?php if ($item['value'] == $sort . '-' . $order) { ?>
								<?php echo $text_sort; ?> <?php echo $item['text']; ?>
							<?php } ?>
						<?php } ?>
					</button>
					<div class="dropdown-menu" aria-labelledby="dropdown-sort">
						<?php foreach ($sorts as $item) { ?>
							<?php if ($item['value'] != $sort . '-' . $order) { ?>
								<a class="dropdown-item" href="<?php echo $item['href']; ?>"><?php echo $item['text']; ?></a>
							<?php } ?>
						<?php } ?>
					</div>
				</div>
			</div>
			<div class="catalog-mods col-md-auto d-none d-md-block">
				<button class="catalog-mods_mod1" id="grid3-view">
					<img src="catalog/view/theme/optom/img/icons/mod1.svg" alt="" class="img-svg" />
				</button>
				<button class="catalog-mods_mod2" id="grid4-view">
					<img src="catalog/view/theme/optom/img/icons/mod2.svg" alt="" class="img-svg" />
				</button>
			</div>
			<div class="col-auto catalog-mods__mobile ml-auto mb-3 d-md-none">
				<button class="catalog-mods_mod1" id="grid1-view">
					<img src="catalog/view/theme/optom/img/icons/mod3.svg" alt="" class="img-svg" />
				</button>
				<button class="catalog-mods_mod1" id="grid2-view">
					<img src="catalog/view/theme/optom/img/icons/mod4.svg" alt="" class="img-svg" />
				</button>
			</div>
		</div>
	</div>
</section>
<?php echo $filter; ?>
<section class="catalog">
	<div class="container">
		<div class="row">
			<?php foreach ($products as $product) { ?>
				<div class="product col-12 col-md-6 col-lg-4">
					<div class="product_img">
						<a href="<?php echo $product['href']; ?>">
							<img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" />
							<img class="d-none" src="<?php echo $product['thumb2']; ?>" alt="<?php echo $product['name']; ?>" />
						</a>
						<a href="javascript: void(0);" onclick="cart.add('<?php echo $product['product_id']; ?>');" class="product_banner">
							<p><?php echo $button_cart; ?></p>
							<img src="catalog/view/theme/optom/img/icons/cart.svg" alt="" />
						</a>
					</div>
					<p class="product_name"><?php echo $product['name']; ?></p>
					<div class="wrap">
						<div class="wrap">
							<?php if ($product['special']) { ?>
								<p class="product-price__old"><?php echo $product['price']; ?></p>
								<p class="product-price"><?php echo $product['special']; ?></p>
							<?php } else { ?>
								<p class="product-price"><?php echo $product['price']; ?></p>
							<?php } ?>
						</div>

						
						<div class="wrap">
							<a href="javascript:void(0);" onclick="modules.quick_view('<?php echo $product['product_id']; ?>');"><img class="product_look" src="catalog/view/theme/optom/img/icons/look.svg" alt="Смотреть" /></a>
							<?php if (!$logged) { ?>
								<a href="javascript:void(0);" onclick="modules.ajax_auth()"><img class="product_favorite" src="catalog/view/theme/optom/img/icons/favorite.svg" alt="<?php echo $button_wishlist; ?>" /></a>
							<?php } else { ?>
								<?php if(isset($AllWishlist)) { ?>
									<?php if(in_array($product['product_id'], $AllWishlist)) { ?>
										<a href="javascript:void(0);" onclick="wishlist.remove('<?php echo $product['product_id']; ?>')"><img class="product_favorite" src="catalog/view/theme/optom/img/icons/favorite_ok.svg" alt="<?php echo $button_wishlist; ?>" /></a>
									<?php } else { ?>
										<a href="javascript:void(0);" class="wl" onclick="wishlist.add('<?php echo $product['product_id']; ?>')"><img id="<?php echo $product['product_id']; ?>" class="product_favorite" src="catalog/view/theme/optom/img/icons/favorite.svg" alt="<?php echo $button_wishlist; ?>" /></a>
									<?php } ?>
								<?php } else { ?>
									<a href="javascript:void(0);" class="wl" onclick="wishlist.add('<?php echo $product['product_id']; ?>')"><img id="<?php echo $product['product_id']; ?>" class="product_favorite" src="catalog/view/theme/optom/img/icons/favorite.svg" alt="<?php echo $button_wishlist; ?>" /></a>
								<?php } ?>

								<script>
									$(document).ready(function() {
										$('#'+<?php echo $product['product_id']; ?>+'').bind("click", function() {
										    $('#'+<?php echo $product['product_id']; ?>+'').attr("src","catalog/view/theme/optom/img/icons/favorite_ok.svg");
										});
										// $('#'+product_id+'').attr("src","catalog/view/theme/optom/img/icons/favorite_ok.svg");
										// $('#p-' + product_id).attr("src","catalog/view/theme/optom/img/icons/favorite_ok.svg");
									});
								</script>	
						    <?php } ?>
						</div>
					</div>
					<div class="wrap hover-mobile">
						<?php foreach ($product['options'] as $option) { ?>
							<div class="product-size product-size__hover">
								<p><?php echo $option['name']; ?>:</p>
								<?php foreach ($option['product_option_value'] as $product_option_value) { ?>
									<p><?php echo $product_option_value['name']; ?></p>
								<?php } ?>
							</div>
							<?php if (!$product['upc']) { ?>
								<p class="product-code product-code__hover"></p>
							<?php } else { ?>
								<p class="product-code product-code__hover">
									<?php echo $text_model; ?> <?php echo $product['upc']; ?>
								</p>
							<?php } ?>
						<?php } ?>
					</div>
				</div>
			<?php } ?>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="text-right"><?php echo $pagination; ?></div>
			</dov>
		</div>
		
	</div>
</section>
<?php echo $content_bottom; ?>
<?php echo $footer; ?>

 


JS скрипт
 

Спойлер 


document.addEventListener("DOMContentLoaded", function(event) { 



var pagination_exist = true; // оставить пагинацию и добавить кнопку
var button_more = true; // true наличие кнопки "загрузить ещё" false - автозагрузка при прокрутке в конец страницы
var arrow_top = true;// - выводить стрелочку "вверх"

var button_more_html = '<div class="text-center"><a href="#" class="load_more">Загрузить ешё</a></div>';
var button_more_style = '<style>a.load_more {display:inline-block; margin:0 auto 20px auto; padding: 0.5em 2em; border: 1px solid #069; border-radius: 5px; text-decoration:none; text-transform:uppercase;}</style>';
var arrow_top_html = '<a id="arrow_top" style="display:none;" onclick="scroll_to_top();"></a>';
var additional_style = '<style>\
#ajax_loader{width:100%;height:30px;margin-top:15px;text-align:center;border:none!important;}\
#arrow_top{background: url("/image/chevron_up.png") no-repeat transparent;background-size: cover;position: fixed;bottom: 50px;right: 15px;cursor: pointer;height: 50px;width: 50px;}\
</style>';
$('head').append(additional_style);

var top_offset = 100; // высота отступа от верха окна, запускающего arrow_top
var window_height = 0; // высота окна
var product_block_offset = 0; // отступ от верха окна блока, содержащего контейнеры

var product_block = '.catalog'; // определяет div, содержащий товары
var pages_count = {}; // счетчик массива ссылок пагинации

var pages = []; // массив для ссылок пагинации
var waiting = false;

function getNextProductPage(pages, pages_count) {
    if (waiting) return;
    if (pages_count.val >= pages.length) return;
    waiting = true;
    $(product_block).parent().after('<div id="ajax_loader"><img src="/image/ajax-loader-horizontal.gif" /></div>');
    $.ajax({
        url:pages[pages_count.val], 
        type:"GET", 
        data:'',
        success:function (data) {
            $data = $(data);
            $('#ajax_loader').remove();
            if ($data) {         
                if ($data.find('.catalog').length > 0) {
                    $(product_block).parent().append($data.find('.catalog').parent().html());
                    if (product_block == '.catalog') {
                        $('#grid-view').trigger('click')};
                    } else {
                        $(product_block).parent().append($data.find('.catalog').parent().html());
                        if (product_block == '.catalog') {$('#list-view').trigger('click')};
                    }
                    if (pagination_exist) {
                        $('.pagination').html($data.find('.pagination'));
                    }
                }
                waiting = false;
            }
	});
	if (pages_count.val + 1 >= pages.length) { $('.load_more').hide(); };
	pages_count.val++;
}

function getProductBlock() {
    if ($('.catalog').length > 0) {
        product_block = '.catalog';
    } else {
        product_block = '.catalog';
    }
    return product_block;
}

window.scroll_to_top = function () {
    $('html, body').animate({
		scrollTop: 0
	}, 300, function() {
		$('.arrow_top').remove();
	});  
}

    window_height = $(window).height();
    product_block = getProductBlock();
    var button_more_block = button_more_style + button_more_html;

    if(arrow_top) {$('body').append(arrow_top_html); arrow_top = $('#arrow_top'); }

    if ($(product_block).length > 0) {
        product_block_offset = $(product_block).offset().top;
	var href = $('.pagination').find('li:last a').attr('href');
        $('.pagination').each(function(){
			if (href) {
				TotalPages = href.substring(href.indexOf("page=")+5);
				First_index = $(this).find('li.active span').html();
				i = parseInt(First_index) + 1;
				while (i <= TotalPages) {
					pages.push(href.substring(0,href.indexOf("page=")+5) + i);
					i++;
				}
			}		
        });	
        $(window).scroll(function(){
            if (arrow_top) {
                if ($(document).scrollTop() > top_offset) {
                    $('#arrow_top').show();
                } else {
                    $('#arrow_top').hide();
                } 
            }
        });
        if (button_more && href) {
            $('.pagination').parent().before(button_more_block);
            if (!pagination_exist) {
                $('.pagination').parent().remove();
            } else {
                $('.pagination').parent().find('.text-right').remove();
            }
            $('.load_more').click( function(event) {
                event.preventDefault();
                getNextProductPage(pages, pages_count);
            });
        } else if (href) { 
            $('.pagination').parent().hide();
            $(window).scroll(function(){
                product_block = getProductBlock();
                product_block_height = $(product_block).parent().height();
                if (pages.length > 0) {
                    if((product_block_offset+product_block_height-window_height)<($(this).scrollTop())){
                        getNextProductPage(pages, pages_count);
                    }
                }
            });
        }
    }
});

 

 

 

Надеюсь на вашу помощь, заранее спасибо

Змінено користувачем coder0x7b
Форматирование
Надіслати
Поділитися на інших сайтах

DariyGRAY Proficient

DariyGRAY

Опубліковано:
Опубліковано:

У вас ошибка в скрипте catalog/view/theme/optom/js/main.js в строке 647. Попробуйте заменить  

n(".menu-mobile_content__active")

на 

$(".menu-mobile_content__active")

 

  • +1 1
Надіслати
Поділитися на інших сайтах
1

DariyGRAY Proficient

DariyGRAY

Опубліковано:
Опубліковано:
44 минуты назад, coder0x7b сказал:

Попытался прикрутить js скрипт AJAX-пагинации по кнопке "Показать ещё"
Кнопка появилась, но при нажатии на неё ничего не происходит.

Что за скрипт и как вы пытаетесь его прикрутить? Предоставьте больше информации и расскажите что вы уже сделали. Вряд ли найдутся желающие проделать всю работу за вас. Видно пока только что вы подключили скрипт catalog/view/theme/optom/js/ajax-product-load__by__0x7b.js

Надіслати
Поділитися на інших сайтах
1

coder0x7b Contributor

coder0x7b

Опубліковано:
  • Автор
Опубліковано:

@DariyGRAY
1. Скрипт подключён
2. Кнопка в категориях появилась, но она не отрабатывает (ничего не происходит по нажатию)
Т.к. не знаю в чём именно проблема, предоставил код скрипта и код вью category.tpl

Надіслати
Поділитися на інших сайтах

DariyGRAY Proficient

DariyGRAY

Опубліковано:
Опубліковано:
5 часов назад, coder0x7b сказал:

var href = $('.pagination').find('li:last a').attr('href'); $('.pagination').each(function(){ if (href) { TotalPages = href.substring(href.indexOf("page=")+5); First_index = $(this).find('li.active span').html(); i = parseInt(First_index) + 1; while (i <= TotalPages) { pages.push(href.substring(0,href.indexOf("page=")+5) + i); i++; } } });

 

Для начала я бы заменил этот участок кода на что-то типа

  

var last = $('.pagination').find('li:last');
var prev = last_href.prev("li").find('a');
var href = prev.attr('href');

$('.pagination').each(function(){
	if (href) {
		TotalPages = href.substring(href.indexOf("page-")+5);
		First_index = $(this).find('li.active span').html();
		i = parseInt(First_index) + 1;
		while (i <= TotalPages) {
			pages.push(href.substring(0,href.indexOf("page-")+5) + i);
			i++;
		}
	}
});

 

Надіслати
Поділитися на інших сайтах
1

DariyGRAY Proficient

DariyGRAY

Опубліковано:
Опубліковано:
8 минут назад, coder0x7b сказал:

@DariyGRAY
кнопка пропала

 

А вы вообще не читаете что я написал в js? Как можно делать что-то в магазине ничего при этом не понимая? Дело ваше, конечно. Но... 

var last = $('.pagination').find('li:last');
var prev = last.prev("li").find('a');
var href = prev.attr('href');

$('.pagination').each(function(){
	if (href) {
		TotalPages = href.substring(href.indexOf("page-")+5);
		First_index = $(this).find('li.active span').html();
		i = parseInt(First_index) + 1;
		while (i <= TotalPages) {
			pages.push(href.substring(0,href.indexOf("page-")+5) + i);
			i++;
		}
	}
});

Но это не окончательные правки

Надіслати
Поділитися на інших сайтах
1

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду