UMI.CMS. Как сделать акцию с обратным отсчетом в каталоге товаров

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

Приходилось ли вам в популярных интернет магазинах видеть мотивирующий покупателя блок, в котором написано — «ДО КОНЦА АКЦИИ ОСТАЛОСЬ ... ДНЕЙ!»? В данном блоке есть часы с обратным отсчетом, классное описание, мотивирующие 10, 20, 30% скидки на товар!

А хотели ли вы предложить такой функционал своему заказчику или добавить в свой интернет магазин на UMI.CMS?

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

Основные задачи

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

Дополнительная задача

Возможность привязать к акции товары, которые сейчас принимают участие.
Вывод информации в разделе «Акции»

Какие модули будут участвовать в работе:

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

Модуль «Новости» — в данном модуле будут создаваться новости, с описаниями акций, датой окончания.
Модуль «Интернет магазин» — в данном модулей UMI.CMS будут добавляется скидки на определенную группу товаров/каталогов, привязываться периоды действия скидки.

Настройка модулей UMI.CMS для создание акций

Нужно перейти в «Модули» > «Новости» и добавить новую ленту с названием «Акции»:

Если вам нужно, чтобы у вас был пункт меню «Акции», установить нужную галочку:

Сохраняете.

Теперь следует перейти в Модули > Шаблоны данных, и создать тип данных для новости:

Обзываете, так, чтобы было понятно вам. У меня название как и у ленты новостей — «Акции»:

Далее нужно добавить новую группу — «Информация о скидке» (не знал как назвать):

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

После того, как все сделано нужно сохранить изменения.

Переходите в «Модули» > «Новости» и добавляете новую акцию.

Кликаете по тому месту, куда указывает стрелка:

Вверху страницы, под хлебными крошками появляется кнопка «Добавить новость». Наводите на нее, появляется тип данных созданный вами. Кликаете.

Теперь нужно дать название, описание, назначить дату, до которой действует скидка и привязать товары, которые участвую сейчас в скидке

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

Теперь можете привязать товары, которые будут участвовать в скидке:

Сохраняете.

Теперь, чтобы скидка на товар начала действовать, вам нужно перейти в «Модули» > «Интернет магазин» > «Скидки» и добавить новую скидку:

В блоке «Свойства скидки» указываете название, и тип скидки. В качестве типа скидки выбираете — «На товары каталога (Скидки этого типа могут быть применены к товарам, либо разделам в каталоге)»

В блоке «На товары каталога» указываете:

Модификатор цены — «Процент от суммы»
Правила валидации — «На определенные товары» и «На временной промежуток»

Думаю тут объяснять ничего не требуется, в прицепе все понятно.

Нажимаете кнопку «Добавить». Перезагружается страница, вы не выходите(!).

Теперь в блоке «Свойства скидки» ставите галочку «Активен».

В блоке «Процент от суммы» ставите свой процент

В блоке «На определенные товары» выбираете товары/категории товаров на которые действует скидка

В блоке «На временной промежуток» выставляете даты начала и окончания скидки

Нажимаете «Сохранить и выйти».

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

Настройка таймера обратного отсчета в акциях UMI.CMS

Для того, чтобы таймер обратного отсчета следует воспользоваться плагином jQuery — jQuery CountDown.

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

Сразу хочу отметить, что я использую стандартную UMI.CMS версии 2.8.6, и шаблон demoold с TPL шаблонизатором. У меня все шаблоны хранятся в папочке template\demoold, поэтому в путях может быть несовпадение с вашими.

Подключение должно осуществятся после макросов:

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

Вот так:

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

Ниже подключенного скрипта можете добавить стили, которые отвечают за оформление jQuery.CountDown:

<style type="text/css">
    #counter { /* Котейнер, в котором содержится часы обратного отсчета*/
        margin: 0 auto;
        width: 490px;
    }

    .cntSeparator { /* Разделитель времени - используется : */
        font-size: 54px;
        color: #000;
    }

    #promo {
        margin: 10px 20px 0 0;
        background: #f8ecec;
        padding: 10px;
    }

    #promo h3 {
        font-weight: bold;
        color: #cb4747;
        font-family: Trebuchet MS, Tahoma, sans-serif;
        font-size: 18px;
    }

    #promo .description {
        padding: 10px;
        background: #fff;
    }

    #promo .description h4 {
        font-size: 15px;
        font-weight: normal;
    }
    #promo .description p {
        margin-top: 7px;
        margin-bottom: 7px;
    }
</style>

Далее нужно в шаблоне, в котором в котором будут выводится акции, нужно вставить макрос, который отвечает за вывод новостей из созданного раздела «Акции».
Для этого нужно воспользоваться макросом %news lastlist ()%.

