Блок маркетплейсов на OpenCart 3 (1 вариант)

Всем привет, очень часто товары вашего интернет магазина представлены на различных торговых площадках (Wildberries, Ozon, Яндекс Маркет), в этой статье я покажу вам как вывести на домашнюю страницу CMS OpenCart 3.0. блок ссылок на маркетплейсы, без использования фирменных логотипов (просто текст и css стили).

1. Открываем админку вашего магазина и переходим: Модули/Расширения > Модули/Расширения > Текстовый блок — HTML > Добавить и заполняем:

Название: Мы на маркетплейсах

Статус: Включено

Текстовый редактор переключаем на режим работы с кодом (иконка </>) и вставляем в него этот код:

<div class="row market">
 <h3 class="text-center">Мы на Маркетплейсах:</h3>
 <hr>
 <div class="col-sm-4"><a href="ссылка на ваш магазин" class="wb">Wildberries</a></div>
 <div class="col-sm-4"><a href="ссылка на ваш магазин" class="ozon">Ozon</a></div>
 <div class="col-sm-4"><a href="ссылка на ваш магазин" class="ym">Яндекс Маркет</a></div>
</div>

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

Теперь выведем наш блок на главную страницу, переходим в админке: Дизайн > Макеты > Главная / Home > Редактировать > Верх страницы > Мы на маркетплейсах > Добавить > Сохранить.

2. Откроем файл: ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла вставим этот код:

.market {
    border: 1px solid #ddd;
    margin: 30px 0;
    padding: 20px 0;
}
.market hr {
    margin: 20px 15px 30px;
}
.market a {
    display: inline-block;
    width: 100%;
    padding: 50px 0;
    margin: 0 auto;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}
.market a:hover {
    opacity: 0.7;
}
.market .wb {
    background: linear-gradient(to right, #ed3cca 0%, #7c1af8 100%);
    color: #fff;
}
.market .ozon {
    background: #005bff;
    color: #fff;
}
.market .ym {
    background: #fd0;
    color: #000;
}

Чистим кеши и смотрим результат:

На мой взгляд смотрится неплохо, при желании можно добавить фирменные логотипы и поиграть размером карточек, но я оставлю это на следующую статью. 🙂

Живой пример: op34.moushe.ru (Обновляется одновременно с выходом новых статей).

На этом всё, до новых встреч.