Drupal → Форма "Добавить в корзину" со списком всех вариантов товара. Брошенная корзина drupal


Модуль упрощенной корзины для Drupal Commerce

Недавно приводил код для блока упрощенной корзины Drupal Commerce. Заодно обещался показать, как этот блок аяксифицировать, чтоб по нажатии кнопки «В корзину» он немедленно обновлялся.Аяксифицировать, собственно, очень просто — в D7 для этого есть прекрасный набор функций ajax_command_*, так что даже JS-код писать никакой не надо. Однако вместо JS-кода надо писать небольшой модуль. Так что пришлось оформить упрощенную корзину в виде модуля DC Smallcart, которым я с вами и хочу поделиться. Ссылка на файл — в конце заметки.Собственно, что в модуле.1. Стандартная табличка корзины Commerce заменяется простой фразой «В корзине всего X товаров на сумму Y рублей». Приблизительно так:

Ссылки на корзину и оформление заказа — присутствуют.2. Фраза «В корзине всего…» — естественно, на английском. К модулю прилагается файл с переводом на русский. Перевод выполнен безо всякого малодушия, с соблюдением склонений при изменении числа товаров в корзине.3. При подключении, модуль автоматически аяксифицирует кнопки «Добавить в корзину». То есть при нажатии на такую кнопку, блок корзины обновится без перезагрузки страницы. Кроме того, без перезагрузки страницы появится и соответствующее системное сообщение (товар добавлен в корзину, и т.д.).4. Разметки минимум, но все же для удобства генерация блока выведена в отдельный темплейт.5. Есть такой нюанс: при аяксификации естественно заранее неизвестно, какая тема оформления установлена у потребителя модуля. Поэтому не ясно, за какие #id цепляться, чтобы грамотно обновить блок и вывести системное сообщение. В текущей реализации модуль цепляется за id блока для его обновления (#block-dc_smallcart-small_cart) и за id хлебных крошек (#breadcrumbs) для вывода системного сообщения сразу после блока хлебных крошек. Поменять эти #id можно прямо в конце файла dc_smallcart.module.6. Картинка с корзиной и стили CSS для оформления блока, естественно, в комплект не входят.Примерно так. Качайте, пользуйтесь на здоровье.

Все статьи блоггера: Graker

drupal-bloggers.com

Node Basket: Модуль корзины для нод. Drupal 6

С установкой модуля у посетителей вашего сайта появиться возможность откладывать выбранные ими ноды в корзину. С последующим оформлением и отправкой заказа на указанный в настройках модуля почтовый адрес.

О модуле

Необходимость в подобном функционале у меня появилась во время реализации идеи авторского частного фотобанка. Сайта фотографа, где б у посетителей была возможность отбирать нужные им фотографии из базы предоставленных для ознакомления, и отправлять скомпонованный заказ на мыло их автору.

За основу был взять модуль Acart Андрея Постникова, который он выкладывал под «пятый» Друпал на drupal.ru пару лет назад.

Под проект авторского фотобанка Node Basket был дополнительно «заточен» под совместную работу с модулем Image. В варианте, что предложен для скачивания эта специфичность отсутствует. Посчитал более полезным предоставить базовый набор функционала, не отягощенный моими предпочтениями и надобностями.

Возможности и настройки модуля

Вся работа Node Basket полностью строиться на его взаимодействии с сессией текущего пользователя. С завершением сессии вся история корзины полностью очищается. Посему никаких дополнительных плюсов у зарегистрированного пользователя не будет. Ну если только автоматическое заполнение полей с контактными данными при оформлении заказа. Тем не менее добавлена возможность ограничения доступа по ролям к использованию корзины, на всякий случай.

Для включения модуля на странице /admin/build/menu ищите его в наборе «Другой» (или «Other», если не переведено).

Модуль Node Basket на странице списка модуле Drupal.

После включения можно указать для Node Basket e-mail, на который будут отсылаться оформленные заказы (/admin/settings/nodebasket). Если не указывать, то используется основной почтовый адрес сайта из глобальных настроек.

Страница настроек почтового адреса для модуля Node Basket.

Далее настраиваем Node Basket отдельно для каждого типа материалов. На странице настроек типов нод появится новый пункт в наборе «Процесс». По умолчанию корзина отключена. Включаем по мере необходимости, выбором одного из режимов работы:

Настройка Node Basket для работы с разными типами материалов.

У материалов, которым корзина или оформление заказа разрешены, в массиве $links появляются соответствующие ссылки.

Блоки, создаваемые модулем

Node Basket создаст два новых блока. По умолчанию, естественно, отключены.

Один из них будет собственно сама корзина, не проявляющая себя до тех пор, пока в ней ничего нет. Отображается в выбранном регионе темы, когда пользователь что-то в нее добавляет. Выглядит, как ссылки на страницу со списком отложенного и страницу оформления заказа.

Блок с корзиной модуля Node Basket.

Второй блок модуля отвечает за отображение истории уже оформленных и отправленных заказов текущего пользователя.

Ограничение доступа к корзине

На странице настроек доступа для разных пользовательских групп (admin/user/permissions) отмечаем для Node Basket правила доступа к использованию корзины. Если забудете это сделать, то пользоваться корзиной сможет только Юзер № 1, изначально все настройки доступа обнулены.

Примечания

Тестирование модуля проводилось на серверах с PHP 5.2. В этом случае все работает без ошибок и недоразумений. Как будет вести себя модуль с другими версиями PHP прогнозировать не берусь.

Все замечания касательно Node Basket, его кода и его работы, прошу оставлять в комментариях к данной публикации.

!!! В выложенной версии модуля не реализованы механизмы его взаимодействия с кешем сайта (при включенном кешировании). Работа в этом направлении ведется. Пока же, просьба, использовать модуль лишь для ознакомления с принципами его работы.

Скачать модуль

drupalka.ru

Drupal: AJAX кнопка "Добавить в корзину" в Drupal Commerce

Код, позволяющий добавлять товары в корзину с помощью AJAX:

