FENOM'енальный курс. Часть 10. Реализуем функцию купить в 1 клик.

Шаблон MAGAZINE вы можете скачать по ссылке.

Сегодня мы с вами расслабимся и реализуем достаточно простую, но в то же время достаточно конверсионную вещь – это будет заказ в 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->Настройки:

FENOM&#39;енальный курс. Часть 10. Реализуем функцию купить в 1 клик.

После этого можно проверить функциональность заказа в один клик на странице категории товаров. Надеюсь, что у вас все заработало с первого раза, как и у меня.

Далее предлагаю вам скопировать вызов сниппета 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.

FENOM'енальный курс. Часть 10. Реализуем функцию купить в 1 клик.

0 Число голосов: 6
4
5
1
6

Комментарии ()

  1. Антон 30 апреля 2020, 11:28 # 0
    Большое спасибо за уроки, с давних пор смотрю сначала ваше видео, теперь и сайт почитываю. Благодаря вашем урокам, я могу что-то делать на modx.
    1. Fle2x 29 июля 2020, 19:52 # 0
      Здравствуйте.Подскажите пож.как реализовать закрытие модального окна только по кнопке крестика и никуда больше.

      Наши клиенты

      Многие компании уже доверяют нам. Будьте в их числе!

      Хотите реализовать проект?

      Контакты

      Напишите нам - мы расскажем вам много интересного!


      Пермь, ул. Крупской 34, офис 510