Extension - Image Preview v1

[Compatibility]
Supports OpenCart Version 1.5.2.1 Up

[Installation]

1. No files or data will be overridden
2. Copy 'admin' and 'catalog' folders into the root folder of your website
3. Add the module in home, category and manufacturer page.

[Other]

Replace Line 110 to Line 201 in \catalog\view\theme\default\template\product\category.tpl with this to enable image preview when display change to grid or list.

<script type="text/javascript"><!--
function display(view) {
if (view == 'list') {
$('.product-grid').attr('class', 'product-list');

$('.product-list > div').each(function(index, element) {
html = '<div class="right">';
html += ' <div class="cart">' + $(element).find('.cart').html() + '</div>';
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += ' <div class="compare">' + $(element).find('.compare').html() + '</div>';
html += '</div>';

html += '<div class="left">';

var image = $(element).find('.image').html();

if (image != null) {
html += '<div class="image">' + image + '</div>';
}

var price = $(element).find('.price').html();

if (price != null) {
html += '<div class="price">' + price + '</div>';
}

html += ' <div class="name">' + $(element).find('.name').html() + '</div>';
html += ' <div class="description">' + $(element).find('.description').html() + '</div>';

var rating = $(element).find('.rating').html();

if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}

html += '</div>';


$(element).html(html);

$.preview();
});

$('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>');

$.cookie('display', 'list');
} else {
$('.product-list').attr('class', 'product-grid');

$('.product-grid > div').each(function(index, element) {
html = '';

var image = $(element).find('.image').html();

if (image != null) {
html += '<div class="image">' + image + '</div>';
}

html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="description">' + $(element).find('.description').html() + '</div>';

var price = $(element).find('.price').html();

if (price != null) {
html += '<div class="price">' + price + '</div>';
}

var rating = $(element).find('.rating').html();

if (rating != null) {
html += '<div class="rating">' + rating + '</div>';
}

html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';

$(element).html(html);
$.preview();
});

$('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>');

$.cookie('display', 'grid');
}
}

view = $.cookie('display');

if (view) {
display(view);
} else {
display('list');
}
//--></script>

Get Social

Follow us on the social media web sites.

Newsletter

Subscribe to our newsletters and be informed of new releases and other OpenCart events.

Contact Us

OpenCart Limited, Unit 16, 26/F, Tuen Mun Central Square, 22 Hoi Wing Road, Tuen Mun, Hong Kong

+852 24990996

Send email via our contact form