Moushe.ru

Блог обо всём

OpenCart 2.3 изменяем карточки товаров в категориях



Продолжаю работать над новой версией нашего интернет магазина сделанной на OcStore 2.3, в этой статье (как я и обещал ранее) мы будем работать над товарами в категориях.

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

Живой результат: http://new.cyber-connect.ru (это рабочий магазин, просьба не баловаться)

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

  • 1. Работаем с category.tpl
  • 2. Работаем с stylesheet.css

Приступим:

1. Откроем файл ../catalog/view/theme/default/template/product/category.tpl и удалим эту строку (132):

<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>

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

<div class="product-thumb">

вставим эту:

<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>

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

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

вставим эту:

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

а вместо этих строк (132-133):

<button type="button" onclick="cart.add('<?php echo $product['product_id']; ?>', '<?php echo $product['minimum']; ?>');"><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']; ?>', '<?php echo $product['minimum']; ?>');"><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>

Аналогичным образом правим эти файлы:

  • manufacturer_info.tpl (товары производителя)
  • search.tpl (результаты поиска)
  • special.tpl (акции)

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

/* category fix */
.product-grid .description {
display: none;
}
.product-list .button-wishlist {
float: left;
right: 0px;
left: 10px;
}

Эти строки скроют описание товара в вид: сетка, и переместят кнопку в закладки из правого угла в левый в вид: список.

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

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

  1. Тимур

    19.07.2017 at 18:27

    Спасибо Вам за уроки… Но хотелось бы сказать, что раньше все изменения в процессе статьи Вы поясняли (что и зачем) и прикрепляли скриншот… Было очень приятно и понятно…

    • Раньше у меня было больше свободного времени, и так написание статьи отнимает 3-4 часа личного времени, а ещё нужно работать, готовить пожрать, отдохнуть и т.д. Вот статьи и стали менее разжёванными, в больших статьях картинок обычно больше, а здесь работаем всего над одной вещью и на двух скриншотах видно что изменилось.

  2. Тимур

    19.07.2017 at 21:04

    Я Вас очень понимаю… Спасибо за Ваши труды в любом случае)

  3. Очень интересный урок получился… Предлагаю, Вам, дополнить его инфой о том, как убрать краткое описание из товаров, которые показываются в рубрике «рекомендуемые товары»… Я пологаю, что процесс одинаков, но все же, не буду ломать дров, как и другие, без Вашего урока…

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

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

*

CAPTCHA image
*

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

Вверх ↑



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