Перейти к содержанию
OlegVladislavovich

[How-To] Вывод изображений при выборе подкатегорий

Рекомендуемые сообщения

Итак, возможно, настало время попытаться отдать долг обществу. Подобной инструкции на OpenCart 2.0.2.0 не нашёл, пришлось самому порыться в кодах.

Работаю на шаблоне default, инструкцию пишу именно для этого шаблона, но на другие тоже возможно подойдёт.

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

Как будет выглядеть в итоге? (зависит от вашего stylesheet.css)

 

-kw9b4sry-Y.jpg

 

Итак, начнём!
ШАГ 1 (придумал не я)
Открываем документ catalog/controller/product/category.php
Находим в нём эти строки:

foreach ($results as $result) {
	$filter_data = array(
		'filter_category_id'  => $result['category_id'],
		'filter_sub_category' => true
	);

После этих строк добавляем следующие:

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
                      }
    else {
          $image = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
          }

Далее находим:

'name'  => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),

Дописываем после:

'thumb' => $image,

ШАГ 2
Открываем документ catalog/view/theme/default/template/product/category.tpl
Находим в нём следующий строки:

      <?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <?php if (count($categories) <= 5) { ?>
      <div class="row">
        <div class="col-sm-3">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>
      </div>
      <?php } else { ?>
      <div class="row">
        <?php foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
        <div class="col-sm-3">
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
        </div>
        <?php } ?>
      </div>
      <?php } ?>
      <?php } ?>

Заменяем эти строки на:

      <?php if ($categories) { ?>
      <h3><?php echo $text_refine; ?></h3>
      <div class="row">
            <?php foreach ($categories as $category) { ?>
            <div class="product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12">
			<div class="product-thumb">
			<div class="category-caption"><h4><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></h4></div>
            <div class="image"><img src="<?php echo $category['thumb']; ?>" title="<?php echo $category['name']; ?>" alt="<?php echo $category['name']; ?>" width="200px" height="200px"/></a></div>
			</div>
			</div>
            <?php } ?>
      </div>
      <?php } ?>

ШАГ 3
Заходим в файл catalog/view/theme/default/stylesheet/stylesheet.css
Находим в нём следующие строки (если не удаётся найти именно эти, попробуйте найти ".product-thumb .caption"):

.product-thumb .caption {
padding: 0 20px;
min-height: 180px;
}

Вставляем после:

.product-thumb .category-caption {
padding: 0 20px;
min-height: 32px; /*Это значение меняйте под себя*/
}

НА ЭТОМ ВСЁ!
 

Так же скажу, что всё это отлично работает на стандартном Bootstrap'е, т.к. стилей новых не создаётся, а берутся стили сетки товаров.
Надеюсь, эта статья сможет кому-то быть полезной.

Всем пока!

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо за информацию,но у меня немного не получилось.

Получилось наполовину вот как  не подтягивает фото ставил 200х200 и JPEG и PNG все равно так.

9723e3c5b7d2.png

 

 

 

не подскажете как исправить.Опенкарт 2.0.1.1 шаблон дефаулт, но немного стили исправил.4 модификатора стоит может из-за них так?

Буду очень признателен за подсказку.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Огромное спасибо.Переделал  по своей теме текст центровал.Все получилось .Автору большой респект.
Только у меня заработало когда сделал вот эти строчки вот так

 

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
   }else {
          $image = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
          }

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

Огромное спасибо.Переделал  по своей теме текст центровал.Все получилось .Автору большой респект.

Только у меня заработало когда сделал вот эти строчки вот так

 

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
   }else {
          $image = $this->model_tool_image->resize('no_image.jpg', $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));
          }

 

Очень рад, что вам помогла эта статья! Не знаю, в чём различие между вашим вариантом и моим, но у меня стабильно работает первый. Возможно знающие люди заметят эту тему и объяснят проблему)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Все сделал как выше сказано , но ничего не получилось. ? Может быть кто подскажет в чем проблема. http://c2n.me/3nvIbPQ и самое главное как это все исправить

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо большое автору за инструкцию  :-)

 

Если у кого появляется горизонтальная и вертикальная прокрутка, то это легко поправить c помощью CSS. 

Я, к примеру, в файле stylesheet.css нашел: 

.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}

и дописал немного: 

.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
        max-width: 100%;
        overflow: hidden;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Пробую сделать на тестовом сайте http://new.m-s.su/component/monitor, всё получилось,не получается только отодвинуть от края заголовок. Пытаюсь в product-thumb .category-caption  - не меняется. Подскажите, если возможно, где искать?

post-26771-0-46441700-1470212224_thumb.jpg

Изменено пользователем sergspb

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Внесу свои 5 копеек.

У меня ocStore 2.3.0.2.2 и предложенная выше конструкция работает не корректно, но работает, выдает кучу ошибок и нет изображения. Покурив различные форумы нашел следующее решение. Нужно поправить шаг 1

и вставить

if ($result['image']) {
    $image = $this->model_tool_image->resize($result['image'], $this->config->get($this->config->get('config_theme') . '_image_product_width'), $this->config->get($this->config->get('config_theme') . '_image_product_height'));
                      }
    else {
          $image = $this->model_tool_image->resize('no_image.jpg', $this->config->get($this->config->get('config_theme') . '_image_product_width'), $this->config->get($this->config->get('config_theme') . '_image_product_height'));
          }

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

И кстати, я все это делал не на дефолтной теме.

Изменено пользователем Hunt0rr

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Поддомен, размещенный на одном сервере с доменом, ссылается на картинки домена через жесткие или относительные ссылки (испробованы оба варианта).

#!/bin/bash
rm -Rf /sites/имясайтаподдомена/www/image/data
mkdir /sites/имясайтаподдомена/www/image/data
for fl in /sites/имясайта/www/image/data/*
do
ln "$fl" /sites/имясайтаподдомена/www/image/data
done
chown -R drag01:webusers /sites/имясайтаподдомена/www/image/data

А картинки не проявляются. 

не работает  src="<?php echo $products[$j]['thumb']; ?>",  <?php echo $products[$j]['thumb']; ?> - пусто на выводе, просто выводится src без заполнения (="...")

Подскажите, в чем дело, пожалуйста

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Подскажите как добавить картинки в подкатегории в Opencart 3?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.