Корзина товаров. Shopkeeper

На одном из разрабатываемых мною сайтов заказчик захотел сделать корзину товаров, чтобы посетитель бродил по страницам, кидал что-то в корзину и в дальнейшем отправлял заказ.
Решение было самое простое - Shopkeeper.

На момент написания статьи использовалась версия Shopkeeper 1.3.5.

Документация по данному модулю есть довольна подробная тут, а также инструкций по его использованию в интернете достаточно. Описанное ниже подсмотрено здесь.

Установка 

Итак, первым делом скачиваем модуль и устанавливаем. В скачанном архиве мы видим три папки:

1. папку shopkeeper/ необходимо поместить в каталог assets/snippets/. 
2. папку install/ помещаем в корень сайта. 
3. содержимым папки _upload/assets/ дополняем содержимое папки assets/ - это PHx-модификатор "shk_widget", файлы сниппета "catalogView" и файлы демо-сайта.

Теперь приступаем к установке, набрав в адресной строке  http://[домен сайта]/install/ . Если по окончанию установки не удалилась директория install - удалите ее вручную.

По завершению установки заходим в панель управления сайтом. Если сразу откроется конфигурация сайта, нажмите "Сохранить". Далее переходим в Модули -> 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>

На этом все. Можно открыть сайт и опробовать корзину.