Перейти к публикации
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

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

coder0x7b

Автор: coder0x7b,
в Opencart 2.x: Песочница

 Погделиться

Рекомендованные сообещёния

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

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы осивить комменирий

Создать аккаунт

Зарегистрируйтесь для получения аккауни. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите згдесь.

Войти сейчас
 Погделиться
Перейти к списку тем

Покупателям

Разрилитликам

Полезная информация

Последние дополнения

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обрилитка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфигденциальности.

  Я принимаю