UMI.CMS. Добавление товара в корзину без перезагрузки страницы или Ajax добавление товара в корзину

UMI.CMS сердце вашего сайта

Данная статься будет посвящена тому, как сделать добавление товара в корзину без перезагрузки страницы в системе управления UMI.CMS или по другому AJAX добавления товара в корзину.

Сразу хочу отметить, что разработчики UMI.CMS об этом уже полностью позаботились, а нам остается только настроить это под себя. Проще простого ничего нет. Единственное, возникает сложность, если вы используете tpl шаблонизатор, нет скриптов, которые отвечают за добавление товара на AJAX.

За то, что у вас нет файлов, вы не беспокоитесь, все прилаживаю к данной статье.

Итак поехали.

Вся статья будет делиться на три части

  1. Добавление товара в корзину
  2. Обновление информации в мини корзине
  3. Всплывающее уведомление о том, что товар добавлен в корзину UMI.CMS


Первым делом нужно скачать архив с файлами и залить скачанные файлы которые отвечает за работоспособность себе на сайт в папку. Если у вас старая версия UMI.CMS, то в папку /js/. Если же у вас новая версия, /template/название_шаблона/js/

В итоге у вас должен быть путь:

/js/basket/ или /template/название_шаблона/js/basket/

Теперь, если вы знакомились с уроком - UMI.CMS. Как сделать вывод всех товаров из разделов каталога, то вам нужно править catalog-all-products.tpl, если же это ваш шаблон, то вам просто нужно добавить в файл строчку:

<script type="text/javascript" src="/templates/bestinstrument/js/basket/__common.js"></script>

После того, как все готово, нужно поправить файл __common.js, в котором есть строка инициализирующая загрузку дополнительных файлов site.utils.js.init, в ней нужно поправить путь и добавить путь к вашему шаблону.

site.utils.js.init([
    '/js/client/basket.js', // этот файл есть по умолчанию в сборках
    '/templates/demoold/js/basket/basket.js', // заменить demoold на название вашего шаблона
    '/templates/demoold/js/basket/forms.js', // заменить demoold на название вашего шаблона
    '/templates/demoold/js/basket/message.js', // заменить demoold на название вашего шаблона
    '/templates/demoold/js/basket/captcha.js' // заменить demoold на название вашего шаблона
]);

Идем далее...

Теперь нужно немного модернизировать макрос, которые выводит ссылку на добавление товара в корзину. Для этого открываем файл catalog-items.tpl, если вы пришли из этого урока, если нет то вам нужно править свой файл. Находите примерно вот такие строчки:

$FORMS['objects_block_line'] = <<<END
    %catalog viewObject(%id%, 'preview')%
END;

В данном макросе происходит подключение шаблона, который генерирует вывод мини карточки товара UMI.CMS. Путь \templates\demoold\tpls\catalog\, открываете файл preview.tpl. Далее нужно найти секцию $FORMS['view_block'] = <<<END, и там подключением макроса:

%emarket basketAddLink(%id%)%

и заменить макрос на:

<a class="basket_list" id="add_basket_%id%" href="%pre_lang%/emarket/basket/put/item/%id%/">Добавить в корзину</a>

Здесь ключевыми моментами является идентификатор id="add_basket_%id%" и класс class="basket_list" они передают информацию, которую нужно добавить в корзину. На случай, если у пользователя не будет работать javascript, то для него будет спасительная строчка href="%pre_lang%/emarket/basket/put/item/%id%/"

Первая часть завершена, и если все сделано правильно, то товар добавляется в корзину без перезагрузки страницы.

Далее нужно сделать обновление информации в мини корзине, т.е. обновить добавленный в нее товар.
Для этого нужно открыть файл, который отвечает за вывод мини корзины. Так как я использую стандартную сборку UMI.CMS с шаблоном demoold, я открываю файл basket.tpl, который находится в папке \templates\demoold\tpls\emarket\. У вас это может быть совсем другой файл.

В файле basket.tpl (у вас может быть свой), находите секцию $FORMS['order_block'] = <<<END, эта секция генерирует вывод товаров лежащих в корзине пользователя. У меня она имеет следующее содержание:

