Разработчикам

Пользователь 245878

24 Декабрь, 2015 7:46

Мастер-класс по созданию своих маркеров для BXReady: Интернет-магазин

Как вы уже знаете, наше ядро 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. У вас должна получиться примерно такая структура

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

<?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. Ниндзя-маркеры готовы! Незаметная работа, видимый результат!

Успехов в индивидуализации вашего магазина!
Мы сделали все, чтобы менять ваш магазин было просто и приятно, и ничего не мешало полету вашей фантазии!

Теги:

bxready, marketplace, интернет-магазин, кузница

2 Комментировать

Комментарии: 6 0 6

Ещё 165

Предыдущие комментарии 3

Шитяков Константин

Пользователь 245878 21 Апрель, 2018 12:39

Гуринович Кирилл, изменить назначение существующих довольно просто, вы можете создать свои маркеры по данной инструкции и просто переименовать нужные свойства инфоблока (не меняя при этом символьные коды!).

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

1 Ещё

Гуринович Кирилл

Пользователь 1615519 23 Апрель, 2018 15:15

Шитяков Константин, Возможно есть более подробная инструкция с указанием содержимого когда в самих файлах? У меня решение bxready и путь /bitrix/templates/"название_шаблона_сайта"/bxready на этом заканчивается, /library/markers/ отсутствует.
Возможно ли существующим маркерам задать свои надписи. Мне требуется заменить текст в маркере NEW на FREE fa-truck, SALE на % ....

0 Ещё

Шитяков Константин

Пользователь 245878 23 Апрель, 2018 18:21

Гуринович Кирилл,

Гуринович Кирилл написал:
/library/markers/ отсутствует.

вы можете создать эти папки вручную.

А за основу возьмите уже имеющиеся маркеры, например стандартные круглые вертикальные маркеры.
Для этого скопируйте папку
bitrix/tools/bxready/library/markers/circle_vertical/
в
bitrix/templates/"название_шаблона_сайта"/bxready/library/markers/
После этого рекомендую изменить названия классов в имеющихся маркерах, чтобы в случае чего не перекрыть стандартные стили.

Далее по инструкции включите использование своих маркеров

0 Ещё

показать полностью

Пользователь 245878 -> Всем

23 Декабрь, 2015 8:19

BXReady: Интернет-магазин. Собственные представления элементов на основе уже имеющихся.

Предшествующие материалы:

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

Наше счастье, если нам удастся все сделать с помощью корректировок css.

Если нет, то такая задача может привести к серьезным трудозатратам по корректировке шаблонов всех использующихся на сайте компонентов (например, для переделки среднестатистического магазина может понадобится до 15-20 нормочасов).
Таких проблем на BXReady нет (см. ссылки на предшествующие материалы). Такие задачи можно выполнять в десятки раз быстрее.

Рассмотрим вышеуказанный пример.
Итак, у нас имеется представление ecommerce.v2.lite. Сделаем новое представление на его базе.

Для этого нам потребуется выполнить 3 несложных шага.

Шаг 1
Заготовка

Каждое представление должно иметь свой уникальный код, пусть код нашего представления будет следующим
ecommerce.v3.lite.color

