Как вы уже знаете, наше ядро BXReady позволяет вам в несколько мгновений преобразить ваш сайт(если по какой-то причине вы этого не знали, добро пожаловать в нашу ).
В этой статье мы рассмотрим, как быстро и просто создать свое представление маркеров(индикаторов скидок, новинок, хитов продаж).
Итак, вы купили наше решение, при этом ваш магазин имеет определенную тематику, например, вы продаете цветы и хотите переделать маркеры в виде роз и ромашек.
Нет ничего проще!
Вам понадобится только ваша фантазия, дизайнер(или доступ к гугл-картинкам) и около часа свободного времени!
Итак, приступим! Для примера, следуя принципам восточных мастеров: незаметная работа и наглядный результат, создадим ниндзя-маркеры.
Шаг 1
Идея
Первым делом нам нужна идея. На этом этапе вас сдерживает только ваша фантазия!
1. Высокохудожественный набросок, который я передал дизайнеру
Шаг 2
Макет
Сделав набросок, передадим его дизайнеру, чтобы придать представительский вид.
2. Скрипя зубами дизайнер превратил мой эскиз в это
Если вы не рождены художником, а под рукой не оказалось дизайнера, можно просто найти понравившиеся вам картинки в интернете(желательно в png формате).
Шаг 3
Заготовка
Подготовим минимально-необходимый плацдарм для наших маркеров. Создадим папку ninja - источник нашего представления в каталоге /bitrix/templates/"название_шаблона_сайта"/bxready/library/markers/. В этой папке создадим файл element.php - он будет содержать верстку и epilog.php - служебный файл для подключения стилей.
В папке include создадим файл стилей style.css и скриптов(script.js), по мере необходимости, а также положим сюда используемые картинки.
По скольку мы делаем универсальное решение, нам приходится использовать языковые фразы. Поэтому подключим lang-файлы и создадим файл в директории с маркерами lang/"Язык"/element.php. Вам это делать не обязательно.
3. У вас должна получиться примерно такая структура
Пример готовых файлов прикреплен к статье.
По сути, создание аналогично созданию шаблонов компонентов. Обязательным условием является лишь подключение необходимых модулей, а верстку вы можете изменять как угодно.
Файл epilog в различных маркерах отличается лишь путями до файлов, которые подключает. Его код можно посмотреть в приложении.
Шаг 4
Включение маркеров
Наши маркеры готовы! Осталось включить их на проекте. С этим тоже не будет никаких проблем!
Идем в раздел Администрирования->Настройки->Настройки продукта->Настройки модулей->BXReady Market(1->2->3->4). На вкладке основные настройки(5) в поле Установить для всех списков единый набор маркеров(6) выбираем только что созданный тип(7).
4. Несложная последовательность действий для включения маркеров на всем сайте!
И вуаля! На всем сайте мы видим наши новые маркеры!
5. Ниндзя-маркеры готовы! Незаметная работа, видимый результат!
Успехов в индивидуализации вашего магазина!
Мы сделали все, чтобы менять ваш магазин было просто и приятно, и ничего не мешало полету вашей фантазии!
В этой статье мы рассмотрим, как быстро и просто создать свое представление маркеров(индикаторов скидок, новинок, хитов продаж).
Итак, вы купили наше решение, при этом ваш магазин имеет определенную тематику, например, вы продаете цветы и хотите переделать маркеры в виде роз и ромашек.
Нет ничего проще!
Вам понадобится только ваша фантазия, дизайнер(или доступ к гугл-картинкам) и около часа свободного времени!
Итак, приступим! Для примера, следуя принципам восточных мастеров: незаметная работа и наглядный результат, создадим ниндзя-маркеры.
Шаг 1
Идея
Первым делом нам нужна идея. На этом этапе вас сдерживает только ваша фантазия!
1. Высокохудожественный набросок, который я передал дизайнеру
Шаг 2
Макет
Сделав набросок, передадим его дизайнеру, чтобы придать представительский вид.
2. Скрипя зубами дизайнер превратил мой эскиз в это
Если вы не рождены художником, а под рукой не оказалось дизайнера, можно просто найти понравившиеся вам картинки в интернете(желательно в png формате).
Шаг 3
Заготовка
Подготовим минимально-необходимый плацдарм для наших маркеров. Создадим папку ninja - источник нашего представления в каталоге /bitrix/templates/"название_шаблона_сайта"/bxready/library/markers/. В этой папке создадим файл element.php - он будет содержать верстку и epilog.php - служебный файл для подключения стилей.
В папке include создадим файл стилей style.css и скриптов(script.js), по мере необходимости, а также положим сюда используемые картинки.
По скольку мы делаем универсальное решение, нам приходится использовать языковые фразы. Поэтому подключим lang-файлы и создадим файл в директории с маркерами lang/"Язык"/element.php. Вам это делать не обязательно.
3. У вас должна получиться примерно такая структура
Пример готовых файлов прикреплен к статье.
По сути, создание аналогично созданию шаблонов компонентов. Обязательным условием является лишь подключение необходимых модулей, а верстку вы можете изменять как угодно.
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?
use Alexkova\Bxready\Draw; // подключение модуля отрисовки элементов
use Bitrix\Main\Localization\Loc;
Loc::loadMessages(__FILE__); //подключение языковых фраз
$arMarkers = $arElement;?> // наш $arResult, с ним и будем работать
//верстка
<div class="bxr-ninja-marker">
<?if (isset($arMarkers["NEW"]) && $arMarkers["NEW"] == true):?>
<span class="bxr-marker-new"><i><?=GetMessage('BXR_MARKER_NEW')?></i></span> //маркер новинка
<?endif;?>
<?if (isset($arMarkers["SALE"]) && $arMarkers["SALE"] == true):?>
<span class="bxr-marker-sale"><i><?=GetMessage('BXR_MARKER_SALE')?></i></span> //маркер распродажа
<?endif;?>
<?if (isset($arMarkers["DISCOUNT"]) && $arMarkers["DISCOUNT"] > 0):?>
<span class="bxr-marker-discount"><i><?=$arMarkers["DISCOUNT"]?>%</i></span> //маркер скидка
<?endif;?>
<?if (isset($arMarkers["REC"]) && $arMarkers["REC"] == true):?>
<span class="bxr-marker-rec"><i class="fa fa-thumbs-o-up"></i></span> //маркер рекомендуем
<?endif;?>
<?if (isset($arMarkers["HIT"]) && $arMarkers["HIT"] == true):?>
<span class="bxr-marker-hit"><i><?=GetMessage('BXR_MARKER_HIT')?></i></span> //маркер хит
<?endif;?>
</div>
<?
$elementDraw = \Alexkova\Bxready\Draw::getInstance(); //определение пути до шаблона, необходимо для подключения стилей и скриптов
$elementDraw->setAdditionalFile("CSS", "/bitrix/templates/"название_шаблона_сайта"/bxready/library/markers/ninja/include/style.css", false); //подключение файла стилей
?>
|
Файл epilog в различных маркерах отличается лишь путями до файлов, которые подключает. Его код можно посмотреть в приложении.
Шаг 4
Включение маркеров
Наши маркеры готовы! Осталось включить их на проекте. С этим тоже не будет никаких проблем!
Идем в раздел Администрирования->Настройки->Настройки продукта->Настройки модулей->BXReady Market(1->2->3->4). На вкладке основные настройки(5) в поле Установить для всех списков единый набор маркеров(6) выбираем только что созданный тип(7).
4. Несложная последовательность действий для включения маркеров на всем сайте!
И вуаля! На всем сайте мы видим наши новые маркеры!
5. Ниндзя-маркеры готовы! Незаметная работа, видимый результат!
Успехов в индивидуализации вашего магазина!
Мы сделали все, чтобы менять ваш магазин было просто и приятно, и ничего не мешало полету вашей фантазии!
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
