Сегодня мы с вами расслабимся и реализуем достаточно простую, но в то же время достаточно конверсионную вещь – это будет заказ в 1 клик на основе компонента msOneClick из modstore.pro.
Вызовы заказа в 1 клик у нас в нескольких местах. Начнем с карточки товара в каталоге:
{$_modx->runSnippet('!msOneClick', [ 'id' => $id, 'create_order' => 'MS', 'delivery' => '2', 'required_fields' => 'receiver,email,phone', 'tplBtn' => '@FILE chunks/msoneclick_btn.tpl', 'tplModal' => '@FILE chunks/msoneclick_modal.tpl', 'tplForm' => 'msoneclick_form.tpl', ])}
И по, сложившейся традиции привожу код чанков. Чанк msoneclick_btn.tpl:
<a href="{$id | url}#{$selector}" data-hash="{$hash}" data-product="{$id}" class="{$selector} one-click btn_one_click"> <span>{$_modx->lexicon('msoc_btn_one_click')}</span> </a>
Чанк формы msoneclick_form.tpl (этот чанк я оставил как есть и сохранил как обычный чанк MODx, так как иначе он не подтягивается):
<form name="formSendCart" id="[[+formid]]" method="post" > <div class="forder-popup__goods clearfix"> <div id="msCart"> <div class="row msoc_product_line align-items-center" id="[[+key]]"> <div class="col-3 text-center msoc_product_line_image"> <img src="[[+image]]" alt="[[+pagetitle]]"/> </div> <div class="col-5 msoc_product_line_pagetitle"> <h4 class="product-name">[[+pagetitle]]</h4> </div> <div class="col-4 msoc_product_line_count"> <div class="product__add-cart "> <div class="text-center"> <span class="forder-popup__price"><span id="price_cou">[[+price]]</span> <i class="fa fa-ruble"></i></span> </div> <div class="text-center"> <input type="hidden" name="price" value="[[+price]]"> <input type="hidden" name="product_id" value="[[+product_id]]"> <div> <input type="number" name="count" autocomplete="off" value="[[+count]]" placeholder="0" class="input-sm form-control"> </div> </div> </div> </div> </div> </div> </div> <div class="form-horizontal msoneclick_form"> <input type="hidden" name="hash" value="[[+hash]]"> <input type="hidden" name="price" value="[[+price]]"> <input type="hidden" name="id" value="[[+id]]"> <div class="forder-popup__block forder-popup__block--grey"> <div class="form-group"> <label for="msoc_receiver" class="[[+receiver_required]]">[[%msoc_field_receiver]]</label> <input type="text" class="form-control" name="receiver" value="[[!+receiver:default=``]]" id="msoc_receiver" placeholder="[[%msoc_field_receiver_ple]]"> </div> <div class="form-group"> <label for="msoc_phone" class="[[+phone_required]]">[[%msoc_field_phone]]</label> <input type="text" class="form-control" name="phone" value="[[!+phone:default=``]]" autocomplete="off" id="msoc_phone" placeholder="[[%msoc_field_phone_ple]]"> </div> <div class="form-group"> <label for="msoc_email" class="[[+email_required]]">[[%msoc_field_email]]</label> <input type="email" class="form-control" name="email" value="[[!+email:default=``]]" id="msoc_email" placeholder="[[%msoc_field_email_ple]]"> </div> </div> <div class="forder-popup__block forder-popup__block--grey"> <div class="form-group"> <label for="msoc_comment" class="[[+comment_required]]">[[%msoc_field_comment]]</label> <textarea autocomplete="off" placeholder="[[%msoc_field_comment_ple]]" id="msoc_comment" name="comment" class="form-control" title="">[[!+comment:default=``]]</textarea> </div> </div> <div class="modal-footer"> <div class="text-center"> <button type="submit" name="msoc_send_from" class="btn btn-success btn-lg">[[%msoc.button]]</button> </div> <p class="text-muted description"> [[%msoc_form_footer_text]] </p> </div> </div> </form>
Чанк модального окна msoneclick_modal.tpl (переведен на Bootstrap 4):
<div class="modal msoneclick_modal [[+selector]]_modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">[[%msoc]]</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body [[+selector]]_body"></div> </div> </div> </div>
Отлично, мы с вами реализовали основную часть. Теперь нам нужно включить способ доставки “Быстрый заказ” в Приложения->miniShop2->Настройки:
После этого можно проверить функциональность заказа в один клик на странице категории товаров. Надеюсь, что у вас все заработало с первого раза, как и у меня.
Далее предлагаю вам скопировать вызов сниппета msOneClick в чанк compare_product.tpl и сделать следующий вызов сниппета в шаблоне товара:
{$_modx->runSnippet('!msOneClick', [ 'id' => $_modx->resource.id, 'create_order' => 'MS', 'delivery' => '2', 'required_fields' => 'receiver,email,phone', 'tplBtn' => '@FILE chunks/msoneclick_btn.tpl', 'tplModal' => '@FILE chunks/msoneclick_modal.tpl', 'tplForm' => 'msoneclick_form.tpl', ])}
Таким простым образом мы с вами реализовали функцию заказа в 1 клик с помощью msOneClick и Fenom.