Вывод товаров в категории 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.

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

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

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

  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