Как добавить несколько товаров в корзину Virtuemart

Недавно попался интересный проект интернет магазина на связке joomla 1.5 и Virtuemart 1.1.9. Интернет магазин по продаже компьютеров и комплектующих. В магазине нужно было сделать конфигуратор, который должен обеспечивать возможность выбора нужных комплектующих для компьютерной сборки.

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

head-3
Как известно virtuemart не позволяет добавлять несколько товаров в корзину и покупателю придется жать несколько раз кнопку "купить", чтобы добавить каждую комплектующую отдельно, это унизительно для покупателя, а в некоторых случаях преступно и конечно же отрицательно скажется на прибыли магазина.

Кратко о конфигураторе


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

Товары-комплектующие лежат в соответствующих категориях virtuemart. Материнские платы лежат в категории "материнские платы", блоки питания в категории "блоки питания" и т.д.
В общем структуру категорий для конфигуратора сборок я безошибочно заложил так

  • Конфигуратор
    • Сборка 1
      • блоки питания
      • материнские платы
      • ...
    • Сборка 2
      • ...

Вывод нужной сборки


Нужная сборка выводилась модулем. Сам модуль выводился в материале путем загрузки модуля ({loadposition...}). Номер нужной сборки передавался через GET параметр, примерно так /index.php?Itemid=14&config=2. Здесь Itemid пункт меню - ссылка на материал с выводом модуля, config - ИД категории с нужной сборкой.

Дальше в модуле получаем GET параметр и по алгоритму выводим нужную сборку.

Внешний вид конфигуратора следующий.
18.12

Слева в сайдбаре была реализована панелька с информацией о выбранных комплектующих, ценой за сборку и кнопкой "оформить заказ". Так же на jQuery были реализованы динамично меняющиеся шкалы (шум, производительность, потребление).

18.121

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


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

Выход был, но он представлялся неказистым с точки зрения использования. Можно было попробовать сделать 1 товар - 1 сборка. Элементы сборки - свойства товара. В таком варианте мы имеем один товар со сложным описание для каждого свойства, кроме того у товара должна цена зависеть от выбранных свойств - тут тоже нужно думать над элегантностью решения.

В итоге было решено сконцентрироваться на возможности добавления нескольких товаров в корзину за один клик. Тем более структура конфигуратора уже была реализована, а о необходимости добавления сразу нескольких товаров я спохватился под конец.

Решение пришло почти сразу. Поковыряв стандартную форму добавления товара в корзину я понял, что могу сделать тоже самое используя технологию Ajax (позволяет обращаться клиенту к серверу без перезагрузки страницы) при помощи Фреймворка jQuery. А если можно Аяксом добавить 1 товар, то что мешает добавить циклом несколько товаров? Ну что же концепция есть, осталось родить код.

Ниже приводится сам код. В 1-16 строках описана функция ( _post(mass_id, i) ), которая отвечает за добавление одного товара. Функция принимает 2 параметра: mass_id - массив идентификаторов товаров; i - номер элемента массива, товар который будем добавлять. Зачем так сложно? можно ведь просто передать id товара. Эти заморочки вынужденные, о причинах станет ясно ниже.

Внутри функции mass_id вызывается метод jQuery.post(). Первым параметром в метод jQuery.post() передаем http адрес обработчика post запроса, далее передаем массив параметров в формате параметр:значение (подсмотрено из стандартной формы добавления товара).

Третий параметр-функция вызывается когда post запрос обработан, товар добавлен. И вот тут у меня возникли проблемы. Изначально я пробовал вызывать функцию _post() циклом по всем добавляемым товарам, фигня вышла, видимо следующий запрос перебивает предыдущий, в итоге в корзину попадает случайное кол-во товаров). Нас это не устраивает. Нужно дождаться когда выполнится очередной post запрос и затем вызвать следующий.

Делается это как раз при помощи третьего параметра-функции метода jQuery.post(). Еще одна фишка, функция _post() вызывается рекурсивно до тех пор пока не пройдемся по всему массиву. Под конец рекурсии делаем редирект в корзину.

Таким образом при вызове функции _post(mass_id,0) товары из массива mass_id рекурсивно будут добавлены в корзину.

function _post(mass_id, i){
            jQuery.post(
              "/index.php",
              {
                page: "shop.cart",
                flypage: 'shop.flypage.tpl',
                'quantity[]': 1,
                func: "cartAdd",
                option: "com_virtuemart",
                product_id: mass_id[i],
                'prod_id[]': mass_id[i]
                
                
              }, function(){i++; if (mass_id.length>i) _post(mass_id, i); else window.location.href="/index.php?option=com_virtuemart&page=shop.cart";}
              );   
 }

jQuery("#add_sborka").click(function(){
	    var list_base = new Array();  
    	    jQuery('#configurator input:checked').each(function(){
               list_base[list_base.length] = jQuery(this).val();     
            });

            _post(list_base, 0);
            
  });

У меня вызов функции _post() делается кликом по кнопке с ИД add_sborka. Происходит это в строках 18-27. Сначала формируется массив ИД товаров исходя из того что выбрал покупатель, затем рекурсивно вызывается функция _post().

Надеюсь, что материал окажется полезным, до новых встреч.



Похожие статьи:
↑ Наверх ↑
  • Комментарии
  • Леопольд (21/02/2013 - 17:52):

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

  • TakProstoTak.ru (21/02/2013 - 18:44):

    @Леопольд, #1:
    После цикла заполнения массива нужно положить в массив подарочный товар

    jQuery('#configurator input:checked').each(function(){
                   list_base[list_base.length] = jQuery(this).val();     
                });
    list_base[list_base.length] = 54; // 54 - id подарочного товара
    
  • Леопольд (21/02/2013 - 18:53):

    Сделал по другому, не знаю правильно ли, но работает.

    function _post(mass_id, i){
    jQuery.post(
    “/index.php”,
    {
    page: “shop.cart”,
    flypage: ‘flypage_default.tpl’,
    ‘quantity[]‘: 1,
    func: “cartAdd”,
    option: “com_virtuemart”,
    product_id: 1417, // – id подарочного товара
    ‘prod_id[]‘: mass_id[i]

    }, function(){i++; if (mass_id.length>i) _post(mass_id, i); else window.location;} // – здесь убрал ссылку на корзину так как перекидывало сразу на неё и не отображалось окошко выбора, “в корзину” или “продолжить”
    );
    }

    ну а #add_sborka прикрутил к корзине.

    теперь при нажатии на корзину автоматом добавляется ещё один товар.
    Если что то не так поправьте!
    ОГРОМНОЕ ВАМ СПАСИБО ЗА ПРЕДСТАВЛЕННЫЙ МАТЕРИАЛ!!!

  • TakProstoTak.ru (21/02/2013 - 19:28):

    @Леопольд, #3:

    Если что то не так поправьте!

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

  • Андрей (02/09/2013 - 15:00):

    Добрый день!
    А есть данная реализация для нового VM 2 ? Столкнулся с такой же задачей.

  • TakProstoTak.ru (02/09/2013 - 15:27):

    @Андрей, #5:

    А есть данная реализация для нового VM 2 ? Столкнулся с такой же задачей.

    Для VM 2 есть решение аналогичное. Но как и для VM 1.1.9 решение кривовато. Мне не нравиться как оно работает. Нужно делать несколько по другому.

  • Андрей (02/09/2013 - 15:35):

    @Андрей, #5:
    Для VM 2 есть решение аналогичное.

    А где его посмотреть можно?

  • TakProstoTak.ru (02/09/2013 - 15:46):

    @Андрей, #7:

    А где его посмотреть можно?

    Реализовал подобное решение для одного пректа на локалке. В паблик это решение не попало.

  • Андрей (02/09/2013 - 15:48):

    @TakProstoTak.ru, #8:

    @Андрей, #7:
    Реализовал подобное решение для одного пректа на локалке. В паблик это решение не попало.

    А поделиться можете?

  • TakProstoTak.ru (02/09/2013 - 15:54):

    @Андрей, #9:

    А поделиться можете?

    Если вам дать исходники, то сами вы не разберетесь, а объяснять мне лень. Позже возможно статью напишу. Еще хотелось бы отладить механизм продажи подобных решений. Если у кого был опыт поделитесь…

  • Иван Ткаченко (13/10/2014 - 7:21):

    Спасибо огромное добрый ты человек!

    Просто напишу от себя, может кому понадобится, добавить товар в количестве более 1 шт. можно так:

    list_base[list_base.length] = 322;
    list_base[list_base.length] = 139;
    list_base[list_base.length] = 139;
    list_base[list_base.length] = 324;
    list_base[list_base.length] = 324;
    list_base[list_base.length] = 324;

Прокомментировать

Подписаться, не комментируя