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

Для верстки блока вам необходимо заранее:
1) доступ к аккаунту Popmechanic
2) подключенный модуль рекомендаций в Mindbox
3) коды Popmechanic и Mindbox на всех страницах сайта
4) созданная форма для HTML вида рекомендаций
5) заведенные операции в Mindbox для выдачи рекомендаций
6) код конкретной формы, установленный на вашем сайте в месте, где должен отображаться блок

Детальнее о предварительных этапах


Когда у вас уже есть созданная форма, заходим в неё:

1) Шаблон карточки. HTML.

В HTML используются такие "маски" для вывода значений:


Для условий можно использовать тернарный оператор:
Если нет скидки, то добавляем класс "popmechanic-hidden":
<div 
class="popmechanic-item-discount 
{{ product.discount ? '' : 'popmechanic-hidden' }}">
{{ product.discount }}
</div>
Примерная структура html слайда выглядит так:
<div class="popmechanic-item-card">
   <a href="{{ product.url }}" class="popmechanic-item-wrapper">
       <div class="popmechanic-item-discount {{ product.discount ? '' : 'popmechanic-hidden' }}">-{{ product.discount }}</div>
       <div class="popmechanic-item-picture">
           <img src="{{ product.pictureUrl }}" alt="{{ product.displayName }}" />
       </div>
       <div class="popmechanic-item-name">{{ product.displayName }}</div>
       <div class="popmechanic-item-price {{ product.discount ? 'popmechanic-item-price--highlight' : '' }} ">       
           {{ product.price }}     
           <span class="popmechanic-currency">руб.</span>         
       </div>
   </a>
</div>
  

2) CSS.
Обращения ко всем элементам желательно делать через #popmechanic-form:
#popmechanic-form .popmechanic-item-card и т.д.

Основные:
Задаем контейнеру слайдов display:flex, чтобы элементы выстроились в линию
#popmechanic-form .popmechanic-main .popmechanic-items {
 display: flex;
}
Или можно задать, карточке display: inline-block, результат будет такой же.
#popmechanic-form .popmechanic-main .popmechanic-item-card {
	display: inline-block;
}

Также задаем transition, для плавности перелистывания слайдера:
#popmechanic-form .popmechanic-main .popmechanic-items {
 transition: 0.3s;
}
Отступы между слайдами:

Отступы между слайдами обязательно нужно задавать в padding:
#popmechanic-form .popmechanic-main .popmechanic-item-card{
	padding: 0 8px;
}
Задаст padding между слайдами в 16px (слева 8px и справа 8px).
Отступы также можно задавать в параметрах адаптивности (читать ниже)
Стрелки
Стрелки создаются автоматически, их структура:
<div class="tns-controls" aria-label="Carousel Navigation" tabindex="0">
 <button data-controls="prev" tabindex="-1" aria-controls="tns1" type="button">prev</button>
   <button data-controls="next" tabindex="-1" aria-controls="tns1" type="button">next</button>
</div>
Чтобы убрать слова "prev" и "next" пишем:
#popmechanic-form .popmechanic-main .tns-controls button {
 font-size: 0;
 color: transparent;
 background-color: transparent;
}
Картинку в стрелку можно положить только в base64, в виде фонового изображения:

Например это треугольник влево:
background-image: url("data:image/svg+xml ,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2249%22%20viewBox%3D%220%200%2022%2049%22%3E%3Cg%3E%3Cg%3E%3Cpath%20d%3D%22M20.803-.171L22.059.866%201.599%2025.099.341%2024.062z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M21.902%2047.65l-1.25%201.045-20.6-24.116%201.25-1.045z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
Это треугольник вправо:
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2249%22%20viewBox%3D%220%200%2023%2049%22%3E%3Cg%3E%3Cg%3E%3Cpath%20d%3D%22M1.706-.171L.45.866l20.46%2024.233%201.256-1.037z%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%22M.606%2047.65l1.25%201.045%2020.6-24.116-1.249-1.045z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
Параметры адаптивности

Они отвечают за количество слайдов, которые показываются на разных разрешениях.

Например следующие параметры:
2;428,2;760,4;1500,5

Означают:
Начиная с разрешения 1500px+ показывается 5 слайдов,
начиная с разрешения 760px+ показывается 4 слайда,
начиная с разрешения 428px+ показывается 2 слайда.
И минимальное кол-во слайдов для показа - 2.

Также может быть третий параметр - это отступ между слайдами.
Детальнее о параметрах адаптивности
Вам была полезна эта статья?