Инструменты пользователя

Инструменты сайта


каталог

Вывод каталога с товарами

В Shopkeeper 3 товарами являются сами ресурсы modx или вместо ресурсов можно использовать отдельную таблицу БД, созданную с помощью MIGX

Для вывода каталога товаров есть дополнение к MODX которое называется getProducts. Но так же можно использовать такие сниппеты как getResources или pdoResources из набора pdoTools. Рекомендуется все же использовать getProducts

Этот сниппет для вывода списка ресурсов. Предназначен специально для больших каталогов Не использует xPDO, оптимизирована фильтрация по TV для максимальной скорости.

Если вы планируете использовать в каталоге фильтрацию через компонент tagManager2, то используйте снипет getProducts. Другие снипеты для вывода каталога с tagManager2 не работают, только getProducts.

Сниппеты которые можно использовать для вывода каталога

Сниппеты
getProducts
getResources
getPage
pdoResources
pdoPage

Примеры

Пример: Каталог со всеми товарами на одной странице

[[!getProducts?
&parents=`5`
&includeTVs=`1`
&includeTVList=`price,image,producer,country`
&limit=`1000`
&tpl=`product`
&where=`{"template":15}`
&tvFilters=`{"country":"Китай","producer":"Sony"}`
]]

Пример: каталог с пагинацией.

[[!getPage?
&elementClass=`modSnippet`
&element=`getProducts`
&className=`shopContent`
&packageName=`shop`
&limit=`10`
&tpl=`product`
&where=`{"template":15}`
]]
<br clear="all" />
<ul class="pages">
[[!+page.nav]]
</ul>

Чанк товара

Под чанком понимается кусок HTML кода, который используется для генерации списка товаров. Можно создать любой чанк и указать его в снипете для вывода товаров getProducts или getResourses и указать его в

параметре &tpl=`чанкТовара`. Создайте например чанк products и вставьте в него код который указан примером ниже. В снипите вывод данного чанка будет таким &tpl=`products`

Внимание ! В данном чанке обязательны такие классы как shk-item, product-price, shk-price, shk-but, shk-image их наличие в коде обязательно !!! Обязательно должны присутствовать два скрытых поля input c именем shk-id и shk-count
Без них shopkeeper правильно работать не будет. Не будет происходить ajax запрос, и товары не будут добавляться в корзину.

Пример: правильного чанка товаров.

<div class="product shk-item">
    <div class="product-b">
        <div class="product-descr">
            <a href="[[~[[+id]]? &scheme=`abs`]]">
                <img class="shk-image" src="[[+tv.image]]" alt="" height="130" width="130" />
            </a>
            <h3>[[+pagetitle]]</h3>
            [[+introtext]]<br />
            <a href="[[~[[+id]]? &scheme=`abs`]]">Details &rsaquo;</a>
            <div style="clear:both;"></div>
        </div>
        <form action="[[~[[*id]]? &scheme=`abs`]]" method="post">
            <fieldset>
                <input type="hidden" name="shk-id" value="[[+id]]" />
                <input type="hidden" name="shk-count" value="1" />
                <div class="product-price">
                    <button type="submit" class="shk-but">Добавить в корзину</button>
                    <div>Price: <span class="shk-price">[[+tv.price:num_format]]</span> руб.</div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

Примеры

Ниже представлено еще несколько примеров кода с интересным дизайном чанка. Просто скопируйте этот HTML код и вставьте его в чанк products, перед этим убедитесь что в наборе параметров сниппета shopkeeper 3 указан именно чанк products. А так же скопируйте код CSS и вставьте его в ваш CSS файл

Пример: 1 - Демо

HTML: разметка


<div class="product-item product shk-item">
    <div class="product-b">
        <a href="[[~[[+id]]? &scheme=`abs`]]">
        <img class="shk-image" src="[[+tv.image]]">
        </a>
        <div class="product-list">
            <div class="product-descr">
                <h3><a href="[[~[[+id]]? &scheme=`abs`]]">[[+pagetitle]]</a></h3>
            </div>
            <form action="[[~[[*id]]? &scheme=`abs`]]" method="post">
                <fieldset>
                    <input type="hidden" name="shk-id" value="[[+id]]" />
                    <input type="hidden" name="shk-count" value="1" />
                    <div class="product-price">
                        <button type="submit" class="shk-but">В корзину</button>
                        <div>цена: <span class="price shk-price">[[+tv.price:num_format]]</span> ₽.</div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</div>

СSS: Стили

* {box-sizing: border-box;}
.product-item {
  width: 300px;
  text-align: center;
  margin: 0 auto;
  border-bottom: 2px solid #F5F5F5;
  background: white;
  font-family: "Open Sans";
  transition: .3s ease-in;
}
.product-item:hover {border-bottom: 2px solid #fc5a5a;}
.product-item img {
  display: block;
  width: 100%;
}
.product-list {
  background: #fafafa;
  padding: 15px 0;
}
.product-list h3 {
  font-size: 18px;
  font-weight: 400;
  color: #444444;
  margin: 0 0 10px 0;
}
.price {
  font-size: 16px;
  color: #fc5a5a;
  display: block;
  margin-bottom: 12px;
}
.button {
  text-decoration: none;
  display: inline-block;
  padding: 0 12px;
  background: #cccccc;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 28px;
  transition: .3s ease-in;
}
.product-item:hover .button {background: #fc5a5a;}

Пример: 2 - Демо

каталог.txt · Последние изменения: 2018/11/02 15:40 — roman