$FORMS['order_block'] = <<<END</pre>
<div class="block" id="rubricator">
<h2>У Вас в корзине</h2>
<ul>%items%</ul>
 <strong>
 Всего товаров: %total-amount%

 Общая стоимость: %total-price%
 </strong>
 <a href="%pre_lang%/emarket/cart/">Перейти в корзину</a></div>
<pre>
END;

И теперь нужно привести корзину к единому содержанию. Что я имею ввиду. По умолчанию в данном js файле информация о товаре выводится в следующем виде: [кол-во] шт товаров на сумму [сумма] руб (5 шт товаров на сумму 794 руб). Поэтому шаблон должен содержать следующий вид:

$FORMS['order_block'] = <<<END</pre>
<div class="block" id="rubricator">
<h2>У Вас в корзине</h2>
 %total-amount% шт товаров на сумму %total-price%
 <a href="%pre_lang%/emarket/cart/">Перейти в корзину</a></div>
<pre>
END;

Ключевым моментом в данном кусочке кода является class="basket_info_summary", сообщающий скрипку что и где обновить =). На странице данный код не должен более повторяться.

После того, как вы все сделали, то товар добавляется в корзину UMI.CMS на AJAX и информация обновляется в мини корзине.
Теперь осталось добавить вывод уведомление пользователю о том, что товар успешно добавлен.
Я не буду выдумывать ничего военного, просто сделаю вывод jQuery popUp с двумя ссылками «продолжить покупки» и «перейти в корзину». Нсли вы захотите, модифицировать данный скрипт можно различными способами, я допустим делал различного вида popUp-ы на страницах, различное отображение мини корзины, различные способы добавления товара в корзину и т.д. В общем все что хотите то и делайте, главное, чтобы у вас и у вашего заказчика было хорошее воображение 😉

Итак поехали.
Нужно открыть файл basket.js, вы его скачали на первом шаге, и найти следующий участок кода, строка 31:

