Jump to content
Sign in to follow this  
OlegVladislavovich

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

Recommended Posts

Итак, возможно, настало время попытаться отдать долг обществу. Подобной инструкции на 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

Share this post


Link to post
Share on other sites

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

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

9723e3c5b7d2.png

 

 

 

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

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

Share this post


Link to post
Share on other sites

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

 

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'));
          }

Share this post


Link to post
Share on other sites

 

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

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

 

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'));
          }

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Если у кого появляется горизонтальная и вертикальная прокрутка, то это легко поправить 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;
}

Share this post


Link to post
Share on other sites

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

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

Edited by sergspb

Share this post


Link to post
Share on other sites

Спасибо

 

на версии 2.1.0.2.1 все работает

Share this post


Link to post
Share on other sites

Внесу свои 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'));
          }

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

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

Edited by Hunt0rr

Share this post


Link to post
Share on other sites

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

#!/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 без заполнения (="...")

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.