Первым делом нужно скопировать представление, которое мы берем за основу.
Копируем папку
/bitrix/tools/bxready/library/elements/ecommerce.v2.lite/
в то пространство имен, которому будет принадлежать наше представление.
Скопируем представление в нужный шаблон сайта (или шаблон .default), сохраняя структуру папок.
Полученную папку (/#ШАБЛОН ВАШЕГО САЙТА#/bxready/library/elements/ecommerce.v2.lite/) переименуем в ecommerce.v3.lite.color

Шаг 2
Изменение представления

Как мы видим, наше новое представление отличается от старого стилями и версткой.
Для того, чтобы изменить верстку откроем файл element.php, найдем нужные нам строки

<div class="bxr-ecommerce-v2-lite" data-uid="<?=$UID?>" data-resize="1" id="<?=$arItemIDs["ID"]?>">
      <div class="bxr-element-container">

         //вывод изображения и маркеров оставляем без изменений

         <div class="bxr-element-name" id="bxr-element-name-<?=$arElement["ID"]?>">
            <a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><?=$arElement["NAME"]?></a>
         </div>

         <div class="bxr-element-rating">
            <?
            //rating block
            if ($useVoteRating)
            {
               ?>
               <div class="bxr-stars-container">
                  <div class="bxr-stars-bg"></div>
                  <div class="bxr-stars-progres" st yle="width: <?=$rating?>%;"></div>
               </div>
            <?}?>
         </div><div class="clearfix"></div>
                        
                        <?if ($showCatalogQty) {?>
                            <div class="bxr-element-avail" id="<?=$arItemIDs["AVAIL"]?>">
                                    <?include('avail.php');?>
                            </div>
                        <?}?>

         <div class="bxr-element-price" id="<?=$arItemIDs["PRICE"]?>">
            <?include('price.php');?>
         </div>

         <div class="bxr-element-action"  id="<?=$arItemIDs["BASKET_ACTIONS"]?>">
                            <?include('basket_btn.php');?>
         </div>

      </div>
   </div>

и изменим их на нашу новую верстку. Кроме того не забудем изменить класс нашей карточки с bxr-ecommerce-v2-lite на новый bxr-ecommerce-v3-lite-color

<div class="bxr-ecommerce-v3-lite-color" data-uid="<?=$UID?>" data-resize="1" id="<?=$arItemIDs["ID"]?>">
      <div class="bxr-element-container">
                    
                    //вывод изображения и маркеров оставляем без изменений

                    <div class="bxr-bottom-block">
         <div class="bxr-element-name" id="bxr-element-name-<?=$arElement["ID"]?>">
            <a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><?=$arElement["NAME"]?></a>
         </div>
                        <div class="bxr-ra-string">
                            <div class="bxr-element-rating">
                                <div class="bxr-rating-fs" st yle="background-position: 0 -<?=round($rating/20)*12?>px"></div>
                            </div>
                            <?if ($arElement["CATALOG_QUANTITY"] > 0) {?>
                                <div class="bxr-element-avail" id="<?=$arItemIDs["AVAIL"]?>">
                                        <?include('avail.php');?>
                                </div>
                            <?}?>
                            <div class="clearfix"></div>
                        </div>
         <div class="bxr-element-price" id="<?=$arItemIDs["PRICE"]?>">
            <?include('price.php');?>
         </div>

         <div class="bxr-element-action"  id="<?=$arItemIDs["BASKET_ACTIONS"]?>">
                            <?include('basket_btn.php');?>
         </div>
                    </div>
      </div>
   </div>

Теперь внесем изменения в стили, откроем файл /include/style.css и выполним в файле замену сочетания bxr-ecommerce-v2-lite на bxr-ecommerce-v3-lite-color, чтобы наши стили нигде не пересекались с другими представлениями. Сделать это можно быстро и просто с помощью функции замены текста в вашем любимом редакторе(например, в netbeans замену можно вызвать сочетанием клавиш Ctrl+H и указав что на что требуется заменить).

Также изменим нужные нам стили для соответствия новому представлению.
В карточке, взятой за основу, помимо прочего, использовался скрипт выравнивания карточек. Поэтому нам нужно скорректировать и файл скрипта.
Открываем файл /include/scrip.js и точно также, как и в стилях делаем замену bxr-ecommerce-v2-lite на bxr-ecommerce-v3-lite-color.
Кроме того, нам нужно изменить название js-объекта, который используется для вызова функций выравнивания.

И вновь обратимся к замене, на этот раз заменим catalogEcommerceV2Lite на catalogEcommerceV3LiteColor. Аналогичную замену потребуется сделать и в файле element.php, т.к. там вызывается функция выравнивания при ajax-загрузке карточек.

Шаг 3
Включение нашего представления

Устали? Думаю, нет. Остался последний шаг!
Наше новое представление уже готово, осталось показать его миру!

Перейдем в настройки модуля BXReady Market(1->2->3->4->5).

На вкладке Настройка представлений(6) включите галочку Использовать единые представления элементов по всему сайту(7), затем выберите текущий шаблон сайта(8 ). Введите код своего представления в поля 9 и нажмите применить(10).

Поздравляем! Вы справились с этой задачей.

А теперь взгляните на часы, вы будете приятно удивлены.
Давайте посмотрим сколько времени у нас ушло:

создание заготовки для нового представления - 10 мин;
правка верстки, стилей и скриптов - 20 мин;
включение своего представления на всем сайте - 5 мин

Итого у нас не ушло даже часа на изменение карточек товаров по всему сайту!
При этом мы сэкономили свое время, нервы и деньги заказчика!

Конечно, в данной статье мы не делали серьезных изменений карточки, но поверьте (а лучше проверьте!), чем более кардинальные изменения вы проводите, тем больше вы выигрываете, используя наше решение!
Желаем удачи в творчестве.

Ииии помните, время - деньги, время, потраченное зря - убитые нервы, а сэкономленное время - бесценно!

Теги:

bxready, marketplace, интернет-магазин, кузница

5 Комментировать

Комментарии: 4 0 4

Ещё 153

Предыдущие комментарии 1

Шитяков Константин

Пользователь 245878 14 Январь, 2016 10:10

Талызенков Сергей,
Ветки на форуме нет, вы можете создать обращение к нам в техподдержку.
http://support.kuznica74.ru/

0 Ещё

Чурсин Андрей

Пользователь 274166 22 Ноябрь, 2017 17:19

"зачем нам готовый велосипед, сделаем ка свой..."

0 Ещё

Шитяков Константин

Пользователь 245878 22 Ноябрь, 2017 21:04

Чурсин Андрей, о чем речь?
Если вы про битриксовский компонент catalog.item, то, прошу заметить, что появился он позже, чем система представлений BXReady!

0 Ещё

показать полностью

Пользователь 245878 -> Всем

22 Декабрь, 2015 10:35

BXReady: Интернет-магазин. Собственные представления элементов. Пошаговое руководство по созданию нового представления

Вкратце, что такое представления элементов, вы можете прочитать в статье про списки элементов и представления.
В данной же статье мы опишем процесс создания представления по шагам.
Рекомендуем при прочтении статьи использовать руководство для веб-разработчика.
За основу возьмем реальное представление, которое входит в состав решения BXReady: Интернет-магазин.

Мы хотим создать следующее представление:

Шаг 1
Заготовка

Пусть код нашего представления будет следующим
ecommerce.v3.lite.color
В соответствие с документацией мы создаем папку с нашим новым представлением, в том пространстве имен, которому будет принадлежать наше представление.
/bxready/library/elements/ecommerce.v3.lite.color/
Мы - в системной папке /bitrix/tools/
Разработчикам, т.е. вам, нужно создать в нужном шаблоне сайта(или шаблоне .default)

В папке создайте файл element.php – это основной файл, в котором вы будете собирать верстку для своего представления.

Начнем файл с проверки, подключен ли у нас пролог.

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

На вход этот файл всегда получает два массива:

$arElement - с данными об элементе(товаре, новости и тд), можно сравнить с $arResult компонента catalog.element;
$arElementParams - с параметрами, переданными компонентом, вызвавшим отрисовку представления(например, параметры catalog.section), соответственно, аналогичен массиву $arParams

Шаг 2
Языковые фразы(не обязательный)

В нашем представлении нам могут понадобиться какие-то тексты.
Так как мы создаем представление для коробки и просто обязаны обеспечить поддержку разных кодировок, то нам не обойтись без языковых фраз.
Поэтому создаем в папке нашего представления папку /lang/ru/ в ней файл element.php, в котором обозначаем те языковые фразы, что нам понадобятся.

<?
$MESS["REQUEST_BTN"] = "оставить заявку";
$MESS["REQUEST_TRADE"] = "Заказать товар";
$MESS["OFFER_REQUEST_MSG"] = "Я хочу приобрести товар #TRADE_NAME# с параметрами: #PARAMS#";
$MESS["TRADE_REQUEST_MSG"] = "Я хочу приобрести товар #TRADE_NAME#";
$MESS["MORE_INFO_TITLE"] = "Подробнее";
$MESS["FROM"] = "от ";
?>

Подключим в element.php lang-файл, в котором хранятся используемые в представлении фразы.

<?IncludeModuleLangFile(__FILE__);?>

Обратите внимание, для создания своих представлений мы используем стандартные технологии многоязыковой поддержки Битрикс.
Но на практике, при работе над конкретной задачей или проектом, которому данные стандарты не требуются, этим можно пренебрегать.
Более подробную информацию по использованию языковых фраз вы можете получить в руководстве Bitrix Framework.

Шаг 3
Включаем ядро BXReady

Для того, чтобы все работало - не забываем подключить ядро

<?use Alexkova\Bxready\Draw;?>

Шаг 4
Интеграция с HTML

Перейдем непосредственно к верстке.
Вообще, можно весь HTML прописать в файле element.php.
Но карточка элемента e-commerce является сложным объектом и для упрощения работы над ней мы разбили код на составляеющие, которые потом просто собираем директивами include в нашем представлении в файле element.php.

К примеру, у нас есть такие составляющие как:

basket_btn.php - область с кнопками действий;
avail.php - область с информацией о доступности товара;
price.php - область для вывода цен или матрицы цен;
другие

Получившуюся верстку и состав файлов вы можете посмотреть в приложенном архиве.

Шаг 5
Подключение внешних файлов

Для того, чтобы все было хорошо нам не хватает всего нескольких мелочей.

CSS, необходимого для нашей верстки
JS (если требуется), в нашем примере JS отвечает исключительно за сервисные механизмы - выравнивание карточке товаров

для удобства мы расположили их в папке include.

Для их подключения используются специальные конструкции

<?
$elementDraw->setAdditionalFile("JS", "/bitrix/tools/bxready/library/elements/ecommerce.v3.lite.color/include/script.js", true);
$elementDraw->setAdditionalFile("CSS", "/bitrix/tools/bxready/library/elements/ecommerce.v3.lite.color/include/style.css", false);
?>

Шаг 6
Маркеры

Есть такой интересный момент, как маркеры.

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

Чтобы маркеры знали откуда они вызываются используем метод getInstance, передав им объект $this, это техническая деталь, необходимая для передачи информации о шаблоне (таким образом мы поддерживаем кеширование на уровне шаблонов компонентов).
Затем определим какой тип маркеров нужно выводить и на основе данных об элементе составим массив $marketGroup для вывода нужных маркеров.

<?
$elementDraw = \Alexkova\Bxready\Draw::getInstance($this);
if (isset($arElementParams["BXREADY_LIST_MARKER_TYPE"]) && strlen($arElementParams["BXREADY_LIST_MARKER_TYPE"])>0)
   $elementDraw->setMarkerCollection($arElementParams["BXREADY_LIST_MARKER_TYPE"]);
$markerGroup = array(
   "NEW" => ($arElement["PROPERTIES"]["NEWPRODUCT"]["VALUE"]) ? true : false,
   "SALE" => ($arElement["PROPERTIES"]["SPECIALOFFER"]["VALUE"]) ? true : false,
   "DISCOUNT" => $arElement["MIN_PRICE"]["DISCOUNT_DIFF_PERCENT"],
   "HIT" => ($arElement["PROPERTIES"]["SALELEADER"]["VALUE"]) ? true : false,
   "REC" => ($arElement["PROPERTIES"]["RECOMMENDED"]["VALUE"]) ? true : false,
);
?>

Если вы не планируете использовать маркеры писать этот код вовсе необязательно. Вы вообще можете создать представление, которое будет выводить лишь название элемента.

Шаг 7
Особые случаи

Некоторые компоненты, такие как BigData, работают по ajax и для подключения в них внешних (см. шаг 5) скриптов и стилей потребуется создать еще один файл в корне представления, epilog.php.
Его содержимое должно быть одинаковым для всех представлений, отличаясь только путем до файлов.

<?
global $APPLICATION;

$APPLICATION->SetAdditionalCSS("/bitrix/tools/bxready/library/elements/ecommerce.v3.lite.color/include/style.css");
$APPLICATION->AddHeadScript("/bitrix/tools/bxready/library/elements/ecommerce.v3.lite.color/include/script.js");
?>

Этот файл будет подключаться в ряде компонентов, которые работают под управлением ajax или в которых стандартное подключение внешних файлов (шаг 5) не срабатывает.

Итак, все готово!

Создание вашего представления закончено. Осталось включить его отображение на сайте(перед этим убедитесь, что у вас установлено обновление версии 2.0.0).

Перейдем в настройки модуля BXReady Market(1->2->3->4->5).

На вкладке Настройка представлений(6) включите галочку Использовать единые представления элементов по всему сайту(7), затем выберите текущий шаблон сайта(8 ).
В блоке Настройка каталога(9) выберите какие представления использовать для различных режимов отображения каталога. Вы можете выбрать как из имеющихся, так и ввести название своего представления в поля с отметкой свой вариант. Также для каталога вы можете настроить настройки адаптивности(10) в соответствующем блоке.
В блоке настройка других блоков(11) устанавливается вариант представления для блоков товаров, находящихся вне раздела каталог. На данный момент поддерживается изменения в блоках Бестселлеры и Концентратор на главной странице. Установив нужные настройки, нажмите применить(12).

Готово, теперь вы можете наблюдать созданные вами карточке на всем сайте.

Полный код представления вы сможете найти в приложении.

ecommerce.v3.lite.color.zip (13.13 КБ)

Теги:

bxready, marketplace, интернет-магазин, кузница

4 Комментировать

Комментарии: 0 0 0

Ещё 232

Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».

Пользователь 245878

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером