Ajax подгрузка изображений в слайдеры превью товаров

Здравствуйте.
В каталоге товаров хочу заменить изображения превью на слайдеры, как это сделано, например, на Avito.
Как сделать сами слайдеры я понимаю. Но боюсь, что при большом количестве изображений на странице, сильно замедлиться скорость загрузки (т.к. самих товаров много ).
Поэтому хочется подгружать дополнительные слайды аяксом, при наведении мышкой на основное превью. Насколько я вижу, на Avito именно так и сделано:
1. в обычном состоянии:

<div class="photo-slider-photoSlider-IpiW8 photo-slider-aspect-ratio-4-3-Jhpvf">
	<ul class="photo-slider-list-xFf2c">
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
	</ul>
</div>>

2. при наведении на миниатюру:

<div class="photo-slider-photoSlider-IpiW8 photo-slider-aspect-ratio-4-3-Jhpvf">
	<ul class="photo-slider-list-xFf2c">
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>
		<li class="photo-slider-list-item-_fUPr">
			<div class="photo-slider-item-o_UGQ photo-slider-keepImageRatio-NrG6s">
				<img ...>
			</div>
		</li>		
	</ul>
</div>

Решение представляю так, что создается сниппет, который подтягивает еще несколько ссылок на изображения из карточки товара по id (тоже примерно представляю как сделать)… но вызываться он должен именно по ajax при наведении на основную миниатюру.
Сам с ajax не особо дружу, поэтому очень надеюсь на Вашу помощь.

Игорь

10 октября 2021, 18:31

1 336

Комментарии: 6

Роман

11 октября 2021, 14:03

Посмотрите в сторону AjaxSnippet, там есть нужный вам функционал.

Игорь

11 октября 2021, 15:25

в принципе похоже на то, что я хочу, вроде… но только мне ведь нужно вызывать ajax не по клику, а при наведении

Роман

12 октября 2021, 09:10

Там в самом файле snippet.ajaxsnippet.php, можете расширить думаю разберетесь, там ничего сложного нет. Вместо onclick поставить onMouseOver, только скорее всего нужно будет дописать, чтобы каждый раз он не подгружал элементы. При наведении.

Александр Мельник

11 октября 2021, 19:48

здесь написано как получить элемент на странице
learn.javascript.ru/searching-elements-dom
здесь — как добавить событие этому элементу
learn.javascript.ru/introduction-browser-events
здесь — как отправить запрос к вашему сниппету
learn.javascript.ru/fetch

пусть ваш сниппет вернет html верстку слайдера и вы добавите его в нужное вам место.

Игорь

11 октября 2021, 21:08

пусть ваш сниппет вернет html верстку слайдера и вы добавите его в нужное вам место.

Пусть вернет, но хочется какой-то конкретный пример кода для ajax (пусть даже примерный)… об этом и спрашивал ((

Игорь

17 октября 2021, 10:53

Сделал пока так:
1. Создал ресурс ajaxSlider с вызовом сниппета

[[!msGallery? &product=`[[!getContentID]]` &tpl=`tpl.msGallery_cat` &limit=`5`]]

2. [[!getContentID]] — это тоже сниппет, код нашел в интернете

<?php
if(empty($_REQUEST['id'])) return '';
	$id = $_REQUEST['id'];
	return $id;

3. В каталоге вызываю

$(document).ready(function(){ 
$(document).on('mouseover', '.minislider', function () {	
var id = $(this).attr("data-id"); 
var slider = $(this);
if ( slider.hasClass('slideloaded') ) { } else {
		$.ajax({
                type: "POST",
                url: '[[~7]]', 
                data: "id="+id,
                success: function(content){ //alert('#slider-'+id);
                $('#slider-'+id).html(content);
			}
		});
slider.addClass('slideloaded');
}

Вроде все работает, хоть я в js и не селен (от слова совсем)… ))

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Ajax подгрузка изображений в слайдеры превью товаров

Комментарии: 6

Здесь упомянуты