UMI.CMS Работа с корзиной без перезагрузки

- Олександр Пантелеєв · Опубликовано 21 июля 2013 · Обновлено 14 августа 2022

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

Пример реализации корзины вы можете посмотреть на вот этих двух сайтах, добавив товар в корзину: best-instrument.com.ua и kamzol.com.ua. Но хочу попросить добавить несколько товаров в корзину чтобы было нагляднее 😉

Данная статья будет разделена на две части. В первой части будет описан процесс создания редактируемой корзин, во второй части будет описан процесс реализации оформления заказа UMI.CMS на технологии AJAX.

Реализовать редактирование корзины без перезагрузки страницы, на UMI.CMS очень легко. Давайте посмотрим, как это сделать 🙂

Сразу хочу отметить, что работаю я с tpl-шаблонизатором. Но в прицепе, данный метод можно реализовать и на XSLT. Пробуйте;)

Шаг 1. Подключение JS файлов для работы AJAX на UMI.CMS

Скачать файлы, которые отвечают за обработку AJAX корзины вы можете вот здесь. Данные файлы актуальны для версии 2.9 и выше.

Если у вас UMI.CMS версии 2.8.X, то вам нужны вот эти файлы. Кстати, в этих файлах реализован способ AJAX добавления товара в корзину, который я детально отписал в статье - Ajax добавление товара в корзину.

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

В архиве есть две папки clients и demoold. Файлы с папки clients вы кидаете в корень сайта, а файлы с папки demoold закидываете в корень вашего шаблона.

Открываете, если у вас есть файл header.inc.tpl, если нет то тот файл в котором есть строки:

%system includeQuickEditJs()%
%system includeEditInPlaceJs()%

и после них подключаете файл __common.js:

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

Обратите внимание на название шаблона demoold в пути, оно может отличаться от вашего пути к файлу.
Теперь вам нужно открыть __common.js и найти метод site.utils.js.init

site.utils.js.init([
	'/js/client/basket.js',
	'/templates/demoold/js/basket.js',
	'/templates/demoold/js/forms.js',
	'/templates/demoold/js/message.js',
	'/templates/demoold/js/captcha.js'
]);

ну и как вы уже догадались, изменить путь к подключаемым файлам, вместо demoold, написать название вашего шаблона.

После того, как файлы, которые отвечают за работу с корзиной без перезагрузки подключены, можно развлекаться дальше 😉

Шаг 2. Создание tpl-шаблона UMI.CMS отвечающего за отображение корзины

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

Я ее немного подредактирую, чтобы она выглядела как на примерах указных в начале статьи 😉

Нужно открыть файл default.tpl, который расположен \templates\название_шаблона\tpls\emarket\. Теперь нужно найти секцию

$FORMS['order_block'] = <<<END

В эту секцию нужно добавить кнопку, которая вызывает форму редактирования корзины:

<a class="b-edit-cart" href="javascript:void(0)">Редактировать корзину</a>

Теперь добавьте в ваш файл стилей оформление этой кнопки, пускай все будет оформлено красиво 😉

.b-edit-cart-link {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    border-bottom: 1px dashed #00ADEF;
    width: 124px;
    float: right;
}
.b-edit-cart-link:hover{
    border-bottom-color: transparent;
}

Далее нужно воспользоваться макросом, который выведет форму для редактирования корзины. Для этого нужно воспользоваться макросом %emarket cart ()%

Макрос %emarket cart ()% выводит содержимое корзины для текущего пользователя.

После ссылки «Редактировать корзину» нужно вставить:

<div class="b-cart-edit">
    %emarket cart('default-edit')%
</div>

Если вы обновите вашу страницу, то вы должны увидеть ошибку UMI.CMS, сообщающую, что нет такого шаблона. Давайте добавим шаблон 😉
В папке \templates\ваш_шаблон\tpls\emarket\ и \templates\ваш_шаблон\tpls\emarket\customer\ нужно создать default-edit.tpl со следующим содержанием:

Для \templates\ваш_шаблон\tpls\emarket\ :

<?php
$FORMS = array();

$FORMS['order_block'] = <<<END
<div class="b-cart-edit-container">
    <div class="b-cart-edit__all-removed"></div>
    <table class="b-cart-edit__items">
        <tbody>
            %items%
        </tbody>
    </table>
</div>
<p class="b-cart-edit__total right">Всего:<span class="cart_summary total">%total-price%</span></p>

<div class="clear"></div>

