xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в
/**
 * 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) {
  $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() . '"]',
  ];
 
  $form['#attached']['library'][] = 'core/drupal.dialog.ajax';
}
 
/**
 * "Add to cart" form ajax submit.
 */
function MODULENAME_add_to_cart_ajax(array &$form, FormStateInterface $form_state) {
  // Delete status messages
  \Drupal::messenger()->deleteByType(MessengerInterface::TYPE_STATUS);
 
  // Show dialog
  $response = new AjaxResponse();
  $response->addCommand(new OpenModalDialogCommand('', t('Product added to cart.')));
 
  return $response;
}

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

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

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

Комментарии RSS

Круто!

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

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

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

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

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

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

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании