Drupal → AJAX добавление товара в корзину в Commerce 2

22.12.2019
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Messenger\MessengerInterface;

/**
 * Implements hook_form_BASE_FORM_ID_alter(): commerce_order_item_add_to_cart_form.
 * Alter "Add to cart" form.
 */
function MODULENAME_form_commerce_order_item_add_to_cart_form_alter(array &$form, FormStateInterface $form_state): void {
  $product = $form_state->get('product'); /** @var ProductInterface $product */

  $form['actions']['submit']['#id'] = 'add-to-cart-button-' . $product->id();
  $form['actions']['submit']['#ajax'] = [
    'callback' => 'MODULENAME_add_to_cart_ajax',
    'event' => 'click',
    'selector' => ':input[data-drupal-selector="add-to-cart-button-' . $product->id() . '"]',
  ];
}

/**
 * "Add to cart" form ajax submit.
 */
function MODULENAME_add_to_cart_ajax(array &$form, FormStateInterface $form_state): AjaxResponse {
  // Delete status messages
  \Drupal::messenger()->deleteByType(MessengerInterface::TYPE_STATUS);

  // Show dialog
  $response = new AjaxResponse();
  $response->addCommand(new OpenModalDialogCommand('', [
    '#markup' => t('Product added to cart.'),
    '#attached' => [
      'library' => ['core/drupal.dialog.ajax'],
    ],
  ]));

  return $response;
}

Замечание 1 - кнопкам принудительно задаётся атрибут #id, чтобы они не конфликтовали с другими формами на странице и чтобы сгенерировать нужный html атрибут data-drupal-selector.

Замечание 2 - в #ajax указывается параметр selector, чтобы кнопки нормально работали если товар выводится на странице дважды.

Написанное актуально для
Commerce 2
Похожие записи

Комментарии

justlike.ru
06.01.2020, 03:27

Добавил код не в модуль а в THEMENAME.theme файл..

Работает, добавляет в корзину, но никакого сообщения или попапа в конце. Это связано с тем, что не в модуль разместил?

Не надо хранить бизнес логику в теме.

justlike.ru
06.01.2020, 20:20

Почему? Мне так удобно и это не бизнес логика а доработка визуальной составляющей.

А тема у меня одна на все проекты, все правки, вносимые в тему касаются каждого сайта, все остальное делается в админке и ксс.

Так а почему сообщение не всплывает?

жаль только количество товаров не обновляется на корзине и ajax корзина тоже не обновляется, после добавления в ней как было пусто, так и остаётся, товары появляются лишь после обновления страницы.

@dimitriy Добавьте в $response новую команду для обновления корзины

Добавить комментарий