Корзина товаров. Shopkeeper
На одном из разрабатываемых мною сайтов заказчик захотел сделать корзину товаров, чтобы посетитель бродил по страницам, кидал что-то в корзину и в дальнейшем отправлял заказ.
Решение было самое простое - Shopkeeper.
На момент написания статьи использовалась версия Shopkeeper 1.3.5.
Документация по данному модулю есть довольна подробная тут, а также инструкций по его использованию в интернете достаточно. Описанное ниже подсмотрено здесь.
Параметры:
Для вывода самого каталога товаров рекомендуется использовать сниппет catalogView. Однако в моем случае уже использовался Ditto. Поэтому я просто добавила в чанк вывода элемента каталога код:
После этих манипуляций корзина уже должна работать. Осталось лишь посмотреть, что в ней лежит, и оформить заказ.
Вызов eForm рекомендуется делать после вызова Shopkeeper.
Здесь мы использовали чанк shopOrderForm - форма оформления заказа.
и чанк shopOrderReport - данные покупателя
На этом все. Можно открыть сайт и опробовать корзину.
Решение было самое простое - Shopkeeper.
На момент написания статьи использовалась версия Shopkeeper 1.3.5.
Документация по данному модулю есть довольна подробная тут, а также инструкций по его использованию в интернете достаточно. Описанное ниже подсмотрено здесь.
Установка
Итак, первым делом скачиваем модуль и устанавливаем. В скачанном архиве мы видим три папки:- папку shopkeeper/ необходимо поместить в каталог assets/snippets/.
- папку install/ помещаем в корень сайта.
- содержимым папки _upload/assets/ дополняем содержимое папки assets/ - это PHx-модификатор "shk_widget", файлы сниппета "catalogView" и файлы демо-сайта.
По завершению установки заходим в панель управления сайтом. Если сразу откроется конфигурация сайта, нажмите "Сохранить". Далее переходим в Модули -> Shopkeeper и жмем "Установить". По завершению установки открываем конфигурацию модуля и заполняем необходимые поля в основных настройках. Я заполнила два поля: ID tv-параметра цены и категорию каталога по умолчанию. Вторая настройка позволяет добавлять товары прямо из модуля в выбранный каталог, что мне, к слову, не пригодилось.
Вывод корзины и кнопки добавления в корзину
Вывод корзины осуществляется вызовом сниппета shopkeeper. Для моего сайта я сделала вывод корзины в правой колонке на всех страницах, добавив следующий код:
[!Shopkeeper? &cartType=`small` &priceTV=`price` &orderFormPage=`1125`&gotoid=`1126` &flyToCart=`nofly` &counterField=`1`!]
Параметры:
- cartType - тип корзины. Принимает 3 значения: `full` - расширенный, `small` - простой, `empty` - только очистка корзины без вывода на странице
- priceTV - имя TV-параметра, который используется для цены
- orderFormPage - ID страницы с формой заказа
- gotoid - ID страницы после успешной отправки заказа (страница "Спасибо!").
- flyToCart - действие при добавлении товара в корзину. `helper` - появляется блок со счетчиком количества товаров и летит в корзину, `image` - в корзину летит картинка товара, `nofly` - в корзину ничего не летит.
- counterField - добавить ко всем полям <input name="shk-count"> (количество товара) стрелки больше/меньше
Чтобы добавить товар в корзину, нам нужна кнопка. Вставляем для этого вызов чанка shopToCart в нужном месте на странице полного описания товара. Код чанка:
<div class="shs-tocart shk-item"> <form action="[~[*id*]~]" method="post"> <input type="hidden" name="shk-id" value="[*id*]" /> <input type="hidden" name="shk-count" value="1" size="2" maxlength="3" /> <div align="right"> Цена: <span class="shk-price" id="stuff_[*id*]_price">[[ProductPrice]]</span> <button type="submit" name="shk-submit" class="shk-but">В корзину</button> </div> </form> </div>
Для вывода самого каталога товаров рекомендуется использовать сниппет catalogView. Однако в моем случае уже использовался Ditto. Поэтому я просто добавила в чанк вывода элемента каталога код:
<div class="shop-stuff shk-item"> <div class="shop-stuff-b"> <form action="[~[*id*]~]" method="post"> <input type="hidden" name="shk-id" value="[+id+]" /> <input type="hidden" name="shk-name" value="[+pagetitle+]" /> <input type="hidden" name="shk-count" value="1" size="2" maxlength="3" /> <div class="shs-price"> <button type="submit" class="shk-but">В корзину</button> <div class="block-product_separate_price"> <span class="shk-price">[+tvprice+]</span> руб. </div> </div> </form> </div> </div>
Внимание! Чтобы работало ajax-добавление в корзину, необходимо, чтобы форма лежала в контейнере с классом "shk-item". Советую при тестировании пользоваться другим браузером или делать выход из админки, чтобы не подгружались лишние скрипты.
После этих манипуляций корзина уже должна работать. Осталось лишь посмотреть, что в ней лежит, и оформить заказ.
Оформление заказа
Для вывода полной корзины и формы оформления заказа на отдельной странице я вставила следующий код:[!Shopkeeper? &orderFormPage=`1125` &flyToCart=`nofly` &orderDataTpl=`@FILE:chunk_orderDataTpl.tpl`&cartRowTpl=`@FILE:chunk_shopCartRow2.tpl`!] [!eForm? &formid=`shopOrderForm` &tpl=`shopOrderForm` &report=`shopOrderReport` &eFormOnBeforeMailSent=`populateOrderData` &eFormOnMailSent=`sendOrderToManager` &vericode=`1` &ccsender=`1` &gotoid=`1126` &subject=`Новый заказ`!]
Вызов eForm рекомендуется делать после вызова Shopkeeper.
Здесь мы использовали чанк shopOrderForm - форма оформления заказа.
<div class="error">[+validationmessage+]</div> <form method="post" action="[~[*id*]~]" id="shopOrderForm"> <fieldset> <input type="hidden" name="formid" value="shopOrderForm" /> <input type="hidden" name="reportTpl" value="shopOrderReport" eform="::::" /> <table cellpadding="3"> <tr> <td>Адрес:</td> <td><input name="address" size="30" class="textfield" type="text" /></td> </tr> <tr> <td>Способ доставки*:</td> <td> <select name="delivery"> <option value="На дом">Доставка на дом (по городу)</option> <option value="Почта России">Почта России</option> <option value="Служба междугородней доставки">Служба междугородней доставки</option> </select> </td> </tr> <tr> <td>Способ оплаты*:</td> <td> <select name="payment"> <option value="При получении">При получении</option> <option value="WebMoney">WebMoney</option> </select> </td> </tr> <tr> <td>Ф.И.О.*:</td> <td><input name="name" size="30" class="textfield" type="text" eform="Ф.И.О.::1" /></td> </tr> <tr> <td>E-mail*:</td> <td><input name="email" size="30" class="textfield" type="text" eform="E-mail:email:1" /> </td> </tr> <tr> <td>Телефон*:</td> <td><input name="phone" size="30" class="textfield" type="text" eform="Номер телефона::1" /></td> </tr> <tr> <td>Сообщение:</td> <td><textarea name="message" class="textfield" rows="4" cols="30"></textarea></td> </tr> <tr> <td>Код подтверждения*:</td> <td></td> </tr> <tr> <td><img src="[+verimageurl+]" alt="" /></td> <td><input type="text" name="vericode" class="textfield" size="20" /></td> </tr> <tr> <td></td> <td><input type="submit" name="submit" class="button" value="Отправить" /></td> </tr> </table> </fieldset> </form>
и чанк shopOrderReport - данные покупателя
<p>В интернет-магазине сделан заказ.</p> <p>Номер заказа: [+orderID+]</p> <b>Состав заказа:</b> [+orderData+] <b>Данные покупателя:</b> <table cellpadding="3"> <tr><td>Адрес:</td><td>[+address+]</td></tr> <tr><td>Способ доставки:</td><td>[+delivery+]</td></tr> <tr><td>Способ оплаты:</td><td>[+payment+] </td></tr> <tr><td>Ф.И.О.:</td><td>[+name+]</td></tr> <tr><td>E-mail:</td><td><a href="mailto:[+email+]">[+email+]</a></td></tr> <tr><td>Телефон:</td><td>[+phone+]</td></tr> <tr><td>Сообщение:</td><td>[+message+]</td></tr> </table>
На этом все. Можно открыть сайт и опробовать корзину.
Хорошо написано, применил на практике все работает!
ОтветитьУдалитьРада, что пригодилось :)
УдалитьСпасибо за статью. Вывод содержимого заказа происходит в [+orderData+]? У меня в него пишется только итоговая стоимость по заказу, а самих элементов нет. Не могли бы подсказать, в каком файле формируется содержимое [+orderData+]?
ОтветитьУдалитьК сожалению, я MODx не занимаюсь уже пару лет, поэтому не могу вспомнить подробности ShopKeeper :(
УдалитьПишите мне в личку, если что. Постараюсь помочь
Спасибо очень хорошая статья
ОтветитьУдалитьА как добавить картинку к товарам в корзине?
ОтветитьУдалить