<a class="b-cart-edit__continue" href="/">&larr; Продолжить покупки</a>
<a class="b-cart-edit__order" href="/emarket/cart">Оформить заказ &rarr;</a>

<div class="clear"></div>
END;

$FORMS['order_item'] = <<<END
    <tr id="item-%id%">
        <td class="item-title"><a href="%link%" title="%name%">%name%</a></td>
        <td class="item-qty">
            <input type="text" class="qtty" value="%amount%" onkeyup="var e = jQuery(this).next('input'), old = e.val();e.val(this.value); site.basket.modify(%id%, this.value, old);" />
            <input type="hidden" value="%amount%" />
        </td>
        <td class="item-price"><span class="cart_item_price_%id%">%total-price%</span></td>
        <td class="item-remove"><span class="remove" onclick="site.basket.removeFromCart(%id%, 'item-%id%', 'b-cart-edit__items');">X</span></td>
    </tr>
END;
$FORMS['price_actual'] = <<<END
<!-- %currency_name% -->
%prefix%&nbsp;%actual%&nbsp;%suffix%
END;
?>

Для \templates\ваш_шаблон\tpls\emarket\customer\ :

<?php
$FORMS = array();

$FORMS['customer_user'] = <<<END
%fname% %lname%  (%login%)
END;
$FORMS['customer_guest'] = <<<END
%fname% %lname% (%email%, %phone%)
END;
?>

Далее, нужно немного стилизовать форму редактирования корзины UMI.CMS, для этого в файл стилей нужно добавить css-код:

.b-cart-edit {
    position: fixed;
    width: 408px;
    background: #fff;
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 5px;
    display: none;
}

.b-cart-edit .item-title {  width: 250px }
.b-cart-edit .item-qty { width: 60px }
.b-cart-edit .item-price { width: 80px }
.b-cart-edit .item-remove { }

.b-cart-edit .item-qty .qtty {
    width: 40px;
    text-align: center;
}
.b-cart-edit .item-remove {
    font-weight: bold;
    color: red;
    cursor: pointer;
}

После того, как вы добавили css, нужно добавить js-код вызова формы редактирования корзины товаров. Для этого нужно воспользоваться вот этим jQuery кодом:

$ = jQuery;
$(".b-edit-cart-link").click(function() {
    var winW = $(window).width();
    var winH = $(window).height();

    var objW = $(".b-cart-edit").outerWidth(true);
    var objH = $(".b-cart-edit").outerHeight(true);

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

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

    // Окно редактирования
    $(".b-cart-edit").css({
        top: top,
        left: left,
        zIndex: 1000
    }).fadeIn();
    return false;
});

Обращаю ваше внимание, на то, что все привязано к классам и идентификатором, поэтому, если вы будете редактировать под себя, внимательно 😉

Далее следует модифицировать файл basket.js, тот, который находиться в папке вашего шаблона. Открываете файл, находите метод site.basket.init и после него добавляете вот этот метод:

/*
 * Модифицированный метод remove - удаления из корзины
 *
 * http://pontyk.com.ua
 */
site.basket.removeFromCart = function(id, elem, parent) {
    if (id == 'all') basket.removeAll(this.replace(id));
    else {
        // Удаление элемента из корзины
        basket.removeItem(id, this.replace(id));

        // Удаление элеменита из DOM
        jQuery("#"+elem).fadeOut("slow", function() {
            jQuery(this).remove();

            // Водсчет кол-ва элементов(товаров) в DOM
            var qty = 0;
            jQuery("." + parent + " tr").each(function() {
                qty ++;
            });
            if( qty == 0 ) {
                jQuery(".b-cart-edit__all-removed").html("Вы удалили все товары");
                jQuery(".b-cart-edit__order, .b-cart-edit__total").hide();
                jQuery(".b-cart-edit__continue").css({
                    "float" : "none",
                    "margin" : "0 auto"
                });
            }
        });
    }
};

Если вы все сделали правильно, то у вас должны будут:

срабатывать кнопка «редактировать корзину»;
возможность удалять товар из корзины UMI.CMS без перезагрузки страницы
возможность редактировать количество товара в корзине UMI.CMS

Кстати, данный метод можно использовать для создания мини корзины для UMI.CMS. Об этом я постараюсь написать в одной из следующих статей.

Удачных разработок!

[poll id="6"]

UMI.CMS Работа с корзиной без перезагрузки

Шаг 1. Подключение JS файлов для работы AJAX на UMI.CMS

Шаг 2. Создание tpl-шаблона UMI.CMS отвечающего за отображение корзины

Похожее

Язык

Статьи по темам

Статьи по категориям