Вывод атрибутов в категории при наведении opencart

21.09.2016

Автор : Василий Гребович

5/526 оценки

Доброго времени суток уважаемые пользователи!

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

Данная статья как и многие остальные на нашем сайте по большому счету пишется как заметка для самого себя, но я буду рад если и Вам пригодится данная информация.

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

Все действия мы будем проводить на opencart 1,5...

Первым делом нам нужно внести некоторые изменения в контролер категории ( Если Вы добавляете для акций , поиска, производителей ... То все делаете по аналогии)

Открываем файл :

catalog/controller/product/category.php

1	catalog/controller/product/category.php

И в нем после строчки:

'description' => utf8_substr(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8')), 0, 300) . '..',

1	'description' => utf8_substr(strip_tags(html_entity_decode($result['description'], ENT_QUOTES, 'UTF-8')), 0, 300) . '..',

Добавим:

'attribute_groups' => $this->model_catalog_product->getProductAttributes($result['product_id']),

1	'attribute_groups' => $this->model_catalog_product->getProductAttributes($result['product_id']),

С контролером закончили, теперь приступим к файлу category.tpl нашего активного шаблона в магазине:

catalog/view/theme/ВАШ_ШАБЛОН/template/product/category.tpl

1	catalog/view/theme/ВАШ_ШАБЛОН/template/product/category.tpl

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

<div class="buy-buttons">
  <div class="buy-buttons-text">		     
<?php if($product['attribute_groups']) { ?>
					    <table>
							    <?php foreach($product['attribute_groups'] as $attribute_group) { ?>
							   
							    <tbody>
									    <?php foreach($attribute_group['attribute'] as $attribute) { ?>										
							    <tr>
									<td><?php echo $attribute['name']; ?>:</td>
	                                <td><span><?php echo $attribute['text']; ?></span></td>
									   
							    </tr>
									    <?php } ?>
							    </tbody>
							    <?php } ?>
					    </table>
					    <?php } ?>	
    </div>
      </div>

<?php if($product['attribute_groups']) { ?>

<table>

<?php foreach($product['attribute_groups'] as $attribute_group) { ?>

<tbody>

<?php foreach($attribute_group['attribute'] as $attribute) { ?>

<tr>

</tr>

<?php } ?>

</tbody>

<?php } ?>

</table>

<?php } ?>

</div>

Указанным выше куском кода мы выводим все доступные атрибуты товара.

Если же Вам нужно выводить именно определенные выборочные атрибуты то вместо вышеуказанного куска кода мы добавляем следующий код:

<div class="buy-buttons">
  <div class="buy-buttons-text">		     
<?php if($product['attribute_groups']) { ?>
					    <table>
							    <?php foreach($product['attribute_groups'] as $attribute_group) { ?>
							   
							    <tbody>
									    <?php foreach($attribute_group['attribute'] as $attribute) { ?>										
										<?php if(in_array($attribute['attribute_id'], array(12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28))) { ?>
							    <tr>
									<td><?php echo $attribute['name']; ?>:</td>
	                                <td><span><?php echo $attribute['text']; ?></span></td>
									   
							    </tr>
								<?php } ?>
									    <?php } ?>
							    </tbody>
							    <?php } ?>
					    </table>
					    <?php } ?>	
    </div>
      </div>

<?php if($product['attribute_groups']) { ?>

<table>

<?php foreach($product['attribute_groups'] as $attribute_group) { ?>

<tbody>

<?php foreach($attribute_group['attribute'] as $attribute) { ?>

<?php if(in_array($attribute['attribute_id'], array(12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28))) { ?>

<tr>

</tr>

<?php } ?>

</tbody>

<?php } ?>

</table>

<?php } ?>

</div>

Обратите свое внимание на список циферок в коде 12, 13, 14, 15,..... это как раз и есть наши выбранные указанные атрибуты, то есть здесь мы через запятую добавляем ID атрибута.

Узнать ID атрибута очень просто, перейдите в админ панели в вкладку атрибуты, и напротив нужного нам для отображения атрибута жмем изменить , в строке браузера смотрим ссылку, в самом конце ссылки будет отображен ID атрибута.

В общей сложности у Вас уже должны в категории появится атрибуты, но смотреться они будут без форматирования, мягко говоря криво.

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

И так в данном примере я вывожу атрибуты именно при наведении на товар, то есть изначально они скрыты, а как только наводим указатель мышки на товар появляются нужные нам атрибуты. пример Вы можете посмотреть на фото в статье!

И так добавляем в файл стилей вашего шаблона код стилей:

/*Окно при наведении в категории*/

.product-grid > div > div .buy-buttons {
position: absolute;
display: none;
left: 0px;
right: 0px;
z-index: 10;
background: #fff;
box-shadow: inset 0px 0px 0px 1px #e8e8e8;
}
.product-grid > div > div:hover .buy-buttons  {
display: block;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 3px;
margin-right: 3px;
border-left: 1px solid #6caddf;
border-right: 1px solid #6caddf;
box-shadow: 0px 1px 0px 0px #6caddf;
}

.buy-buttons-text {
padding-left: 15px;
}
.buy-buttons-text table {
width: 100%;
}
.buy-buttons-text tr {
}
.buy-buttons-text tr td {
font-weight: 700;
color: #028298;
}
.buy-buttons-text tr td span {
font-weight: 700;
color: #747474;
padding-left: 10px;
}

/*Окно при наведении в категории*/

.product-grid > div > div .buy-buttons {

position: absolute;

display: none;

left: 0px;

right: 0px;

z-index: 10;

background: #fff;

box-shadow: inset 0px 0px 0px 1px #e8e8e8;

}

.product-grid > div > div:hover .buy-buttons {

display: block;

padding-top: 10px;

padding-bottom: 10px;

margin-left: 3px;

margin-right: 3px;

border-left: 1px solid #6caddf;

border-right: 1px solid #6caddf;

box-shadow: 0px 1px 0px 0px #6caddf;

}

.buy-buttons-text {

padding-left: 15px;

}

.buy-buttons-text table {

width: 100%;

}

.buy-buttons-text tr {

}

.buy-buttons-text tr td {

font-weight: 700;

color: #028298;

}

.buy-buttons-text tr td span {

font-weight: 700;

color: #747474;

padding-left: 10px;

}

Вот в принципе и все.

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

Общим пробуйте если что не получается или Вы хотите предложить другое решение пишите в комментариях!

19 комментариев

Саша 04.10.2016 в 15:28

Приветствую! Все в принципе очень хорошо, НО атрибуты не отображаются ни в сетке ни в списке, но я заметил, что они есть при обновлении страницы, а потом пропадают. Может подскажете в чем может быть причина?

Ответить
- Василий 04.10.2016 в 15:32
  
  Тут все зависит от вашего шаблона, покажите сайт, может что и подскажем!
  
  Ответить
Михаил 04.10.2016 в 22:36

А подскажите как вывести вес и размеры в карточку категории. Заранее спасибо

Ответить
- Василий 04.10.2016 в 22:42
  
  прочтите статью здесь для карточки товара. там же в комментарии я описывал пользователю как вывести в категории!
  
  Ответить
Михаил 05.10.2016 в 10:07

ок. спасибо

Ответить

Иван 18.01.2017 в 20:20

Парни, нужная статья, но вот тоже не пошло чего-то. И где теперь искать, не очень понятно.
Проще было все точно рассказать на примере дефолтного шаблона — так легче учиться. А то «Находим блок отвечающий за вывод товара» звучит слишком абстрактно. Гораздо лучше, когда указывают конкретный файл, а в нем конкретную строку, после которой добавляют код.

Ответить

Василий 18.01.2017 в 20:21

Извините но мы не пишем инструкции к opencart а просто описываем действия которые мы делали, и на его основе вы делаете себе так же, ну а по поводу блока отвечающего за «вывод товара» то у каждого шаблона он свой.
К примеру в дефолтном фаблоне он начинается здесь:

<div class="product-list">

1	<div class="product-list">

А полностью код выглядит так:

  <div class="product-list">
    <?php foreach ($products as $product) { ?>
    <div>
      <?php if ($product['thumb']) { ?>
      <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
      <?php } ?>
      <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
      <div class="description"><?php echo $product['description']; ?></div>
      <?php if ($product['price']) { ?>
      <div class="price">
        <?php if (!$product['special']) { ?>
        <?php echo $product['price']; ?>
        <?php } else { ?>
        <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
        <?php } ?>
        <?php if ($product['tax']) { ?>
        <br />
        <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
        <?php } ?>
      </div>
      <?php } ?>
      <?php if ($product['rating']) { ?>
      <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
      <?php } ?>
      <div class="cart">
        <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />
      </div>
      <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div>
      <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div>
    </div>
    <?php } ?>
  </div>

<?php foreach ($products as $product) { ?>

<div>

<?php if ($product['thumb']) { ?>

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

<?php } ?>

<?php if ($product['price']) { ?>

<?php if (!$product['special']) { ?>

<?php echo $product['price']; ?>

<?php } else { ?>

<?php } ?>

<?php if ($product['tax']) { ?>

<br />

<?php } ?>

</div>

<?php } ?>

<?php if ($product['rating']) { ?>

<?php } ?>

<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />

</div>

</div>

<?php } ?>

</div>

Я не думаю что ето так сложно найти нужный вам блок.
Ну или же вы всегда можете обратится за платной помощью и за отдельную плату мы все сделаем.
Все статьи которые пишутся на сайте в первую очередь являются заметками самому себе то есть нам.

Ответить

Иван 18.01.2017 в 20:22

Не хотел обидеть, извините.
Просто статья оказалась нужная, и в целом, помогла — дала толчок в нужном направлении, так что в любом случае спасибо.

Ответить
- Василий 18.01.2017 в 20:22
  
  Да нет же, вы меня ничем не обидели, все ок.
  
  Ответить
Барс 08.02.2017 в 16:33

Добрый день, да очень полезная статья!) А на OC 2.1 получится с помощью Вашей статьи так же сделать?

Ответить
- Василий 08.02.2017 в 16:36
  
  Да, но там немного все по другому но принцып тот же, сейчас не могу описать инструкцию для второй ветки, занят, но в дальнейшем сделаю!
  
  Ответить
Марианна 15.09.2017 в 04:43

Здравствуйте! где можно посмотреть готовый пример?

Ответить
- Василий 18.09.2017 в 13:57
  
  К сожалению сайт клиента показать не имею права, а на демках данную доработку не ставил, разве что на скрине здесь!
  
  Ответить
  - Марианна 18.09.2017 в 16:07
    
    я видела, с этой картинки из гугла я и попала на вашу статью. По вашей статье не могла понять чего у меня ширина выпадающего блока больше самого окошка в категории, нашла другой пример и сделала.
    
    Ответить
    - Василий 18.09.2017 в 16:12
      
      Ясн, ок.
      В вашем случае это уже по большому счету дело стилей именно вашего шаблона.
      
      Ответить
Евгений 20.11.2017 в 13:37

Здравствуйте! Большое спасибо за статью, очень помогла в решении нужной фишки на сайте. Немогу только реализовать ее в поиске, добавил и в search.php и в search.tpl файлы нужный код, но так ничего и не появилось не подскажите решение?

Ответить
- Василий 20.11.2017 в 13:45
  
  Перепроверьте все детальнее, так как если в категории у вас отображается то в поиске по аналогии, там похожие файлы, ну или же у вас очень модифицырован сам шаблон, так же проверьте возможно у вас вместо поиска выступает другой какой то модуль к примеру iSearch у него свои страницы поиска…
  Без просмотра самого пациента более детальнее ответить не могу к сожалению.
  
  Ответить
  - Евгений 20.11.2017 в 15:52
    
    Все перепроверил… шаблон стоит не дефолтный, а universal, можете помочь?
    
    Ответить
    - Василий 20.11.2017 в 15:57
      
      Да, конечно, для начала пришлите нам ссылку через форму под данной статьей на сайт.
      Если проблема видима сразу то подскажем что да как, если же нужны будут правки кода и адаптации шаблона нами то конечно же только за отдельную оплату.
      
      Ответить

Вывод атрибутов в категории при наведении opencart

ПОЛЕЗНАЯ РЕКЛАМА НА САЙТЕ

19 комментариев

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

Анимированное SVG модальное окно

Как показать текущую дату на сайте?

Стильный видео фон для сайта

Простые вкладки для сайта на CSS3

Простое всплывающее окно для сайта

ПОЛЕЗНАЯ РЕКЛАМА НА САЙТЕ

Вас также может заинтересовать

19 комментариев

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