Настраиваем карточку товара miniShop2

Сейчас мы с вами выведем галерею товара. Галерея по умолчанию в miniShop2 подходит под наш шаблон практически идеально, поэтому мы будем использовать стандартное решение.

Для начала нам нужно загрузить изображения в галерею товара:

И затем вызовем сниппет msGallery в шаблоне “Товар” на месте нашей галереи:

И увидим, что у нас получилась следующая картина:

Сейчас выведем некоторые параметры в карточку товара. Начнем с бренда. Для того, чтобы его выбрать необходимо перейти в “Приложения”->”miniShop2”->”Настройки” и перейти на вкладку “Производители товаров”. Создайте бренд Apple:

Теперь на странице редактирования товара можно выбрать бренд “Apple”. Также установите цену, текущую и старую. Кроме того, можете написать “Аннотацию” и “Содержимое ресурса”.

Теперь в шаблоне “Товар” вызовем то, что мы только что вбили в базу и реализуем добавление в товара в корзину. Я приведу кусок кода с вызовами тех элементов, которые мы заполнили:

<div class="no-margin col-xs-12 col-sm-6 col-md-5 gallery-holder">
[[msGallery]]
</div>
<div class="no-margin col-xs-12 col-sm-7 body-holder">
<div class="body" id="msProduct">
  <form class="form-horizontal ms2_form" method="post">
	<input type="hidden" name="id" value="[[*id]]"/>
	<div class="star-holder inline"><div class="star" data-score="4"></div></div>
	<div class="availability"><label>Availability:</label><span class="available">  in stock</span></div>
	
	<div class="title"><a href="[[~[[*id]]]]">[[*pagetitle]]</a></div>
	<div class="brand">[[+vendor.name]]</div>

	<div class="social-row">
	  <span class="st_facebook_hcount"></span>
	  <span class="st_twitter_hcount"></span>
	  <span class="st_pinterest_hcount"></span>
	</div>
	
	<div class="buttons-holder">
	  <a class="btn-add-to-wishlist" href="#">add to wishlist</a>
	  <a class="btn-add-to-compare" href="#">add to compare list</a>
	</div>
	
	<div class="excerpt">
	  <p>[[*introtext]]</p>
	</div>
	
	<div class="prices">
	  <div class="price-current">[[+price]] руб.</div>
	  <div class="price-prev">[[+old_price]] руб.</div>
	</div>
	
	<div class="qnt-holder">
	  <div class="le-quantity">
		  <a class="minus" href="#reduce"></a>
		  <input name="count" readonly="readonly" type="text" value="1" />
		  <a class="plus" href="#add"></a>
	  </div>
	  <button type="submit" class="le-button huge" name="ms2_action" value="cart/add">В корзину</button>
	</div>
  </form>
</div>

Заметили форму? Будьте внимательней с полями формы. Содержимое ресурса мы вызовем во вкладке ниже. Заметил, что некоторые стили у нас слетели, будем править. И могу сказать, что теперь у нас работает добавление в корзину! Поздравляю!

Настраиваем карточку товара miniShop2

0 Число голосов: 12
3
5
1
12

Комментарии ()

  1. Артем 02 марта 2017, 15:28(Комментарий был изменён) # 0
    Отличный урок! Очень хотелось бы подробнее видео по этой теме. Добавление в корзину есть, осталось управления корзиной и осуществления заказов гостю, без регистрации чтобы оформлять заказ, можете сделать такой урок? Было бы просто супер!
    1. Петропавловский Артем 02 марта 2017, 15:35 # 0
      Все будет по порядку. Следующий наш шаг — это реализация корзины. Затем сделаем вывод каталога, потом фильтры по товарам.
      1. Артем 02 марта 2017, 17:22 # 0
        Ура! Ждем))
    2. Артур 03 марта 2017, 02:08 # 0
      Вопросик по шаблончику. Подскажите пожалуйста там текст когда вводишь постоянно начинается с большой буквы, как это исправить? пишу в меню названия, и там каждое слово с большой буквы…
      1. Петропавловский Артем 03 марта 2017, 07:54 # 0
        Убрать везде в стилях
        text-transform: capitalize;
      2. Андрей 27 марта 2017, 19:26 # 0
        Здравствуйте, есть ли возможность добавлять доп. поля для заполнения в товаре? Учусь по другому шаблону, там есть 3 поля ещё «хранение, применение, особенности продукта». Возможно их заполнить через добавление товара?
        1. Петропавловский Артем 27 марта 2017, 19:40 # 0
          Конечно, есть. Вы можете сделать это тремя путями:
          1) Создать обычное TV-поле2) Сделать расширение класса продукта miniShop23) В уроке про настройку фильтров мы добавляли опции к товарам
        2. Александр 05 мая 2017, 00:33 # 0
          Здравствуйте, подскажите пожалуйста почему галерея не работает? Точнее картинки появляются, но нет js. Ссылка на скрин http://uid.me/aleksandr_nenashev7
          1. Александр 06 мая 2017, 00:53 # 0
            Решено, обновил minishop2
            1. Михаил 19 мая 2017, 12:38 # 0
              Здравствуйте, та же проблема с галереей что в Александра и, minishop2-самый последний, даже обновлял — не помогло. http://mmd.com.ua/support/2017-05-19_122921.png
              1. Петропавловский Артем 19 мая 2017, 12:44 # 0
                Это значит, что не подгружаются скрипты. Что пишет браузер в консоли? jQuery подключен?
                1. Михаил 23 мая 2017, 20:02 # 0
                  Да выдает два предупреждения:Google Maps API warning: NoApiKeys и: Google Maps API warning: SensorNotRequired а потом ошибка:Google Maps API error: MissingKeyMapError js?sensor=false&language=en:35Скрин: http://mmd.com.ua/support/2017-05-23_195638.pngКак с этим бороться? По ссылке гугла перешел, свой KeyMap получил, куда «воткнуть» не знаю. Может подскажете как решить проблему?
                  1. Дмитрий 21 апреля 2023, 14:11(Комментарий был изменён) # 0
                    Понимаю что поздно написал. Но может кому ни будь помоет в чанк scripts добавьте скрипты для fotoram. fotorama.io
              2. Соломон 06 июня 2017, 13:40 # 0
                Артем, добрый день! Спасибо за прекрасные уроки. Подскажите, пожалуйста, возможно ли настроить msGallery так, чтобы при увеличении картинки, изображение показывалось на 100% (при условии, что его разрешение меньше разрешения видимой части браузера), а не растягивалось полностью на весь экран? И где можно настроить цвет и прозрачность фона под увеличенной картинкой? Вопрос, конечно, про то, где почитать про эти настройки)). Заранее спасибо.
                1. Петропавловский Артем 06 июня 2017, 13:46 # 0
                  Почитать можно здесь. Там где-то в комментариях приводили вот такой код:
                  $('.fotorama').on('fotorama:fullscreenenter', function() {
                  $(this).data('fotorama').setOptions({fit: 'contain'});
                  });
                  
                  $('.fotorama').on('fotorama:fullscreenexit', function() {
                  $(this).data('fotorama').setOptions({fit: 'cover'});
                  });
                2. rulan 17 июня 2017, 02:26 # 0
                  один вопрос- как вывести товары как в верстке (смотрите скрин https://yadi.sk/i/x_VT7hCW3KCkAd), когда добавляю товар они идут под предыдущим, пробовал флоат лефт не помогает?
                  1. Nick 04 августа 2017, 22:13 # 0
                    Добрый. С удовольствием смотрю Ваши уроки. Спасибо за труд! Появился в процессе вопрос. А можно как то менять сумму в зависимости от количества товара? Не в корзине а прямо в карточке товара?
                    1. Василий 10 августа 2017, 01:24 # 0
                      Артём доброго времени суток, а как можно реализовать ограничение на добавление «в корзину» (доступно в наличии) по остатку: допустим в наличие у нас осталось «12» iPhone_6, а iPhone_5 осталось всего «2», (помимо есть другие товары, которые также с остатком [[+count_availability]]), следовательно нужно, чтобы больше этого tv поля не добавлялось в корзину. Где и, как это можно реализовать?
                      1. Nick 08 сентября 2017, 14:44 # 0
                        Возможно Вам подойдет дополнение Владимира? msOptionsPrice2
                      2. Василий 10 августа 2017, 16:32 # 0
                        Пробовал так:
                        [[+count_availability:el=`[[+count_availability]]`:then=`
                        	  <input type="hidden" name="id" value="[[+id]]" />
                        	  <input type="hidden" name="count" value="1">
                        	  <input type="hidden" name="options" value="[]"/>`]]
                        
                        Пишет — «ошибка идентификатора товара» в чанке tpl.msProducts.grid, и товар добавить никак, может быть в кнопке надо js прописать onclick="" но ни знаю как. Подскажите пожалуйста.
                        1. Василий 11 августа 2017, 13:45 # 0
                          	  <input type="hidden" name="id" value="[[+id]]"/>
                          	  <input type="hidden" id="count" name="count" min="0" max="[[+count_availability]]"  data-availability="[[+count_availability]]" onchange="isright(this);" onKeyUp="if(this.value>numlimit){this.value=oldvalue;alert('Неа!');}else{oldvalue=this.value;}" value="[[+count_availability:notempty=`1`]]">
                                <input type="hidden" name="options" value="[]" />
                                
                          	  [[-<input type="hidden" name="count" value="1">]]
                          	  [[-<input type="text" name="count" size=16 class="num_only" value="15" onkeyup="this.value=this.value.replace(/[^0-9]+/g,''); isright(this);">]]
                          <script>
                          function isright(obj)
                           {
                           var value= +obj.value.replace(/\D/g,'')||0;
                           var min = +obj.getAttribute('min');
                           var max = +obj.getAttribute('max');
                           obj.value = Math.min(max, Math.max(min, value));
                           }
                           
                           	numlimit = 10; // tut postavish limit
                          	var availability = $("#count").data("availability");
                          	window.onload = function()
                          	{
                          		var oldvalue = document.getElementById('count').value;
                          	}
                          </script>
                          
                          Пробовал по всякому, так и не решил эту проблему.
                          1. Василий 13 августа 2017, 22:18(Комментарий был изменён) # 0
                            Артём, привет. Так и не нашёл выход из ситуации. Я не силён в js и боюсь трогать. Как расширить ни знаю.Есть default.js в котором:
                            miniShop2.controller = function () {
                                    var self = this;
                                    switch (self.sendData.action) {
                                        case 'cart/add':
                                            miniShop2.Cart.add();
                                            break;
                                        ...
                            
                            Но ведь надо сделать ограничение где максимальное число, то есть проверку на тв. в котором сохранено кол-во. А как?
                                   $this->config = array_merge(array(
                                        'cart' => & $_SESSION['minishop2']['cart'],
                                        'max_count' => $this->modx->getOption('ms2_cart_max_count', null, 1000, true),
                                        'allow_deleted' => false,
                                        'allow_unpublished' => false,
                                    ), $config);
                            
                            Как ограничить добавление товара в Modx Revolution имея тв поле остаток?
                            1. Петропавловский Артем 14 августа 2017, 09:03 # 0
                              Я могу вам помочь и рассказать принципы, на которых все строится. Напишите нам на почту или в скайп — mot9i_ami. Я вам скажу стоимость работ, если вас заинтересовало предложение.
                            2. андрей 22 декабря 2017, 19:59 # 0
                              Добрый вечер, не подскажете, где изменить валюту? Заменил «руб.» в Управлении словарями, но все равно показывается символ рубля…
                              1. Александр 28 апреля 2018, 10:26(Комментарий был изменён) # 0
                                В input нужно добавить class=«counter» чтобы работало изменение количества товара input name=«count» readonly=«readonly» type=«text» class=«counter» value=«1»
                                1. Роман 08 мая 2018, 22:29 # 0
                                  С Днем Победы!!!
                                  Все круто! Спасибо!
                                  1. Дмитрий 25 августа 2019, 09:37(Комментарий был изменён) # 0
                                    Артем, спасибо за отличный материал! Вопрос: При добавлении товара в корзину страница обновляется(товар добавляется), если на обновленной странице еще раз «добавить товар в корзину» страница уже не обновляется, но товар в корзину суммируется. В чем может быть причина обновления страницы?код кнопки:
                                    <button type="submit" class="btn btn--primary" name="ms2_action" value="cart/add">
                                    [[%ms2_frontend_add_to_cart]]
                                    </button>
                                    1. Мария 25 августа 2019, 21:41(Комментарий был изменён) # 0
                                      Здравствуйте, а подскажите пожалуйста, если не сложно у меня вот цена выводится буквами Р, а мне надо руб dverishop-spb.ru/ потому что яндекс этот значок не понимать и пишет вопросительный знак вместо единицы измерения, где можно отредактировать Р на руб?сайт на Modx revo
                                      1. Вероника 09 декабря 2019, 09:38 # 0
                                        Добрый день. Спасибо за урок, круто. У меня вопрос, в чем может быть причина, при добавлении в корзину, выскакивает сначала одно сообщение, что 1 товар добавлен в корзину, а затем следующее, что корзина изменена на 2 товара и в корзине лежит 2 товара, подскажите в каком направлении копать, уже мозги набикрень.
                                        <div class="quantity">
                                        <div class="pro-qty">
                                        <input type="number" name="count" id="product_price" class="form-control" value="1"/>
                                        </div>
                                        </div>
                                        
                                        1. Вероника 11 декабря 2019, 10:25 # 0
                                          Все банально и просто оказалось, не обратил внимание на то, что у меня 2 default.js, удалил и все заработало как часики. Спасибо за урок.
                                        2. Руслан 03 июля 2020, 21:36(Комментарий был изменён) # 0
                                          пытался реализовать переключали как у вас на количество, но почему то не работаю (Как вы их реализовали?не нашёл урока по ним ((
                                          <button class="minus dec count__form-btn input_count_action" href="#reduce" ></button>
                                          <span class="field-arr up"></span>
                                          <input name="count" type="number" class="count__form-el  count__form-val" name="count" value="{$product.count}" />
                                          <span class="field-arr down"></span>
                                          <button class="plus count__form-btn input_count_action" href="#add"></button>
                                          
                                          У вас они так сделаны!Как реализовать не знаю уже ((
                                          					<a class="minus" href="#reduce"></a>
                                          					<input name="count" readonly="readonly" class="counter" type="text" value="1" />
                                          					<a class="plus" href="#add"></a>
                                          
                                          1. Кирилл 20 января 2021, 16:44 # 0
                                            Приветствую, такой вопрос по карточке товара:Как сделать так что бы пользователь мог вводить сам нужное ему кол-во. (Не пользуясь кнопками)И ещё один вопросик:Если я работаю с оптовыми товарами, то как можно реализовать минимально 100 шт. или 200 шт. минимум
                                            1. Никита 29 марта 2021, 20:54 # 0
                                              Как вывести одно изображение, к примеру, сформированную из json 'small'? Читал документацию и ничего не понял....=(
                                              1. Петя 03 апреля 2021, 01:16 # 0
                                                Фотораму и дурак выведет, слабо показать натяжку самой галереи из шаблона?
                                                1. Петропавловский Артем 03 апреля 2021, 08:58 # 0
                                                  Я думаю, не сложно взять и заменить стандартные чанки своими (в Fenom'енальном курсе показано как). Если вам необходим функционал перелистывания изображений при выборе опций (msOptionsPrice), то вы можете переопределить default.js своим, прописав необходимые методы.
                                                2. Валентина 05 января 2023, 01:05 # 0
                                                  По этой ссылке галлерея отказывается работать, посмотрела подключение всех библиотек ошибок не нашла(
                                                  1. Inkognito 11 октября 2024, 04:32 # 0
                                                    При вставке тега галереи показывает не так как на примере. Вместо всплывания открывает в отдельном окне и нет показа главной фотки. Так же не показывает перелистывание фоток. Уже несколько раз пересмотрел пример в уроке и в уроке на ютубе. Код такой же.

                                                    Наши клиенты

                                                    Многие компании уже доверяют нам. Будьте в их числе!

                                                    Хотите реализовать проект?

                                                    Контакты

                                                    Напишите нам - мы расскажем вам много интересного!


                                                    Пермь, шоссе Космонавтов 252, офис 218