Изменение блоков сайта и редактор дизайна. Основные блоки сайта.

Таму
[Показать все инструкции на странице]
Видеоинструкции Управление сайтом Основные модули Поиск по сайту JSON поиск / Стилизация подсказок при поиске Поисковый фильтр и Типы продукта (Характеристики товара). Пример callback функций после выполнения Java Script Готовые скрипты Выгрузки XML/RSS/YML Домены/Domain Почта/E-mail Уведомления Скрытые данные (Системная разметка / Микроразметка) ShortCode (автозамена данных) Конвертация Cookie в GET переменные. Языки Изменение блоков сайта и редактор дизайна Статистика и подключение Google Analytics / Tag Manager Интеграция с «1С», «ERP», CRM-системами и CommerceAPI Продвижение сайтов и SEO Доступ к сайту Кеш

Изменение блоков сайта и редактор дизайна

Основные блоки сайта и способы изменения дизайна

Основные блоки сайта

ID и Class'ы основных блоков сайта.





#hotengine-wrapper

#hotengine-header

GRID *
#hotengine-content-container
.hotengine-wrap-container-side-left .menu_position_top .hotengine-wrap-container-side-right
#hotengine-content
.hotengine-wrap-container-side-center
«тип страницы»


.menu_position_buttom


#hotengine-footer


* - Основной внутренний блок с контентом реализован при помощи CSS Grid:
CSS Grid
Code: CSS
/*CONTENT GRID*/

#hotengine-content-container { display: grid;
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns:0% 1fr 0%;
  margin:0 auto; width:100%;
}

#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-left container-center container-right";
  grid-template-columns: auto 1fr auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-left container-center";
  grid-template-columns: auto 1fr;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto;
}

.hotengine-wrap-container-side-center { grid-area: container-center; vertical-align:top; margin:0 auto; width:100%;}
.hotengine-wrap-container-side-left   { grid-area: container-left; vertical-align:top; margin:0 auto; width:auto; max-width:270px;  }
.hotengine-wrap-container-side-right  { grid-area: container-right; vertical-align:top; margin:0 auto; width:auto; max-width:270px; }

.menu_position_top { display:block;    width:100%;  }
.menu_position_buttom { display:block; width:100%; }

@media (max-width:767px){
#hotengine-content-container[data-hasside="both"]{
  grid-template-areas:"container-center container-left container-right";
  grid-template-columns: 1fr auto auto;
}
#hotengine-content-container[data-hasside="left"]{
  grid-template-areas:"container-center container-left";
  grid-template-columns: 1fr auto ;
}
#hotengine-content-container[data-hasside="right"]{
  grid-template-areas:"container-center container-right";
  grid-template-columns: 1fr auto ;
}
}
/*CONTENT GRID*/

data-hasside - дополнительный атрибут элемента #hotengine-content-container, который сообщает о наличии левого и правого блока.
  • [data-hasside="left"] - присутствует левый блок/меню
  • [data-hasside="right"] - присутствует правый блок/меню
  • [data-hasside="both"] - присутствует левый и правый блок/меню


Внутри данных блоков будет располагаться созданный вами контент, или меню.
Каждый «тип страницы» выделен соответствующим блоком, с присвоением определенного ID.
Например:
  • Страницы - #hotengine-content-page
  • Новости - #hotengine-content-news
  • Каталог статей - #hotengine-content-blog
  • Каталог товаров - #hotengine-content-shop
  • Каталог товаров (производители) - #hotengine-content-shop
  • Каталог товаров (коллекции) - #hotengine-content-shop

Данный блок создается внутри элемента #hotengine-content

Кроме того, на страницах категорий, где есть дочерний список страниц, добавляется class:
  • Каталог товаров - .hotengine-content-shop-category
  • Каталог товаров (коллекции) - .hotengine-content-shop-collection
  • Каталог товаров (производителии) - .hotengine-content-shop-producer
  • Каталог статей - .hotengine-content-blog-category
  • Каталог новостей - .hotengine-content-news-category

Кроме того, для Блоков/Меню списка новостей или статей, создается дополнительный блок:
Меню последних статей - #hotengine-content-menu-lastblogpost
Меню последних новостей #hotengine-content-menu-lastnewspost

Как менять дизайна сайта

Вы можете изменить дизайн сайта в Редакторе дизайна. С его помощью можно задать основные цвета элементов, размеры и положения некоторых элементов, изменить Шапку сайта и другое.
При помощи указателя мыши вы можете изменить высоту шапки сайта, размер логотипа, положение главного меню и слогана.


Как создать собственный дизайн Шапки сайта?


Создайте Блок/Меню с расположение в Header (Шапке сайта) и разместите в нем необходимые элементы. Например, Div с телефоном, и Div с надписью о компании (не забудьте присвоить им соответствующий class или id, для последующего обращения к ним по заданным значениям).
Откройте редактор дизайна, задайте положение и свойства дизайна к созданным элементам в CSS стилях.
Таким же образом можно создавать любые графические элементы на сайте и располагать их в нужных вам местах.
Использование встроенных элементов и коротких кодов для верстки.
Кроме создания собственных элементов, на платформе Hotlist.biz существует ряд заранее заданных классов и ID, которые позволяют быстро и удобно использовать базовые элементы магазина без необходимости писать их с нуля.

Какие элементы уже имеют встроенные классы или ID:
  • Кнопка «Добавить в корзину»
  • Корзина
  • Иконка «Добавить в избранное»
  • Иконка «Добавить в сравнение»
  • Все базовые элементы карточки товара: цена, наличие, характеристики, блок с описанием, вкладки в карточке товара
  • Заголовки страниц
  • Виджеты с товарами
  • Мобильное меню
  • Заголовки разновидностей товара
  • Каждая страница имеет уникальный класс или ID, а родительский элемент id="hotengine-wrapper" содержит идентификатор текущей открытой страницы.
Большинство функциональных элементов на сайте уже имеют уникальные идентификаторы (ID) или классы, которые не будут изменены при обновлениях платформы, и их можно использовать при создании собственной верстки или дизайна страниц.

Как использовать встроенные элементы в своём дизайне:
Для вставки некоторых элементов в ваш собственный макет или шаблон, можно использовать короткие коды.
Например:
  • Иконка Корзины с ее содержимым
  • Иконка «Добавить в корзину»
  • Иконка «Добавить в избранное»
  • Иконка «Сравнение товаров» с ее содержимым
  • Виджеты
Использование коротких кодов позволяет быстро и корректно интегрировать стандартные элементы магазина в вашу собственную верстку без ошибок.

Рекомендации по CSS:
  • Прописывайте CSS-стили в редакторе дизайна платформы.
  • Файл автоматически минифицируется (сжимается), что ускоряет работу сайта и улучшает SEO.
  • Можно создавать индивидуальные стили для любых элементов, включая встроенные ID и классы, а также для собственных блоков, чтобы полностью контролировать внешний вид сайта.
С помощью встроенных классов, ID и коротких кодов вы можете создавать профессиональные и уникальные макеты, комбинируя свои блоки с готовыми элементами платформы. Это позволяет сократить время разработки и гарантировать корректное отображение всех функций магазина.

Как сбросить дизайн?

Для того, чтобы вернуть значение по умолчанию, откройте Редактор дизайна и удалите текущее значение для нужного элемента или нажмите на кнопку "Вернуть значение по умолчанию".

CSS стили

Вы можете использовать CSS для оформления любых элементов на сайте. Для выбора элемента нажмите правой кнопкой мыши по элементу, и "Проинспектировать элемент". Скопируйте ID или Class объекта и вставьте во вкладку «Css стили» в редакторе дизайна.

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

Css стили по умолчанию: CSS файл Основные блоки сайта

Шаблонизация

На данный момент мы используем специальную разметку для элементов, помеченные классы "hotengine-", упорядоченную структуру отображения элементов, а также скрытые данные. Практически все надписи на сайте реализованы при помощи CSS after элементов.
Если смещение и позиционирование элементов не удается сделать при помощи CSS, то вы можете использовать Javascript и перемещать объекты по странице.
Изменение положения некоторых элементов при помощи Javascript.
Code: html
<script type="text/javascript">
  $(function(){
  let newproducer = $(".hotengine-shop-product-desc-block .hotengine-shop-product-producer").html();
if(typeof newproducer !== typeof undefined && newproducer !== false && newproducer !='undefined' && newproducer !=''){
  $(".hotengine-shop-product-desc-block .hotengine-shop-product-producer").hide();
  $(".hotengine-shop-product-sku-box").after('<span class="hotengine-shop-product-producer">'+newproducer+'</span>');
 }
});
</script>


В данном примере мы проверяем, указан ли производитель. Если производитель указан, то скрыть его и разместить после поля "Код товара".

"Обертывание" элементов при помощи Javascript.
Code: html
<script type="text/javascript">
  $(function(){
  $(".element").wrap("<div class='new'></div>");

});
</script>

В результате объект с классом element будет "обернут" в div с классом new (<div class="new"><span class="element"></span></div>)

Шаблоны

Кроме базовых стилей в редакторе дизайна вы можете устанавливать готовые шаблоны.
Каталог шаблонов - https://templates.hotlist.biz/

Редактор

На платформе предусмотрен HTML редактор TynyMce, через который можно осуществлять оформление страниц, карточек товаров, сататей и блоков/меню. В редакторе реализована вставка изображений, и готовых «Кодов» для отображение рубрик магазина, списка товаров, списка статей, на любые страницы. Встроенные коды позволяют вставлять, например, на главную страницу, список определеных товаров с заданными параметрами (генератор списка товаров отдельная инструкция) или список категорий, в том числе и в Блоки/Меню (Виджетом с категориями магазина).
Таму