Moushe.ru

Блог обо всём

OpenCart 2.3 изменяем модуль рекомендуемые (и другие аналогичные модули)



Всем привет, пришло время обновить наш рабочий интернет магазин Cyber-connect.ru (старый сайт сделан на OpenCart 1.5, сейчас провожу работы по переносу сайта на OpenCart 2.3), новая версия сайта крутится на под-домене new и так как у меня запланирована куча правок файлов шаблона и движка, я решил писать для вас мини-статьи о переделке той или иной части сайта. В этой статье я напишу вам о переделке модуля рекомендуемые, точно так-же правятся и другие похожие модули (специальные, последние, хиты продаж и т.д.).

P.S. — По изменению товаров не в модулях (товары категории, товары в результатах поиска, товары производителя) будет отдельная статья, просто чуть-чуть подождите.

Список задач на сегодня:

  • 1. Правим файл featured.tpl
  • 2. Правим файл stylesheet.css

Приступим:

1. Откроем файл ../catalog/view/theme/default/template/extension/module/featured.tpl и добавим заголовку иконку (с помощью иконочного шрифта fontawesome.io), я выбрал вот такую иконку:

<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>

вместо этой строки (1):

<h3><?php echo $heading_title; ?></h3>

вставим эту:

<h3><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <?php echo $heading_title; ?></h3>

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

<button type="button" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>

а после этой строки (5):

<div class="product-thumb transition">

вставим эту:

<button type="button" class="btn btn-default button-wishlist" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-heart"></i></button>

теперь я хочу убрать из товаров модуля описание товара, для моего магазина оно не нужно, удалим эту строку (10):

<p><?php echo $product['description']; ?></p>

теперь мне нужно настроить кнопки в корзину и в сравнения, вместо этих строк (35-36):

<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i></button>

вставим эти:

<button type="button" data-toggle="tooltip" title="<?php echo $button_cart; ?>" onclick="cart.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_cart; ?></span></button>
<button type="button" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product['product_id']; ?>');"><i class="fa fa-exchange"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $button_compare; ?></span></button>

теперь нам необходимо дописать для обёртки товаров модуля класс сетки, вместо этой строки (4):

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">

вставим эту:

<div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12">

(P.S.это сильно облегчит нашу работу со стилями)

На этом правка модуля окончена.

P.S. – список файлов которые необходимо будет изменить таким же образом:

  • bestseller.tpl
  • latest.tpl
  • special.tpl

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

/* wishlist button featured.tpl */
.button-wishlist {
float: right;
position: relative;
right: 10px;
top: 10px;
z-index:99;
background: #fff;
border: 1px solid #f44336;
}
.button-wishlist:hover {
background: #f44336;
}
.button-wishlist .fa {
color: #F44336;
}
.button-wishlist:hover .fa {
color: #fff;
}

(этим мы настроили нашу кнопку в закладки)

теперь нам нужно настроить кнопки в корзину и в сравнение, вместо этих строк (626-641):

.product-thumb .button-group button {
width: 60%;
border: none;
display: inline-block;
float: left;
background-color: #eee;
color: #888;
line-height: 38px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
.product-thumb .button-group button + button {
width: 20%;
border-left: 1px solid #ddd;
}

вставим эти:

.product-thumb .button-group button {
width: 50%;
border: none;
display: inline-block;
float: left;
background-color: #eee;
color: #888;
line-height: 38px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
.product-thumb .button-group button + button {
border-left: 1px solid #ddd;
}

теперь необходимо настроить высоту названия товара, рейтинга и цены (сейчас очень большой промежуток между картинкой товара и между кнопками в корзину и в сравнения), тут один хитрый момент, мы могли бы отредактировать уже существующие стили, но тогда кнопки в корзину, в закладки, в сравнения (в товарах категории и т.д. – где есть вид список) будут отображаться криво, поэтому мы добавляем новые стили для вида сетка, в конец файла добавляем эти строки:

.product-grid .caption {
min-height: 30px !important;
}

теперь удалим эти строки (647-656):

@media (max-width: 1200px) {
.product-thumb .button-group button, .product-thumb .button-group button + button {
width: 33.33%;
}
}
@media (max-width: 767px) {
.product-thumb .button-group button, .product-thumb .button-group button + button {
width: 33.33%;
}
}

На сегодня всё, следите за нашими новостями и до новых встреч.

6 Комментариев

  1. Спасибо за статью. Очень полезная оказалась!
    Но остался один недочет, после проведенных правок отображение кнопок в корзину и в закладки в категориях поехало. Выглядит не красиво. Подскажите как поправить.
    Заранее спасибо.

  2. Спасибо за оперативность и выпуск статьи по изменению товаров не в модулях.
    Есть еще вопрос: как сделать вывод товара в модуле рекомендуемые списком?

  3. Алексей

    19.07.2017 at 07:12

    Здравствуйте, а можно в место , выводить названия модуля, который создаешь в админке (например стандартно включен и добавлен в схему «Рекомендуемые на главной странице») при добавлении еще одного, назовем его «Образец» и включении его в схему на главной странице после «Рекомендуемые на главной странице» название у обоих $heading_title — самого модуля «Рекомендуемые товары»
    Огромное спасибо за Ваши статьи, очень сильно помогают!!!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

CAPTCHA image
*

© 2017 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика