Но уже можно использовать на фронте с мелкими оговорками.
И так как же потестить уже у себя?:
1. Идем сюда: evoshop.pro. — тут у нас есть линк на github где можно скачать код а так же есть раздел документации по скрипту js, сразу замечу что логика работы немного выпадает от привычной в MODX так как вся корзина работает на js + localStorage, это дает свои плюсы но есть и пару минусов к примеру вся логика работы построенна на js тоесть чанков с шаблонами у нас нет. (Есть вариант сделать проброс чанков с параметров сниппета в js но особого смысла в этом не вижу)
2. Заливаем нужный нам файлик js сюда:
/assets/snippets/evoshop/js/evoShop.min.jsХотя можно и в любое удобное для вас место.
И подключаем js, получиться должно как то так:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/assets/snippets/evoshop/js/evoShop.min.js"></script>Я делаю вот так:
тоесть у меня есть сниппет evoShop с содержимым:
<?php
//подключение библиотеки js
$modx->regClientScript('/assets/snippets/evoshop/js/evoShop.min.js');
$settings = '<script type="text/javascript">
evoShop({
currency: "RUB",
});
//скрываем корзину если там пусто
evoShop.bind("update", function(){
if( evoShop.quantity() === 0 ){
$(".evoShop_cart").hide();
} else {
$(".evoShop_cart").show();
}
});
//добавляем товары в корзину из локалстораже
$(document).on("click",".evoShop_submit",function(ev){
$(".evoShop_items_json").val( localStorage.getItem("evoShop_items").replace("}}","} }") );
//evoShop.empty();
});
//товар добавлен в карзину
$(document).on("click",".item_add",function(ev){
$(\'<span class="item_informer alert alert-success">товар добавлен в корзину</span>\').insertAfter($(this)).delay(800).fadeOut(800);
});
</script>';
$modx->regClientScript($settings, true);Его вызываем и он сам добавляет весь js, пока думаю зачем мне тут снипет и как будет удобней.
Собственно на этом все подключение evoShop к фрону сайта закончено.
Переходим к Бекенду.
3. Передача товаров в FormLister, отправка на почту а так же запись в базу.
Создаем вот такой вызов сниппета FormLister:
[!FormLister?
&debug=`1`
&formid=`orderForm`
&to=`dmi3yy@gmail.com`
&replyTo=`[+email.value+]`
&prepareProcess=`evoShopFormLister`
&protectSubmit=`0`
&submitLimit=`0`
&ccSender=`1`
&subject=`Новый заказ с сайта evoShop demo`
&errorClass=` has-error`
&requiredClass=` has-warning`
&rules=`{
"name":{
"required":"Обязательно введите имя"
},
"email":{
"required":"Обязательно введите email",
"email":"Введите email правильно"
},
"phone":{
"required":"Обязательно введите номер телефона",
"phone":"Введите номер правильно"
}
}`
&formTpl=`@CODE:
<h3>Оформление заказа:</h3>
<form method='POST'>
<input type="hidden" name="formid" value="orderForm">
<input type="hidden" name="evoShop_items_json" class="evoShop_items_json" value="[+evoShop_items_json+]"/>
<div class="form-group[+name.errorClass+][+name.requiredClass+]">
<label for="name">Ваше имя</label>
<input type="text" class="form-control" name="name" id="name" value="[+name.value+]">
<div class="form-control-feedback">[+name.error+]</div>
</div>
<div class="form-group[+email.errorClass+][+email.requiredClass+]">
<label for="email">Ваш email</label>
<input type="text" class="form-control" name="email" id="email" value="[+email.value+]">
<div class="form-control-feedback">[+email.error+]</div>
</div>
<div class="form-group[+phone.errorClass+][+phone.requiredClass+]">
<label for="phone">Телефон</label>
<input type="text" class="form-control" name="phone" id="phone" value="[+phone.value+]">
<div class="form-control-feedback">[+phone.error+]</div>
</div>
<div class="form-group">
<label for="message">Кмментарий к заказу</label>
<textarea class="form-control" name="message" id="message" rows="3">[+message.value+]</textarea>
</div>
<button type="submit" class="btn btn-primary evoShop_submit">Оформить заказ</button>
</form>
`
&messagesOuterTpl=`@CODE: [+messages+]`
&errorTpl=`@CODE: [+message+]`
&successTpl=`@CODE:
<div class="alert alert-success mt-3">
<h3>Спасибо за ваш заказ!</h3>
<p>Наш менеджер свяжеться с вами в ближайшее время.</p>
</div>`
&reportTpl=`@CODE:
<p>Имя: [+name.value+]</p>
<p>Email: [+email.value+]</p>
<p>Телефон: [+phone.value+]</p>
<p>Комментарий к заказу: [+message.value+]</p>
[+evoShop_items+]
`
&ccSenderTpl=`@CODE:
Вы оформили заказ на сайте:
<p>Имя: [+name.value+]</p>
<p>Email: [+email.value+]</p>
<p>Телефон: [+phone.value+]</p>
<p>Комментарий к заказу: [+message.value+]</p>
[+evoShop_items+]
`
!] И добавляем вот такой сниппет evoShopFormLister:
<?php
if ($FormLister->getField('evoShop_items_json') != '') {
$itemsArr = json_decode( $FormLister->getField('evoShop_items_json') , true);
if (is_array($itemsArr)){
//Подготовка к выводу в почте
$total = '0';
$evoShopItems = '
<h3>Состав заказа: </h3><ul>';
foreach($itemsArr as $k => $v){
$evoShopItems .='<li><b>'.$v['name'].'</b> '.$v['size'].' x'.$v['quantity'].' шт, <b>'.$v['price'].'</b> руб</li>';
$total = $total + ($v['quantity']*$v['price']);
}
$evoShopItems .= '</ul>
<h4>Сумма заказа: <b>'.$total.'</b> руб</h4>';
//Запись в базу данных
$short_txt = $data;
unset($short_txt['evoShop_items_json']);
$neworder = array('short_txt' => json_encode($short_txt, JSON_UNESCAPED_UNICODE),
'content' => $FormLister->getField('evoShop_items_json'),
'price' => $total,
'currency' => 'руб',
'date' => date('Y-m-d H:i:s'),
'sentdate' => date('Y-m-d H:i:s'),
'note' => $FormLister->getField('note'),
'email' => $FormLister->getField('email'),
'phone' => $FormLister->getField('phone'),
'payment' => $FormLister->getField('payment'),
'delivery' => $FormLister->getField('delivery'),
'discount' => $FormLister->getField('discount'),
'status' => '1',
'userid' => $_SESSION['webInternalKey'],
'managerid' => '',
'1c_exchange' => '',
);
$orderId = $modx->db->insert( $neworder, $modx->getFullTableName( 'evoshop_orders' ) );
$modx->db->insert(
array(
'timestamp' => time(),
'managerid' => '',
'action' => '1',
'orderid' => $orderId,
'message' => 'Поступил новый заказ',
), $modx->getFullTableName('evoshop_log')
);
}
$FormLister->setField('evoShop_items', $evoShopItems );
$modx->regClientScript('<script>evoShop.empty();</script>', true);
}Так же не забываем выполнить запрос на создание базы с заказами:
CREATE TABLE `modx_evoshop_orders` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`short_txt` text NOT NULL,
`content` text,
`price` varchar(255) NOT NULL,
`currency` varchar(255) NOT NULL,
`date` datetime DEFAULT NULL,
`sentdate` datetime DEFAULT NULL,
`note` text NOT NULL,
`email` varchar(255) NOT NULL,
`phone` varchar(255) NOT NULL,
`payment` varchar(128) NOT NULL,
`delivery` text,
`discount` text,
`tracking_num` varchar(32) DEFAULT NULL,
`status` int(11) NOT NULL,
`userid` int(11) NOT NULL,
`managerid` int(11) NOT NULL,
`1c_exchange` int(10) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;На этом все! :), мы получили на фронте:
— Корзину, страничку оформление заказа
— Отправку писем админу и клиенту
— Запись в базу заказов
p.s. В препаре надо еще добавить проверку правильности цен на товары ибо сейчас такой проверки нет соответственно никто не мешает в браузере поправить цену и отправить ее в заказ. Но в дальнейшем это допишу :)
p.s.s. Для работы с доставками и скидками так же все готово + уже адаптировал evoSale для evoShop. По хорошему еще чутка довылизываю js и переключусь на модуль. Как закончу базово с модулем будет релиз с автоинсталом, примерами и видео :)
Комментарии (0)