Аспро: Премьер — документация, часть 6 из 6: Требования к графическим материалам
Источник: официальный курс «Аспро: Премьер» из базы знаний Аспро. Решение: Аспро: Премьер. Справочная выгрузка сертифицированного партнёра Аспро, обновлено 19.09.2026.
Части курса: 1 · 2 · 3 · 4 · 5 · 6
Содержание
- Требования к графическим материалам
- Интеграция с другими сервисами
- Аналитика заказов
- Для веб-разработчиков
Требования к графическим материалам
В этой главе рассмотрим требования к графическим материалам, которые понадобятся для запуска интернет-магазина Аспро: Премьер. К ним относятся баннеры на главной странице, тизеры, картинки для акций и другие изображения. Расположение и размер каждого графического материала в интернет-магазине зависит от выбранного шаблона в виджете настроек.
Содержание главы:
назадТип попап-окна «Картинка» Логотипвперед
Логотип
Размер контейнера для логотипа в шапке сайта: 210x64 px.
Размер логотипа Аспро: Премьер на демосайте: 168x32 px.
Допустимые форматы изображений: svg, jpg, png, gif.
назадТребования к графическим материалам Фавиконвперед
Фавикон
16х16 px
назадЛоготип Блоки на главной страницевперед
Блоки на главной странице
назадФавикон Большие баннерывперед
Большие баннеры
В решениях Аспро мы рекомендуем использовать составные баннеры. В статье рассказываем принцип их работы и почему мы работаем именно с ними.
На основном баннере можно разместить неограниченное количество слайдов, которые будут автоматически меняться через установленные промежутки времени.
В виджете настроек есть 3 шаблона больших баннеров. В зависимости от выбранного типа, положение и размер главного баннера будут разными.
Баннер может состоять из одной картинки — фона или из двух картинок — фона и активной картинки. При использовании одной фоновой картинки баннер будет обрезаться, адаптируясь под разрешения экрана.
Фоновое изображение
Занимает все поле баннера, но должно соблюдать безопасные зоны. Об этом написано далее.
Безопасная зона — часть изображения, видимая при любом разрешении экрана. В эту зону необходимо размешать информативную часть баннера или главные элементы изображения.
Активная картинка
Активная картинка будет накладываться на фон с середины во всех типах основного баннера. Вы можете занять активной картинкой все свободное пространство до правого края фонового изображения или какую-то его часть.
В высоту — от нижней границы до шапки сайта. На примере — синяя зона. Активная картинка «прилипает» к своему левому и нижнему краю. На примере — ярко-зеленая линия.
Рекомендуемый формат изображений для активной картинки — png.
1. С наездом на шапку
Высота фонового изображения зависит от уровней шапки. Вот как выглядит 3х-уровневая, 2х-уровневая и 1-уровневая шапка.
Также высота фона зависит от высоты самого баннера. Чтобы определиться с размером, в виджете публичной части перейдите в «Точную настройку», далее в раздел «Главная» (1). В списке блоков главной страницы найдите пункт «Большие баннеры» (2). В блоке «С наездом на шапку» раскройте пункт «По высоте» и выберите необходимый тип отображения блока (3).
Высокий
Фоновое изображение
Ширина: 1920 px.
Высота:
- Для 3х-уровневой шапки — 938 px.
- Для 2х-уровневой — 887 px.
- Для 1-уровневой шапки — 848 px.
Безопасная зона: 1020х760 px по центру снизу. Размер зоны от уровней шапки не зависит.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 759 px.
Обычный
Фоновое изображение
Ширина: 1920 px.
Высота:
- Для 3х-уровневой шапки — 762 px
- Для 2х-уровневой — 711 px
- Для 1-уровневой шапки — 672 px
Безопасная зона: 1020х583 px по центру снизу. Размер зоны от уровней шапки не зависит.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 583 px.
Низкий
Фоновое изображение
Ширина: 1920 px.
Высота:
- Для 3х-уровневой шапки — 634 px.
- Для 2х-уровневой — 583 px.
- Для 1-уровневой шапки — 544 px.
Безопасная зона: 1020х455 px по центру снизу. Размер зоны от уровней шапки не зависит.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 455 px.
2. Без наезда на шапку
Высота фонового изображения зависит от высоты самого баннера. Чтобы определиться с размером, в виджете публичной части перейдите в «Точную настройку», далее в раздел «Главная» (1). В списке блоков главной страницы найдите пункт «Большие баннеры» (2). В блоке «Без наезда на шапку» раскройте пункт «По высоте» и выберите необходимый тип отображения блока (3).
Высокий
Фоновое изображение
Ширина: 1920 px.
Высота: 760 px.
Безопасная зона: 1020х760 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 786 px.
Обычный
Фоновое изображение
Ширина: 1920 px.
Высота: 584 px.
Безопасная зона: 1020х584 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 584 px.
Низкий
Фоновое изображение
Ширина: 1920 px.
Высота: 456 px.
Безопасная зона: 1020х456 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 456 px.
3. С баннерами сбоку
Размер фонового изображения зависит от высоты самого баннера. Чтобы определиться с размером, в виджете публичной части перейдите в «Точную настройку», далее в раздел «Главная» (1). В списке блоков главной страницы найдите пункт «Большие баннеры» (2). В блоке «С баннерами сбоку» раскройте пункт «По высоте» и выберите необходимый тип отображения блока (3).
Также размер фонового изображения зависит от настройки отображения: На всю ширину или по ширине сайта.
На всю ширину
Высокий
Фоновое изображение
Ширина: 1436 px
Высота: 760 px
Безопасная зона: 744х760 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 760 px.
Дополнительные баннеры
Ширина 478 px
Высота: 380 px
Безопасная зона: 248х380 px по центру.
Обычный
Фоновое изображение
Ширина: 1436 px.
Высота: 584 px.
Безопасная зона: 744х584 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера
Высота: до 584 px.
Дополнительные баннеры
Ширина 478 px.
Высота: 292 px.
Безопасная зона: 248х292 px по центру.
Низкий
Фоновое изображение
Ширина: 1436 px
Высота: 456 px
Безопасная зона: 744х456 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 456 px.
Дополнительные баннеры
Ширина 478 px.
Высота: 228 px.
Безопасная зона: 248х228 px по центру.
Ширина сайта: 1696 px
Высокий
Фоновое изображение
Ширина: 1273 px.
Высота: 760 px.
Безопасная зона: 744х760 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 760 px.
Дополнительные баннеры
Ширина 423 px.
Высота: 380 px.
Безопасная зона: 248х380 px по центру.
Обычный
Фоновое изображение
Ширина: 1273 px.
Высота: 584 px.
Безопасная зона: 744х584 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 584 px.
Дополнительные баннеры
Ширина 423 px.
Высота: 292 px.
Безопасная зона: 248х292 px по центру.
Низкий
Фоновое изображение
Ширина: 1273 px.
Высота: 456 px.
Безопасная зона: 744х456 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 456 px.
Дополнительные баннеры
Ширина 423 px
Высота: 228 px
Безопасная зона: 248х228 px по центру.
Ширина сайта: 1464 px
Высокий
Фоновое изображение
Ширина: 1099 px.
Высота: 760 px.
Безопасная зона: 744х760 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 760 px.
Дополнительные баннеры
Ширина 365 px.
Высота: 380 px.
Безопасная зона: 248х380 px по центру.
Обычный
Фоновое изображение
Ширина: 1099 px.
Высота: 584 px.
Безопасная зона: 744х584 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 584 px.
Дополнительные баннеры
Ширина 365 px.
Высота: 292 px.
Безопасная зона: 248х292 px по центру.
Низкий
Фоновое изображение
Ширина: 1099 px.
Высота: 456 px.
Безопасная зона: 744х456 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 456 px.
Дополнительные баннеры
Ширина 365 px.
Высота: 228 px.
Безопасная зона: 248х228 px по центру.
Ширина сайта: 1 296 px
Высокий
Фоновое изображение
Ширина: 973 px.
Высота: 760 px.
Безопасная зона: 744х760 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 760 px.
Дополнительные баннеры
Ширина 323 px.
Высота: 380 px.
Безопасная зона: 248х380 px по центру.
Обычный
Фоновое изображение
Ширина: 973 px.
Высота: 584 px.
Безопасная зона: 744х584 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 584 px.
Дополнительные баннеры
Ширина 323 px.
Высота: 292 px.
Безопасная зона: 248х292 px по центру.
Низкий
Фоновое изображение
Ширина: 973 px.
Высота: 456 px.
Безопасная зона: 744х456 px по центру.
Активная картинка
Ширина: Размер зависит от творческого решения дизайнера.
Высота: до 456 px.
Дополнительные баннеры
Ширина: 323 px.
Высота: 228 px.
Безопасная зона: 248х228 px по центру.
назадБлоки на главной странице Баннеры с текстомвперед
Баннеры с текстом
1. Плиткой c текстом внутри
На всю ширину
1 элемент в строке: 1920x784 px
2 элемента в строке: 957x853 px
3 элемента в строке: 638x569 px
4 элемента в строке: 478x608 px
Ширина сайта 1696 px
1 элемент в строке: 1696x695 px
2 элемента в строке: 848x756 px
3 элемента в строке: 566x504 px
4 элемента в строке: 424x538 px
Ширина сайта 1464 px
1 элемент в строке: 1464x600 px
2 элемента в строке: 732x653 px
3 элемента в строке: 488x435 px
4 элемента в строке: 366x465 px
Ширина сайта 1296 px
1 элемент в строке: 1296x531 px
2 элемента в строке: 648x578 px
3 элемента в строке: 432x385 px
4 элемента в строке: 324x412 px
2. Плиткой c текстом снаружи
На всю ширину
2 элемента в строке: 922x762 px
3 элемента в строке: 613x613 px
4 элемента в строке: 458x514 px
Ширина сайта 1696 px
2 элемента в строке: 845x698 px
3 элемента в строке: 561x561 px
4 элемента в строке: 420x471 px
Ширина сайта 1464 px
2 элемента в строке: 729x602 px
3 элемента в строке: 484x484 px
4 элемента в строке: 362x406 px
Ширина сайта 1296 px
2 элемента в строке: 645x533 px
3 элемента в строке: 428x428 px
4 элемента в строке: 320x359 px
3. В произвольном порядке
На всю ширину
Широкий элемент: 960x570 px
Узкий элемент: 480x570 px
Ширина сайта 1696 px
Широкий элемент: 848x505 px
Узкий элемент: 424x505 px
Ширина сайта 1464 px
Широкий элемент: 732x436 px
Узкий элемент: 366x436 px
Ширина сайта 1296 px
Широкий элемент: 648x386 px
Узкий элемент: 324x386 px
назадБольшие баннеры Брендывперед
Бренды
Логотипы брендов
Рекомендуемый размер логотипа бренда: не больше 96px в ширину и не больше 40px в высоту.
Картинки
Ширина сайта 1696 px
4 элемент в строке: 420x279 px
5 элемента в строке: 334x223 px
6 элемента в строке: 277x185 px
Ширина сайта 1464 px
4 элемент в строке: 362x241 px
5 элемента в строке: 288x192 px
6 элемента в строке: 239x159 px
Ширина сайта 1296 px
4 элемент в строке: 320x213 px
5 элемента в строке: 254x169 px
6 элемента в строке: 211x140 px
назадБаннеры с текстом Образывперед
Образы
1. Списком
Ширина сайта 1696 px
1204x802 px
Ширина сайта 1464 px
972x648 px
Ширина сайта 1296 px
804x536 px
2. С текстом внизу
Ширина сайта 1696 px
1 элемент в строке: 1696x882 px
2 элемента в строке: 845x684 px
3 элемента в строке: 561x561 px
4 элемента в строке: 419x499 px
Ширина сайта 1464 px
1 элемент в строке: 1464x761 px
2 элемента в строке: 729x590 px
3 элемента в строке: 484x484 px
4 элемента в строке: 361x430 px
Ширина сайта 1296 px
1 элемент в строке: 1296x674 px
2 элемента в строке: 645x522 px
3 элемента в строке: 428x428 px
4 элемента в строке: 320x380 px
3. С текстом внутри
Ширина сайта 1696 px
1 элемент в строке: 1696x882 px
2 элемента в строке: 845x684 px
3 элемента в строке: 561x561 px
4 элемента в строке: 419x499 px
Ширина сайта 1464 px
1 элемент в строке: 1464x761 px
2 элемента в строке: 729x590 px
3 элемента в строке: 484x484 px
4 элемента в строке: 361x430 px
Ширина сайта 1296 px
1 элемент в строке: 1296x674 px
2 элемента в строке: 645x522 px
3 элемента в строке: 428x428 px
4 элемента в строке: 320x380 px
Отзывы
1 в ряд
120x120 px
Несколько в ряд
56x56 px
назадОбразы Разделы каталогавперед
Разделы каталога
Если вы хотите загружать картинки в высоком разрешении, читайте документацию.
1. Компактно (для главной и для внутренних)
Иконки: 40х40 px
Прозрачные картинки: 48x48 px
Картинки: 56x56 px
Размер контейнера в этом блоке 56х56. Но эти картинки могут использоваться еще в разных местах на сайте. Например, в корне в таком виде или в таком. А еще в выпадающем меню в шапке. То есть размер картинки зависит от того, какой вид выбран для других блоков, в которых участвует эта картинка. Если вы используете компактный вид, и если вас корень такой, то картинка должна быть 120х120.
2. Слайдером (для главной и для внутренних)
Иконки: 40х40 px
Прозрачные картинки: 80x80 px
Картинки: 144x144 px
3. Плиткой (для главной и для внутренних)
Иконки: 40х40 px
Прозрачные картинки: 88x88 px
Картинки (4 в ряд): 136x136 px
Картинки (5 в ряд): 128x128 px
Картинки (6 в ряд): 120x120 px
4. Большие картинки (для главной и для внутренних)
Ширина сайта 1696 px
3 элемента в строке: 561x455 px
4 элемента в строке: 420x340 px
5 элемента в строке: 334x271 px
Ширина сайта 1464 px
3 элемента в строке: 484x392 px
4 элемента в строке: 362x293 px
5 элемента в строке: 288x233 px
Ширина сайта 1296 px
3 элемента в строке: 428x347 px
4 элемента в строке: 320x259 px
5 элемента в строке: 254x206 px
Коллекции
С текстом внутри
Ширина сайта 1696 px
1 элемент в строке: 1696x882 px
2 элемента в строке: 845x684 px
3 элемента в строке: 562x562 px
4 элемента в строке: 420x499 px
Ширина сайта 1464 px
1 элемент в строке: 1464x761 px
2 элемента в строке: 729x590 px
3 элемента в строке: 484x484 px
4 элемента в строке: 362x430 px
Ширина сайта 1296 px
1 элемент в строке: 1296x674 px
2 элемента в строке: 645x522 px
3 элемента в строке: 428x428 px
4 элемента в строке: 320x380 px
Списком
В этот тип отображения загружаются картинки товаров. Вариант полезен в случае, когда нужно быстро сделать обложку без помощи дизайнера.
Вы можете оставить те же размеры, что у картинок в каталоге или уменьшить изображения под размер контейнера.
Размеры контейнера:
Ширина сайта 1696px — размер контейнера 160px
Ширина сайта 1464px — размер контейнера 133px
Ширина сайта 1296px — размер контейнера 115px
назадРазделы каталога Баннеры с фономвперед
Баннеры с фоном
1. Вертикальный
На всю ширину
1 элемент в строке (размер контейнера для картинки): 1920x440 px
2 элемента в строке (размер контейнера для картинки): 960x440 px
3 элемента в строке (размер контейнера для картинки): 640x380 px
4 элемента в строке (размер контейнера для картинки): 480x320 px
Ширина сайта 1696 px
1 элемент в строке (размер контейнера для картинки): 1696x440 px
2 элемента в строке (размер контейнера для картинки): 848x440 px
3 элемента в строке (размер контейнера для картинки): 565x380 px
4 элемента в строке (размер контейнера для картинки): 424x320 px
Ширина сайта 1464 px
1 элемент в строке (размер контейнера для картинки): 1464x440 px
2 элемента в строке (размер контейнера для картинки): 732x440 px
3 элемента в строке (размер контейнера для картинки): 488x380 px
4 элемента в строке (размер контейнера для картинки): 366x306 px
Ширина сайта 1296 px
1 элемент в строке (размер контейнера для картинки): 1296x440 px
2 элемента в строке (размер контейнера для картинки): 648x440 px
3 элемента в строке (размер контейнера для картинки): 432x348 px
4 элемента в строке (размер контейнера для картинки): 324x270 px
2. Горизонтальный
На всю ширину
1 элемент в строке (размер контейнера для картинки): 638x340 px
2 элемента в строке (размер контейнера для картинки): 478x340 px
Ширина сайта 1696 px
1 элемент в строке (размер контейнера для картинки): 565x340 px
2 элемента в строке (размер контейнера для картинки): 422x340 px
Ширина сайта 1464 px
1 элемент в строке (размер контейнера для картинки): 488x340 px
2 элемента в строке (размер контейнера для картинки): 364x340 px
Ширина сайта 1296 px
1 элемент в строке (размер контейнера для картинки): 432x340 px
2 элемента в строке (размер контейнера для картинки): 322x340 px
3. В произвольном порядке
На всю ширину
Узкий элемент (размер контейнера для картинки): 480x260 px
Широкий элемент (размер контейнера для картинки): 960x260 px
Ширина сайта 1696 px
Узкий элемент (размер контейнера для картинки): 424x260 px
Широкий элемент (размер контейнера для картинки): 848x260 px
Ширина сайта 1464 px
Узкий элемент (размер контейнера для картинки): 366x260 px
Широкий элемент (размер контейнера для картинки): 732x260 px
Ширина сайта 1296 px
Узкий элемент (размер контейнера для картинки): 324x260 px
Широкий элемент (размер контейнера для картинки): 648x260 px
Услуги
Ширина сайта 1696 px
3 элемента в строке: 561x374 px
4 элемента в строке: 420x280 px
5 элементов в строке: 334x223 px
Ширина сайта 1464 px
3 элемента в строке: 484x323 px
4 элемента в строке: 362x241 px
5 элементов в строке: 288x192 px
Ширина сайта 1296 px
3 элемента в строке: 428x285 px
4 элемента в строке: 320x213 px
5 элементов в строке: 254x170 px
назадБаннеры с фоном Акциивперед
Акции
1. С текстом внизу
Ширина сайта 1696 px
2 элемента в строке: 845x563 px
3 элемента в строке: 561x374 px
4 элемента в строке: 420x280 px
Ширина сайта 1464 px
2 элемента в строке: 729x486 px
3 элемента в строке: 484x323 px
4 элемента в строке: 362x241 px
Ширина сайта 1296 px
2 элемента в строке: 645x430 px
3 элемента в строке: 428x285 px
4 элемента в строке: 320x213 px
2. С текстом внутри
Ширина сайта 1696 px
2 элемента в строке: 845x684 px
3 элемента в строке: 561x561 px
4 элемента в строке: 420x500 px
Ширина сайта 1464 px
2 элемента в строке: 729x591 px
3 элемента в строке: 484x484 px
4 элемента в строке: 362x431 px
Ширина сайта 1296 px
2 элемента в строке: 645x523 px
3 элемента в строке: 428x428 px
4 элемента в строке: 320x381 px
3. Списком
Ширина сайта 1696 px
272x172 px
Ширина сайта 1464 px
272x172 px
Ширина сайта 1296 px
235x149 px
Блог
1. Плиткой
Ширина сайта 1696 px
3 элемента в строке: 561x374 px
4 элемента в строке: 420x280 px
5 элемента в строке: 334x223 px
Ширина сайта 1464 px
3 элемента в строке: 484x323 px
4 элемента в строке: 362x241 px
5 элемента в строке: 288x192 px
Ширина сайта 1296 px
3 элемента в строке: 428x285 px
4 элемента в строке: 320x213 px
5 элемента в строке: 254x170 px
2. С большим блоком
Ширина сайта 1696 px
845x438 px
С безопасной зоной 657x438 px для обычных постов
С безопасной зоной 420х438 px для таких постов баннером.
Ширина сайта 1464 px
729x399 px
С безопасной зоной 600x399 px для обычных постов
С безопасной зоной 382х399 px для таких постов баннером
Ширина сайта 1296 px
645x371 px
С безопасной зоной 557x371 px для обычных постов
С безопасной зоной 355х371 px для таких постов баннером
О компании
1. С текстом и картинкой
Ширина сайта 1696 px
845x484 px
Ширина сайта 1464 px
729x484 px
Ширина сайта 1296 px
645x484 px
2. С текстом и картинкой вертикально
Ширина сайта 1696 px
1696x862 px
Ширина сайта 1464 px
1464x744 px
Ширина сайта 1296 px
1296x658 px
Тизеры
1. Карточкой / 2. Без отступов
Иконки SVG: 40x40 px
3. Картинками
Ширина сайта 1696 px
5 элемента в строке: 334x424 px
Ширина сайта 1464 px
5 элемента в строке: 288x366 px
Ширина сайта 1296 px
5 элемента в строке: 254x323 px
Новости
Плиткой
Ширина сайта 1696 px
3 элемента в строке: 561x374 px
4 элемента в строке: 420x280 px
5 элемента в строке: 334x223 px
Ширина сайта 1464 px
3 элемента в строке: 484x323 px
4 элемента в строке: 362x241 px
5 элемента в строке: 288x192 px
Ширина сайта 1296 px
3 элемента в строке: 428x285 px
4 элемента в строке: 320x213 px
5 элемента в строке: 254x170 px
назадТизеры Баннеры картинкамивперед
Баннеры картинками
А. 1 в ряд
На всю ширину
1920x192px
Безопасная зона 940х192 px
Ширина сайта 1696 px
1696x192 px
Безопасная зона 940х192 px
Ширина сайта 1464 px
1464x192 px
Безопасная зона 940х192 px
Ширина сайта 1296 px
1296x192 px
Безопасная зона 940х192 px
Б. 2 в ряд
На всю ширину
960x340 px
Ширина сайта 1696 px
848x299 px
Ширина сайта 1464 px
732x258 px
Ширина сайта 1296 px
648x228 px
В. 3 в ряд
На всю ширину
640x340 px
Ширина сайта 1696 px
565x302 px
Ширина сайта 1464 px
488x260 px
Ширина сайта 1296 px
432x230 px
Г. 4 в ряд
На всю ширину
480x343 px
Ширина сайта 1696 px
424x304 px
Ширина сайта 1464 px
366x262 px
Ширина сайта 1296 px
324x232 px
Истории
Круглые картинки анонса
Ширина сайта 1296px — 98x98px
Ширина сайта 1496px — 120x120px
Ширина сайта 1696px — 120x120px
Прямоугольные картинки анонса
Ширина сайта 1296px — 152x229px
Ширина сайта 1496px — 172x260px
Ширина сайта 1696px — 201x303px
Картинки историй
Разрешение картинки 456x809 px
назадБаннеры картинками Элементы каталогавперед
Элементы каталога
Рекомендуемые размеры картинок
Квадратные: 920x920 px
Горизонтальные: 920х690 px
Вертикальные: 690x920 px
Картинки в списке каталога преобразуются из анонсных изображений и подстраиваются под сетку: 5, 4 или 3 в ряд.
Содержание главы:
назадИстории Страницы товароввперед
Страницы товаров
На демосайте размер картинок 700x700 px.
Рекомендуем высоту картинок делать не больше 1000 px. Потому что когда откроется попап с увеличенной картинкой, изображение большего размера не поместится в экран и уменьшится.
Ниже приведены размеры контейнера, в который помещается картинка на детальной странице в зависимости от настройки размера детальной картинки и ширины сайта. Можно больше. Размер определяется клиентом исходя из того, хочет ли он, чтобы картинка увеличивалась по клику.
Ширина сайта 1296 px
Минимальная ширина картинки 323 px — это максимальная ширина возможной картинки в списке каталога.
Квадрат
Обычный — 442х442 px
Средний — 770х770 px
Большой — 770х770 px
Вертикальный
Обычный — 442х591 px
Средний — 770х1029 px
Большой — 770х1029 px
Горизонтальный
Обычный — 442х332 px
Средний — 770х578 px
Большой — 770х578 px
Ширина сайта 1464 px, 1696 px
Минимальная ширина картинки для 1464 px — 380 px
Минимальная ширина картинки для 1696 px — 456 px
Квадрат
Обычный — 504х504 px
Средний — 792х792 px
Большой — 938х938 px
Вертикальный
Обычный — 504х674 px
Средний — 792х1058 px
Большой — 938х1253 px
Горизонтальный
Обычный — 504х378 px
Средний — 792х574 px
Большой — 938х704 px
назадЭлементы каталога Баннеры в списке товароввперед
Баннеры в списке товаров
Без боковой колонки
Ширина сайта 1696 px
1696x160 px
Безопасная зона 940х160 px
Ширина сайта 1464 px
1464x160 px
Безопасная зона 940х160 px
Ширина сайта 1296 px
1296x160 px
Безопасная зона 940х160 px
С боковой колонкой
Ширина сайта 1696 px
1392x160 px
Безопасная зона 940х160 px
Ширина сайта 1464 px
1160x160 px
Безопасная зона 940х160 px
Ширина сайта 1296 px
992x160 px
Безопасная зона 940х160 px
назадСтраницы товаров Магазинывперед
Магазины
Ширина сайта 1696 px
845x460 px
Ширина сайта 1464 px
729x460 px
Ширина сайта 1296 px
645x460 px
назадБаннеры в списке товаров Сотрудникивперед
Сотрудники
Ширина сайта 1696 px
460x460 px
Ширина сайта 1464 px
383x383 px
Ширина сайта 1296 px
360x360 px
назадМагазины Баннеры во внутренних разделахвперед
Баннеры во внутренних разделах
1. Баннер с затемнением
1920x804 px
2. Баннер по ширине сайта
Ширина сайта 1696 px
Ширина — 1156 px. По высоте не ограничен. Мы рекомендуем 780 px.
Ширина сайта 1464 px
Ширина — 1464 px. По высоте не ограничен. Мы рекомендуем 680 px.
Ширина сайта 1296 px
Ширина — 1296 px. По высоте не ограничен. Мы рекомендуем 600 px.
3. Баннер по ширине контента
Ширина — 1160 px. По высоте не ограничен. Мы рекомендуем 540 px.
назадСотрудники Рекламные баннерывперед
Рекламные баннеры
1. Сверху над шапкой
Ширина — 1920 px. Высота — не ограничена. Мы рекомендуем — 70 px.
2. Сверху под шапкой
Ширина — 1920 px. Высота — не ограничена. Мы рекомендуем — 100 px.
3. Боковой
Ширина — 264 px. Высота зависит от творческого решения дизайнера.
Низкий прямоугольник
Квадрат
Высокий прямоугольник
4. Над контентом/Под контентом
В зависимости от страницы/раздела может быть по ширине сайта или по ширине контента. Зависит от того, учитывается ли боковая колонка или нет.
a.
Ширина сайта — 1696 px без боковой колонки
Ширина контейнера для баннера — 1696 px
Высота не ограничена. Мы рекомендуем 480 px
Ширина сайта — 1696 px с боковой колонкой
Ширина контейнера для баннера — 1392 px
Высота не ограничена. Мы рекомендуем 400 px
б.
Ширина сайта — 1464 px без боковой колонки
Ширина контейнера для баннера — 1464 px
Высота не ограничена. Мы рекомендуем 430 px
Ширина сайта — 1464 px с боковой колонкой
Ширина контейнера для баннера — 1160 px
Высота не ограничена. Мы рекомендуем 340 px
в.
Ширина сайта — 1296 px без боковой колонки
Ширина контейнера для баннера — 1296 px.
Высота не ограничена. Мы рекомендуем 380 px
Ширина сайта — 1296 px с боковой колонкой
Ширина контейнера для баннера — 992 px
Высота не ограничена. Мы рекомендуем 290 px
5. Внизу страницы
Ширина — 1920 px
Высота — по высоте не ограничен. Мы рекомендуем 120 px
назадБаннеры во внутренних разделах Брендывперед
Бренды
Ширина сайта 1696 px
Картинка наполовину:
842х483 px
Картинки по контенту:
Ширина — 1696 px. По высоте не ограничен. Мы рекомендуем — 820 px.
Баннер с затемнением
1920x804 px
Ширина сайта 1464 px
Картинка наполовину:
726х416 px
Картинки по контенту:
Ширина — 1464 px. По высоте не ограничен. Мы рекомендуем — 700 px
Баннер с затемнением
1920x804 px
Ширина сайта 1296 px
Картинка наполовину:
642х368 px
Картинки по контенту:
Ширина — 1296 px. По высоте не ограничен. Мы рекомендуем — 620 px
Баннер с затемнением
1920x804 px
назадРекламные баннеры Проектывперед
Проекты
Список
а. 1 элемент в строке
Ширина сайта 1696 px
1696x649 px
Ширина сайта 1464 px
1464x560 px
Ширина сайта 1296 px
1296x496 px
б. 2 элемента в строке
Ширина сайта 1696 px
845x563 px
Ширина сайта 1464 px
729x486 px
Ширина сайта 1296 px
645x430 px
Баннеры внутри проекта
а. Баннер наполовину
Ширина сайта 1696 px
845x563 px
Ширина сайта 1464 px
726x484 px
Ширина сайта 1296 px
642x428 px
Остальные варианты баннеров такие же как у баннеров для внутренних страниц.
Образы
а. Прямоугольная картинка
Ширина сайта 1696 px
1696x954 px
Ширина сайта 1464 px
1464x824 px
Ширина сайта 1296 px
1296x729 px
б. Квадратная картинка
Ширина сайта 1696 px
845x845 px
Ширина сайта 1464 px
729x729 px
Ширина сайта 1296 px
645x645 px
назадПроекты Маркетинговые окнавперед
Маркетинговые окна
а. Картинка
Размер не ограничен.
*Размер баннера картинкой на демосайте: 850x600 px.
б. Картинка сбоку
Картинка занимает 45% от ширины маркетингового окна. Ширина зависит от количества текста. Чем больше текста, тем окно больше. Максимальная ширина окна — 850 px.
в. Картинка сбоку и фон
Высота не ограничена и зависит от количества текста.
Минимальная высота — 200 px.
Максимальная ширина — 700 px.
Текст занимает 66% от ширины.
назадОбразы Создание SVG-иконкивперед
Создание SVG-иконки
1. Для создания иконок лучше использовать программы Photoshop или Figma.
Photoshop — платная программа.
Figma — начальный версия бесплатна. Может работать в браузере.
2. При создании иконки нужно учитывать размер поля, в которое она будет помещена.
В данном случае 40х40px:
Если иконка будет больше этого поля, то она уменьшится и линии будут нечеткими.
3. Как только иконка будет нарисована, все слои, из которых она состоит, нужно поместить в группу в Photoshop. В Figma нужно поместить в группу или фрейм.
Photoshop — группа
Figma — фрейм
Figma — группа
4. Экспортируйте иконку в формат SVG.
Photoshop
Клик правой кнопкой мыши по группе с иконкой. Выберите Export as.
Удостоверьтесь, что выбран формат SVG. Нажмите Export All.
Figma
Если иконка сделана во фрейме, убедитесь, что у фрейма не включена галка Clip content.
Выделите фрейм или группу с иконкой. В правой панели в блоке Export выберите SVG и нажмите Export.
5. Проверьте иконку в браузере. Все линии и фигуры в иконке должны быть в теге
Если эти теги есть, вернитесь и измените так, чтобы был
назадМаркетинговые окна Интеграция с другими сервисамивперед
Интеграция с другими сервисами
назадСоздание SVG-иконки Интеграция с Wildberriesвперед
Интеграция с Wildberries
В решении Аспро: Премьер доступна интеграция с маркетплейсом Wildberries. Функционал подразумевает экспорт товаров с возможностью обновления остатков и цен. Размещайте продукцию на разных витринах и получайте максимальное количество заказов. Возможности будут расширяться по мере выхода обновлений. Продвигайте собственный бренд благодаря увеличению точек контакта с клиентом.
Функционал доступен только на следующих редакциях 1С-Битрикс:
- Малый бизнес.
- Бизнес.
- Интернет-магазин + CRM.
Для корректной работы функционала платформа 1С-Битрикс должна быть обновлена до версии 21 и выше.
Чтобы наладить связь вашего интернет-магазина с площадкой Wildberries, зарегистрируйтесь на их сайте как партнер. Для этого на странице «Сотрудничество с Wildberries» введите контактные данные и создайте профиль компании.
Далее в созданном личном кабинете перейдите в настройки профиля. Это можно сделать в выпадающем меню профиля компании — в правом верхнем углу.
Заполните все необходимые данные о компании. После этого перейдите на вкладку «Доступ к API» и нажмите «Сгенерировать ключи», чтобы связать личный кабинет с интернет-магазином.
Генерация ключей API доступно только пользователям со статусом «Владелец».
Для корректной интеграции с решением выберите категории «Контент», «Маркетплейс» и «Цены и скидки». Нажмите кнопку «Создать токен».
Скопируйте ключ API и перейдите в административную часть вашего сайта. Проделайте следующий путь: Аспро (1) → Аспро: Премьер (2) → Интеграция с Marketplace (3) → Wildberries (4).
В поле «API Key» вставьте скопированный ключ (1) и укажите время хранения логов (2). Сохраните изменения.
После этого перейдите в Магазин (1) → Настройки (2) → Экспорт данных (3). Найдите поле с названием «Wildberries».
Чтобы перейти к параметрам экспорта товаров, нажмите напротив поля «Wildberries» на иконку «Гамбургер» и выберите «Экспортировать». На этом этапе каталог в решении уже должен быть заполнен вашей продукцией.
В настройках параметров экспорта доступны следующие настройки:
- Инфоблок для загрузки — выберите тип инфоблока и конкретный инфоблок, который необходимо загрузить на платформу.
- Группы товаров — укажите разделы выбранного инфоблока, которые нужно экспортировать.
- Сопоставление разделов и свойств — настройте связь разделов и свойств между вашим интернет-магазином и Wildberries. Подробно эту настройку рассмотрим далее в статье.
- Права доступа — вы можете включить проверку прав доступа к информационным блокам для всех пользователей. По умолчанию они не проверяются.
- Выгрузка только доступных товаров — выберите настройку, если хотите отображать в Wildberries только те товары, которые есть в наличии.
- Выгрузка цен — поставьте галку, если необходимо экспортировать товары сразу с их стоимостью на вашем сайте.
- Выгрузка остатков — выберите настройку, если хотите экспортировать остатки по складам вместе с товарами.
- Выгрузка картинок — активируйте опцию, если нужно экспортировать товары вместе изображениями.
- Доменное имя — выберите домен сайта, с которого необходимо выгрузить товары. Например, в режиме многосайтовости интернет-магазин может иметь несколько доменов.
Перед экспортом товаров важно настроить связь категорий и характеристик между вашим сайтом и Wildberries. Дело в том, что на маркетплейсе предусмотрены свои стандартные разделы и свойства с определенным списком возможных значений.
Чтобы задать такую связь, нажмите на кнопку «Настроить» напротив поля «Сопоставление разделов и свойств».
Перед переходом к настройке, отметим, что при первом экспорте товаров появится предупреждение об отсутствии свойств (скриншот ниже). В этом случае достаточно нажать на кнопку «Сохранить». Тогда свойства будут созданы и можно переходить к настройке сопоставлений.
Рассмотрим настройку сопоставлений на примере раздела товаров «Женские часы». Раскроем категорию «Аксессуары» и увидим три столбца — ID товара, разделы в каталоге вашего интернет-магазина и разделы Wildberries.
Найдите необходимый раздел. В нашем примере это «Женские часы» (1). Напротив него в столбце с разделами Wildberries введите слово «Часы». Высветятся варианты существующих категорий товаров на маркетплейсе.
Выберите подходящий раздел. В нашем примере вариант «Женские часы» отсутствует, поэтому мы выберем другой по смыслу раздел, например, «Наручные часы» (2).
Когда выбор сделан, вы можете посмотреть стандартные свойства Wildberries к этому разделу. Для этого напротив категории «Наручные часы» нажмите «Показать свойства» (3).
Теперь сопоставьте свойства раздела Wildberries со свойствами раздела на сайте. В появившейся таблице характеристик вы можете сразу отфильтровать список только по обязательным свойствам Wildberries (1). Они отмечены красной звездочкой (2) и должны быть корректно сопоставлены со свойствами разделов интернет-магазина, иначе товары не экспортируются.
Выберите соответствующие свойства вашего интернет-магазина в поле по центру (3). Если обязательные характеристики окажутся незаполненными, то раздел не экспортируется на Wildberries.
Если подходящего свойства на вашем сайте нет, укажите его значение вручную в поле справа (4). Обратите внимание, что для всех товаров выгружаемого раздела будет установлено это значение.
Отметим, что поле «WB: Штрих-код номенклатуры» автоматически заполняется в решении и должно быть уникальным. В ином случае, данные не экспортируются. Заполнять штрих-код вручную не рекомендуется.
Для корректного экспорта фото разрешение картинки должно быть не меньше 700x900, иначе изображение не выгрузится.
Когда все обязательные свойства для раздела «Женские часы» сопоставлены, можно задать связь для складов.
Перейдите на вкладку «Склады». В левом столбце представлены склады, настроенные в Аспро: Премьер (1), а в правом — склады, заданные в личном кабинете Wildberries (2).
Добавить склад в Wildberries можно в настройках профиля на вкладке «Данные продавца». Нажмите на кнопку «Добавить склад» и заполните форму.
Сопоставьте склады из вашего интернет-магазина и из Wildberries. Сохраните изменения.
Когда параметры экспорта заданы, и свойства сопоставлены, нажмите кнопку «Экспортировать».
Если в сопоставлении разделов и свойств возникли ошибки, экспорт не выполнится и выведется соответствующее сообщение. В нем будет указан путь к текстовому файлу со списком ошибок.
Перейдите по пути: Контент → Структура сайта → Файлы и папки → upload → mp-export-log. Найдите текстовый файл «wildberries_xx-xx-xxxx_xx:xx.txt». В его названии будет указана дата и время экспорта. Нажмите на «Гамбургер» напротив поля и выберите «Скачать файл».
Изучите файл. Зачастую в нем указано, какие товары имеют незаполненные свойства.
Если ваш сайт имеет кодировку UTF-8, вы можете просмотреть текстовый файл, не скачивая его. Для этого нажмите «Просмотр файла» или перейдите в его редактирование.
Ошибки также можно увидеть в списке товаров. Для этого в фильтре отобразите столбец «WB: Текст с ошибками».
Текст с ошибками также отображается в окне редактирования товара на вкладке «Wildberries».
Заполните необходимые свойства, перейдите в параметры выгрузки и нажмите «Экспортировать».
При экспорте товаров без ошибок выведется сообщение «Операция успешно завершена».
Но это еще не все. Вернитесь в параметры выгрузки и повторно нажмите «Экспортировать». Это необходимо для автоматического заполнения штрих-кодов и получения данных из маркетплейса.
При повторной выгрузке происходит синхронизация остатков товаров и изображений. Если шаг пропустить, то товары будут созданы без картинок и остатков.
Если после повторной выгрузки и прошествии 10-15 минут изображения/остатки появились не у всех товаров — запустите экспорт повторно, так как со стороны маркетплейса часть товаров может выпадать с очереди на загрузку или обрабатываться некорректно.
Чтобы посмотреть экспортированные товары на Wildberries, перейдите в кабинет партнеров на вкладку «Товары». Редактировать продукцию можно при двойном щелчке мыши.
Товары в Wildberries обновляются при повторном экспорте вручную. Например, если вы решили изменить цену на наручные часы, достаточно ввести новую стоимость в настройках решения и экспортировать данные в маркетплейс.
В Аспро: Премьер также доступно автоматическое обновление остатков и цен. Вы можете назначить интервал выполнения экспорта. Для этого перейдите в «Настройки экспорта», напротив профиля Wildberries нажмите на «Гамбургер» и выберите «Создать агента».
Появится небольшое окно, в котором можно установить интервал между обновлениями остатков и цен в часах.
При этом создается специальный агент (1). Чтобы удалить интервал, нажмите на «Гамбургер» напротив профиля и выберите «Удалить агента» (2).
назадИнтеграция с другими сервисами Интеграция с Ozon: как связать сайт с личным кабинетомвперед
Интеграция с Ozon: как связать сайт с личным кабинетом
В решении Аспро: Премьер доступна интеграция с маркетплейсом Ozon. Функционал подразумевает экспорт товаров с возможностью обновления остатков и цен. Размещайте продукцию на разных витринах и получайте максимальное количество заказов. Возможности будут расширяться по мере выхода обновлений. Продвигайте собственный бренд благодаря увеличению количества точек контакта с клиентом.
Функционал доступен только на следующих редакциях 1С-Битрикс:
- Малый бизнес.
- Бизнес.
- Интернет-магазин + CRM.
Для корректной работы функционала платформа 1С-Битрикс должна быть обновлена до версии 21 и выше.
Чтобы наладить связь вашего интернет-магазина с площадкой Ozon, зарегистрируйтесь на их сайте как партнер. Для этого на странице «Ozon Seller» выберите «Регистрация», введите контактные данные и создайте профиль компании.
Далее в созданном личном кабинете перейдите в настройки профиля. Это можно сделать в выпадающем меню профиля компании — в правом верхнем углу.
Заполните все необходимые данные о компании. После этого перейдите на вкладку «API ключи», скопируйте Client ID (1) и нажмите «Сгенерировать ключ» (2), чтобы связать личный кабинет с интернет-магазином.
Генерация ключей API и доступ к Client ID есть только у пользователей со статусом «Владелец».
При генерации ключа выберите в типах токена Description Category и Product. Нажмите «Сгенерировать».
Если хотите работать со складами, дополнительно поставьте галку у пункта Warehouse.
Скопируйте Client ID и ключ API, после чего перейдите в административную часть вашего сайта. Проделайте следующий путь: Аспро (1) → Аспро: Премьер (2) → Интеграция с Marketplace (3) → Ozon (4). В поле «API Key» вставьте скопированный ключ (5), а в поле ниже — Client ID (6). Затем задайте время хранения логов в днях (7) и сохраните изменения.
Теперь вы можете экспортировать товары с сайта на Ozon и из Ozon на сайт. Подробнее об этом читайте в следующих уроках.
Нужна помощь?
Поручите настройку интеграции нашим разработчикам — они учтут все нюансы работы маркетплейса, чтобы минимизировать сбои и ошибки. Узнайте больше об услуге или оставьте заявку.
Содержание главы:
назадИнтеграция с Wildberries Экспорт товаров с сайта на Ozonвперед
Экспорт товаров с сайта на Ozon
Когда связь с личным кабинетом настроена, вы можете выгружать товары с сайта на маркетплейс. Для этого перейдите в Магазин (1) → Настройки (2) → Экспорт данных (3). Найдите поле с названием «Ozon».
Чтобы перейти к параметрам экспорта товаров, нажмите напротив поля «Ozon» на иконку «Гамбургер» и выберите «Экспортировать». На этом этапе каталог в решении уже должен быть заполнен вашей продукцией.
Альтернативный способ перехода к экспорту товаров — добавить новый профиль Ozon. Для этого около кнопки «Добавить профиль» нажмите на стрелку и выберите вариант «Ozon».
Отметим, что разные профили могут использоваться для выгрузки различной информации о товарах. Например, в одном профиле экспортируются только цены, а в другом — технические характеристики и т. д.
В настройках параметров экспорта доступны следующие поля:
- Инфоблок для загрузки — выберите тип инфоблока и конкретный инфоблок, который необходимо загрузить на платформу.
- Группы товаров — укажите разделы выбранного инфоблока, которые нужно экспортировать.
- Сопоставление разделов и свойств — настройте связь разделов и свойств между вашим интернет-магазином и Ozon. Подробно эту настройку рассмотрим далее в статье.
- Выгружать информацию о товарах — при включенной опции будет происходить обновление всех товаров на Ozon. Если данные в Ozon менялись вручную, то после выгрузки товаров информация будет потеряна.
- Выгружать цены — поставьте галку, если выключена выгрузка информации о товарах. Отметим, что при включенной выгрузке информации цены тоже экспортируются. Для корректной выгрузки товары должны присутствовать на Ozon и иметь статус «Создан».
- При выгрузке цен учитывать скидки — включите параметр, если необходимо при экспорте товаров со стоимостью учитывать скидки.
- Выгружать остатки — выберите настройку, если хотите экспортировать остатки по складам вместе с товарами. Для корректной выгрузки товары должны присутствовать на Ozon и иметь статус «Создан».
- Имя профиля — если вы создаете новый профиль, присвойте ему название.
Перед экспортом товаров важно настроить связь категорий и характеристик между вашим сайтом и Ozon. Дело в том, что на маркетплейсе предусмотрены свои стандартные разделы и свойства с определенным списком возможных значений.
Чтобы задать такую связь, нажмите на кнопку «Настроить» напротив поля «Сопоставление разделов и свойств».
Рассмотрим настройку сопоставлений на примере раздела товаров «Женские часы». Раскроем категорию «Аксессуары» и увидим три столбца — ID товара, разделы в каталоге вашего интернет-магазина и разделы Ozon.
Найдите необходимый раздел. В нашем примере это «Женские часы» (1). Напротив него в столбце с разделами Ozon введите слово «Часы». Высветятся варианты существующих категорий товаров на маркетплейсе.
Выберите подходящий раздел. В нашем примере вариант «Женские часы» отсутствует, поэтому мы выберем другой по смыслу раздел, например, «Бижу часы наручные женские» (2).
Когда выбор сделан, вы можете посмотреть стандартные свойства Ozon к этому разделу. Для этого напротив категории «Бижу часы наручные женские» нажмите «Показать свойства» (3).
Теперь сопоставьте свойства раздела Ozon со свойствами раздела на сайте. В появившейся таблице характеристик вы можете сразу отфильтровать список только по обязательным свойствам Ozon (1). Они отмечены красной звездочкой (2) и должны быть корректно сопоставлены со свойствами разделов интернет-магазина, иначе товары не экспортируются.
Выберите соответствующие свойства вашего интернет-магазина в поле по центру (3). Если обязательные характеристики окажутся незаполненными, то товары не экспортируются в Ozon.
Если подходящего свойства на вашем сайте нет, укажите его значение вручную в поле справа (4). Обратите внимание на 2 момента:
— Для всех товаров выгружаемого раздела будет установлено это значение.
— Значение выставляется только для свойств типа строка. Определить их можно по неактивным кнопкам «+» и «?». Остальным придется задать соответствующее значение на сайте.
В решении имеется возможность экспортировать товары с торговыми предложениями на маркетплейс Ozon. Для этого вы можете настроить сопоставления со свойствами торговых предложений SKU в каталоге вашего сайта (5). Если поле со свойством торгового предложения оставить пустым, привяжется характеристика из товара. А если заполнить поле с торговыми предложениями SKU, то значение при выгрузке заменится на то, что указано в торговом предложении. Тогда в некоторых случаях можно сделать наоборот — заполнить свойство только у торговых предложений SKU, а у товара не указывать.
На Ozon есть свойства, для которых необходимо настроить соответствие значений. Это нужно, чтобы разные форматы заполнения значений не дублировались на платформе. Например, значение цвета «желтый» можно написать 4 способами (Желтый, желтый, Жёлтый, жёлтый) и т. д.
Если справа от свойства каталога активны кнопки «+» и «?», то для такого свойства нужно задавать соответствие значений. При этом настройка доступна, только если свойство на сайте имеет тип «Список» или связь с элементами (например, брендами). Отметим, что в решении есть поддержка Highload-блоков для удобного сопоставления значений свойств.
Кнопка «?» — запустит загрузку всех значений этого свойства с Ozon для их синхронизации.
Кнопка «+» — используется для настройки соответствия значений свойств. При первой настройке будут загружены значения из маркетплейса, а при дальнейшей — значения уже не будут выгружаться.
При первой настройке клик на любую из кнопок запустит синхронизацию. Чтобы она закончилась, окно не нужно закрывать. Через некоторое время откроется список для настройки соответствия.
В открывшейся настройке слева укажите значения свойства в Ozon, а справа — значения свойства в каталоге вашего интернет-магазина. Сохраните изменения.
В настройках свойства «Тип» имеются множественные значения для распределения товара по категориям в Ozon.
Как выгрузить торговые предложения товаров
У торговых предложений должен быть разный артикул, иначе произойдет объединение элементов. Отметьте «Артикул» в свойствах торговых предложений SKU (1).
Свойство «Бренд» должно быть одинаковым как у товара, так и у торговых предложений SKU. Для этого оставьте свойство только у товара (2).
Сопоставьте значения свойства с названием. У свойства товара — это «Название» (3). А у свойства торгового предложения — «Название основного товара» (4).
Также в решении есть поддержка Highload-блоков в свойствах для торговых предложений. Рассмотрим функционал на примере свойства «Цвет». Вы можете удобно сопоставить значения на вашем сайте со значениями в Ozon.
Связь для складов
Когда все обязательные свойства для раздела «Женские часы» сопоставлены, можно задать связь для складов.
Перейдите на вкладку «Склады». В левом столбце представлены склады, настроенные в Аспро: Премьер (1), а в правом — склады, заданные в личном кабинете Ozon (2).
Добавить склад в Ozon можно в разделе «Мои склады». Нажмите на кнопку «Создать склад» и заполните форму.
Сопоставьте склады из вашего интернет-магазина и из Ozon. Сохраните изменения.
Дополнительные настройки
На вкладке «Дополнительно» вы можете:
- отдельно указать API Key (1) и Client ID (2) или выбрать из настроек решения. Указание этих значений непосредственно в профиле нужно, чтобы на одном сайте иметь профили обмена с разными личными кабинетами Ozon. Как мы указывали ранее, разные профили могут использоваться для выгрузки различной информации о товарах.
- проверить лимиты API (3). Во всплывающем окне при клике на кнопку вы узнаете, сколько товаров за текущие сутки уже создано/обновлено в Ozon, и какое максимальное количество товаров в день можно создать/обновить.
- настроить фильтр выгружаемых товаров (4). Задайте условие, при котором товары будут экспортироваться в Ozon. Например, выгружать только акционные товары или продукцию, которой не хватает на складке и т. д.
Когда параметры экспорта заданы, и свойства сопоставлены, нажмите кнопку «Экспортировать».
Ошибки при экспорте
Если в сопоставлении разделов и свойств возникли ошибки, экспорт не выполнится и выведется соответствующее сообщение. В нем будет указан путь к текстовому файлу со списком ошибок.
Перейдите по пути: Контент → Структура сайта → Файлы и папки → upload → mp-export-log. Найдите текстовый файл «ozon_xx-xx-xxxx.txt» (как указано в ошибке). В его названии будет указана дата и время экспорта. Нажмите на «Гамбургер» напротив поля и выберите «Скачать файл».
Изучите файл. Зачастую в нем указано, какие товары имеют незаполненные свойства.
Если ваш сайт имеет кодировку UTF-8, вы можете просмотреть текстовый файл, не скачивая его. Для этого нажмите «Просмотр файла» или перейдите в его редактирование.
Заполните необходимые свойства, перейдите в параметры выгрузки и нажмите «Экспортировать».
При экспорте товаров без ошибок выведется сообщение «Операция успешно завершена».
Если за последние 24 часа с выгрузкой товаров уже были ошибки, то даже при успешном экспорте выведется ссылка на логи. В таком случае советуем проверять раздел «Товары» в личном кабинете Ozon.
Чтобы посмотреть экспортированные товары в Ozon, перейдите в кабинет партнеров на вкладку «Товары». Редактировать продукцию можно при двойном щелчке мыши.
Товары в Ozon обновляются при повторном экспорте вручную. Например, если вы решили изменить цену на наручные часы, достаточно ввести новую стоимость в настройках решения и экспортировать данные в маркетплейс.
Создание агента для автоматического обновления
В Аспро: Премьер также доступно автоматическое обновление остатков и цен. Вы можете назначить интервал выполнения экспорта. Для этого перейдите в «Настройки экспорта», напротив профиля Ozon нажмите на «Гамбургер» и выберите «Создать агента».
Появится небольшое окно, в котором можно установить интервал между обновлениями остатков и цен в часах.
При этом создается специальный агент (1). Чтобы удалить интервал, нажмите на «Гамбургер» напротив профиля и выберите «Удалить агента» (2).
Создание пользовательский событий для экспорта товаров
В решении доступно создание пользовательских событий. Благодаря этому вы можете экспортировать товары в Ozon с другим названием, картинками, свойствами и т. д.
Информация о создании пользовательского события носит рекомендательный характер и предназначена для программистов, владеющих навыками разработки на 1С-Битрикс. Мы не оказываем консультации по разработке и не несем ответственности за последствия изменения кода шаблона. Инструкция подразумевает, что вы сможете выполнить работу с кодом самостоятельно.
- onAfterBuildItem — событие для изменения товара при экспорте. Передаваемые параметры для события: array(&$item, $element).
- onAfterAddItemForUpdateStore — событие для изменения остатков товара. Передаваемые параметры для события: array(&$arPrice, $element).
- onAfterAddItemForUpdatePrice — событие для изменения цены товара. Передаваемые параметры для события: array(&$arStores, $element).
назадИнтеграция с Ozon: как связать сайт с личным кабинетом Экспорт товаров из Ozon на сайтвперед
Экспорт товаров из Ozon на сайт
Активные продавцы на маркетплейсе могут значительно упростить процесс наполнения каталога на своем интернет-магазине. Перенести продукцию между двумя каналами продаж больше не составляет труда. В решении Аспро: Премьер можно выгрузить товары из Ozon на сайт.
В предыдущих уроках мы показывали, как связать сайт с личным кабинетом Ozon и настроить экспорт с сайта на платформу. Сейчас рассмотрим обратную интеграцию: из маркетплейса на сайт.
Если товар на Ozon находится в архиве, то на сайт он не выгрузится.
Чтобы настроить выгрузку из Ozon на сайт, перейдите в Магазин (1) → Настройки (2) → Экспорт данных (3).
Слева от поля «Добавить профиль» нажмите на стрелку и выберите вариант «Export from Ozon».
В настройках параметров экспорта:
- выберите тип инфоблока и конкретный инфоблок, в который будут выгружаться товары.
- При нажатии на кнопку «Получить» структура разделов и товары загружаются в служебную таблицу. Открывается попап-окно с результатами загрузки, но новых товаров на сайте еще не появляется.
- Кнопка «Актуализировать» сбрасывает все данные из служебных таблиц и выполняет процедуру по новой.
- Кнопка «Настроить» проверит наличие служебных свойств и при необходимости создаст их. К таким свойствам относятся: «Артикул», «Галерея», «Бренд», «ID товара при продаже со склада Ozon (FBO)», «ID товара при продаже со своего склада (FBS)». При клике на кнопку появится окно с отчетом.
- Выберите тип цены, который будет заполнен у выгружаемых товаров. На Ozon возьмется актуальная цена, по которой можно приобрести товар.
- Укажите название профиля.
На вкладке «Дополнительно» доступны отдельные поля для указания API Key и Client ID. Если их не заполнить, возьмутся значения из настроек решения. Указание значений в профиле нужно, чтобы на одном сайте иметь профили обмена с разными личными кабинетами Ozon. Но если у вас только один личный кабинет, пропускайте эти параметры.
Когда все параметры профиля настроены, сохраните изменения.
Затем напротив созданного профиля нажмите на «Гамбургер» и выберите «Экспортировать».
Тогда появится счетчик обновленных разделов, а товары загрузятся на сайт.
Торговые предложения из Ozon по техническим причинам экспортируются в интернет-магазин только как отдельные товары.
Наличие у каждого выгруженного товара записывается в параметр «Доступное количество». При этом деление по складам отсутствует.
Товары из Ozon в статусе «Не продаются» будут выгружены на сайт деактивированными и без свойств FBS и FBO.
Если вы продаете товары на маркетплейсе, но отсутствует собственная логистика, вы можете перевести сайт в режим витрины. Подробнее об этом читайте в статье.
назадЭкспорт товаров с сайта на Ozon Подключение режима витринывперед
Подключение режима витрины
Даже если у вас нет собственной логистики, не стоит отказываться от собственного интернет-магазина. Ведь вы можете использовать сайт как витрину, привлекать на него клиентов, развивать бренд, использовать маркетинговые инструменты и влиять на конверсию. Для этого в Аспро: Премьер есть режим витрины, который отключает возможность покупки товаров на сайте.
Все кнопки заказа в каталоге меняются на кнопки для перехода в карточку продукции на Ozon. Функционал позволит сохранить все преимущества наличия интернет-магазина, но быстро перенесет всех покупателей на маркетплейс.
Активация сайта-витрины доступна только на редакциях интернет-магазина: «Малый Бизнес», «Бизнес» и «Интернет-магазин + CRM».
Режим витрины активируется при установке решения или из настроек в административной части сайта. В первом случае стандартный демоконтент каталога не будет загружен.
Чтобы подключить режим витрины из настроек решения, перейдите в Аспро (1) → Аспро: Премьер (2) → Настройки (3) → Каталог (4).
Поставьте галку в поле «Режим витрины» (1). После этого ниже появится поле для указания нового названия кнопки заказа (2). Примените изменения.
Ссылка на товар в Ozon будет доступна только при детальном и быстром просмотре. А в списке товаров будет отображаться кнопка «Подробнее».
Как выглядит кнопка в карточке товара. При нажатии на нее клиент перейдет на страницу Ozon.
Также в режиме витрины скрывается отображение наличия товара на сайте.
Чтобы ссылка с кнопки заказа на карточку Ozon работала корректно, должно быть заполнено значение в служебном свойстве «ID товара при продаже со своего склада (FBS)». При выгрузке продукции с Ozon на сайт это поле заполняется автоматически, если товар доступен к покупке.
Если продукция не экспортировалась или появился новый товар на сайте, достаточно будет создать и заполнить это поле вручную.
Чтобы создать такое свойство, перейдите в Контент → Инфоблоки → Типы инфоблоков → Каталог (aspro.premier) → Каталог товаров → Свойства. Затем добавьте поле с названием «ID товара при продаже со своего склада (FBS)», типом «Строка» и символьным кодом «OZON_FBS». Сохраните изменения.
Тогда свойство появится в настройках товара и останется только заполнить его.
назадЭкспорт товаров из Ozon на сайт Аналитика заказоввперед
Аналитика заказов
Следите за статистикой заказов в 1 клик! Решение автоматически формирует данные по продажам: от выручки до общего числа покупок в интернет-магазине. Вся информация отображается в единой панели и находится в быстром доступе как с десктопных, так и мобильных устройств. Вы получите прозрачную аналитику и избавитесь от составления сводных таблиц.
В этой главе рассмотрим настройку аналитики заказов в решении Аспро: Премьер.
Содержание главы:
назадПодключение режима витрины Рабочий столвперед
Рабочий стол
Для настройки аналитики проделайте путь: Аспро (1) → Аспро: Аналитика заказов (2) → Рабочий стол (3).
Вы попадете на рабочий стол, который содержит предустановленные гаджеты. У них можно менять размер и цвет, перемещать с помощью мыши, а также условия для вывода данных.
С версии 1.0.1 в аналитике заказов разделили настройки для мобильной и десктопной версий. Теперь для каждого типа устройств можно создавать свои отдельные виджеты, менять вид отображения, фильтры и прочее. Если нужно сделать одинаковый набор виджетов, то достаточно настроить рабочее пространство на десктопе, а на мобильной версии — сбросить текущие настройки.
Чтобы создать новый виджет, нажмите кнопку «Добавить виджет». В выпадающем списке выберите необходимый вариант, откуда будут браться данные.
Например, «Магазин» покажет статистику в виде таблицы. Вы можете Настроить гаджет или удалить его через кнопки в правом верхнем углу.
В настройках можно присвоить «Название» (1) виджету. Выбрать конкретный сайт при включенной многосайтовости (2). Отобрать заказы по статусу (3) и количество заказов для отображения (4).
«Заказы» выведут цифры по условию.
При наведении курсора на пространство виджета вы можете настроить (1) или удалить (2) его.
В настройках гаджета можно указать название (1) и выбрать цвет (2). Выберите вид отображения (3): «Количество» покажет сколько всего было заказов, а «Стоимость» их денежную сумму. Чтобы настроить гаджет для показа статистики, добавьте «Дополнительные условия для поиска» (4) и выберите свойства для точной настройки критериев аналитики. Благодаря гаджетам можно удобно работать со свойствами из раздела «Заказы».
С версии модуля 1.0.1 в решении появились 5 новых виджетов для анализа заказов на разных этапах:
- количество брошенных корзин;
- конверсия нового заказа в оплату;
- конверсия нового заказа в отмену;
- конверсия оплаты в доставку;
- средний чек.
Чтобы получить доступ к аналитике по среднему чеку, добавьте виджет «Общее число заказов».
Нажмите кнопку настройки на новом виджете.
В выпадающем списке «Вид отображения» выберите «Средний чек». После этого у вас появится данные о соотношении выручки с продаж к заказам.
назадАналитика заказов Веб-приложение. Доступ к аналитике с телефонавперед
Веб-приложение. Доступ к аналитике с телефона
Для быстрого доступа к рабочему столу с гаджетами вы можете создать веб-приложение. Проделайте путь: Аспро (1) → Аспро: Аналитика заказов (2) → Веб-приложение (3).
Подключите манифест для сайта (1), чтобы активировать возможность работы с веб-приложением (PWA) и настройте внешний вид.
Для десктопов
Теперь нужно создать веб-приложение в браузере. Мы разберем пример Google Chrome. Зайдите на страницу рабочего стола аналитики заказов. Нажмите на кнопку настроек «Три точки» (1) → Сохранить и поделиться (2) → Создать ярлык (3).
Во всплывающем окне нажмите кнопку «Создать».
Ярлык появится на рабочем столе десктопа с заданными настройками внешнего вида. Перенесите ярлык мышью на панель задач, чтобы всегда иметь быстрый доступ к аналитике.
Для Android
Чтобы создать веб-приложение на мобильных устройствах Android в браузере Google Chrome, нажмите на кнопку «Три точки».
Выберите «Добавить на главный экран».
Нажмите кнопку «Добавить».
Ярлык появится на рабочем столе. Кликните на него, чтобы сразу попасть в аналитику заказов.
Для IOS
Для устройств на IOS мы разберемся, как добавить веб-приложение через браузер Safari.
Нажмите кнопку «Поделиться».
Выберите «На экран «Домой»».
Нажмите кнопку «Добавить».
Ярлык появится на рабочем столе. Кликните на него, чтобы сразу попасть в аналитику заказов.
назадРабочий стол Права доступавперед
Права доступа
Проделайте путь: Аспро (1) → Аспро: Аналитика заказов (2) → Права доступа (3).
Здесь вы можете выбрать, каким группам пользователей предоставить или ограничить доступ к просмотру статистики.
назадВеб-приложение. Доступ к аналитике с телефона Обновлениявперед
Обновления
Перейдите в Аспро → Аспро: Аналитика заказов → Обновления.
Здесь вы можете узнать состав обновления (1) и установить обновление (2) модуля.
назадПрава доступа Для веб-разработчиковвперед
Для веб-разработчиков
Решение Аспро: Премьер создан на современной технологической платформе. Продукт имеет принципиально новую архитектуру, с которой по-настоящему удобно работать. В специальном разделе есть библиотеки кнопок, иконок и элементов для оформления.
В этой главе мы расскажем об этих преимуществах, а также о том, как легко и просто изменять основные элементы сайта.
Информация, представленная в этой главе, носит рекомендательный характер и предназначена для программистов, владеющих навыками разработки на 1С-Битрикс. Мы не оказываем консультации по разработке и не несем ответственности за последствия изменения кода шаблона. Инструкция подразумевает, что вы сможете выполнить работу с кодом самостоятельно.
Мы настоятельно рекомендуем придерживаться наших рекомендаций. Ошибки, возникшие из-за некорректных действий, устраняются платно.
Если вы не разработчик и хотите доработать решение под ваш проект. Например, изменить внешний вид блоков, разделов, элементов или добавить новый функционал, пожалуйста, свяжитесь с нами.
Содержание главы:
назадОбновления Графические материалывперед
Графические материалы
В поставку решений Аспро включены библиотеки иконок, кнопок и других элементов интерфейса, которые помогут сделать сайт на основе готового решения еще красивее и уникальнее.
В разделе «Оформление» показаны варианты отображения текста с использованием заголовков различных уровней для разбиения информации на блоки меньшего размера, что упрощает ее восприятие, и позволяет отделить смысловые блоки друг от друга.
Для того, чтобы визуально выделить перечисление, например, преимуществ сотрудничества, вы можете задействовать один из вариантов представления списков: нумерованный/ненумерованный, иерархический/линейный или с детальным описанием. Также при создании списка в качестве маркера доступно использование пиктограмм, которые включены в библиотеку.
Для приверженцев интересной подачи материала приведен пример оформления цитат и буквиц, гармонирующий с общей стилистикой решения.
Цитата — это ключ, основная идея статьи, поэтому она должна особым образом выделяться на общем фоне и «цеплять» даже беглый взгляд посетителя.
Использование буквицы как художественного приема оформления текста делает его более приятным для чтения и украшает страницу, которая не изобилует другими яркими деталями.
В библиотеке присутствуют средства визуального оформления кода. Выражения из кода в тексте выделяются использованием другого цвета для него самого и его заднего фона, а строки кода для удобства помещаются в специальные блоки, чтобы ни один символ не потерялся в тексте описания.
В этом же разделе вы можете ознакомиться со стилями оформления таблиц, которые удобно использовать для представления структурированной информации (к примеру, отображения реквизитов компании).
Если вам необходимо выделить какой-либо элемент текста, вы можете установить возле него «визуальный якорь» в виде одной из пиктограмм, что в огромном множестве перечислены в разделе «Иконки». Например, к электронному адресу тех. поддержки с меткой легко будет вернуться в подробной инструкции по настройке программного продукта в случае, если инструкция не помогла и на одном из этапов возникли непредвиденные затруднения.
Также в этом разделе вы можете выбрать один из вариантов цветовой схемы, доступный для иконок большего размера.
Раздел «Кнопки» отображает варианты активных и неактивных кнопок, отличающихся размерами и расцветкой, чье поведение также различно при наведении на них указателя.
Раздел «Элементы» содержит примеры внешнего вида ярлыков (Labels) – иконок, содержащих исчерпывающую информацию, например, об участии предложения в действующей акции или отношение товара к хитам продаж.
Здесь же вы можете ознакомиться с отображением всплывающей подсказки, призванной при наведении указателя раскрыть посетителю значения используемых в статье терминов или внести некоторые уточнения.
Пример внутренних вкладок, используемых для улучшения организации предоставляемых пользователю сведений, демонстрирует оформление активных и неактивных вкладок, и поведение страницы при переключении с одной вкладки на другую.
Помимо прочего в этом разделе показаны способы представления аккордеона и его поведения при разворачивании скрытого по умолчанию варианта/полного списка. Функциональной особенностью этого элемента является возможность выбора посетителем какую информацию необходимо раскрыть более подробно, а какая представляется ему излишней.
Один из вариантов аккордеона используется на странице «Вакансии» в решении Аспро: Digital-компания при выборе соответствующей темы оформления раздела.
Ниже расположены примеры оформления предупреждений, шкалы прогресса, формы обратной связи.
Размеры навигационной панели по страницам раздела представлены в 3х вариантах.
Присутствуют дополнительные средства визуального оформления текстовых блоков.
Также в поставку включены элементы для работы с изображениями – Carousel, Fancybox и рамки для миниатюрных изображений.
Содержание главы:
назадДля веб-разработчиков Использование библиотеки UI-элементоввперед
Использование библиотеки UI-элементов
В этой статье мы расскажем и покажем наглядно, как можно использовать UI элементы из библиотеки, включенной в поставку решения, а также как пользоваться возможностями верстки, вставлять иконки, кнопки и элементы оформления на сайт.
Для успешной работы с html-кодом понадобятся хотя бы минимальные знания тегов и принципов записи. Если возникают сомнения или нужно попрактиковаться, вы можете смело экспериментировать с версткой на тестовой странице. Изменение html-кода может испортить верстку отдельной страницы, но не сломает весь сайт.
Представленные на демо-сайте UI элементы являются html-кодом, который вы можете скопировать и вставить в нужное место на странице сайта. В качестве примера добавим на сайт элемент и заголовки разного размера.
Перейдите на нужную страницу сайта, где вы хотите разместить элементы, активируйте режим правки и откройте страницу для редактирования. Переключитесь на совмещенный режим отображения, чтобы было видно одновременно и html-код, и внешний вид содержимого.
Откройте на вашем сайте раздел с библиотекой UI-элементов, перейдите на страницу с нужным содержимым, войдите в режим редактирования и также переключитесь в нем на совмещенный режим отображения.
Скопируйте код интересующих вас элементов и вставьте на странице своего сайта.
В нашем примере скопирован код заголовка и код раскрывающегося списка. Вы можете вносить изменения в код – например, убрать тестовый текст под заголовком или поменять названия секций и текст в них.
После сохранения изменений на странице отображаются нужные элементы:
Подключение библиотеки на Аспро: Премьер
Для десктопной версии Аспро: Премьер вставьте следующий код: \Aspro\Premier\Functions\Extensions::init( БИБЛИОТЕКА);
А для мобильной версии: \Aspro\Premier\Functions\ExtensionsMobile::init(БИБЛИОТЕКА);
Чтобы найти все доступные библиотеки, перейдите в административную часть сайта. Выберите Контент (1) → Структура сайта (2) → Файлы и папки (3). Вставьте следующий путь в поле:
— для десктопной версии: /bitrix/modules/aspro.premier/lib/functions/Extensions.php
— для мобильной версии: /bitrix/modules/aspro.premier/lib/functions/ExtensionsMobile.php
Доступные библиотеки находятся в массиве $arConfig.
назадГрафические материалы Отключение ikSelectвперед
Отключение ikSelect
Плагин ikSelect нужен для стилизации выпадающих списков. Например, на странице контактов:
Но иногда плагин может конфликтовать со сторонними модулями. Поэтому мы добавили возможноcть отключить ikSelect. Без плагина список выглядит так:
Чтобы деактивировать плагин на отдельной странице, нужно добавить код. Рассмотрим на примере страницы контактов. В административной части проделайте путь Контент (1) → Структура сайта (2) → Файлы и папки (3) → contacts (4). В этой папке откройте файл index.php (5).
В него нужно добавить код:
Сохраните изменения. Если на странице несколько селектов, то для отключения какого-то конкретного нужно написать:
Если вы хотите отключить ikSelect на всем сайте, этот же код нужно добавить в файл header.php. Чтобы его открыть, в административной части сайта проделайте путь Контент → Структура сайта → Файлы и папки → bitrix → templates → aspro_max. Добавьте код и сохраните изменения.
назадИспользование библиотеки UI-элементов Модификация кода решенийвперед
Модификация кода решений
В этой главе мы опишем общие принципы кастомизации решений. Готовые сайты созданы на новой технологической платформе и открывают новые возможности для доработки и развития функционала.
Модифицируйте элементы сайта быстро и без лишних трат благодаря улучшенной архитектуре.
Информация, представленная в этой главе, носит рекомендательный характер и предназначена для программистов, владеющих навыками разработки на 1С-Битрикс. Мы не оказываем консультации по разработке и не несем ответственности за последствия изменения кода шаблона. Инструкция подразумевает, что вы сможете выполнить работу с кодом самостоятельно.
Мы настоятельно рекомендуем придерживаться наших рекомендаций. Ошибки, возникшие из-за некорректных действий, устраняются платно.
Если вы не разработчик и хотите доработать решение под ваш проект – например, изменить внешний вид блоков, разделов, элементов или добавить новый функционал, пожалуйста, свяжитесь с нами.
Содержание главы:
назадОтключение ikSelect Общие рекомендациивперед
Общие рекомендации
Для модификации предусмотрены отдельные файлы, которые вы можете редактировать по своему усмотрению и затем подключать как свои шаблоны. Внесенные изменения не будут затираться при обновлениях решения – больше никаких конфликтов функционала!
Внимание! При установке шаблона в режиме многосайтовости новые custom файлы затрут ваши файлы. Чтобы не сталкиваться с этой ситуацией, необходимо переименовать ваши custom файлы и провести установку. Тогда новые файлы не будут их затирать. Затем необходимо переименовать ваши файлы обратно.
Алгоритм:
- Подключите шаблон с пометкой custom в настройках модуля решения или настройках компонента.
- На соответствующей странице выведется подсказка — путь к файлу, в который необходимо вносить изменения.
- Внесите изменения в указанный файл. Для удобства можно использовать код существующих шаблонов.
По этому алгоритму вы можете легко и быстро редактировать код практически любых элементов сайта – от шапки до детальной страницы блога или товара, включая карточку быстрого просмотра. При этом у вас сохранится возможность обновлять платформу и решение, пользоваться услугами стандартной бесплатной поддержки от Аспро.
По описанному алгоритму, без потери обновлений и поддержки, модифицируются составляющие части комплексных компонентов.
Например, вы можете редактировать код шаблона детальной страницы или списка, но не можете сделать это для комплексных компонентов «Каталог» и «Новости». Если вам необходимо изменить шаблоны комплексных компонентов, мы рекомендуем проводить работы на копии шаблона и после каждого обновления вручную синхронизировать файлы. В этом случае решение снимается со стандартной поддержки.
Также мы рекомендуем по возможности воздержаться от кастомизации следующих шаблонов:
- корзина
- оформление заказа
- персональный раздел покупателя D7.
Для этих элементов в наших решениях используются стандартные шаблоны от 1С-Битрикс, которые регулярно обновляются. Их изменение подразумевает, что после каждого обновления платформы вам либо придется вручную синхронизировать файлы, либо отказаться от обновлений.
назадМодификация кода решений Подключение шаблонов customвперед
Подключение шаблонов custom
В Аспро: Премьер вы можете подключить шаблоны элементов для модификации. Эта возможность актуальна для тех, кто хочет изменить внешний вид разделов или блоков на сайте.
Алгоритм действий для подключения и настройки шаблона для кастомизации:
- Перейти в структуру сайта для создания нового шаблона.
-
Хедер:
-
/bitrix/templates/aspro_premier/page_blocks/header
-
Футер:
/bitrix/templates/aspro_premier/page_blocks/footer -
Фиксированная шапка, мобильная шапка, левый блок, навигационная цепочка:
/bitrix/templates/aspro_premier/page_blocks -
Каталог, детальная страница:
/bitrix/templates/aspro_premier/components/bitrix/catalog/main/page_blocks. Такой же путь для списка элементов, разделов, быстрого просмотра, шаблона списка посадочных страниц. -
Главная страница — корневая папка сайта:
/ -
Контакты:
/contacts -
Корзина:
/bitrix/components/aspro/basket.file.premier/templates/ -
Создать новый шаблон или скопировать старый. Название должно быть типа «element_custom.php».
-
Внести изменения в шаблон.
-
Для каталога нужно создать новую папку по следующему пути:
- Для детальной страницы:
/bitrix/templates/aspro_premier/components/bitrix/catalog.element - Для списка разделов:
/bitrix/templates/aspro_premier/components/bitrix/catalog.section.list - В папке создать файл template.php. В этом файле — разместить кастомизированный шаблон.
- Для детальной страницы:
-
Подключить в модуле настроек новый шаблон.
Таким способом вы можете подключить шаблоны для модификации следующих элементов:
-
Корзина
-
Боковое меню
-
Тип поиска
-
Оформление заголовка и хлебных крошек
-
Тип главной страницы
-
Фиксированная шапка
-
Варианты шапок
-
Использовать быстрый просмотр товаров
-
Детальная страница каталога
-
Контакты
-
Блог
-
Проекты
-
Новости
-
Компания \ Наши сотрудники
-
Компания \ Бренды
-
Компания \ Бренды - детальная
-
Компания \ Вакансии
-
Компания \ Лицензии
-
Футер
-
Мобильная шапка
-
Тип мобильного меню.
Разберем на примере подключения кастомизированного футера. Для создания нового файла в административной части сайта перейдем в Контент → Структура сайта → Файлы и папки. Затем проделаем путь: /bitrix/templates/aspro_premier/page_blocks/footer. Скопируем один из элементов. Для этого в строке с названием файла кликнем на «Гамбургер», затем на «Копировать…».
В появившемся окне укажем тот же путь. А в дополнительных настройках выберем поле «Переименовать автоматически», чтобы не возникло проблем.
В строке с названием добавленного файла кликнем на «Гамбургер», затем на «Переименовать.».
Название должно принять вид «footer_custom.php».
Чтобы внести изменения в шаблон, кликнем на «Гамбургер», затем на «Редактировать как php».
Внесите изменения в код и сохраните.
Теперь перейдем в настройки модуля, чтобы подключить новый шаблон. Проделаем путь: Аспро (1) → Аспро: Премьер (2) → Настройки (3) → Футер (4). Перейдем в настройки футера.
Выберите свой вариант и сохраните изменения.
Если созданный шаблон не отображается в модуле настроек решения, перейдите в публичную часть. Наведите на область страницы или элемента в режиме правки, и кликните на шестеренку.
В параметрах компонента подключите шаблон в поле «Шаблон страницы блока списка элементов». Сохраните изменения.
Кастомизация списка элементов
Теперь разберем кастомизацию списка элементов. В начале заходим в /bitrix/templates/aspro_premier/components/bitrix/catalog/main/page_blocks. Нажимаем на «Гамбургер» рядом с фалом list_elements_1.php и копируем его.
В появившемся окне указываем путь: /bitrix/templates/aspro_premier/components/bitrix/catalog/main/page_blocks. А в дополнительных настройках выберем поле «Переименовать автоматически», чтобы не возникло проблем.
В строке с названием скопированного файла нажимаем на «Гамбургер» и меняем имя на: list_elements_1_custom.php.
Чтобы внести изменения в шаблон, кликнем на «Гамбургер», затем на «Редактировать как php».
Ищем строку «$template» и добавляем к ней код, чтобы получилось «$template.”_custom”,». Сохраняем изменения.
Теперь заходим по пути:
/bitrix/templates/aspro_premier/components/bitrix/catalog.section. Копируем любой шаблон.
Переименовываем шаблон, например, было «catalog_block» стало «catalog_block_custom»
Заходим в «Каталог» и включаем режим правки. Наводим курсор на страницу каталога и жмем на шестеренку.
Выбираем кастомный шаблон в поле «Шаблон страницы блока списка». Сохраняем изменения.
назадОбщие рекомендации Кастомизация цены, кнопок «Купить» и «Наличие»вперед
Кастомизация цены, кнопок «Купить» и «Наличие»
В решении Аспро: Премьер вы можете модифицировать вывод цены, кнопку «Купить» и метку «В наличии» при помощи специальных событий. При этом изменения не будут затираться при обновлении решения.
Названия событий вы можете найти в файле include.php.
Адрес файла для решения Аспро: Премьер:
Рабочий стол → Контент → Структура сайта → Файлы и папки → bitrix → modules → aspro.premier → include.php
В структуре сайта также предусмотрен специальный файл для вашего кода, в котором вы сможете работать с обработчиками из файла.
Путь к файлу для Аспро: Премьер
\bitrix\modules\aspro.premier\lib\functions\CAsproPremierCustom.php
назадПодключение шаблонов custom Поддержка PWAвперед
Поддержка PWA
Прогрессивное веб-приложение (PWA) — технология веб-разработки для управления сайтом через приложение на мобильных устройствах:
- Устанавливается на смартфоны и планшеты.
- Доставляет push-уведомления.
Для того, чтобы добавить сайт как веб-приложение, пользователь должен открыть сайт в браузере на мобильном устройстве. Затем перейти в настройки для страницы.
Затем нужно кликнуть поле «Добавить на главный экран».
Затем пользователь может изменить название приложения и добавить на главный экран.
Приложение на главном экране.
Для реализации PWA сайт должен соответствовать требованиям:
- Доступ по протоколу https.
- Адаптивность.
- Отдельный URL для каждой страницы.
Чтобы перейти в настройки приложения, в административной части сайта перейдите в Аспро (1) → Аспро: Премьер (2) → Веб-приложение (3).
- Активируйте технологию (1) ;
- По умолчанию создается файл с названием «manifest.json». Если такой файл у вас уже где-то используется, измените название в этом поле (2) ;
- Название предлагается по умолчанию при добавлении на рабочий стол (3) ;
- Сокращенное название — короткое удобочитаемое имя приложения. Предназначено для использования там, где недостаточно места для отображения полного имени приложения (4) ;
- Укажите начальную страницу приложения, по умолчанию задана главная страница сайта. При запуске приложения будет открываться указанная страница, а не та страница, которую добавляли на рабочий стол (5) ;
- Выберите режим отображения приложения (6) :
browser — приложение открывается в обычной вкладке браузера или новом окне в зависимости от браузера и платформы.
standalone — приложение будет выглядеть и ощущаться, как отдельное приложение.
fullscreen — используется все доступное пространство экрана.
Для того чтобы изменился режим отображения, необходимо переустановить приложение.
- Измените цвет фона (7) и темы (8) при необходимости. Функция актуальна только для Android;
- По умолчанию на мобильных устройствах будет подгружаться фавиконка для обозначения приложения. Также вы можете загрузить иконку в различных размерах (9). Операционная система сама будет подбирать оптимальный размер под конкретное мобильное устройство.
Сохраните изменения. После сохранения настроек будет создан файл манифеста в корне сайта. Если поле «Подключать манифест для сайта» активно, то в теге сайта будет прописана ссылка на файл.
назадКастомизация цены, кнопок «Купить» и «Наличие»
Полная версия курса: Аспро: Премьер в базе знаний Аспро. Вопросы по внедрению, настройке или обновлению решения — свяжитесь со мной.
Работаю удалённо — цены и условия для вашего города: