Вывод товаров в категории miniShop2

Настало время вывести наши товары в категории. Для этого наполним наш магазин еще несколькими товарами и создадим еще одну категорию. Например, я добавил следующие товары: Samsung Galaxy S4, LG K10 – этих пока достаточно. Следующее, что нам нужно сделать – это создать дополнительную категорию товаров для тестов. Например, пусть это будет “Аудио-Плееры”. В последнюю категорию нам нужно добавить хотя бы парочку товаров.

Добавили? Теперь можно двигаться дальше. Перейдем на страницу категории и посмотрим какие чанки нам предстоит сделать:

Вывод товаров в категории miniShop2

Вывод товаров в категории miniShop2

В итоге мы с вами должны получить 2 чанка. Создавать чанки мы с вами будем так же, по аналогии с чанками в корзине.

Итак, первый чанк – gridProductTpl — у меня получился следующий:

<div class="col-xs-12 col-sm-4 no-margin product-item-holder hover">
  <div class="product-item">
    <form method="post" class="ms2_form">
	  <input type="hidden" name="id" value="{$id}">
	  <input type="hidden" name="count" value="1">
	  <input type="hidden" name="options" value="[]">
	  <div class="ribbons">
		{if $favorite?}
		<div class="ribbon red"><span>Скидка</span></div>
		{/if}
		{if $new?}
		<div class="ribbon blue"><span>Новый!</span></div>
		{/if}
		{if $popular?}
		<div class="ribbon green"><span>Популярный</span></div>
		{/if}
	  </div>
	  <div class="image">
		{if $image?}
	  	<img src="assets/images/blank.gif" data-echo="{$image}" alt="{$pagetitle}" title="{$pagetitle}"/>
	  {else}
	  <img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
	  srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
	  alt="{$pagetitle}" title="{$pagetitle}"/>
	  {/if}
	  </div>
	  <div class="body">
		<!--<div class="label-discount green">-50% sale</div>-->
		<div class="title">
		  <a href="{$id | url}">{$pagetitle}</a>
		</div>
		<div class="brand">{$_pls['vendor.name']}</div>
	  </div>
	  <div class="prices">
	    {if $old_price?}
		<div class="price-prev">{$old_price} <i class="fa fa-ruble"></i></div>
		{/if}
		<div class="price-current pull-right">{$price} <i class="fa fa-ruble"></i></div>
	  </div>
	  <div class="hover-area">
		<div class="add-cart-button">
		  <button type="submit" name="ms2_action" value="cart/add" class="le-button">В корзину</button>
		</div>
		<div class="wish-compare">
		  <a class="btn-add-to-wishlist" href="#">add to wishlist</a>
		  <a class="btn-add-to-compare" href="#">compare</a>
		</div>
	  </div>
	  </form>
	</div>
  </div>

Если вывести товары на странице категории, с помощью pdoPage и msProduct, прописав вызов pdoTools в шаблоне категории:

<div class="product-grid-holder">
	<div class="row no-margin">
		[[!pdoPage?
		&element=`msProducts`
		&tpl=`gridProductTpl`
		&limit=`12`
		]]
	</div>
</div>
<div class="pagination-holder">
	<div class="row">						
		<div class="col-xs-12 col-sm-6 text-left">
			[[!+page.nav]]
		</div>
		<div class="col-xs-12 col-sm-6">
			<div class="result-counter">
				Showing <span>1-9</span> of <span>11</span> results
			</div>
		</div>						
	</div>
</div>

Мы увидим, что у нас снова слетели стили. Я их поправил и в конце следующей статьи я приведу код CSS, который я прописал для нашего интернет-магазина. Итак, мы вывели продукты сеткой. Осталось вывести линейно. Чанк listProductTpl у меня получился следующий:

<div class="product-item product-item-holder">
	<form method="post" class="ms2_form">
	  <input type="hidden" name="id" value="{$id}">
	  <input type="hidden" name="count" value="1">
	  <input type="hidden" name="options" value="[]">
	  <div class="ribbons">
		{if $favorite?}
		<div class="ribbon red"><span>Скидка</span></div>
		{/if}
		{if $new?}
		<div class="ribbon blue"><span>Новый!</span></div>
		{/if}
		{if $popular?}
		<div class="ribbon green"><span>Популярный</span></div>
		{/if}
	  </div>
	  <div class="row">
		<div class="no-margin col-xs-12 col-sm-4 image-holder">
		  <div class="image">
			{if $image?}
			<img src="assets/images/blank.gif" data-echo="{$image}" alt="{$pagetitle}" title="{$pagetitle}"/>
			{else}
			<img src="{'assets_url' | option}components/minishop2/img/web/ms2_small.png"
			srcset="{'assets_url' | option}components/minishop2/img/web/ms2_small@2x.png 2x"
			alt="{$pagetitle}" title="{$pagetitle}"/>
			{/if}
		  </div>
		</div><!-- /.image-holder -->
		<div class="no-margin col-xs-12 col-sm-5 body-holder">
		  <div class="body">
			<div class="label-discount clear"></div>
			<div class="title">
			  <a href="{$id | url}">{$pagetitle}</a>
			</div>
			<div class="brand">{$_pls['vendor.name']}</div>
			<div class="excerpt">
			  <p>{$introtext}</p>
			</div>
			<div class="addto-compare">
			  <a class="btn-add-to-compare" href="#">add to compare list</a>
			  <a class="btn-add-to-wishlist" href="#">add to wishlist</a>
			</div>
		  </div>
		</div>
		<div class="no-margin col-xs-12 col-sm-3 price-area">
		  <div class="right-clmn">
			<div class="price-current">{$price} <i class="fa fa-ruble"></i></div>
			{if $old_price?}
			<div class="price-prev">{$old_price} <i class="fa fa-ruble"></i></div>
			{/if}
			<div class="availability"><label>availability:</label><span class="available">  in stock</span></div>
			<button type="submit" name="ms2_action" value="cart/add" class="le-button">В корзину</button>
		  </div>
		</div>
	  </div>
	</form>
  </div>

