Предшествующие материалы:
Смоделируем то, за что не любят готовые решения из маркетплейс. Самое больное их место. Пусть заказчик попросил нас изменить дизайн элементов товаров по всему сайту.
Наше счастье, если нам удастся все сделать с помощью корректировок 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, найдем нужные нам строки
и изменим их на нашу новую верстку. Кроме того не забудем изменить класс нашей карточки с bxr-ecommerce-v2-lite на новый bxr-ecommerce-v3-lite-color
Теперь внесем изменения в стили, откроем файл /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).
Поздравляем! Вы справились с этой задачей.
А теперь взгляните на часы, вы будете приятно удивлены.
Давайте посмотрим сколько времени у нас ушло:
Итого у нас не ушло даже часа на изменение карточек товаров по всему сайту!
При этом мы сэкономили свое время, нервы и деньги заказчика!
Конечно, в данной статье мы не делали серьезных изменений карточки, но поверьте (а лучше проверьте!), чем более кардинальные изменения вы проводите, тем больше вы выигрываете, используя наше решение!
Желаем удачи в творчестве.
Ииии помните, время - деньги, время, потраченное зря - убитые нервы, а сэкономленное время - бесценно!
Смоделируем то, за что не любят готовые решения из маркетплейс. Самое больное их место. Пусть заказчик попросил нас изменить дизайн элементов товаров по всему сайту.
Наше счастье, если нам удастся все сделать с помощью корректировок 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 мин
Итого у нас не ушло даже часа на изменение карточек товаров по всему сайту!
При этом мы сэкономили свое время, нервы и деньги заказчика!
Конечно, в данной статье мы не делали серьезных изменений карточки, но поверьте (а лучше проверьте!), чем более кардинальные изменения вы проводите, тем больше вы выигрываете, используя наше решение!
Желаем удачи в творчестве.
Ииии помните, время - деньги, время, потраченное зря - убитые нервы, а сэкономленное время - бесценно!
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».
