Подключение Shopkeeper на страницах сайта

Как подключить Shopkeeper на странице товара и каталога.

Прежде чем приступить к подключению Shopkeeper, для шаблона товара, нам необходимо создать TV параметры, без которых не обойтись. Предлагаю разметить шаблон чтобы всё наглядно было видно.

Image

Как создавать все TV параметры не буду, покажу как делается один, а остальные делаете аналогично. В системе управления сайтом выбираем "Элементы"-> "Управление элементами" -> "Параметры (TV)" -> выбираем "Новый TV параметр".

Image

Имя параметра: price

Заголовок: Цена, руб.:

Описание: (разделитель точка)

Тип ввода: Text

Выбираем шаблон где будет использоваться данный TV

Image

Следующий TV создаём аналогично предыдущему.

Имя параметра: oldprice

Заголовок: Старая цена, руб.

Описание: (разделитель точка)

Тип ввода: Text

Выбираем шаблон где будет использоваться данный TV

Следующий TV параметр.

Имя параметра: proizv

Заголовок: Производитель:

Описание: оставим пустым

Тип ввода: Text

Выбираем шаблон где будет использоваться данный TV

Далее создадим TV для изображений. Если вы планируете выводить только одно большое изображение, то создаёте только один TV, но так как в моём шаблоне одно большое и три дополнительных изображений значит, мне необходимо создать четыре идентичных TV параметра.

Имя параметра: timg

Заголовок: Изображение:

Описание: (размер 500х500 px)

Тип ввода: Image

Выбираем шаблон где будет использоваться данный TV

Image

После того как мы добавили TV поля для шаблона товаров, в карточке товара они должны отображаться следующим образом.

Image

Теперь находим шаблон отвечающий за вывод товара и начинаем его редактировать.

Image

Было

Image

Стало

Image

Выводим производителя, цены и подключаем кнопку «Добавить в корзину»

Image

Вы, наверное, заметили, что я вызываю TV по-разному, например можно вызвать обычный заголовок

   
[ *oldprice*]
В этом случае выводится только одна цифра.

Если заполнен расширенный заголовок, то выводим расширенный, иначе выводим обычный заголовок

   
[ *phx:if=`[ *oldprice*]`:is=``:then=` `:else=`[ *oldprice*] руб.`*]
Слово «руб.» выводиться только с цифрой. Другими словами если TV поле oldprice заполнено то и приставка «руб.» тоже выводиться.

Image

Всё что мы должны были заполнить в шаблоне можно скачать здесь

Установку и подключение сниппета parentTitle я Вам расскажу в одном из следующих уроков.

Переходим к подключению малой и большой корзины.

Image

Вывод нашей корзине будет выглядеть следующим образом:

[ !Shopkeeper? &cartType=`full` &orderFormPage=`90` &gotoid=`91` &priceTV=`price` &noJQuery=`1` &changePrice=`1` &cartRowTpl=`korzRow-tpl`  &cartTpl=`@FILE:chunk_shopCart.tpl` &flyToCart=`image` &orderDataTpl=`orderData` &currency=`руб.`]]

&orderFormPage=`90` Указывает ID страницы, где покупатель оформляет заказ (У Вас он будет другой)

&gotoid=`91` После отправки заказа покупатель попадает на страницу с ID 91, где мы его поблагодарим за сделанный заказ в нашем магазине. (У Вас он будет другой)

Чанки:  &cartTpl=`@FILE:chunk_shopCart.tpl`, &cartRowTpl=`korzRow-tpl`, &orderDataTpl=`orderData` - это чанки которые предстоит нам создать.

Создадим новый чанк.

Название чанка: orderData

Описание: Список товаров в отчете

Код чанка (HTML) можно скачать здесь.

Image

Следующий чанк korzRow-tpl

Описание: Шаблон расширенной корзины

Код чанка здесь.

Image

Чанк @FILE:chunk_shopCart.tpl  я возьму стандартный, который идет в комплекте Shopkeeper, только немного его изменим добавив своих стилей.

Image

На странице каталога вызов шопкипера будет таким:

   
[ !Shopkeeper? &cartType=`full` &orderFormPage=`90` &gotoid=`91` &priceTv=`price` &noJQuery=`0` &changePrice=`1` &cartRowTpl=`korzRow-tpl` &cartHelperTpl=`helper` &cartTpl=`@FILE:chunk_shopCart.tpl` &flyToCart=`helper` &orderDataTpl=`orderData`! ]

Image

В вызове сниппета появился новый чанк который отвечает за вывод всплывающего блока количества товара - это &cartHelperTpl=`helper`

Image

Новый чанк helper

Описание: Всплывающий блок количества

Код чанка можно скачать здесь.

Image

На странице каталога я вывожу товары при помощи сниппета Ditto. Чанк catalog-tpl  отвечает за внешний вид выводимого товара в каталоге, в него нам нужно поместить поля для работы шопкипер и подключаем кнопку добавления товаров в корзину. Делаем примерно то же, что мы делали на странице самого товара.

Image

А в чанке catalog-tpl делаем изменения, переделанный мой код уже здесь.

Было так

Image

Стало так

Image

На этом подключение расширенной корзины завершено. Теперь при нажатии кнопки "Купить" товар должен добавляться в корзину. В вызове шопкипера на странице самого товара у меня стоит &flyToCart=`image`, а это значит, что всплывающий блок "количества" появляться не будет, а будет только выводиться сообщение о том, что товар добавлен в корзину.

Далее нам нужно подключить малую корзину. На одной странице два раза вызывать сниппет [[Shopkeeper? я не буду, так как это может привести к конфликту самого шопкипера. Поэтому на страницах товара малую корзину вызывать не будем, лучше чтобы она ненавязчиво отображалась на страницах: блога, главной, контактов, портфолио и т.д

Image

Image

В том месте, где вы хотите вывести малую корзину вставим следующий вызов сниппета

   
[ !Shopkeeper? &cartType=`small` &priceTV=`price` &orderFormPage=`90` &noJQuery=`1` &style=`0` &cartTpl=`shopCartSmall` &noJavaScript=`1`! ]

Теперь создадим чанк shopCartSmall, который отвечает за функционал малой корзины. Мой код лежит здесь.

Название чанка: shopCartSmall

Описание: Корзина малая форма

Image

Теперь нам остаётся вызвать Shopkeeper на странице оформления заказа, ID этой страницы мы везде указывали в вызове сниппета.

Image

Вызов сниппета у меня такой:

   
[ !Shopkeeper? &cartType=`full` &orderFormPage=`90` &gotoid=`91` &priceTv=`price` &noJQuery=`0` &changePrice=`1` &cartRowTpl=`korzRowofor-tpl` &cartHelperTpl=`helper` &cartTpl=`@FILE:chunk_shopCart.tpl` &flyToCart=`helper` &orderDataTpl=`orderData`! ]

Никаких дополнительных чанков создавать не надо, так как мы их уже с вами сделали в процессе подключения шопкипера на других страницах сайта. Но нам понадобится форма для отправки заказа в модуль шопкипера а также на наш почтовый ящик и на почту клиенту. Для этого воспользуемся сниппетом eForm

Image

В данном случае вызов сниппета eForm будет таким:

   
[ !eForm? &formid=`shopOrderForm1` &to=`ваша почта@yandex.ru` &ccsender=`1` &gotoid=`91` &tpl=`shopOrderForm1` &report=`shopOrderReport1` &subject=`Заказ покупателя` &eFormOnBeforeMailSent=`populateOrderData` &eFormOnMailSent=`sendOrderToManager` &vericode=`1` &invalidClass=`invalidValue` &requiredClass=`requiredValue` &cssStyle=`ContactStyles`! ]

Теперь разберём всё по порядку.

&tpl=`shopOrderForm1` это сама форма куда клиент указывает свои данные. Если у вас уже есть форма обратной связи, например в "контактах", то вы можете просто вместо shopOrderForm1 указать свою существующую форму. У кого её нет тот может скачать здесь, только вам потом нужно в место моих стилей прописать свои.

Image

Следующий чанк shopOrderReport1 - это форма письма которую получите вы и покупатель , в ней будет указан номер заказа, список товаров и контактная информация покупателя.

Создаём новый чанк shopOrderReport1

Описание: Отправка заказа физлицу

Код берём здесь.

Image

Дополнительно в вызов я добавил ещё &cssStyle=`ContactStyles`для тог, чтобы подсвечивались красным цветом не заполненные поля. Делать это не обязательно но все желающие могут воспользоваться, код лежит здесь.

Image

Создаём новый чанк ContactStyles

Image

После того, как покупатель отправил заказ, он попадает на страницу с ID 91 (у вас он будет другой) Для формирования списка товаров используем сниппет viewOrder

Image

Название: viewOrder

Код сниппета: Выводим состав заказа на стр.

   
   db->select("id, short_txt, content, allowed, addit, price, currency, DATE_FORMAT(date,'%d.%m.%Y') AS date, DATE_FORMAT(sentdate,'%d.%m.%Y') AS sentdate, note, status, email, payment, phone, userid", $modx->getFullTableName('manager_shopkeeper'), "id = $order_id");
if ($modx->db->getRecordCount($data)){
    $data = $modx->db->getRow($data);
    $purchases = unserialize($data['content']);
    $addit_params = unserialize($data['addit']);
    $p_allowed = $shkm->allowedArray($data['allowed'],$purchases);
}else return;

$p_tpl_chunk = preg_split('/(\[\+loop\+\]|\[\+end_loop\+\])/s', $shkm->fetchTpl($print_tpl));
$total_count = 0;

//Убираем товары, которые нельзя заказать
foreach($purchases as $key => $value){
  if(is_array($p_allowed) && !in_array($key,$p_allowed))
    unset($purchases[$key]);
  else
    $total_count = $total_count + $value[1];
}
unset($key,$value);
  
$shkm->config['currency'] = $data['currency'];
$shkm->config['orderDataTpl'] = $print_tpl;

//Получаем список товаров по шаблону
$p_tpl_chunk[1] =  $shkm->getStuffList($purchases,$addit_params,'list');

$print_tpl_out = implode('',$p_tpl_chunk);
$print_tpl_out = preg_replace('/[\r\n]+/','',str_replace("'","\'",$print_tpl_out));

//Парсим общий шаблон
$chunkArr = array(
    'totalPrice' => $data['price'],
    'totalPrice_propis' => $data['price'],
    'currency' => $data['currency'],
    'date' => $data['date'],
    'today' => date("d.m.Y"),
    'contact' => $data['short_txt'],
    'site_name' => $modx->config['site_name'],
    'orderID' => $data['id'],
    'total_count' => $total_count,
    'note' => $data['note'],
    'email' => $data['email'],
	'payment' => $data['payment'],
    'phone' => $data['phone']
);
foreach($chunkArr as $key => $val){
    $print_tpl_out = str_replace("", $val, $print_tpl_out);
}
unset($key,$val);

echo preg_replace('/[\r\n]+/','',$print_tpl_out);
?>

Создадим чанк с формой: report

Описание: Список товаров после оформления заказа

Код берём здесь

Image

Вот для чего нам нужен был сниппет viewOrder

Image

На этом всё, если вы всё сделали правильно то Shopkeeper должен быть полностью рабочий.

Комментарии

Отменить