/** * Implements hook_form_FORM_ID_alter(): commerce_cart_add_to_cart_form */ function modulename_form_commerce_cart_add_to_cart_form_alter(&$form, &$form_state) { $form['submit']['#ajax'] = array('callback' => 'modulename_add_to_cart_ajax_callback'); $form['#submit'][] = 'modulename_add_to_cart_form_submit'; }   /** * "Add to cart" button ajax callback. */ function modulename_add_to_cart_ajax_callback($form, &$form_state) { drupal_get_messages(); $cart_block = module_invoke('commerce_cart', 'block_view', 'cart'); return array( '#type' => 'ajax', '#commands' => array( // Возможно придётся изменить селектор, если у вас кастомный шаблон для блока корзины ajax_command_html('#block-commerce-cart-cart .content', render($cart_block['content'])), ), ); }   /** * "Add to cart" button submit callback. */ function modulename_add_to_cart_form_submit($form, &$form_state){ $form_state['rebuild'] = TRUE; }

Код конфликтует с dev версией Commerce Cart Ajax, потому что модуль достаточно кривой.

Добавлено 29.04.2014

Способ подружить ajax кнопки с модулем Views Infinite Scroll:

(function ($) { Drupal.behaviors.commerceAjaxCart = { attach: function (context, settings) { $('.commerce-add-to-cart .form-submit', context).once('ajax', function () { var base = this.id; Drupal.ajax[base] = new Drupal.ajax(base, this, { event: 'mousedown', url: Drupal.settings.basePath + 'system/ajax' }); }); } } })(jQuery);

Добавлено 18.05.2014

Как выяснилось, у способа есть большой недостаток — при добавлении к любому элементу формы свойства #ajax, у формы включается кеширование и при каждом выводе такой формы, создаётся 2 записи в таблице cache_form.

Т.е. если открыть страницу с 20-ю товарами и ajax формой "Добавить в корзину", то в таблицу cache_form добавится 40 новых записей, и эти записи будут добавляться каждую загрузку страницы. Если учесть, что одна запись в кэше весит 10-20 kb, то картина выходит довольно печальная.

Решение здесь.

Обсуждения:

— Cache form table saves very large records when forms are displayed in a view— Don't store the full node in the add to cart form state— problem with cache_form table

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

xandeadx.ru

[частично решено] Изменить вид корзины

Здравствуйте!Очень нужно изменить вид корзины в Ubercart 3 под Drupal 7.8. Убрать все текстовые ссылки и сделать только одну иконку, у которой рядом будет написано что-то вроде "В корзине Х товаров на Y рублей". Иконка уже запускает просмотр корзины в блоке "content".Я ковырялся в тексте соответствующего модуля, там все сделано через массивы такого вида:

$summary_links = array(         'cart-block-view-cart' => array(

          'href' => 'cart',          'attributes' => array('rel' => 'nofollow'),        ),      );

То есть, условно, вот эту функцию t('View cart') заменить бы на стандартную функцию вывода картинки - но как?Прошу помочь!Для Drupal 6.x для корзины написано много интересного, а вот для 7.х практически ничего нет.

И еще вопрос - проще ли или сложнее ли подобную задачу решить на eCommerce?

UPD: Нашел решение через CSS.Оно мне не очень нравится, но уровень знаний другого не позволяет.Вот как это выглядит (лишние строчки опускаю):

#block-uc-cart-cart  {  background: #fff url(/sites/default/files/cart.png) no-repeat 10px 10px;  }

#block-uc-cart-cart table[class=cart-block-items] { display: none; }

#block-uc-cart-cart table[class=cart-block-summary] { position:relative;   top:25px;   left:60px; }

#block-uc-cart-cart li { border:none; }

#block-uc-cart-cart li a { display:block;   width:40px;   height:40px;   position:absolute;   top:-15px;   left:-50px; }

#block-uc-cart-cart li[class="cart-block-checkout last"] { display: none; }

Плюс в тексте модуля в t('View cart') надо убрать текст.

Остаются артефакты - правее и ниже остается небольшая текстовая зона (ее можно "нащупать" мышкой, вид курсора меняется). Если не вставить строчку #block-uc-cart-cart li { border:none; } справа от этой области появляется граница. Как избавиться от этой области, сохранив ссылку, я не нашел.Мне кажется, в строке 'title' => t('View cart'), вместо t('View cart') можно закинуть какое-то пустое значение, и тогда эта область исчезнет, но я не соображу, какое именно.

Если можно что-то улучшить, прошу прокомментировать.

drupal.ru

Drupal: AJAX кнопка обновления корзины + пересчёт цены при изменении количества

Задача — аяксифицировать кнопку "Update cart" и поля ввода количества товара.

Кнопка обновления корзины будет работать на немного изменённом коде из поста AJAX удаление товаров из корзины Drupal Commerce. А поля "Количество" будут эмулировать нажатие кнопки "Update cart" с помощью свойства trigger_as:

/** * Implements hook_form_FORM_ID_alter(): views_form_commerce_cart_form_default. */ function MODULENAME_form_views_form_commerce_cart_form_default_alter(&$form, &$form_state) { $form['#action'] = url('cart');   // AJAX button "Update cart" $form['actions']['submit']['#name'] = 'update-cart'; $form['actions']['submit']['#ajax'] = array( 'callback' => 'MODULENAME_cart_form_ajax_update', );   // AJAX quantity inputs foreach (element_children($form['edit_quantity']) as $key) { $form['edit_quantity'][$key]['#ajax'] = array( 'callback' => '', 'event' => 'change', 'progress' => 'none', 'trigger_as' => array( 'name' => 'update-cart', ) ); } }   /** * AJAX update cart. */ function MODULENAME_cart_form_ajax_update($form, &$form_state) { drupal_get_messages(); $_POST = array(); $view = $form_state['build_info']['args'][0]; $order_id = commerce_cart_order_id($GLOBALS['user']->uid); $cart_view_output = commerce_embed_view($view->name, $view->current_display, array($order_id));   return array( '#type' => 'ajax', '#commands' => array( ajax_command_replace('.view-commerce-cart-form', $cart_view_output), ), ); }

Как это выглядит:

Для просмотра видео необходим браузер с поддержкой формата WebM

Доработанный и оформленный в виде рабочего модуля код можно забрать в моей песочнице — Commerce Ajax Cart Form.

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

xandeadx.ru

Drupal: Форма "Добавить в корзину" со списком всех вариантов товара

Задача — вывести в форме "Добавить в корзину" список всех вариантов товара и дать пользователю возможность заказать любой(ые) из них.

Решение зависит от способа вывода вариантов товара (будет ниже).

Все решения базируются на следующем вьюсе по сущностям product:

Основное тут — связь по полю Commerce Product: Referencing Node и контекстный фильтр по Nid с дефолтным значением Content ID from url. Экспорт вьюхи.

Вьюшка выводится на странице товара любо с помощью блоков, либо с помощью модуля Eva, либо программно в node.tpl.php.

Множество кнопок "Добавить в корзину" с полями "Количество" (или без)

Самый простой вариант. Для решения достаточно добавить в представление поле Commerce Product: Add to Cart form. Поле "Количество" добавляется включением опции "Display a textfield quantity widget on the add to cart form" в настройках поля "Add to Cart form".

Видео урок

Одна кнопка "Добавить в корзину" с множеством полей "Количество"

Решение — установить модуль Commerce Add to Cart Extras и добавить в представление новое поле Commerce Product: Quantity input field (Quantity). Видео.

Замечание: Views формы принудительно кэшируются, что может негативно сказаться на производительности сайта при выводе множества форм на одной странице.

Альтернатива — мой модуль Commerce add to cart multiple formatter (работает на ajax, формы не кэширует).

Одна кнопка "Добавить в корзину" с множеством чекбоксов и полей "Количество"

Решение:

1. Установить модуль Commerce Add to Cart Extras.

2. Добавить в представление новое поле Commerce Product: Quantity input field.

3. Добавить в представление поле Commerce Product: Product ID с включённой опцией Exclude from display и сделать это поле первым в списке (скриншот).

4. Добавить в представление поле Global: Custom text с текстом [form-item-add-to-cart-state-[product_id]] (скриншот).

5. Добавить в свой модуль или template.php следующий код:

/** * Implements hook_form_BASE_FORM_ID_alter(): views_form. */ function MODULENAME_form_views_form_alter(&$form, &$form_state, $form_id) { if ($form_id == 'VIEWS_FORM_ID') { $form['add_to_cart_state'] = array('#tree' => TRUE); foreach (element_children($form['add_to_cart_quantity']) as $key) { $form['add_to_cart_state'][$key] = array('#type' => 'checkbox'); $form['#substitutions']['#value'][] = array( 'placeholder' => '[form-item-add-to-cart-state-' . $form['add_to_cart_quantity'][$key]['#product_id'] . ']', 'field_name' => 'add_to_cart_state', 'row_id' => $key, ); } array_unshift($form['#submit'], 'MODULENAME_multi_add_to_cart_form_submit'); } }   /** * Custom submit callback for multi_add_to_cart_form. */ function MODULENAME_multi_add_to_cart_form_submit($form, &$form_state) { foreach ($form_state['values']['add_to_cart_state'] as $key => $state) { if (!$state) { $form_state['values']['add_to_cart_quantity'][$key] = 0; } } }

Заменить VIEWS_FORM_ID на id формы.

6. Сбросить кэш.

Одна кнопка "Добавить в корзину" с множеством чекбоксов

Тут может быть два решения — первое, это сделать всё как в прошлом пункте, установить значение поля "Количество" равным 1 и скрыть его с помощью css; второе, это воспользоваться Commerce VBO Views + Rules.

Основные шаги по второму способу:

1. Создаём в Rules компонент Rule. В компоненте будет один параметр — Commerce product.

2. Добавляем в компоненте действие Добавить в корзину.

3. Добавляем в представление поле VBO и выбираем экшеном ранее созданный компонент.

Как это должно примерно выглядеть.

P.S: если не нужен Views, то можно просто заальтерить форму commerce_cart_add_to_cart_form, изменить дефолтный select и подменить #submit с последующим программным добавлением товара в корзину.

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

xandeadx.ru


Prostoy-Site | Все права защищены © 2018 | Карта сайта