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

Настраиваем карточку товара 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>

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

Оцените статью:

Проголосовало: 55

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

  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 получил, куда «воткнуть» не знаю. Может подскажете как решить проблему?
              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. Я вам скажу стоимость работ, если вас заинтересовало предложение.