Инструкция по работе с редактором сайта

Инструкция по оформлению блоков брендов и ссылок в категориях товаров

На страницах категорий товаров могут использоваться два типа блоков:

Кнопки брендов — ссылки на подкатегории или конкретные бренды;
Информационные блоки — ссылки на статьи, обзоры, видео и другие материалы, относящиеся к бренду.

1. Кнопки брендов

Назначение: используются для вывода списка брендов в категории.

Пример разметки:

<a class="brand-btn" href="/fetal-nye-monitory/dixion/">
  <img src="/images/logos/dixion.png" alt="Dixion">
  <span>Dixion</span>
</a>

Пояснения:

href — ссылка на бренд или подкатегорию;
img — логотип бренда (примерный размер: 36×36 px);
span — название бренда.

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

2. Блок с информационными ссылками

Назначение: размещается внутри страницы конкретного бренда, содержит ссылки на статьи, видео и другое полезное.

Пример разметки:

<div class="icon-text-wrapper" style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
  <!-- Заголовок блока -->
  <span class="icon-text-container">
    <span class="fa fa-graduation-cap" style="color: #9EA3A5;"></span>
    <span>Полезное о бренде:</span>
  </span>

  <!-- Ссылка на статью -->
  <a class="brand-btn" href="/fetal-nye-monitory/obzor-fetal-nyh-monitorov-dixion-overton.html">
    <span class="fa fa-file-text" style="color: #D20703;"></span>
    <span>Обзор фетальных мониторов Dixion Overtone</span>
  </a>

  <!-- Ссылка на видео -->
  <a class="brand-btn" href="/videos/dixion-monitor.mp4">
    <span class="fa fa-play-circle" style="color: #007BFF;"></span>
    <span>Смотреть видеообзор</span>
  </a>
</div>

3. Управление цветом иконок

Цвет иконок задаётся прямо в HTML через style="color: #HEX". Это работает для иконок:

Font Awesome — <span class="fa fa-..." style="color: ..."></span>
SVG — <svg style="color: ...">...</svg>

Важно: глобальные стили настроены так, что inline-цвета работают корректно.

4. Иконки

Для оформления можно использовать стандартные иконки Font Awesome:

fa-graduation-cap — заголовок "Полезное"
fa-file-text — статьи и обзоры
fa-play-circle — видеоконтент

Полный список иконок доступен на сайте: fontawesome.com/icons

5. Итоговый пример (для вставки)

<a class="brand-btn" href="/fetal-nye-monitory/dixion/">
  <img src="/images/logos/dixion.png" alt="Dixion">
  <span>Dixion</span>
</a>

<div class="icon-text-wrapper" style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px;">
  <span class="icon-text-container">
    <span class="fa fa-graduation-cap" style="color: #9EA3A5;"></span>
    <span>Полезное о бренде:</span>
  </span>

  <a class="brand-btn" href="/fetal-nye-monitory/obzor-fetal-nyh-monitorov-dixion-overton.html">
    <span class="fa fa-file-text" style="color: #D20703;"></span>
    <span>Обзор фетальных мониторов Dixion Overtone</span>
  </a>

  <a class="brand-btn" href="/videos/dixion-monitor.mp4">
    <span class="fa fa-play-circle" style="color: #007BFF;"></span>
    <span>Смотреть видеообзор</span>
  </a>
</div>

Инструкция: оформление блока производителей фетальных мониторов (подробно)

Цель: создать блок со ссылками на производителей в виде кнопок с иконками, скрытым списком «Ещё» и поясняющим текстом с иконками.

1. Стили (Уже добавлены в `catalog/view/theme/prostore/stylesheet/ignore.css << Отдельно на Prod и Dev версии`)

.brand-btn {
  text-decoration: none;
  border: 1px solid rgba(176, 194, 235, 0.45);
  background-color: #FFFFFF;
  border-radius: 18px;
  padding: 5px 20px;
  color: #444444 !important;
  font-size: 15px;
  font-family: sans-serif;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.brand-btn:hover {
  background-color: #FFFFFF;
  border: 1px solid rgba(176, 194, 235, 0.7);
  box-shadow: 0 0 18px rgba(37, 90, 164, 0.5);
  color: green !important;
}
.brand-btn img {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.brand-extra {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.brand-extra.visible {
  display: flex;
}
.brand-more-toggle {
  background: none;
  border: none;
  padding: 5px 10px;
  font-size: 15px;
  font-family: sans-serif;
  color: #444444;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.brand-more-toggle:hover {
  color: green;
}
.icon-text-container {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #444444;
  font-size: 14px;
  font-family: sans-serif;
}
.icon-text-container .fa {
  font-size: 16px;
  color: #e7e7e7;
}

2. Применение HTML

<div style="display: flex; flex-wrap: wrap; gap: 10px;">
  <a class="brand-btn" href="/fetalnie_monitory/proizvodstvo-monitory-i-dopplery/monitory-bionet/">
    <img src="/image/catalog/cordis/prods/ft-bionet.svg" alt="Bionet">Bionet
  </a>
  <a class="brand-btn" href="/fetalnie_monitory/proizvodstvo-monitory-i-dopplery/monitory-edan/">
    <img src="/image/catalog/cordis/prods/ft-edan.svg" alt="EDAN">EDAN
  </a>
  <a class="brand-btn" href="/fetalnie_monitory/proizvodstvo-monitory-i-dopplery/monitory-philips/">
    <img src="/image/catalog/cordis/prods/ft-philips.svg" alt="Philips">Philips
  </a>
  <button class="brand-more-toggle" onclick="document.getElementById('more-brands').classList.toggle('visible')">
    Ещё <span class="fa fa-chevron-down"></span>
  </button>
</div>

<div class="brand-extra" id="more-brands">
  <a class="brand-btn" href="/fetalnie_monitory/proizvodstvo-monitory-i-dopplery/monitory-sunray/">
    <img src="/image/catalog/cordis/prods/ft-sunray.svg" alt="Sunray">Sunray
  </a>
</div>

3. Добавление пояснений с иконками

<div style="margin-top: 15px;">
  <p class="icon-text-container">
    <span class="fa fa-graduation-cap"></span>
    <span>Мы знаем нюансы каждого прибора и поможем вам сделать правильный выбор.</span>
  </p>
  <p class="icon-text-container">
    <span class="fa fa-question-circle"></span>
    <span>Рассказываем, что важно в фетальных мониторах, и как их выбрать.</span>
  </p>
  <p class="icon-text-container">
    <span class="fa fa-check-circle"></span>
    <span>Консультируем и отвечаем на вопросы по КТГ аппаратам с 2018г.</span>
  </p>
</div>