if (detect_options.amount) {
    var add_basket_button = jQuery('#add_basket_' + detect_options.id);
    /*
     * Добавление в корзину, при нажатие на <a class="basket_list b-content_category-item-zakaz" id="add_basket_%id%"></a>Заказать
     */
    // здесь, если у вас класс привязан к тегу <a>
    if (add_basket_button[0].tagName.toUpperCase() == 'A') {
       add_basket_button.text(add_basket_button_text + ' (' + detect_options.amount + ')');
    }
...

И чуть ниже строки:

   add_basket_button.text(add_basket_button_text + ' (' + detect_options.amount + ')');

Добавляете строчку:

    site.basket.popup(id);

В этой строке мы делаем обращение к функции popup. Пока этой функции нет файле, ее нужно добавить. Для этого опускаетесь в самый конец файла и добавляете функцию:

site.basket.popup= function(id) {
    var winW = jQuery(window).width();
    var winH = jQuery(window).height();

    var objW = 462;
    var objH = 157;

    var left = (winW / 2) - (objW / 2);
    var top = (winH / 2) - (objH / 2);

    // Темная подложка
    jQuery('<div id="b-success-added-mask" style="display: none;"></div>').css({
        "width" : "100%",
        "height" : winH,
        "opacity" : 0.5,
        "position" : "fixed",
        "background" : "black",
        "top" : 0,
        "left": 0
    }).appendTo("body").fadeIn();

    // Окно с блоком
    jQuery('\
        <div id="b-success-added" class="b-success-added" style="display: none;">  \
            <div class="clear"></div> \
            <a href="javascript: void(0)" titlt="Купить еще" class="b-success-added__continue">&larr; Купить еще</a> \
            <a href="/emarket/cart/" title="Оформить заказ" class="b-success-added__order">Оформить заказ &rarr;</a> \
            <div class="clear"></div> \
        </div> \
    ').css({
        "position" : "fixed",
        "left" : left,
        "top" : top,
		"width": "400px",
		"padding": "10px",
		"border" : "1px solid #fff",
		"text-align" : "center",
		"font-size" : "20px",
		"background" : "#CCCCCC"
    }).appendTo("body").fadeIn();

    // Удаление\скрытие блоков
    jQuery('.b-success-added__continue').live("click", function (e) {
        e.preventDefault();
        jQuery("#b-success-added, #b-success-added-mask").fadeOut("fast", function() {
            jQuery(this).remove()
        });
    })
};

Итак, после этих не слишком сложных махинаций реализована функция добавления товара в корзину UMI.CMS без перезагрузки страницы.

Источники вдохновения и ссылки на скачивание:

Оригинальная статья на wiki.umisoft.ru

Оригинальные файлы basket.js

Модифицированные файлы basket.js

Кстати я написал статью, о том, как добавить товар к сравнению без перезагрузки страницы

Bookmark the permalink.

Также может быть интересно:

  • Андрей

    Вот бы тоже самое, только с функцией сравнения 🙂

    • Спасибо за идею для статьи, думаю к концу недели(в субботу — воскресенье) напишу.

      До этого нужно самому разобраться с этим функционалом, еще так не делал.

      Андрей, есть ли у вас какие либо наработки уже?

      • Андрей

        Александр, в JavaScript не силен. Использую, как правило готовые скрипты (иногда правлю очевидные вещи). А по моим наработкам по UMI можете посмотреть на a08.ru

        • Здравствуйте, Андрей.

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

          В конце недели постараюсь написать статью по этому поводу.

        • Здравствуйте, Андрей. Как и обещал, подготовил статью, в которой описано, как сделать добавление товара к сравнению без перезагрузки страницы pontyk.com.ua/umi-cms/add-to-compare/

  • Сергей

    У вас ошибка в коде Добавить в корзину так правильнее будет...

    • Спасибо, Сергей, не в ту ссылку вставил класс и идентификатор — class="basket_list" id="add_basket_%id%", нужно заменить на %pre_lang%/emarket/basket/put/item/%id%/.

      Еще раз спасибо!

    • Обновил статью. Спасибо!

  • m11

    а как такую же корзину только для xsl шаблона сделать?

    • Думаю, что можно. И думаю даже, что можно применить плагины jQuery Ajax для реализации — вот тут пример как применяется jQuery Ajax при добавление товара к сравнению pontyk.com.ua/umi-cms/add-to-compare/.

      Вот тут пример, как можно сделать отправку форм без перезагрузки — goo.gl/XIgb7

      А вообще, если у Вас есть ключ лицензии UMI.CMS то просто напиши вопрос в поддержку и они вам ответят как можно это сделать. =)

      Удачи!

  • Сергей

    На сборке 2.9 почему то не работает — постоянно пользовался этим способом и все работало — сейчас нет!!! Кто нибудь сталкивался с подобной проблемой???

    • Здравствуйте, Сергей.

      Что у вас не работает? Ошибки консоли? Там все должно быть написано.

      Я буквально вчера брал этот скрипт и подключал на сборку 2.9.

  • Александр

    Здравствуйте. Использую этот способ, в стандарте всё нормально. Но вот понадобилось заказчику выводить корзину во всплывающем окне. При этом товар добавляется только в миникорзину (если в карточке товара кликнуть «в корзину» в миникорзине он появляется, а вот когда кликакикаешь на этой же странице «оформить заказ» и появляется вспдывающая корзина, то оказывается что товар в неё не добавлен). Может сталкивались с такой проблемой. Буду благодарен. Спасибо.

    • С такой задачей к большому сожалению не сталкивался. Получилось ли у Вас реализовать? Покажите? =)

  • Глеб

    Здравствуйте, на версии 2.8.5 не работает.

    Будто неподключается скрипт, все проверял jquery,скрипты подключенны точно.

    Добавление в корзину происходит, но как обычно с перезагрузкой

    • Добрый вечер, Глеб, на сайте bertoni.ua используется версия 2.8.5, за основу взят этот скрипт, но был немного модифицирован по просьбе заказчика.

      Посмотрите, что пишет консоль при добавление товара в корзину. Может происходит конфликт скриптов.

      • Глеб

        Ошибок не было, ну почти))) Ну в любом случае они с этой проблемой были связаны.

        Не хватало стандартного скрипта:

        Как и почему он влияет не знаю, методом экспериментов все получилось.

        Спасибо за ссылку.

  • Глеб

    Здравствуйте, а как все это реализовать на форме.

    Просто в данный момент, пришлось перейти с ссылки на добавления в корзину, на форму, с опциями.

    • Добрый вечер, Глеб.

      К большому с формами я толком не работал, поэтому подсказать не могу.

      Знаю, что формы, вроде бы используются в шаблоне «Современный», посмотрите способ реализации там. Кстати там возможен вариант добавления товара с опциями.

      Если у вас не получиться разобраться, попробуйте написать в ТП UMI, они вам могут объяснить принцип. Я обращался не однократно, очень отличная поддержка. Только сформируйте правильно свой запрос — www.umi-cms.ru/support/

  • Игорь

    Добрый день Александр. Спасибо за полезную статью. Ваш код у меня

    работает, только есть один вопрос... Товары добавляются и т.д., но при

    переходе на другую страницу корзина не обновляется. Только ctrl+f5

    показывает содержимое корзины. Я так полагаю, это из-за того что у меня в

    UMI включено кеширование APC. Как-то можно решить эту проблему?

    • Здравствуйте, Игорь.

      К большому сожалению, кеширование я победить не смог 🙁

      Пришлось отключать и воспользоваться gzip кеширование сервера.

  • Sam

    Здравствуйте, Александр! Очень интересная статья. Это про TPL и ссылочных кнопок, а можно аналогичное сделать и для XSLT с кнопками в input? Например, в www.billmart.ru на главной странице или в разделах нажатием кнопки «купить» под товаром, можно увидеть, что товар добавляется в корзину, всплывает окно-уведомление — там ссылочная кнопка a. Аналогично хотелось бы для карточки товара сделать без перезагрузки страницы, где кнопка «купить» реализовано с помощью input (при нажатии кнопки страница перезагружается и потом товар добавляется в корзину, а хотелось бы без перезагрузки). Буду признателен за любые подсказки, советы — за отдельную статью на эту тему думаю будут признательны очень многие (тема актуальная)!

    • Добрый день, Sam. Прошу прощение за промедление с ответом 🙂

      А что мешает в карточке товара использовать вместо «input» тег «a» ? 😉

      • Sam

        Здравствуйте, Александр! Пробовал, почему-то все равно страница перезагружается, что с input, что без него, т.е. с тегом a. Мне единственное, чего сейчас надо добиться, это, чтобы товар из карточки добавлялся в корзину без перезагрузки страницы, точно также, как в категориях и разделах каталога, и при этом, чтобы все работало как и прежде, т.е. чтобы правильный заказ поступал в систему и т.д. и т.п. Желательно, чтобы все это было с input. Ajax ваши коллеги (программисты) предлагают использовать. Для вас профессионалов своего дела это просто реализовать — Вы с языками программирования общаетесь на ты. А я хочу обойти стороной эти сложности (в программировании я не профи). Потому, прочитав Вашу статью, я понял, что Вы тот, кто мог бы помочь мне (не обязательно написаем скрипта). Тем более, что у Вас есть понимание в работе магазина на платформе UMI.CMS. Благодарю!

      • Sam

        Я подумал, Александр, может Вам понадобиться — на сайте используется UMI.CMS 2.9.0. Возможно Вы уже применяли что-то аналогичное на каком-то сайте (XSLT).

        • Sam, на сколько я понимаю, у вас даже используется стандартная тема demodizzy и честно сказать, я не представляю, почему у вас не работает AJAX...

          Я предполагаю, следующее.

          У вас на карточке товара тег «input» обернут в тег «span», а в теме по умолчанию такого нет. Для начал я вам предлагаю убрать тег «span» и по идее все должно решиться.

          Атрибут title="Нажмите, чтобы добавить товар в корзину" вы смело можете добавить тегу «input».

          Это ваш шаблон — screencast.com/t/A4PbNKQZr

          Это шаблон по умолчанию — screencast.com/t/pbI1gHeAE1

        • Вы знаете Sam, то что я ранее написал не сработает.

          У вас в файле /js/site/basket.js не хватает участка кода который я представил ниже.

          Располагаться он должен с 36 строки и ниже — screencast.com/t/hAmiVHHC

          Если не поможет то у вас проблема с файлом basket.js и его нужно дописывать.

          В общем пробуйте. Удачи

          if (add_basket_button[0].tagName.toUpperCase () == 'FORM') {

          add_basket_button = jQuery ('input:submit', add_basket_button);

          add_basket_button.val (add_basket_button_text + ' (' + detect_options.amount + ')');

          }

          • Sam

            Добрый день, Александр! Хочу поблагодарить Вас за то, что находите время

            и просматриваете начинку сайта. Span убрали, но страница все равно не

            перестала перезагружаться. Как Вы и написали — basket.js дополнили строками для тега FORM. Если можно, я бы отправил Вам basket.js (или Вы можете посмотреть содержимое в сети), может тогда сможете сказать, чего в этом скрипте нет, и подскажете, что дописывать в этот файл?! То что для широкой публики, можем обсуждать здесь, и при желании все остальное по э-почте. Просто моё мнение, что, если мы сможем решить этот вопрос, у Вас появиться новая аналогичная статья — уже про XSLT. Заранее спасибо!

          • Добрый вечер.

            Я предполагаю, что вашим программистам нужно взять оригинальный файл /js/site/basket.js последней версии шаблона demodizzy.

            В нем ошибок точно нет.

            В качестве примера можете посмотреть, вот все работает — umi.pontyk.com.ua/shop/te...izory/sovet_tc1/

          • Sam

            Здравствуйте, Александр!

            Спасибо за совет. Мы так и поступили. При покупке системы, у разработчиков мы брали шаблоны версий (было 2.8.5, а позднее обновились до 2.9.0). Вот и сверились с этими скриптами из версии 2.8.5, и нашли, что у нас в basket.js почему-то отсутствуют коды для тега FORM (if (add_basket_button[0].tagName.toUpperCase () == 'FORM')... и jQuery ('form.options').submit (function ()... — больше ничего, всё один в один). Добавили недостающее, и все сработало, и товар добавляется из карточки без перезагрузки страницы, и заказ поступает в систему.

            Благодарю — не без Вашей помощи мы обащлись!

            P.S. Не в тему вопрос: на действующем demo реализовано «Купить в 1 клик» (можно создать demo и посмотреть) — может Вы сталкивались с подобной задачей? Если есть заготовки, или готовое решение у Вас, можете поделиться? Или, если не сложно, можете подсказать, как это реализовать?

          • Sam

            Александр, доброй ночи! Кажется я все понял, или почти понял. В нашем коде кроме того, что Вы написали, не хватает еще одной части функции site.basket.list = function (link) начиная с запятой после data (95 строка):

            ...

            95 content: data,

            96 async: false

            97 });

            98 jQuery ('form.options').submit (function () {

            99 if (!site.basket.is_cart) {

            100 site.basket.add (id, this, true);

            101 return false;

            102 }

            103 });

            + к этому, еще и часть следующей функции site.basket.init = function ():

            jQuery ('form.options').submit (function (){

            var id = (this.id.indexOf ('add_basket') != -1) ? this.id.replace (/^add_basket_/, '') : this;

            site.basket.add (id, this);

            return false;

            });

            Просьба, я не уверен, что все правильно делаю, потому прошу Вас просмотреть, как скрипт на нашем сайте, так и обновленный в версии 2.9. ... (на демосайте), и как прежде с картинками/примерами написать/показать, куда и что, как правильно дописать. Очень надеюсь на Ваше понимание и помощь! Заранее благодарю Вас!

  • Здравствуйте! Присоединяюсь к благодарностям за полезную статью.

    У меня возникла проблема ещё в решении первого шага — я всё сделал точь-в-точь, как вы описали, но товар всё равно добавляется в корзину с перезагрузкой.

    Добавление в корзину происходит кнопкой:

    Добавить в корзину

    Вместо кнопки пробовал ставить ссылку и input, но проблема остаётся. Думал, что причина в этом. Подскажите пожалуйста, в чём может быть причина, может быть вы наведёте на мысль. Заранее спасибо!

    • Попробуйте убрать — onclick="location.href='%pre_lang%/emarket/basket/put/item/%id%/'"

      И мой Вам совет переходите на использование xslt-шаблоназитора.

      • Спасибо за совет! Как раз постепенно переходим на xslt, ещё надо освоить его.