И выводим в шаблоне категории аналогично первому способу:

<div class="products-list">					  
	[[!pdoPage?
	&element=`msProducts`
	&tpl=`listProductTpl`
	&limit=`12`
	]]
</div>					
<div class="pagination-holder">
	<div class="row">
		<div class="col-xs-12 col-sm-6 text-left">
			[[!page.nav]]
		</div>
		<div class="col-xs-12 col-sm-6">
			<div class="result-counter">
				Showing <span>1-9</span> of <span>11</span> results
			</div><!-- /.result-counter -->
		</div>
	</div><!-- /.row -->
</div><!-- /.pagination-holder -->

И у нас готов вывод наших товаров в категории. Отлично!

На этом урок наш закончен. В следующем уроке мы с вами реализуем фильтры в нашем интернет-магазине с помощью mSearch2.

Вывод товаров в категории miniShop2

0 Число голосов: 4
5
5
1
4

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

  1. Сергей 12 апреля 2017, 11:50 # 0
    Подскажите как сюда {$image} передать миниатюру. У меня выводит слишком большие изображения в категории
    1. Петропавловский Артем 12 апреля 2017, 14:41 # 0
      Попробуйте {$thumb}
      1. Сергей 13 апреля 2017, 09:38(Комментарий был изменён) # 0
        Получилось! Ответ конечно не раскрытый) Пришлось покопаться, но благо у меня МегаМозг! Спасибо за подсказку)
        1. man 11 мая 2017, 11:58 # 0
          Передаешь пустой tpl и видишь все основные параметры которые можно поюзать.
    2. Серегей 29 апреля 2017, 19:54 # 0
      Артем, скажите пожалуйста, я из шаблона для корзины убрал класс который показывает символ рубля.Но все равно оплата рубля указывает.В каком чанке нужно посмотреть, мне нужна чтобы гривна показывала?Благодарен за ответ.
      1. Олег 03 августа 2017, 17:30 # 0
        Здравствуйте Артем, спасибо за Ваши уроки, хотел спросить: как передать из каталога товаров опцию товара, к примеру есть список категории товаров я вивожу опцию Размера в превю товара, как мне передать ее в корзину? Я так понимаю нужно через поле но как передать в него нужные значения? Заранее спасибо за ответ, если найдется время
        1. Роман 16 августа 2017, 20:20 # 0
          Артем подскажите пожалуйста, что я делаю не так, в моем шаблоне на странице с товарами предусмотрен вывод модального окна (быстрый просмотр) код чанка с модальным окном
          <!-- Modal -->
          		   <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
          			    <div class="modal-dialog" role="document">
          					<div class="modal-content">
          						<div class="modal-header">
          							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          						</div>
          						
          						<div class="modal-body">
          <form method="post" class="ms2_form">
          <input type="hidden" name="id" value="[[+id]]" />
          
          							<div class="modal-product">
          								<div class="product-images">
          									<div class="main-image images">
          <a href="[[~[[+id]]]]">										<img src="[[+250x250:default=`/assets/components/minishop2/img/web/ms2_medium.png`]]" alt="[[+name]]"/>
          	</a>								</div>
          								</div><!-- .product-images -->
          
          <div class="product-info">
          									<h1><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h1>
          									<div class="price-box-3">
          										<hr />
          										<div class="s-price-box">
          											<span class="new-price">[[+price]]</span>
          											[[!+old_price:gt=`0`:then=`<span class="old_price">[[+old_price]] <i class="fa fa-rouble"></i> [[%ms2_frontend_currency]]</span>`:else=``]]
          										</div>
          										<hr />
          									</div>
          									<a href="shop.html" class="see-all">See all features</a>
          									<div class="quick-add-to-cart">
          										
          											<div class="numbers-row">
          												<input type="number" name="count" id="french-hens" value="1">
          											</div>
          											<button name="ms2_action" value="cart/add" class="single_add_to_cart_button" type="submit">В корзину</button>
          										
          									</div>
          									<div class="quick-desc">
          										[[+introtext]]
          									</div>
          </form>									<div class="social-sharing">
          										<div class="widget widget_socialsharing_widget">
          											<h3 class="widget-title-modal">Поделиться</h3>
          											<ul class="social-icons">
          												<li><a target="_blank" title="Facebook" href="#" class="facebook social-icon"><i class="fa fa-facebook"></i></a></li>
          												<li><a target="_blank" title="Twitter" href="#" class="twitter social-icon"><i class="fa fa-twitter"></i></a></li>
          												<li><a target="_blank" title="Pinterest" href="#" class="pinterest social-icon"><i class="fa fa-pinterest"></i></a></li>
          												<li><a target="_blank" title="Google +" href="#" class="gplus social-icon"><i class="fa fa-google-plus"></i></a></li>
          												<li><a target="_blank" title="LinkedIn" href="#" class="linkedin social-icon"><i class="fa fa-linkedin"></i></a></li>
          											</ul>
          										</div>
          									</div>
          								</div><!-- .product-info -->
          							</div>
          							<!-- .modal-product -->
          						</div><!-- .modal-body -->
          					</div><!-- .modal-content -->
          			    </div><!-- .modal-dialog -->
          		   </div>
          		   <!-- END Modal -->
          Как заставить работать?
          1. Петропавловский Артем 17 августа 2017, 09:55 # 0
            Напишите мне в скайп — mot9i_ami. Проведу вам платную консультацию.
          2. Wasili 25 августа 2017, 13:15(Комментарий был изменён) # 0
            Вы бы мне подсказали где в miniShop2 формируется надпись валюты? Чтоб вывести не рубли а доллары? http://take.ms/wsllc В чанках эту надпись не могу найти
            1. Петропавловский Артем 29 августа 2017, 14:02 # 0
              Эта надпись меняется в словарях. Шестеренка->Управление словарями — раздел miniShop2
            2. Exz0 22 ноября 2017, 09:33 # 0
              Добрый день!Как убрать подрезание изображения gallery ms2 при выводе в каталогевывел тестовый товар в каталог столкнлся с тем что изображение обрезается на половину.как вывести полный размер?стандартом выводит маленькое изображение которые выводится 120рх-90рх если укажу свой размер то обрезанное изображение растягивается
              1. Александр 24 августа 2019, 13:19 # 0
                Воспользуйтесь css
                width: 246px;
                height: 186px;
                object-fit: contain;
                
              2. art 29 марта 2019, 09:46(Комментарий был изменён) # 0
                а как сделать проверку на наличие товаров в категории…или что возвращает в чанк msProduct…что бы сделать условие, если есть товары — выводить если нет — вывести соообщение о их отсутствии
                1. Евгений 20 февраля 2020, 13:05 # 0
                  А как вывести несколько превью товара?
                  1. Петропавловский Артем 20 февраля 2020, 14:01 # 0
                    Используйте сниппет msGallery
                    1. Роман 18 июля 2020, 00:43 # 0
                      Ну да если ещё msOptionsPrice2 делаешь и добавляешь кнопки + или — то выходит ошибка дубоирующися input которая отвечает за количество товара, не работает этот метод.Решения нет в интернете, может вы знаете как эту ситуацию решить? Выходит такая ситуация при переключением списка или плитки перестаёт работать и выдаёт ошибку, как исправить не кто не знает. Печально просто это всё ( проект почти готов, а не работает именно тут=((
                  2. Руслан 09 июля 2020, 14:06(Комментарий был изменён) # 0
                    А как вывести артикул карточке товаре и корзине?Пытаюсь вывести вот так?
                    {if $product['article']?}
                    {$product['article'] | join : '; '}
                    {/if}
                    
                    1. Роман 18 июля 2020, 00:42 # 0
                      Ну да если ещё msOptionsPrice2 делаешь и добавляешь кнопки + или — то выходит ошибка дубоирующися input которая отвечает за количество товара, не работает этот метод.Решения нет в интернете, может вы знаете как эту ситуацию решить?Выходит такая ситуация при переключением списка или плитки перестаёт работать и выдаёт ошибку, как исправить не кто не знает. Печально просто это всё ( проект почти готов, а не работает именно тут=((
                      1. Сергей 18 декабря 2020, 11:56 # 0
                        Добрый день. Вопрос по выводу миниатюры фото.В Медиа я прописал создания трех миниатюр:{«small»:{«w»:150,«h»:150,«q»:90,«zc»:«0»,«bg»:«ffffff»},«medium»:{«w»:250,«h»:250,«q»:90,«zc»:«0»,«bg»:«ffffff»},«big»:{«w»:500,«h»:500,«q»:90,«zc»:«0»,«bg»:«ffffff»}}Код {$thumb} — выводит самое мелкое (small), а как вывысти среднюю миниатюру (medium)?
                        1. Наталья 09 марта 2023, 14:08 # 0
                          Добрый день, Артем!Не могу понять, как вывести теги товара на странице категории? Помогите, пожалуйста

                          Наши клиенты

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

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

                          Контакты

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


                          Пермь, ул. Крупской 34, офис 510