Узнайте, как работают кнопки: "Купить", "В корзину", "В список желания", "К сравнению", "Быстрый заказ", "Сообщит о поступлении", и как внести изменения в их код на страницах продуктов.

Ниже показаны все элементы страницы для одного продукта (карточка товара). Путь к файлу в теме: views/product/default.tpl

 

В этом материале


Кнопка "Купить"

При нажатии на кнопку "Купить" будет добавлен продукт в корзину покупателя, после этого покупатель будет перенаправлен на страницу заказа (страница с формой заказа).

button-to-order
Кнопка "Купить"

Кнопка (ссылка) должна иметь следующие обязательные атрибуты:

  1. data-click="to-order" – вызывает событие 'click' при клике на кнопку;

  2. data-id="{{ id }}" – передаёт идентификатор продукта;

  3. data-url="{{ form_url }}" – передаёт ссылку на страницу заказа.

Пример:

<a href="#" data-click="to-order" data-id="{{ id }}" data-url="{{ form_url }}" class="btn btn-success">
	<span class="fas fa-check"></span>
	{{ '_' | jtext: 'COM_JKASSA_BUY' }}
</a>

Кнопка "В корзину"

При нажатии на кнопку "В корзину" будет добавлен продукт в корзину покупателя.

button-to-cart
Кнопка "В корзину"

Кнопка (ссылка) должна иметь следующие обязательные атрибуты:

  1. data-click="to-cart" – вызывает событие 'click' при клике на кнопку;

  2. data-id="{{ id }}" – передаёт идентификатор продукта;

  3. data-url="{{ form_url }}" – передаёт ссылку на страницу заказа.

Пример:

<a href="#" data-click="to-order" data-id="{{ id }}" data-url="{{ form_url }}" class="btn btn-success">
	<span class="fas fa-check"></span>
	{{ '_' | jtext: 'COM_JKASSA_BUY' }}
</a>

Кнопка "В список желания"

При нажатии на кнопку "В список желания" будет добавлен продукт в список желаний покупателя.

button-to-wishlist
Кнопка "В список желания"

Кнопка (ссылка) должна иметь следующие обязательные атрибуты:

  1. data-click="to-wishlist" – вызывает событие 'click' при клике на кнопку;

  2. data-id="{{ id }}" – передаёт идентификатор продукта;

Пример:

<a href="#" data-click="to-wishlist" data-id="{{ id }}" class="btn btn-outline-secondary btn-circle"
  title="{{ 'sprintf' | jtext: 'COM_JKASSA_TO_WISHLIST_TITLE', name }}">
	<span class="fas fa-heart text-danger"></span>
</a>

Кнопка "К сравнению"

При нажатии на кнопку "К сравнению" будет добавлен продукт в список сравнения продуктов.

button-to-compare
Кнопка "К сравнению"

Кнопка (ссылка) должна иметь следующие обязательные атрибуты:

  1. data-click="to-compare" – вызывает событие 'click' при клике на кнопку;

  2. data-id="{{ id }}" – передаёт идентификатор продукта;

Пример:

<a href="#" data-click="to-compare" data-id="{{ id }}" class="btn btn-outline-secondary btn-circle"
  title="{{ 'sprintf' | jtext: 'COM_JKASSA_COMPARE_ADD_TITLE', name}}">
	<span class="fas fa-random"></span>
</a>

Кнопка "Быстрый заказ"

При нажатии на кнопку "Быстрый заказ" будет открыто модальное окно с формой быстрого заказа. Форма быстрого заказа должна быть создана в административном разделе JKassa (Инструменты HTML-формы) и выбрана в параметрах компонента (Конфигурация Корзина | Заказ Быстрый заказ).

button-quickorder
Кнопка "Быстрый заказ"

Для кнопка (ссылки) имеется одно значение: {{ quickorder }} - ссылка на страницу с формой быстрого заказа. Если форма быстро заказа не выбрана в параметрах компонента, то вернёт пустое значение.

Файл с формой находится по адресу: html/forms/quickorder.tpl. Подробнее смотрите в описании к файлу.

Код кнопки зависит от специфики вашей темы. Например, для тем, которые используют библиотеку Bootstrap 4 кнопку и модальное окно для неё можно вывести так:

<a href="#" data-click="show-modal" data-id="jk-modal_quickorder" data-src="{{ quickorder }}" class="btn btn-outline-dark">
	<span class="fas fa-star"></span>
	{{ '_' | jtext: 'COM_JKASSA_QUICK_ORDER' }}
</a>

{{ 'renderModal' | bootstrap4: 'jk-modal_quickorder', '', 'COM_JKASSA_QUICK_ORDER', '', '', true }}

Кнопка "Сообщит о поступлении"

При нажатии на кнопку "Сообщит о поступлении" будет открыто модальное окно с формой для добавления продукта в список ожидания.

button-waitinglist
Кнопка "Сообщит о поступлении"

Для кнопка (ссылки) имеется одно значение: {{ waitinglist }} - ссылка на страницу с формой для добавления пользователя в лист ожидания. Передаёт значение только если продукта нет в наличии.

Файл с формой находится по адресу: html/forms/waitinglist.tpl. Подробнее смотрите в описании к файлу.

Код кнопки зависит от специфики вашей темы. Например, для тем, которые используют библиотеку Bootstrap 4 кнопку и модальное окно для неё можно вывести так:

<a href="#" data-click="show-modal" data-id="jk-modal_waitinglist" data-src="{{ waitinglist }}" class="btn btn-secondary">
	<span class="fas fa-envelope"></span>
	{{ '_' | jtext: 'COM_JKASSA_WAITINGLIST' }}
</a>

{{ 'renderModal' | bootstrap4: 'jk-modal_waitinglist', '', 'COM_JKASSA_WAITINGLIST', '', '', true }}