%news lastlist ()% — выводит список последних новостей.

Вставляете макрос со следующими параметрами

%news lastlist('32', 'sale', 1, 1)%

В макросе lastlist есть параметр sale — это название шаблона, по которому нужно выводить акции. Данный шаблон должен хранится в папке \templates\demoold\tpls\news, вам нужно его создать. В шаблон sale.tpl нужно добавить следующий код:

<?php
$FORMS = Array();

$FORMS['lastlist_block'] = <<<END
<div id="promo">
    <h3>Акции</h3>

    %items%
</div>
END;

$FORMS['lastlist_item'] = <<<END
<div class="description">
    <h4>%h1%</h4>
    <div>%anons%</div>

    <div id="counter"></div>

    <script type="text/javascript">
        $ = jQuery;
        $(document).ready(function() {
            // Получаем текущий день
            var today = new Date();
            var current_d = today.getDate(); // http://javascript.ru/Date/getDate
            var current_h = today.getHours(); // http://javascript.ru/Date/getHours
            var current_m = today.getMinutes(); // http://javascript.ru/Date/getMinutes
            var current_s = today.getSeconds(); // http://javascript.ru/Date/getSeconds

            // Дата окончания акции http://php.net/manual/ru/function.date.php
            var end_d = Number("%system convertDate(%end_time%, 'j')%");
            var end_h = Number("%system convertDate(%end_time%, 'G')%");
            var end_m = Number("%system convertDate(%end_time%, 'i')%");
            var end_s = 60; // Number("%system convertDate(%end_time%, 's')%");

            // считаем, сколько дней осталось до конца акции
            var left_d = end_d - current_d;
            var left_h = end_h - current_h;
            var left_m = 60 - current_m + end_m; // var left_m = end_m - current_m;
            var left_s = end_s - current_s;

            // добавление 0 если цифра во времени 1 число
            if(String(left_d).length == 1)
                left_d = "0" + left_d;

            if(String(left_h).length == 1)
                left_h = "0" + left_h;

            if(String(left_m).length == 1)
                left_m = "0" + left_m;

            if(String(left_s).length == 1)
                left_s = "0" + left_s;
            $('#counter').countdown({
                image: '/templates/demoold/countdown/digits.png',
                startTime: left_d + ':' + left_h + ':' + left_m + ':' + left_s
            });
        });
    </script>
</div>
END;
?>

Запуски jQuery Count Down происходит вот в этом блоке:

$('#counter').countdown({
    image: '/templates/demoold/countdown/digits.png',
    startTime: left_d + ':' + left_h + ':' + left_m + ':' + left_s
});

Параметр image — отвечает за изображение часов, startTime — отвечает за время, которое осталось до конца акции

На этом все. По идее у вас на странице вашего сайта должно появится что-то типа вот такого:

Теперь нужно настроить вывод товаров, которые участвуют в акции, на странице подробного описания акции. ~~Но про это я напишу в следующей статье, так как объем данной статьи достаточно велик для восприятия~~. Как это сделать можно изучить вот в этой статье

Если у вас что либо не получится, пожалуйста, не стесняйтесь, задавайте вопросы.

ОБНОВЛЕНИЕ СТАТЬИ

Забыл добавить одну важную особенность — это акция завершена.

Нужно открыть файл sale.tpl, который расположен в папке \templates\demoold\tpls\news и найти строчку:

<div id="counter"></div>

и ниже добавить

<div id="end"></div>

Далее в этом же файле найти кусочек кода:

$('#counter').countdown({
    image: '/templates/demoold/countdown/digits.png',
    startTime: left_d + ':' + left_h + ':' + left_m + ':' + left_s
});

и замените его на:

if(left_m < 0 || left_h < 0 || left_d < 0) {
    $("#end")
            .css({
                "color": "red",
                "font-size": "30px"
            })
            .html("Акция завершена!");
} else {
    $('#counter').countdown({
        image: '/templates/demoold/countdown/digits.png',
        startTime: left_d + ':' + left_h + ':' + left_m + ':' + left_s,
        timerEnd: function(){
            $("#end")
                    .css({
                        "color": "red",
                        "font-size": "30px"
                    })
                    .html("Акция завершена!");
        }
    });
}

Скачать файл sale.tpl

UMI.CMS. Как сделать акцию с обратным отсчетом в каталоге товаров

Основные задачи

Дополнительная задача

Какие модули будут участвовать в работе:

Настройка модулей UMI.CMS для создание акций

Настройка таймера обратного отсчета в акциях UMI.CMS

ОБНОВЛЕНИЕ СТАТЬИ

Похожее

Язык

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

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