Opencart v3 adding additional product images to featued module

Question

I have a popup for each product displayed in featured module and within that popup I would like to display all images for the products with similar looks as product page i.e. 1 big image with thumbnails of additional images below which updates the big image when clicked.

To do so I copied some code from controller product.php to controller module featured.php but this does not seems to work. Here is my code:

Controller / extention / module / featured.php

if ($product_info) {
                if ($product_info['image']) {
                    $image = $this->model_tool_image->resize($product_info['image'], $setting['width'], $setting['height']);
                } else {
                    $image = $this->model_tool_image->resize('placeholder.png', $setting['width'], $setting['height']);
                }

                if ($product_info['image']) {
                    $data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_popup_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_popup_height'));
                } else {
                    $data['popup'] = '';
                }

                $data['images'] = array();

                $results = $this->model_catalog_product->getProductImages($this->model_catalog_product->getProduct($product_id));

                foreach ($results as $result) {
                    $data['images'][] = array(
                        'popup' => $this->model_tool_image->resize($result['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_popup_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_popup_height')),
                        'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_additional_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_additional_height'))
                    );
                }
                // some other code in between

                $data['products'][] = array(
                    'product_id'  => $product_info['product_id'],
                    'thumb'       => $image,
                    'popup'       => $image,
                    'name'        => $product_info['name'],
                    'description' => utf8_substr(strip_tags(html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8')), 0, $this->config->get('theme_' . $this->config->get('config_theme') . '_product_description_length')) . '..',
                    'price'       => $price,
                    'special'     => $special,
                    'tax'         => $tax,
                    'rating'      => $rating,
                    'href'        => $this->url->link('product/product', 'product_id=' . $product_info['product_id'])
                );

For view / Theme / extention / module / featured.twig

{% if thumb or images %}
      <ul class="thumbnails">
        {% if thumb %}
        <li><a class="thumbnail" href="{{ popup }}" title="{{ heading_title }}"><img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
        {% endif %}
        {% if images %}
        {% for image in images %}
        <li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ heading_title }}"> <img src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" /></a></li>
        {% endfor %}
        {% endif %}
      </ul>
      {% endif %}

score 0 · Answer 1 · answered Jan 10 '18 at 07:42

The code you used is for a single product, you need to edit it to work with multiple products.

File:

catalog\controller\extension\module\featured.php

Find:

$data['products'][] = array(

Replace with:

$images = array();
$results = $this->model_catalog_product->getProductImages($product_info['product_id']);
foreach ($results as $result) {
    $images[] = array(
        'popup' => $this->model_tool_image->resize($result['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_popup_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_popup_height')),
        'thumb' => $this->model_tool_image->resize($result['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_additional_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_additional_height'))
    );
}
$data['products'][] = array(
    'images'      => $images,

File:

catalog\view\theme\default\template\extension\module\featured.twig

Inside for loop, Add:

{% if product.images %}
<ul class="list-inline list-unstyled thumbnails">
{% for image in product.images %}
<li class="image-additional"><a class="thumbnail" href="{{ image.popup }}" title="{{ product.name }}"> <img src="{{ image.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" /></a></li>
{% endfor %}
</ul>
{% endif %}

If you want to enable gallery (magnific-popup), in above controller file, somewhere outside the foreach loop, Add:

$this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
$this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');

In view file, somewhere outside the for loop, Add:

<script>
$(document).ready(function() {
    $('.thumbnails').magnificPopup({
        type:'image',
        delegate: 'a',
        gallery: {
            enabled: true
        }
    });
});
</script>

Opencart v3 adding additional product images to featued module

1 Answers1