Настало время вывести наши товары в категории. Для этого наполним наш магазин еще несколькими товарами и создадим еще одну категорию. Например, я добавил следующие товары: Samsung Galaxy S4, LG K10 – этих пока достаточно. Следующее, что нам нужно сделать – это создать дополнительную категорию товаров для тестов. Например, пусть это будет “Аудио-Плееры”. В последнюю категорию нам нужно добавить хотя бы парочку товаров.
Добавили? Теперь можно двигаться дальше. Перейдем на страницу категории и посмотрим какие чанки нам предстоит сделать:
В итоге мы с вами должны получить 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.
{if $product['article']?} {$product['article'] | join : '; '} {/if}