Monday, 1 June 2015

to display product image and zoom for seller products on product page,home and category page

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>&nbsp;&nbsp;<?php //echo $text_or; ?>&nbsp;&nbsp;</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; ?>" />&nbsp;&nbsp;<a onclick="$('a[href=\'#tab-review\']').trigger('click');"><?php echo $reviews; ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<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