to display product image and zoom for seller products on product page
template/product/product.tpl
<?php require( DIR_TEMPLATE.$this->config->get('config_template')."/template/common/config.tpl" );
$themeConfig = $this->config->get('themecontrol');
$productConfig = array(
'product_enablezoom' => 1,
'product_zoommode' => 'basic',
'product_zoomeasing' => 1,
'product_zoomlensshape' => "round",
'product_zoomlenssize' => "150",
'product_zoomgallery' => 0,
'enable_product_customtab' => 0,
'product_customtab_name' => '',
'product_customtab_content' => '',
'product_related_column' => 0,
);
$categoryConfig = array(
'category_pzoom' => 1,
);
$categoryPzoom = $categoryConfig['category_pzoom'];
$productConfig = array_merge( $productConfig, $themeConfig );
$languageID = $this->config->get('config_language_id');
?>
<?php echo $header; ?>
<?php require( DIR_TEMPLATE.$this->config->get('config_template')."/template/common/breadcrumb.tpl" ); ?>
<div class="container">
<div class="row">
<?php if( $SPAN[0] ): ?>
<aside class="col-lg-<?php echo $SPAN[0];?> col-md-<?php echo $SPAN[0];?> col-sm-12 col-xs-12">
<?php echo $column_left; ?>
</aside>
<?php endif; ?>
<section class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="content-man" class="product-detail">
<?php echo $content_top; ?>
<div class="product-info">
<div class="row">
<div id="carousel-inner" class="col-lg-2 col-sm-2 col-xs-12">
<?php
if( $productConfig['product_zoomgallery'] == 'slider' && $thumb ) {
$eimages = array( 0=> array( 'popup'=>$popup,'thumb'=> $thumb ) );
$images = array_merge( $eimages, $images );
}
$icols = 3; $i= 0;
foreach ($images as $image) { ?>
<?php if( (++$i)%$icols == 1 ) { ?>
<div class="item">
<?php } ?>
<?php
$p=str_replace("image/cache/sellers/","image/sellers/",$image['thumb']);
$pattern = '/sellers/';
if (preg_match($pattern, $image['thumb']))
{
$k=str_replace("-500x500","",$p);
$imagepath=$k;
}
else
{
$imagepath=$image['thumb'];
}
?>
<style>
#cboxLoadedContent{
width:500px;
height:500px;
}
</style>
<a href="<?php echo $imagepath; ?><?php //echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" data-zoom-image="<?php echo $imagepath; ?><?php //echo $image['popup']; ?>" data-image="<?php echo $imagepath; ?><?php //echo $image['popup']; ?>" id="colorbox-cboxElement">
<?php
$p=str_replace("image/cache/sellers/","image/sellers/",$image['thumb']);
$pattern = '/sellers/';
if (preg_match($pattern, $image['thumb']))
{
$k=str_replace("-500x500","",$p);
$imagepath=$k;
}
else
{
$imagepath=$image['thumb'];
}
?>
<img src="<?php echo $imagepath; ?>" style="max-width:<?php echo $this->config->get('config_image_additional_width');?>px" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" data-zoom-image="<?php echo $imagepath; ?><?php //echo $image['popup']; ?>" class="product-image-zoom img-responsive" />
</a>
<?php if( $i%$icols == 0 || $i==count($images) ) { ?>
</div>
<?php } ?>
<?php } ?>
</div>
<?php if ($thumb || $images) { ?>
<div class="col-lg-4 col-sm-4 col-xs-12 image-container">
<?php if( $special ) { ?>
<!--<span class="product-label-special"><span><?php //echo $this->language->get( 'text_sale' ); ?></span></span>-->
<?php } ?>
<?php if ($thumb) { ?>
<div class="image">
<a href="<?php echo $imagepath; ?><?php //echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox"> <?php
$p=str_replace("image/cache/sellers/","image/sellers/",$thumb);
$pattern = '/sellers/';
if (preg_match($pattern, $thumb))
{
$k=str_replace("-500x500","",$p);
$imagepath=$k;
}
else
{
$imagepath=$thumb;
}
?>
<img src="<?php echo $imagepath; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" data-zoom-image="<?php echo $imagepath; ?><?php //echo $popup; ?>" class="product-image-zoom img-responsive"/>
</a>
</div>
<?php } ?>
<!---------------EDIT MODE-------------------->
<!---------------END EDIT MODE---------------->
<?php if ($images) { ?>
<div class="image-additional slide carousel" id="image-additional">
<!--<div id="carousel-inner">
<?php
if( $productConfig['product_zoomgallery'] == 'slider' && $thumb ) {
$eimages = array( 0=> array( 'popup'=>$popup,'thumb'=> $thumb ) );
$images = array_merge( $eimages, $images );
}
$icols = 3; $i= 0;
foreach ($images as $image) { ?>
<?php if( (++$i)%$icols == 1 ) { ?>
<div class="item">
<?php } ?>
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" data-zoom-image="<?php echo $image['popup']; ?>" data-image="<?php echo $image['popup']; ?>" id="colorbox-cboxElement">
<img src="<?php echo $image['thumb']; ?>" style="max-width:<?php echo $this->config->get('config_image_additional_width');?>px" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" data-zoom-image="<?php echo $image['popup']; ?>" class="product-image-zoom img-responsive" />
</a>
<?php if( $i%$icols == 0 || $i==count($images) ) { ?>
</div>
<?php } ?>
<?php } ?>
</div>-->
<!--<div class="carousel-control left fa fa-angle-left" href="#image-additional" data-slide="prev"></div>
<div class="carousel-control right fa fa-angle-right" href="#image-additional" data-slide="next"></div>-->
</div>
<script type="text/javascript">
$('#image-additional .item:first').addClass('active');
$('#image-additional').carousel({interval:false})
</script>
<?php } ?>
</div>
<?php } ?>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="description" id="description">
<?php if ($profiles): ?>
<div class="option form-group">
<h2><span class="required">*</span><?php echo $text_payment_profile ?></h2>
<select name="profile_id" class="form-control">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($profiles as $profile): ?>
<option value="<?php echo $profile['profile_id'] ?>"><?php echo $profile['name'] ?></option>
<?php endforeach; ?>
</select>
<span id="profile-description"></span>
</div>
<?php endif; ?>
<?php if ($options) { ?>
<div class="options">
<h2><?php echo $text_option; ?></h2>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option form-group">
<?php if ($option['required']) { ?>
<p><span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b></p>
<select name="option[<?php echo $option['product_option_id']; ?>]">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($option['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</option>
<?php } ?>
</select>
</div>
<?php } ?>
<?php if ($option['type'] == 'radio') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option-size">
<?php if ($option['required']) { ?>
<p><span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b></p>
<?php foreach ($option['option_value'] as $option_value) { ?>
<div class="radio">
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>">
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
<?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</label>
</div>
<?php } ?>
</div>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
<?php if ($price) { ?>
<div class="price">
<div class="price-gruop">
<span class="text-price"><?php echo $text_price; ?></span>
<?php if (!$special) { ?>
<?php echo $price; ?>
<?php } else { ?>
<span class="price-old"><?php echo $price; ?></span>
<span class="price-new"><?php echo $special; ?></span>
<?php } ?>
</div>
<div class="other-price">
<?php if ($tax) { ?>
<span class="price-tax"><?php echo $text_tax; ?> <?php echo $tax; ?></span><br/>
<?php } ?>
<?php if ($points) { ?>
<span class="reward"><small><?php echo $text_points; ?> <?php echo $points; ?></small></span>
<?php } ?>
</div>
<?php if ($discounts) { ?>
<div class="discount">
<ul>
<?php foreach ($discounts as $discount) { ?>
<li><?php echo sprintf($text_discount, $discount['quantity'], $discount['price']); ?></li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="product-extra" id="qun-div">
<div class="quantity-adder pull-left">
<div class="quantity-number pull-left">
<table border="1" style="width: 100%; margin-left: 0px;"><tr><td width="170"><span><?php echo $text_qty; ?></span></td>
<td width="300">
</div>
<div class="quantity-wrapper pull-left">
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" style="width: 50%;"/>
<span class="add-up add-action fa fa-plus" style="margin: -37px 0px 0px 28px;"></span>
<span class="add-down add-action fa fa-minus" style="margin: 0px 0px 0px 28px;"></span>
</div>
</div>
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
<div class="cart pull-left">
<?php /* <input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" /> */ ?>
<button id="button-cart" class="btn btn-cart">
<span class="fa fa-shopping-cart add-to-icon"></span>
<span><?php echo $button_cart; ?></span>
</button>
</div></td></tr></table>
<!-- <span> <?php //echo $text_or; ?> </span> -->
</div>
<?php if ($minimum > 1) { ?>
<div class="minimum"><small><?php echo $text_minimum; ?></small></div>
<?php } ?>
<?php if ($review_status) { ?>
<div class="review">
<div><img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/stars-<?php echo $rating; ?>.png" alt="<?php echo $reviews; ?>" /> <a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $reviews; ?></a> | <a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $text_write; ?></a></div>
</div>
<?php } ?>
<div class="share">
<!-- AddThis Button BEGIN -->
<div class="addthis_default_style"><a class="addthis_button_compact"><?php echo $text_share; ?></a> <a class="addthis_button_email"></a><a class="addthis_button_print"></a> <a class="addthis_button_facebook"></a> <a class="addthis_button_twitter"></a></div>
<script type="text/javascript" src="//s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->
</div>
<?php if ($tags) { ?>
<div class="tags">
<b><?php echo $text_tags; ?></b>
<?php for ($i = 0; $i < count($tags); $i++) { ?>
<?php if ($i < (count($tags) - 1)) { ?>
<a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>,
<?php } else { ?>
<a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
</div>
<?php echo $content_bottom; ?>
</div>
</div>
<div class="col-md-12">
<table>
<tr><td colspan="2"><h5 style="color:#b70000;">PRODUCT SUMMARY</h5>
</td></tr>
<tr><td>
<?php if ($manufacturer) { ?>
<p><?php echo $text_manufacturer; ?></td><td><a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></p> </td></tr>
<?php } ?>
<tr><td><p><?php echo $text_model; ?></td><td><?php echo $model; ?></p></td></tr>
<?php if ($reward) { ?>
<tr><td><p><?php echo $text_reward; ?></td><td><?php echo $reward; ?>
</p></td></tr>
<?php } ?>
<p>
<tr><td> <?php echo $text_stock; ?></td>
<td><span class="availability"><?php echo $stock; ?></span></td>
</p> </tr>
</table>
</div>
<!--------------EDIT MODE----------------------->
<div class="col-lg-9 col-lg-9 col-lg-9">
<div class="tabs-group box">
<div id="tabs" class="htabs">
<ul class="breadcrumb" style="background: #64A2E2;">
<!--<ul class="nav nav-tabs box-heading clearfix">-->
<li class="listc"><a href="#tab-description"><?php echo $tab_description; ?></a></li>
<?php if ($attribute_groups) { ?>
<li class="listc"><a href="#tab-attribute"><?php echo $tab_attribute; ?></a></li>
<?php } ?>
<?php if ($review_status) { ?>
<li class="listc"><a href="#tab-review"><?php echo $tab_review; ?></a></li>
<?php } ?>
<?php if( $productConfig['enable_product_customtab'] && isset($productConfig['product_customtab_name'][$languageID]) ) { ?>
<li class="listc"><a href="#tab-customtab"><?php echo $productConfig['product_customtab_name'][$languageID]; ?></a></li>
<?php } ?>
<li></li>
</ul>
<div id="tab-description" class="tab-content"><?php echo $description; ?></div>
</div>
<?php if ($attribute_groups) { ?>
<div id="tab-attribute" class="tab-content no-margin table-responsive">
<table class="attribute table">
<?php foreach ($attribute_groups as $attribute_group) { ?>
<thead>
<tr>
<td colspan="2"><?php echo $attribute_group['name']; ?></td>
</tr>
</thead>
<tbody>
<?php foreach ($attribute_group['attribute'] as $attribute) { ?>
<tr>
<td><?php echo $attribute['name']; ?></td>
<td><?php echo $attribute['text']; ?></td>
</tr>
<?php } ?>
</tbody>
<?php } ?>
</table>
</div>
<?php } ?>
<?php if ($review_status) { ?>
<div id="tab-review" class="tab-content no-margin">
<div id="review"></div>
<h2 id="review-title"><?php echo $text_write; ?></h2>
<div class="form-group">
<label><?php echo $entry_name; ?></label>
<p><input type="text" name="name" value="" /></p>
</div>
<div class="form-group">
<label><?php echo $entry_review; ?></label>
<p><textarea name="text" cols="50" rows="8" class="form-control"></textarea></p>
</div>
<div class="form-group">
<p><span style="font-size: 11px;"><?php echo $text_note; ?></span></p>
<p> <strong><?php echo $entry_captcha; ?></strong> </p>
<p> <img src="index.php?route=product/product/captcha" alt="" id="captcha" /> </p>
<p> <input type="text" name="captcha" value="" /> </p>
</div>
<div class="buttons no-padding">
<div class="pull-right"><a id="button-review" class="button"><?php echo $button_continue; ?></a></div>
</div>
</div>
<?php } ?>
<?php if( $productConfig['enable_product_customtab'] && isset($productConfig['product_customtab_content'][$languageID]) ) { ?>
<div id="tab-customtab" class="tab-content custom-tab">
<div class="inner">
<?php echo html_entity_decode( $productConfig['product_customtab_content'][$languageID], ENT_QUOTES, 'UTF-8'); ?>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="col-lg-3 col-lg-3 col-lg-3">
<div id="rightcolumn">
<?php echo $column_right; ?>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-9 col-lg-9 col-lg-9">
<?php if ($products) { ?>
<?php
$cols = ($productConfig['product_related_column'] == 0)?4:$productConfig['product_related_column'];
$span = 12/$cols;
?>
<div class="box box-product product-related">
<div class="relbox-heading">
<span><?php echo $tab_related; ?> (<?php echo count($products); ?>)</span>
</div>
<div class="box-content">
<div class="box-products slide" id="productcarousel<?php echo $id;?>">
<div class="box-product">
<?php foreach ($products as $i => $product) { $i=$i+1; ?>
<?php if( $i%$cols == 1 && $cols > 1 ) { ?>
<div class="row">
<?php } ?>
<div class="col-lg-4<?php //echo $span;?> col-md-4<?php //echo $span;?> col-sm-<?php echo $small;?> col-xs-<?php echo $mini;?>">
<div class="product-block" style="height:438px;margin-top:12px;">
<?php if ($product['thumb']) { ?>
<div class="image">
<?php if( $product['special'] ) { ?>
<span class="product-label-special"><span><?php echo $this->language->get( 'text_sale' ); ?></span></span>
<?php } ?>
<a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" class="img-responsive" /></a>
<?php if( $categoryPzoom ) { $zimage = str_replace( "cache/","", preg_replace("#-\d+x\d+#", "", $product['thumb'] )); ?>
<a href="<?php echo $zimage;?>" class="info-view colorbox product-zoom" rel="colorbox" title="<?php echo $product['name']; ?>"><i class="fa fa-search-plus"></i></a>
<?php } ?>
<div class="img-overlay"></div>
</div>
<?php } ?>
<div class="product-meta">
<h3 class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h3>
<?php if ($product['rating']) { ?>
<div class="rating"><img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
<?php } ?>
<?php if ($product['price']) { ?>
<div class="price">
<?php if (!$product['special']) { ?>
<?php echo $product['price']; ?>
<?php } else { ?>
<span class="price-old"><?php echo $product['price']; ?></span>
<span class="price-new"><?php echo $product['special']; ?></span>
<?php } ?>
</div>
<?php } ?>
<div class="product-actions">
<span class="add-to-cart current">
<span class="action-wrapper">
<i class="fa fa-shopping-cart icons"></i>
<span class="action-name"><a href="#"
onclick="addToCart('<?php echo $product['product_id']; ?>');" >Add to cart</a></span>
</span>
</span>
<span class="add-to-favorites">
<span class="action-wrapper">
<i class="fa fa-heart-o icons"></i>
<span class="action-name"><a href="#"
onclick="addToWishList('<?php echo $product['product_id']; ?>');" >Add to wishlist</a></span>
</span>
</span>
<span class="add-to-compare">
<span class="action-wrapper">
<i class="fa fa-list icons"></i>
<span class="action-name"><a href="#"
onclick="addToCompare('<?php echo $product['product_id']; ?>');" >Add to Compare</a></span>
</span>
</span>
</div>
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/jquery.raty.min.js"></script>
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/jquery.tweet.js"></script>
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/tinynav.min.js"></script>
<!-- Scroll Bar -->
<script src="catalog/view/theme/lexus_megashop/javascript/perfect-scrollbar.min.js"></script>
<!-- Cloud Zoom -->
<script src="catalog/view/theme/lexus_megashop/javascript/zoomsl-3.0.min.js"></script>
<!-- FancyBox -->
<script src="catalog/view/theme/lexus_megashop/javascript/jquery.fancybox.pack.js"></script>
<!-- jQuery REVOLUTION Slider -->
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/jquery.themepunch.revolution.min.js"></script>
<!-- FlexSlider -->
<script defer src="catalog/view/theme/lexus_megashop/javascript/flexslider.min.js"></script>
<!-- IOS Slider -->
<script src = "catalog/view/theme/lexus_megashop/javascript/jquery.iosslider.min.js"></script>
<!-- noUi Slider -->
<script src="catalog/view/theme/lexus_megashop/javascript/jquery.nouislider.min.js"></script>
<!-- Owl Carousel -->
<script src="catalog/view/theme/lexus_megashop/javascript/owl.carousel.min.js"></script>
<!-- Cloud Zoom -->
<script src="catalog/view/theme/lexus_megashop/javascript/zoomsl-3.0.min.js"></script>
<!-- SelectJS -->
<script src="catalog/view/theme/lexus_megashop/javascript/chosen.jquery.min.js" type="text/javascript"></script>
<!-- Main JS -->
<script defer src="catalog/view/theme/lexus_megashop/javascript/bootstrap.min.js"></script>
<script src="catalog/view/theme/lexus_megashop/javascript/main-script.js"></script>
<style>
.product-actions{
color:#fff;
display:table;
//width:100%;
overflow:hidden;
margin-left: -10px;
width: 243px;
}
span.product-action{
color:#fff!important;
}
span.action-wrapper{
position:relative;
display:block;
}
.product-actions>span{
position:relative;
border-left:1px solid #e7f9fc;
cursor:pointer;
width:40px;
height:40px;
padding:9px 0 0 8px;
display:table-cell;
transition:all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
}
.product-actions>span.current{
width:auto;
}
.product-actions>span.current span.action-name{
left:30px;
top:1px;
width:220px;
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
-ms-opacity:1;
-o-opacity:1;
white-space:nowrap;
}
span.add-to-cart{
background:#E65B5B;
}
span.add-to-cart:hover{
background:#d35400;
}
span.add-to-cart .icons{
margin-right:8px;
}
span.add-to-favorites{
background:#e74c3c;
}
span.add-to-favorites:hover{
background:#c0392b;
}
span.add-to-compare{
background:#3498db;
}
span.add-to-compare:hover{
background:#2980b9;
}
span.action-name{
position:absolute;
left:85px;
text-transform:uppercase;
opacity:0;
-webkit-opacity:0;
-moz-opacity:0;
-ms-opacity:0;
-o-opacity:0;
transition:all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
}
.product-info p{
font-size:14px;
}
.product.grid-view{
background:#f7f7f7;
overflow:hidden;
position:relative;
}
.product.grid-view .product-actions{
position:absolute;
bottom:0;
left:0;
right:0;
}
.product.grid-view .product-actions.full-width span.action-name{
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
-ms-opacity:1;
-o-opacity:1;
left:30px;
}
.grid-view .product-image{
padding:0;
}
.product.grid-view .product-actions>span{
width:33.3333%;
}
.rating{
display:inline-block;
}
</style>
</div>
</div>
</div>
<?php if( $cols > 1 && ($i%$cols == 0 || $i==count($products)) ) { ?>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Cloud Zoom -->
<script src="catalog/view/theme/lexus_megashop/javascript/zoomsl-3.0.min.js"></script>
<!-------------EDIT MODE END-------------------->
<?php if( $productConfig['product_enablezoom'] ) { ?>
<script type="text/javascript" src=" catalog/view/javascript/jquery/elevatezoom/elevatezoom-min.js"></script>
<script type="text/javascript">
<?php if( $productConfig['product_zoomgallery'] == 'slider' ) { ?>
$("#image").elevateZoom({gallery:'image-additional', cursor: 'pointer', galleryActiveClass: 'active'});
<?php } else { ?>
var zoomCollection = '<?php echo $productConfig["product_zoomgallery"]=="basic"?".product-image-zoom":"#image";?>';
$( zoomCollection ).elevateZoom({
<?php if( $productConfig['product_zoommode'] != 'basic' ) { ?>
zoomType : "<?php echo $productConfig['product_zoommode'];?>",
<?php } ?>
lensShape : "<?php echo $productConfig['product_zoomlensshape'];?>",
lensSize : <?php echo (int)$productConfig['product_zoomlenssize'];?>,
});
<?php } ?>
</script>
<?php } ?>
<script type="text/javascript">
$('#product<?php echo $id;?>').carousel({interval:<?php echo ( $auto_play_mode?$interval:'false') ;?>,auto:<?php echo $auto_play;?>,pause:'hover'});
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('.colorbox').colorbox({
overlayClose: true,
opacity: 0.5,
rel: "colorbox"
});
});
//-->
</script>
<script type="text/javascript">
<!--
$('select[name="profile_id"], input[name="quantity"]').change(function(){
$.ajax({
url: 'index.php?route=product/product/getRecurringDescription',
type: 'post',
data: $('input[name="product_id"], input[name="quantity"], select[name="profile_id"]'),
dataType: 'json',
beforeSend: function() {
$('#profile-description').html('');
},
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['success']) {
$('#profile-description').html(json['success']);
}
}
});
});
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
}
}
if (json['error']['profile']) {
$('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
}
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
//-->
</script>
<?php if ($options) { ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/ajaxupload.js"></script>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'file') { ?>
<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
action: 'index.php?route=product/product/upload',
name: 'file',
autoSubmit: true,
responseType: 'json',
onSubmit: function(file, extension) {
$('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/loading.gif" class="loading" style="padding-left: 5px;" />');
$('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', true);
},
onComplete: function(file, json) {
$('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', false);
$('.error').remove();
if (json['success']) {
alert(json['success']);
$('input[name=\'option[<?php echo $option['product_option_id']; ?>]\']').attr('value', json['file']);
}
if (json['error']) {
$('#option-<?php echo $option['product_option_id']; ?>').after('<span class="error">' + json['error'] + '</span>');
}
$('.loading').remove();
}
});
//-->
</script>
<?php } ?>
<?php } ?>
<?php } ?>
<script type="text/javascript">
<!--
$('#review .pagination a').live('click', function() {
$('#review').fadeOut('slow');
$('#review').load(this.href);
$('#review').fadeIn('slow');
return false;
});
$('#review').load('index.php?route=product/product/review&product_id=<?php echo $product_id; ?>');
$('#button-review').bind('click', function() {
$.ajax({
url: 'index.php?route=product/product/write&product_id=<?php echo $product_id; ?>',
type: 'post',
dataType: 'json',
data: 'name=' + encodeURIComponent($('input[name=\'name\']').val()) + '&text=' + encodeURIComponent($('textarea[name=\'text\']').val()) + '&rating=' + encodeURIComponent($('input[name=\'rating\']:checked').val() ? $('input[name=\'rating\']:checked').val() : '') + '&captcha=' + encodeURIComponent($('input[name=\'captcha\']').val()),
beforeSend: function() {
$('.success, .warning').remove();
$('#button-review').attr('disabled', true);
$('#review-title').after('<div class="attention"><img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/loading.gif" alt="" /> <?php echo $text_wait; ?></div>');
},
complete: function() {
$('#button-review').attr('disabled', false);
$('.attention').remove();
},
success: function(data) {
if (data['error']) {
$('#review-title').after('<div class="warning">' + data['error'] + '</div>');
}
if (data['success']) {
$('#review-title').after('<div class="success">' + data['success'] + '</div>');
$('input[name=\'name\']').val('');
$('textarea[name=\'text\']').val('');
$('input[name=\'rating\']:checked').attr('checked', '');
$('input[name=\'captcha\']').val('');
}
}
});
});
//-->
</script>
<script type="text/javascript">
<!--
$('#tabs a').tabs();
//-->
</script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
if ($.browser.msie && $.browser.version == 6) {
$('.date, .datetime, .time').bgIframe();
}
$('.date').datepicker({dateFormat: 'yy-mm-dd'});
$('.datetime').datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'h:m'
});
$('.time').timepicker({timeFormat: 'h:m'});
});
//-->
</script>
</section>
</div>
</div>
<?php if( $SPAN[2] ): ?>
<aside class="col-lg-<?php echo $SPAN[2];?> col-md-<?php echo $SPAN[2];?> col-sm-12 col-xs-12">
<?php //echo $column_right; ?>
</aside>
<?php endif; ?>
<?php echo $footer; ?>
to display product image and zoom for seller products on home page and category page
template/pavquickview/product.tpl
same way edit in this page for image src
template/product/product.tpl
<?php require( DIR_TEMPLATE.$this->config->get('config_template')."/template/common/config.tpl" );
$themeConfig = $this->config->get('themecontrol');
$productConfig = array(
'product_enablezoom' => 1,
'product_zoommode' => 'basic',
'product_zoomeasing' => 1,
'product_zoomlensshape' => "round",
'product_zoomlenssize' => "150",
'product_zoomgallery' => 0,
'enable_product_customtab' => 0,
'product_customtab_name' => '',
'product_customtab_content' => '',
'product_related_column' => 0,
);
$categoryConfig = array(
'category_pzoom' => 1,
);
$categoryPzoom = $categoryConfig['category_pzoom'];
$productConfig = array_merge( $productConfig, $themeConfig );
$languageID = $this->config->get('config_language_id');
?>
<?php echo $header; ?>
<?php require( DIR_TEMPLATE.$this->config->get('config_template')."/template/common/breadcrumb.tpl" ); ?>
<div class="container">
<div class="row">
<?php if( $SPAN[0] ): ?>
<aside class="col-lg-<?php echo $SPAN[0];?> col-md-<?php echo $SPAN[0];?> col-sm-12 col-xs-12">
<?php echo $column_left; ?>
</aside>
<?php endif; ?>
<section class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="content-man" class="product-detail">
<?php echo $content_top; ?>
<div class="product-info">
<div class="row">
<div id="carousel-inner" class="col-lg-2 col-sm-2 col-xs-12">
<?php
if( $productConfig['product_zoomgallery'] == 'slider' && $thumb ) {
$eimages = array( 0=> array( 'popup'=>$popup,'thumb'=> $thumb ) );
$images = array_merge( $eimages, $images );
}
$icols = 3; $i= 0;
foreach ($images as $image) { ?>
<?php if( (++$i)%$icols == 1 ) { ?>
<div class="item">
<?php } ?>
<?php
$p=str_replace("image/cache/sellers/","image/sellers/",$image['thumb']);
$pattern = '/sellers/';
if (preg_match($pattern, $image['thumb']))
{
$k=str_replace("-500x500","",$p);
$imagepath=$k;
}
else
{
$imagepath=$image['thumb'];
}
?>
<style>
#cboxLoadedContent{
width:500px;
height:500px;
}
</style>
<a href="<?php echo $imagepath; ?><?php //echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" data-zoom-image="<?php echo $imagepath; ?><?php //echo $image['popup']; ?>" data-image="<?php echo $imagepath; ?><?php //echo $image['popup']; ?>" id="colorbox-cboxElement">
<?php
$p=str_replace("image/cache/sellers/","image/sellers/",$image['thumb']);
$pattern = '/sellers/';
if (preg_match($pattern, $image['thumb']))
{
$k=str_replace("-500x500","",$p);
$imagepath=$k;
}
else
{
$imagepath=$image['thumb'];
}
?>
<img src="<?php echo $imagepath; ?>" style="max-width:<?php echo $this->config->get('config_image_additional_width');?>px" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" data-zoom-image="<?php echo $imagepath; ?><?php //echo $image['popup']; ?>" class="product-image-zoom img-responsive" />
</a>
<?php if( $i%$icols == 0 || $i==count($images) ) { ?>
</div>
<?php } ?>
<?php } ?>
</div>
<?php if ($thumb || $images) { ?>
<div class="col-lg-4 col-sm-4 col-xs-12 image-container">
<?php if( $special ) { ?>
<!--<span class="product-label-special"><span><?php //echo $this->language->get( 'text_sale' ); ?></span></span>-->
<?php } ?>
<?php if ($thumb) { ?>
<div class="image">
<a href="<?php echo $imagepath; ?><?php //echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox"> <?php
$p=str_replace("image/cache/sellers/","image/sellers/",$thumb);
$pattern = '/sellers/';
if (preg_match($pattern, $thumb))
{
$k=str_replace("-500x500","",$p);
$imagepath=$k;
}
else
{
$imagepath=$thumb;
}
?>
<img src="<?php echo $imagepath; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" data-zoom-image="<?php echo $imagepath; ?><?php //echo $popup; ?>" class="product-image-zoom img-responsive"/>
</a>
</div>
<?php } ?>
<!---------------EDIT MODE-------------------->
<!---------------END EDIT MODE---------------->
<?php if ($images) { ?>
<div class="image-additional slide carousel" id="image-additional">
<!--<div id="carousel-inner">
<?php
if( $productConfig['product_zoomgallery'] == 'slider' && $thumb ) {
$eimages = array( 0=> array( 'popup'=>$popup,'thumb'=> $thumb ) );
$images = array_merge( $eimages, $images );
}
$icols = 3; $i= 0;
foreach ($images as $image) { ?>
<?php if( (++$i)%$icols == 1 ) { ?>
<div class="item">
<?php } ?>
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" data-zoom-image="<?php echo $image['popup']; ?>" data-image="<?php echo $image['popup']; ?>" id="colorbox-cboxElement">
<img src="<?php echo $image['thumb']; ?>" style="max-width:<?php echo $this->config->get('config_image_additional_width');?>px" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" data-zoom-image="<?php echo $image['popup']; ?>" class="product-image-zoom img-responsive" />
</a>
<?php if( $i%$icols == 0 || $i==count($images) ) { ?>
</div>
<?php } ?>
<?php } ?>
</div>-->
<!--<div class="carousel-control left fa fa-angle-left" href="#image-additional" data-slide="prev"></div>
<div class="carousel-control right fa fa-angle-right" href="#image-additional" data-slide="next"></div>-->
</div>
<script type="text/javascript">
$('#image-additional .item:first').addClass('active');
$('#image-additional').carousel({interval:false})
</script>
<?php } ?>
</div>
<?php } ?>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="description" id="description">
<?php if ($profiles): ?>
<div class="option form-group">
<h2><span class="required">*</span><?php echo $text_payment_profile ?></h2>
<select name="profile_id" class="form-control">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($profiles as $profile): ?>
<option value="<?php echo $profile['profile_id'] ?>"><?php echo $profile['name'] ?></option>
<?php endforeach; ?>
</select>
<span id="profile-description"></span>
</div>
<?php endif; ?>
<?php if ($options) { ?>
<div class="options">
<h2><?php echo $text_option; ?></h2>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option form-group">
<?php if ($option['required']) { ?>
<p><span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b></p>
<select name="option[<?php echo $option['product_option_id']; ?>]">
<option value=""><?php echo $text_select; ?></option>
<?php foreach ($option['option_value'] as $option_value) { ?>
<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</option>
<?php } ?>
</select>
</div>
<?php } ?>
<?php if ($option['type'] == 'radio') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option-size">
<?php if ($option['required']) { ?>
<p><span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b></p>
<?php foreach ($option['option_value'] as $option_value) { ?>
<div class="radio">
<label for="option-value-<?php echo $option_value['product_option_value_id']; ?>">
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
<?php echo $option_value['name']; ?>
<?php if ($option_value['price']) { ?>
(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
<?php } ?>
</label>
</div>
<?php } ?>
</div>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
<?php if ($price) { ?>
<div class="price">
<div class="price-gruop">
<span class="text-price"><?php echo $text_price; ?></span>
<?php if (!$special) { ?>
<?php echo $price; ?>
<?php } else { ?>
<span class="price-old"><?php echo $price; ?></span>
<span class="price-new"><?php echo $special; ?></span>
<?php } ?>
</div>
<div class="other-price">
<?php if ($tax) { ?>
<span class="price-tax"><?php echo $text_tax; ?> <?php echo $tax; ?></span><br/>
<?php } ?>
<?php if ($points) { ?>
<span class="reward"><small><?php echo $text_points; ?> <?php echo $points; ?></small></span>
<?php } ?>
</div>
<?php if ($discounts) { ?>
<div class="discount">
<ul>
<?php foreach ($discounts as $discount) { ?>
<li><?php echo sprintf($text_discount, $discount['quantity'], $discount['price']); ?></li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="product-extra" id="qun-div">
<div class="quantity-adder pull-left">
<div class="quantity-number pull-left">
<table border="1" style="width: 100%; margin-left: 0px;"><tr><td width="170"><span><?php echo $text_qty; ?></span></td>
<td width="300">
</div>
<div class="quantity-wrapper pull-left">
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" style="width: 50%;"/>
<span class="add-up add-action fa fa-plus" style="margin: -37px 0px 0px 28px;"></span>
<span class="add-down add-action fa fa-minus" style="margin: 0px 0px 0px 28px;"></span>
</div>
</div>
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
<div class="cart pull-left">
<?php /* <input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" /> */ ?>
<button id="button-cart" class="btn btn-cart">
<span class="fa fa-shopping-cart add-to-icon"></span>
<span><?php echo $button_cart; ?></span>
</button>
</div></td></tr></table>
<!-- <span> <?php //echo $text_or; ?> </span> -->
</div>
<?php if ($minimum > 1) { ?>
<div class="minimum"><small><?php echo $text_minimum; ?></small></div>
<?php } ?>
<?php if ($review_status) { ?>
<div class="review">
<div><img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/stars-<?php echo $rating; ?>.png" alt="<?php echo $reviews; ?>" /> <a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $reviews; ?></a> | <a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $text_write; ?></a></div>
</div>
<?php } ?>
<div class="share">
<!-- AddThis Button BEGIN -->
<div class="addthis_default_style"><a class="addthis_button_compact"><?php echo $text_share; ?></a> <a class="addthis_button_email"></a><a class="addthis_button_print"></a> <a class="addthis_button_facebook"></a> <a class="addthis_button_twitter"></a></div>
<script type="text/javascript" src="//s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->
</div>
<?php if ($tags) { ?>
<div class="tags">
<b><?php echo $text_tags; ?></b>
<?php for ($i = 0; $i < count($tags); $i++) { ?>
<?php if ($i < (count($tags) - 1)) { ?>
<a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>,
<?php } else { ?>
<a href="<?php echo $tags[$i]['href']; ?>"><?php echo $tags[$i]['tag']; ?></a>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
</div>
<?php echo $content_bottom; ?>
</div>
</div>
<div class="col-md-12">
<table>
<tr><td colspan="2"><h5 style="color:#b70000;">PRODUCT SUMMARY</h5>
</td></tr>
<tr><td>
<?php if ($manufacturer) { ?>
<p><?php echo $text_manufacturer; ?></td><td><a href="<?php echo $manufacturers; ?>"><?php echo $manufacturer; ?></a></p> </td></tr>
<?php } ?>
<tr><td><p><?php echo $text_model; ?></td><td><?php echo $model; ?></p></td></tr>
<?php if ($reward) { ?>
<tr><td><p><?php echo $text_reward; ?></td><td><?php echo $reward; ?>
</p></td></tr>
<?php } ?>
<p>
<tr><td> <?php echo $text_stock; ?></td>
<td><span class="availability"><?php echo $stock; ?></span></td>
</p> </tr>
</table>
</div>
<!--------------EDIT MODE----------------------->
<div class="col-lg-9 col-lg-9 col-lg-9">
<div class="tabs-group box">
<div id="tabs" class="htabs">
<ul class="breadcrumb" style="background: #64A2E2;">
<!--<ul class="nav nav-tabs box-heading clearfix">-->
<li class="listc"><a href="#tab-description"><?php echo $tab_description; ?></a></li>
<?php if ($attribute_groups) { ?>
<li class="listc"><a href="#tab-attribute"><?php echo $tab_attribute; ?></a></li>
<?php } ?>
<?php if ($review_status) { ?>
<li class="listc"><a href="#tab-review"><?php echo $tab_review; ?></a></li>
<?php } ?>
<?php if( $productConfig['enable_product_customtab'] && isset($productConfig['product_customtab_name'][$languageID]) ) { ?>
<li class="listc"><a href="#tab-customtab"><?php echo $productConfig['product_customtab_name'][$languageID]; ?></a></li>
<?php } ?>
<li></li>
</ul>
<div id="tab-description" class="tab-content"><?php echo $description; ?></div>
</div>
<?php if ($attribute_groups) { ?>
<div id="tab-attribute" class="tab-content no-margin table-responsive">
<table class="attribute table">
<?php foreach ($attribute_groups as $attribute_group) { ?>
<thead>
<tr>
<td colspan="2"><?php echo $attribute_group['name']; ?></td>
</tr>
</thead>
<tbody>
<?php foreach ($attribute_group['attribute'] as $attribute) { ?>
<tr>
<td><?php echo $attribute['name']; ?></td>
<td><?php echo $attribute['text']; ?></td>
</tr>
<?php } ?>
</tbody>
<?php } ?>
</table>
</div>
<?php } ?>
<?php if ($review_status) { ?>
<div id="tab-review" class="tab-content no-margin">
<div id="review"></div>
<h2 id="review-title"><?php echo $text_write; ?></h2>
<div class="form-group">
<label><?php echo $entry_name; ?></label>
<p><input type="text" name="name" value="" /></p>
</div>
<div class="form-group">
<label><?php echo $entry_review; ?></label>
<p><textarea name="text" cols="50" rows="8" class="form-control"></textarea></p>
</div>
<div class="form-group">
<p><span style="font-size: 11px;"><?php echo $text_note; ?></span></p>
<p> <strong><?php echo $entry_captcha; ?></strong> </p>
<p> <img src="index.php?route=product/product/captcha" alt="" id="captcha" /> </p>
<p> <input type="text" name="captcha" value="" /> </p>
</div>
<div class="buttons no-padding">
<div class="pull-right"><a id="button-review" class="button"><?php echo $button_continue; ?></a></div>
</div>
</div>
<?php } ?>
<?php if( $productConfig['enable_product_customtab'] && isset($productConfig['product_customtab_content'][$languageID]) ) { ?>
<div id="tab-customtab" class="tab-content custom-tab">
<div class="inner">
<?php echo html_entity_decode( $productConfig['product_customtab_content'][$languageID], ENT_QUOTES, 'UTF-8'); ?>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="col-lg-3 col-lg-3 col-lg-3">
<div id="rightcolumn">
<?php echo $column_right; ?>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-9 col-lg-9 col-lg-9">
<?php if ($products) { ?>
<?php
$cols = ($productConfig['product_related_column'] == 0)?4:$productConfig['product_related_column'];
$span = 12/$cols;
?>
<div class="box box-product product-related">
<div class="relbox-heading">
<span><?php echo $tab_related; ?> (<?php echo count($products); ?>)</span>
</div>
<div class="box-content">
<div class="box-products slide" id="productcarousel<?php echo $id;?>">
<div class="box-product">
<?php foreach ($products as $i => $product) { $i=$i+1; ?>
<?php if( $i%$cols == 1 && $cols > 1 ) { ?>
<div class="row">
<?php } ?>
<div class="col-lg-4<?php //echo $span;?> col-md-4<?php //echo $span;?> col-sm-<?php echo $small;?> col-xs-<?php echo $mini;?>">
<div class="product-block" style="height:438px;margin-top:12px;">
<?php if ($product['thumb']) { ?>
<div class="image">
<?php if( $product['special'] ) { ?>
<span class="product-label-special"><span><?php echo $this->language->get( 'text_sale' ); ?></span></span>
<?php } ?>
<a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" class="img-responsive" /></a>
<?php if( $categoryPzoom ) { $zimage = str_replace( "cache/","", preg_replace("#-\d+x\d+#", "", $product['thumb'] )); ?>
<a href="<?php echo $zimage;?>" class="info-view colorbox product-zoom" rel="colorbox" title="<?php echo $product['name']; ?>"><i class="fa fa-search-plus"></i></a>
<?php } ?>
<div class="img-overlay"></div>
</div>
<?php } ?>
<div class="product-meta">
<h3 class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h3>
<?php if ($product['rating']) { ?>
<div class="rating"><img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
<?php } ?>
<?php if ($product['price']) { ?>
<div class="price">
<?php if (!$product['special']) { ?>
<?php echo $product['price']; ?>
<?php } else { ?>
<span class="price-old"><?php echo $product['price']; ?></span>
<span class="price-new"><?php echo $product['special']; ?></span>
<?php } ?>
</div>
<?php } ?>
<div class="product-actions">
<span class="add-to-cart current">
<span class="action-wrapper">
<i class="fa fa-shopping-cart icons"></i>
<span class="action-name"><a href="#"
onclick="addToCart('<?php echo $product['product_id']; ?>');" >Add to cart</a></span>
</span>
</span>
<span class="add-to-favorites">
<span class="action-wrapper">
<i class="fa fa-heart-o icons"></i>
<span class="action-name"><a href="#"
onclick="addToWishList('<?php echo $product['product_id']; ?>');" >Add to wishlist</a></span>
</span>
</span>
<span class="add-to-compare">
<span class="action-wrapper">
<i class="fa fa-list icons"></i>
<span class="action-name"><a href="#"
onclick="addToCompare('<?php echo $product['product_id']; ?>');" >Add to Compare</a></span>
</span>
</span>
</div>
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/jquery.raty.min.js"></script>
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/jquery.tweet.js"></script>
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/tinynav.min.js"></script>
<!-- Scroll Bar -->
<script src="catalog/view/theme/lexus_megashop/javascript/perfect-scrollbar.min.js"></script>
<!-- Cloud Zoom -->
<script src="catalog/view/theme/lexus_megashop/javascript/zoomsl-3.0.min.js"></script>
<!-- FancyBox -->
<script src="catalog/view/theme/lexus_megashop/javascript/jquery.fancybox.pack.js"></script>
<!-- jQuery REVOLUTION Slider -->
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="catalog/view/theme/lexus_megashop/javascript/jquery.themepunch.revolution.min.js"></script>
<!-- FlexSlider -->
<script defer src="catalog/view/theme/lexus_megashop/javascript/flexslider.min.js"></script>
<!-- IOS Slider -->
<script src = "catalog/view/theme/lexus_megashop/javascript/jquery.iosslider.min.js"></script>
<!-- noUi Slider -->
<script src="catalog/view/theme/lexus_megashop/javascript/jquery.nouislider.min.js"></script>
<!-- Owl Carousel -->
<script src="catalog/view/theme/lexus_megashop/javascript/owl.carousel.min.js"></script>
<!-- Cloud Zoom -->
<script src="catalog/view/theme/lexus_megashop/javascript/zoomsl-3.0.min.js"></script>
<!-- SelectJS -->
<script src="catalog/view/theme/lexus_megashop/javascript/chosen.jquery.min.js" type="text/javascript"></script>
<!-- Main JS -->
<script defer src="catalog/view/theme/lexus_megashop/javascript/bootstrap.min.js"></script>
<script src="catalog/view/theme/lexus_megashop/javascript/main-script.js"></script>
<style>
.product-actions{
color:#fff;
display:table;
//width:100%;
overflow:hidden;
margin-left: -10px;
width: 243px;
}
span.product-action{
color:#fff!important;
}
span.action-wrapper{
position:relative;
display:block;
}
.product-actions>span{
position:relative;
border-left:1px solid #e7f9fc;
cursor:pointer;
width:40px;
height:40px;
padding:9px 0 0 8px;
display:table-cell;
transition:all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
}
.product-actions>span.current{
width:auto;
}
.product-actions>span.current span.action-name{
left:30px;
top:1px;
width:220px;
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
-ms-opacity:1;
-o-opacity:1;
white-space:nowrap;
}
span.add-to-cart{
background:#E65B5B;
}
span.add-to-cart:hover{
background:#d35400;
}
span.add-to-cart .icons{
margin-right:8px;
}
span.add-to-favorites{
background:#e74c3c;
}
span.add-to-favorites:hover{
background:#c0392b;
}
span.add-to-compare{
background:#3498db;
}
span.add-to-compare:hover{
background:#2980b9;
}
span.action-name{
position:absolute;
left:85px;
text-transform:uppercase;
opacity:0;
-webkit-opacity:0;
-moz-opacity:0;
-ms-opacity:0;
-o-opacity:0;
transition:all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
}
.product-info p{
font-size:14px;
}
.product.grid-view{
background:#f7f7f7;
overflow:hidden;
position:relative;
}
.product.grid-view .product-actions{
position:absolute;
bottom:0;
left:0;
right:0;
}
.product.grid-view .product-actions.full-width span.action-name{
opacity:1;
-webkit-opacity:1;
-moz-opacity:1;
-ms-opacity:1;
-o-opacity:1;
left:30px;
}
.grid-view .product-image{
padding:0;
}
.product.grid-view .product-actions>span{
width:33.3333%;
}
.rating{
display:inline-block;
}
</style>
</div>
</div>
</div>
<?php if( $cols > 1 && ($i%$cols == 0 || $i==count($products)) ) { ?>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
<?php } ?>
</div>
<!-- Cloud Zoom -->
<script src="catalog/view/theme/lexus_megashop/javascript/zoomsl-3.0.min.js"></script>
<!-------------EDIT MODE END-------------------->
<?php if( $productConfig['product_enablezoom'] ) { ?>
<script type="text/javascript" src=" catalog/view/javascript/jquery/elevatezoom/elevatezoom-min.js"></script>
<script type="text/javascript">
<?php if( $productConfig['product_zoomgallery'] == 'slider' ) { ?>
$("#image").elevateZoom({gallery:'image-additional', cursor: 'pointer', galleryActiveClass: 'active'});
<?php } else { ?>
var zoomCollection = '<?php echo $productConfig["product_zoomgallery"]=="basic"?".product-image-zoom":"#image";?>';
$( zoomCollection ).elevateZoom({
<?php if( $productConfig['product_zoommode'] != 'basic' ) { ?>
zoomType : "<?php echo $productConfig['product_zoommode'];?>",
<?php } ?>
lensShape : "<?php echo $productConfig['product_zoomlensshape'];?>",
lensSize : <?php echo (int)$productConfig['product_zoomlenssize'];?>,
});
<?php } ?>
</script>
<?php } ?>
<script type="text/javascript">
$('#product<?php echo $id;?>').carousel({interval:<?php echo ( $auto_play_mode?$interval:'false') ;?>,auto:<?php echo $auto_play;?>,pause:'hover'});
</script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('.colorbox').colorbox({
overlayClose: true,
opacity: 0.5,
rel: "colorbox"
});
});
//-->
</script>
<script type="text/javascript">
<!--
$('select[name="profile_id"], input[name="quantity"]').change(function(){
$.ajax({
url: 'index.php?route=product/product/getRecurringDescription',
type: 'post',
data: $('input[name="product_id"], input[name="quantity"], select[name="profile_id"]'),
dataType: 'json',
beforeSend: function() {
$('#profile-description').html('');
},
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['success']) {
$('#profile-description').html(json['success']);
}
}
});
});
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
}
}
if (json['error']['profile']) {
$('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
}
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
//-->
</script>
<?php if ($options) { ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/ajaxupload.js"></script>
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'file') { ?>
<script type="text/javascript"><!--
new AjaxUpload('#button-option-<?php echo $option['product_option_id']; ?>', {
action: 'index.php?route=product/product/upload',
name: 'file',
autoSubmit: true,
responseType: 'json',
onSubmit: function(file, extension) {
$('#button-option-<?php echo $option['product_option_id']; ?>').after('<img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/loading.gif" class="loading" style="padding-left: 5px;" />');
$('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', true);
},
onComplete: function(file, json) {
$('#button-option-<?php echo $option['product_option_id']; ?>').attr('disabled', false);
$('.error').remove();
if (json['success']) {
alert(json['success']);
$('input[name=\'option[<?php echo $option['product_option_id']; ?>]\']').attr('value', json['file']);
}
if (json['error']) {
$('#option-<?php echo $option['product_option_id']; ?>').after('<span class="error">' + json['error'] + '</span>');
}
$('.loading').remove();
}
});
//-->
</script>
<?php } ?>
<?php } ?>
<?php } ?>
<script type="text/javascript">
<!--
$('#review .pagination a').live('click', function() {
$('#review').fadeOut('slow');
$('#review').load(this.href);
$('#review').fadeIn('slow');
return false;
});
$('#review').load('index.php?route=product/product/review&product_id=<?php echo $product_id; ?>');
$('#button-review').bind('click', function() {
$.ajax({
url: 'index.php?route=product/product/write&product_id=<?php echo $product_id; ?>',
type: 'post',
dataType: 'json',
data: 'name=' + encodeURIComponent($('input[name=\'name\']').val()) + '&text=' + encodeURIComponent($('textarea[name=\'text\']').val()) + '&rating=' + encodeURIComponent($('input[name=\'rating\']:checked').val() ? $('input[name=\'rating\']:checked').val() : '') + '&captcha=' + encodeURIComponent($('input[name=\'captcha\']').val()),
beforeSend: function() {
$('.success, .warning').remove();
$('#button-review').attr('disabled', true);
$('#review-title').after('<div class="attention"><img src="catalog/view/theme/<?php echo $this->config->get('config_template');?>/image/loading.gif" alt="" /> <?php echo $text_wait; ?></div>');
},
complete: function() {
$('#button-review').attr('disabled', false);
$('.attention').remove();
},
success: function(data) {
if (data['error']) {
$('#review-title').after('<div class="warning">' + data['error'] + '</div>');
}
if (data['success']) {
$('#review-title').after('<div class="success">' + data['success'] + '</div>');
$('input[name=\'name\']').val('');
$('textarea[name=\'text\']').val('');
$('input[name=\'rating\']:checked').attr('checked', '');
$('input[name=\'captcha\']').val('');
}
}
});
});
//-->
</script>
<script type="text/javascript">
<!--
$('#tabs a').tabs();
//-->
</script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
if ($.browser.msie && $.browser.version == 6) {
$('.date, .datetime, .time').bgIframe();
}
$('.date').datepicker({dateFormat: 'yy-mm-dd'});
$('.datetime').datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: 'h:m'
});
$('.time').timepicker({timeFormat: 'h:m'});
});
//-->
</script>
</section>
</div>
</div>
<?php if( $SPAN[2] ): ?>
<aside class="col-lg-<?php echo $SPAN[2];?> col-md-<?php echo $SPAN[2];?> col-sm-12 col-xs-12">
<?php //echo $column_right; ?>
</aside>
<?php endif; ?>
<?php echo $footer; ?>
to display product image and zoom for seller products on home page and category page
template/pavquickview/product.tpl
same way edit in this page for image src
No comments:
Post a Comment