Правки шаблона OpenCart 3 (1 часть)

Всем привет, сегодня мы с вами немного поработаем над дизайном нашей домашней страницы, в основном мы поработаем над карточками товаров (модуль рекомендуемые), блоками преимуществ и совсем немного затронем подвал и шапку стандартного шаблона CMS OpenCart 3.

1. Откроем файл: ../public_html/catalog/controller/extension/module/featured.php и после этой строки:

$this->load->model('tool/image');

вставим эту:

$data['heading_title'] = $setting['name'];

Благодаря этому мы теперь можем на витрину выводить название модуля Рекомендуемые из админки, а не из файла перевода, очень удобно (вы можете создать блоки Новинки, Рекомендуемые, Акции и т.д.).

2. Откроем файл: ../public_html/catalog/view/theme/default/template/extension/module/featured.twig и вместо этой строки:

<h3>{{ heading_title }}</h3>

вставим эти:

<h3 class="text-center">{{ heading_title }}</h3>
<hr>

Благодаря этому коду мы центрируем заголовки по центру и добавляем линию разделяющую заголовок и товары, да просто, но мне нравится как это выглядит.

3. Откроем файл: ../public_html/catalog/language/ru-ru/common/footer.php и вместо этой строки:

$_['text_powered']      = 'Работает на <a href="http://opencart-russia.ru">OpenCart "Русская сборка"</a><br /> %s &copy; %s';

вставим эту:

$_['text_powered']      = '%s © %s';

Благодаря этой правке мы убрали из подвала надпись и ссылку: Работает на OpenCart «Русская сборка».

4. Откроем файл: ../public_html/catalog/view/theme/default/template/common/header.twig и удалим эти строки:

<li><a href="{{ shopping_cart }}" title="{{ text_shopping_cart }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_shopping_cart }}</span></a></li>
<li><a href="{{ checkout }}" title="{{ text_checkout }}"><i class="fa fa-share"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_checkout }}</span></a></li>

Мы убрали из верхней панели ссылки Корзина и Оформление заказа, у нас и так есть ниже кнопка корзины с этими ссылками, дублирование нам ни к чему.

5. Откроем файл: ../public_html/catalog/view/theme/default/stylesheet/stylesheet.css и вместо этих строк:

#logo {
    margin: 0 0 10px 0;
}

вставим эти:

#logo {
    margin: 0 0 24px 0;
}
#logo h1 {
    margin: 0;
}

Этим мы выравниваем центральную часть шапки сайта (логотип, поиск, корзину) к верхнему меню и категориям:

Вместо этого кода:

.product-thumb {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    overflow: auto;
}

вставим этот:

.product-thumb {
    margin-bottom: 30px;
    overflow: auto;
    border: 4px solid #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

Смотрим что у нас получилось:

Неплохо, но мне не хватает реакции при наведении курсором мыши, добавим ниже этот код:

.product-thumb:hover {
    border: 4px solid #FAFAFA;
}

Смотрим что у нас получилось:

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

В одной из прошлых статей мы делали блок о компании (картинка и текст), если вы его тоже сделали, то его дизайн отличается от остальных элементов, просто найдём этот код:

.company {
    border: 1px solid #ddd;
    padding: 15px 0;
    font-size: 1.4rem;
    margin: 20px 0;
    display: flex;
    align-items: center;
}
@media (max-width: 768px) {
    .company {
        display: inline-block;
    }
}

и чуть-чуть изменим:

.company {
    padding: 15px 0;
    font-size: 1.4rem;
    margin: 0 0 30px 0;
    display: flex;
    align-items: center;
        border: 4px solid #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
@media (max-width: 768px) {
    .company {
        display: inline-block;
    }
}

Чистим кеши и смотрим что получилось, на мой взгляд витрина сайта стала посимпатичнее.

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

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