UMI.CMS – создание списка избранных (отложенных) товаров

admin 27.08.2020

Список будет храниться в local storage браузера. При входе с другого устройства/браузера пользователь не увидит своего избранного.

Добавляем в блок, в котором будет выводиться количество товаров в избранном, необходимы атрибуты:

<span class="js_list_count" data-list="favorite" id="js_favorite_block">0</span>

Добавляем в кнопку “Добавить в избранное необходимые атрибуты”:

<span class="js_manage_list" data-list="favorite" data-type="add" data-id="<?=$id?>"></span>

Добавляем javascript переменные и функции для управления списком:

/** @type {string} class блока c количеством товара в сравнении или избранном */
const listCounterClass = '.js_list_count';
/** @type {string} class кнопки добавления/удаления в избранное, сравнение */
const listManageButtonClass = '.js_manage_list';

/** Проставляет количество товаров в сравнении, избранном и тп */
setListCount() {
	$(document).find($(listCounterClass)).each(function () {
		let count = 0;
		const list = $(this).data('list');
		const listArray = localStorage.getItem(list);
		if (listArray !== null) {
			count = JSON.parse(listArray).length;
		}
		$(this).text(count);
	});
},

/** Проставляет состояние кнопок Сравнения, Избранного... */
setListButton() {
	$(document).find($(listManageButtonClass)).each(function () {
		const $this = $(this);
		const id = $this.data('id');
		// const type = $this.data('type');
		const list = $this.data('list');
		let listArray = localStorage.getItem(list);
		if (listArray !== null) {
			let newArray = JSON.parse(listArray);
			let index;
			for (let i = 0; i < newArray.length; i++) {
				if (newArray[i] === id) {
					index = i;
					break;
				}
			}
			if (index !== undefined) {
				$this.data('type', 'remove');
				$this.attr('title', getLabel(`js-title-remove-from-${list}`));
				// $this.find('span').text(getLabel(`js-remove-from-${list}`));
				$this.addClass('selected');
			}
		}
	});
},

Добавляем листнер клика по кнопке добавления/удаления.

/** Инициализирует нажатие на ссылку добавления/удаления товара из сравнения, избранных и тп */
function initAddToLIstClickHandler() {
	$(document).on('click', listManageButtonClass, function (e) {
		e.preventDefault();
		const $this = $(this);
		$this.find('span').fadeOut(300);
		const id = $this.data('id');
		const type = $this.data('type');
		const list = $this.data('list');
		const blockId = `#js_${list}_block`;
		let listArray = localStorage.getItem(list);
		let newArray = [];
		let count = 0;
		let index;
		// const link = $(this).attr('action');
		if (type === 'add') {
			if (listArray === null) {
				newArray = [id];
				count = 1;
			} else {
				newArray = JSON.parse(listArray);
				for (let i = 0; i < newArray.length; i++) {
					if (newArray[i] === id) {
						index = i;
						break;
					}
				}
				if (index === undefined) {
					newArray.push(id);
				}
				count = newArray.length;
			}
		} else if (type === 'remove') {
			if (listArray !== null) {
				newArray = JSON.parse(listArray);
				for (let i = 0; i < newArray.length; i++) {
					if (newArray[i] === id) {
						index = i;
						break;
					}
				}
				if (index !== undefined) {
					newArray.splice(index, 1);
				}
				count = newArray.length;
			}
		}
		localStorage.setItem(list, JSON.stringify(newArray));
		if ($(blockId).length) {
			$(blockId).text(count);
		}
		if (type === 'add') {
			$this.data('type', 'remove');
			// $this.find('span').text(getLabel(`js-remove-from-${list}`));
			// $this.attr('title', getLabel(`js-title-remove-from-${list}`)).tooltip('_fixTitle').tooltip('show');
		} else {
			$this.data('type', 'add');
			// $this.find('span').text(getLabel(`js-add-to-${list}`));
			// $this.attr('title', getLabel(`js-title-add-to-${list}`)).tooltip('_fixTitle').tooltip('show');
		}
		$this.toggleClass('selected');

		return false;
	});
}

При загрузке стрвницывызываем функции:

setListCount();
setListButton();

После ajax загрузки объектов вызываем:

setListButton();

Вывод списка на отдельной странице рассмотрим позднее.

Comments 0

Добавить комментарий Отменить ответ