MiniShop2: избранные товары

На modstore, есть готовое платное решение msFavorites — компонент реализует функционал создания списков избранного. Рассмотрим как создать похожий функционал: избранных товаров (MiniShop2), своими руками.

Настройка и запуск

Для работы нужен pdoTools (с включенной настройкой: pdotools_fenom_parser = да), MiniShop2 и jQuery.

Создаём плагин msFavoriter со следующим кодом:

<?php
// msFavoriter

switch($modx->event->name) {
	case 'OnPageNotFound':
		switch($_GET['q']){

      // Избранные товары
      case 'msFavoriter':

        if (isset($_POST['id']))

          if (isset($_SESSION['msFavoriter'][$_POST['id']]))
            // - Если товар уже есть, удаление
            unset($_SESSION['msFavoriter'][$_POST['id']]);
          else
            // - Если нет, добавление избранного товара
            $_SESSION['msFavoriter'][$_POST['id']] = $_POST['id'];

        else

          // - Получение количества избранных товаров
          if (isset($_SESSION['msFavoriter']))
            echo count($_SESSION['msFavoriter']);

      	die();
      	break;
    }
}

Вешаем его на событие OnPageNotFound и сохраняем.

Создаём сниппет msFavoriter со следующим кодом кодом:

<?
// msFavoriter
// Вывод количества избранных товаров

if (isset($_SESSION['msFavoriter'])) {
  $result = '';
  foreach ($_SESSION['msFavoriter'] as $key => $value) {
    $result .= $key . ', ';
  }
  return $result;
}else{
  return 0;
}

Создаем и подключаем к сайту js файл main.js со следующим содержимым:

$(function(){
  // msFavoriter
	// - Добавление или удаление избранных товаров
	$(document).on('click', '.msFavoriterToggle', function(){
		msProductId = $(this).parents('.ms2_form').find('[name="id"]').val()
		msFavoriterButton = $(this)

		$.post('/msFavoriter', {'id': msProductId}, function(){
			msFavoriterButton.toggleClass('_active_')
			msFavoriterCount()
		})

		return false
	})

	// - Количество избранных товаров
	function msFavoriterCount(){
		$.post('/msFavoriter', {}, function(data){
			if (data > 0)
				$('#msFavoriter').show().find('strong').text(data)
			else
				$('#msFavoriter').hide()
		})
	}
	msFavoriterCount()
	// msFavoriter x
})

Товары будут храниться в сессии. Можно выводить все избранные товары, кнопки «в избранное» подсвечиваются у товаров уже добавленных в избранное и т.д.

Оформление и вывод на сайте

Вывод кнопки «В избранное»

В карточке товара, в форме:

<form class="ms2_form" method="post">...</form>

создаем кнопку избранного:

<button class="btn btn-info msFavoriterToggle {(!$.session.msFavoriter.$id) ?: '_active_'}">
  <i class="far fa-star"></i>
  <i class="fas fa-star"></i>

  В избранно<span class="fnoactive">е</span><span class="factive">м</span>
</button>

Где <i class="far fa-star"></i> и <i class="fas fa-star"></i> иконки fontaweasome со звёздочками.

Далее добавляем немного CSS:

.msFavoriterToggle i.fas.fa-star, .factive{
    display: none;
}
.msFavoriterToggle._active_ i.fas.fa-star, .factive {
    display: inline-block;
}
.msFavoriterToggle._active_ i.far.fa-star, .fnoactive {
    display: none;
}

Вывод избранных товаров

Создаем страницу, отключаем у нее редактор и помещаем следующий вызов:

<div class="row ms2_products">
    {if $.session.msFavoriter}
      [[!msProducts?
        &tpl=`tpl.msProducts.row`
        &parents=`7`
        &resources=`[[!msFavoriter]]`
        &fields=`price`
        &sortby=`menuindex`
        &sortdir=`ASC`
      ]]
    {else}
      Вы еще не добавили ни одного товара в избранное.
    {/if}
</div>

Где меняем значения tpl и parents под себя.

Вывод ссылки на избранное и вывод количества товаров в избранном

Где то в шапке помещаем такую конструкцию:

<div class="favorites" id="msFavoriter">
  <a href="[[~777]]">
    <i class="far fa-star"></i>
    Избранное (<strong>2</strong>)
  </a>
</div>

Где 777 это id страницы вывода избранных товаров.

Все.