OpenCart Community

Posted: **Tue Jan 02, 2018 4:00 am**

Tested for default template. In catalog/controller/extension/module/featured.php file,

find:

if ((float)$product['special']) {
					$special = $this->currency->format($this->tax->calculate($product['special'], $product['tax_class_id'], $this->config->get('config_tax')), $this->session->data['currency']);
				} else {
					$special = false;
				}

add below:

Code: Select all

$images = array();

			$results = $this->model_catalog_product->getProductImages($product['product_id']);

			foreach ($results as $result) {
				$images[] = array(
					'popup' => $this->model_tool_image->resize($product['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($product['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'))
				);
			}
			
			$heading_title = html_entity_decode($product['name'], ENT_QUOTES, 'UTF-8');

Then, find:

Code: Select all

'tax'         => $tax,

add below:

Code: Select all

'images' => $images,
'heading_title' => $heading_title,

Then, find:

Code: Select all

if ($data['products']) {

add right below:

Code: Select all

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

Then, in catalog/view/theme/default/template/extension/module/featured.twig file,

find:

Code: Select all

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">

add right below:

Code: Select all

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

Then, at the bottom of the file, if the following line already exists:

Code: Select all

$(document).ready(function() {

add the following right below:

Code: Select all

$('.thumbnails').magnificPopup({
		type: 'image',
		delegate: 'a',
		gallery: {
			enabled: true
		}
	});

However, if no JS code can be found at the bottom of the file, add the entire code:

Code: Select all

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

This should resolve the problem.

Posted: **Tue Jan 02, 2018 5:57 am**

Controller codes edited above.

OpenCart Community

[v3.0.2.0 - Extension] - Additional images in features module

[v3.0.2.0 - Extension] - Additional images in features module

Re: [v3.0.2.0 - Extension] - Additional images in features module