Greeting,
As per title, does anyone know how can I disable this feature? I have tried below two methods, Neither one works.
Method 1 in /catalog/controller/product/product.php find:
$this->data['popup'] = $this->model_tool_image->resize($image, $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
Change to:
$this->data['popup'] = 'image/' . $image;
in the same file find:
'popup' => $this->model_tool_image->resize($result['image'] , $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),
Change to:
'popup' => 'image/' . $result['image'] ,
Method 2 in catalog/view/theme/default/template/product/product.tpl find:
<div class="image"> <img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></div>
Change to:
<div class="image"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /> </div>
After try lots of options, the best and easiest for us has been add those lines in stylesheet.css:
.zoomLens {
display: none !important;
}
.zoomContainer {
display: none !important;
}
Thanks!!!
The right solution should be in catalog/view/theme/default/template/product/product.tpl find
<script type="text/javascript"><!--
$(document).ready(function() {
$('.colorbox').colorbox({
overlayClose: true,
opacity: 0.5,
rel: "colorbox"
});
});
//--></script>
(should start at line 335) and change it to:
<script type="text/javascript"><!--
/*$(document).ready(function() {
$('.colorbox').colorbox({
overlayClose: true,
opacity: 0.5,
rel: "colorbox"
});
});*/
//--></script>
Thus simply comment whole colorbox feature initialization...
Related
I have an Opencart store with multiple languages. Banners can contain only one picture (irrespective of the language chosen), i designed banner for each language.
Opencart v 2.3.0.2
catalog/./view/theme/default/template/extension/module/banner.tpl
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
You'd have to manage the banner image files manually (with FTP) but an approach like this could work:
For each banner you want to display, upload it as usual in admin.
In the directory where the image is saved, create subdirectories corresponding to the languages you support (for example, "en-gb").
This code assumes banners are under catalog/demo/banners. So it just adds the path "language_name" under that.
Modify catalog/./view/theme/default/template/extension/module/banner.tpl to look first in the language specific subdirectory in the block where it displays the banner. In 2.3.0.2, this would look something like:
<?php
foreach ($banners as $banner) {
$lang = $this->registry->get('language');
if (file_exists($lang . "/" . $banner['image'])) {
$banner['image'] = str_replace("catalog/demo/banners", "catalog/demo/banners/$lang", $banner['image']);
}
}
?>
<div id="banner<?php echo $module; ?>" class="owl-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
Kindly tell me about auto run carousel module from carousel.tpl? i am very new in opencart kindly help me. I have edited with JS.
<div id="carousel-<?php echo $module; ?>" class="banners-slider-carousel">
<?php /*?><div class="box-heading"><span class="heading_inner">Our Brands</span></div><?php */?>
<div class="customNavigation">
<a class="btn prev"> </a>
<a class="btn next"> </a>
</div>
<div class="product-carousel" id="module-<?php echo $module; ?>-carousel">
<?php foreach ($banners as $banner) { ?>
<div class="slider-item">
<div class="product-block">
<div class="product-block-inner">
<?php if ($banner['link']) { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
<?php } ?>
</div></div></div>
<?php } ?>
</div>
</div>
<span class="module_default_width" style="display:none; visibility:hidden"></span>
<script type="text/javascript"><!--
$('#carousel-<?php echo $module; ?>-carousel').jcarousel({
items: 6,
autoPlay: 3000,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>
try this script
<script type="text/javascript"><!--
$('#module-<?php echo $module; ?>-carousel').owlCarousel({
items: 6,
autoPlay: 3000,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>
I created a extra tab and custom design for related products in products page. I want to get product name,price and to add to cart,image in a loop. In related product tab check this url I am working on that http://efurnish.co.uk/index.php?route=product/product&path=86&product_id=58
<div class="product-related box">
<div class="box-heading"><span><?php echo $tab_related; ?> (<?php echo count($products); ?>)</span></div>
<div class="box-content products-block">
<?php foreach ($pr
oducts as $i => $product) { $i=$i+1; ?>
<?php if( $i%$cols == 1 && $cols > 1 ) { ?>
<div class="row product-related row-product">
<?php } ?>
<div class="col-lg-<?php echo $span;?>">
<div class="product-block">
<?php if ($product['thumb']) { ?>
<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>"
title="<?php echo $product['name']; ?>"
alt="<?php echo $product['name']; ?>"/></a>
</div>
<?php } ?>
<div class="name"><?php echo $product['name']; ?></div>
<div class="group-item">
<?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 } ?>
<div class="price-cart">
<?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="cart">
<input type="button" value="<?php echo $button_cart; ?>"
onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"/>
</div>
</div>
</div>
<span class="wishlist"><a class="icon-heart" onclick="addToWishList('<?php echo $product_id; ?>');" data-placement="top" data-toggle="tooltip" data-original-title="<?php echo $button_wishlist; ?>"><span><?php echo $button_wishlist; ?></a></span></span>
<span class="compare"><a class="icon-retweet" onclick="addToCompare('<?php echo $product_id; ?>');" data-placement="top" data-toggle="tooltip" data-original-title="<?php echo $button_compare; ?>"><span><?php echo $button_compare; ?></a></span></span>
</div>
</div>
<?php if( $cols > 1 && ($i%$cols == 0 || $i==count($products)) ) { ?>
</div>
<?php } ?>
I am using this design http://bootsnipp.com/snippets/featured/store-product-layout
There is an option for related products in the product form in the admin panel. You can add related product there to show in the product tab.
To Add Related Products to a product:
In OpenCart admin panel navigate to Catalog -> Products
Search for the product you would like to add related products. Click
Edit link to edit it.
Choose Link tab and scroll down until you see the "Related Products" field.
Start typing a product name in that field and OpenCart will drop
down a list of products that start with whatever letters you have
typed in.
Click on the product you want to add as a related product. You will
see it added to the box below.
Repeat step 4-5 for others product you want to add.
Click on save button
Related products will be added to your product page.
I am trying to insert a shop cart button at the bottom of the product description in Opencart verson 1.5.4 and am using the default theme.
I looked at the source code for a particular product and copied this information from the source code into the bottom of the product description.
<div class="cart">
<div>Qty: <input type="text" name="quantity" size="2" value="1" />
<input type="hidden" name="product_id" size="2" value="85" />
<input type="button" value="Add to Cart" id="button-cart" class="button" />
</div>
<div><span> - OR - </span></div>
<div><a onclick="addToWishList('85');">Add to Wish List</a><br />
<a onclick="addToCompare('85');">Add to Compare</a></div>
</div>
When I click on the add to shop cart button, nothing happens.
But when I click on the add to wish list and compare , the product is added to the respective lists.
What am I missing?
Should I be using a different code?
Can anyone help me solve this?
Chang you add to shopping cart button , with this
<a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><?php echo $button_cart; ?></a>.
Hope it will works for you.
As far as I know, the Add to Cart code button uses an ID that is linked within a DIV. So jQuery is not lookning for #button-cart - it is looking for, example cart. addform #button-cart and also your missing some variables that need to be nested too.. Update your post with the full version of the product.tpl please too
This is the code you need to be using for moving the Add To Cart Button:
<div class="cart">
<div><?php echo $text_qty; ?>
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
<input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" />
<span> <?php echo $text_or; ?> </span>
<span class="links"><a onclick="addToWishList('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a><br />
<a onclick="addToCompare('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a></span>
</div>
<?php if ($minimum > 1) { ?>
<div class="minimum"><?php echo $text_minimum; ?></div>
<?php } ?>
</div>
But make sure the .product-info and #cart ID and Class child elements are supported within your new DIV move. Why? Look at this jQuery, it depends on them to find the values - having said this - you could change it too.
$('#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['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
And updated version according to your needs would be:
/*
Notice I have changed the DIV to assign div#cart
So it looks for <div id="cart">
But make sure options are available for the error response
and validation
*/
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('div#cart input[type=\'text\'], div#cart input[type=\'hidden\'], div#cart input[type=\'radio\']:checked, div#cart input[type=\'checkbox\']:checked, div#cart select, div#cart 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['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
UPDATE
Do you mean "move" the add to cart button? or simply copy the exesting one so there's two #button-cart in your page?
If the first, the solution from #TheBlackBenzKid should work as you expected.
But if you want to copy the existing button, you should modify the selector so it use class (.button-cart). I hope this help.
Sorry for the late reply. Based on your answer:
I would like to copy the existing one so that there are two buttons in the page
What I mean in modify the selector so it use class (.button-cart) is you should change your ajax trigger to match 2 selector (because now you have 2 'trigger', the top "Add to cart" and at the bottom that you copy to).
First modify your add-to-cart to <input type="button" value="Add to Cart" id="" class="button-cart button" />
see, we don't use id="button-cart" anymore, instead, we use button-cart as our class attribut (class="button-cart button"). By using class, we can declare another element with same class (i.e your 'add-to-cart' button at the bottom of your product description).
Then modify your Ajax script. The original ajax script is:
$('#button-cart').bind('click', function() {
$.ajax({
// another code
});
Change to:
$('.button-cart').bind('click', function() {
$.ajax({
// another code
});
id use # and class use.. I hope this help you.
Opencart 1.5.3. Im trying to get the product options on the page to be displayed inside a tab. If I use the following code I get no errors and it looks fine, but clicking add to cart does nothing. If the code is outside the tab it works fine. Im not sure what Im doing wrong.
<div id="tabs_container">
<ul id="tabs">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
</div>
<div id="tabs_content_container">
<div id="tab1" class="tab_content" style="display:block"></div><!--tab1-->
<div id="tab2" class="tab_content"></div><!--tab2-->
<div id="tab3" class="tab_content"></div><!--tab3-->
<div id="tab4" class="tab_content">
<?php if ($options) { ?>
<div class="options">
<h2><?php echo $text_option; ?></h2>
<br />
<?php foreach ($options as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
<?php if ($option['required']) { ?>
<span class="required">*</span>
<?php } ?>
<b><?php echo $option['name']; ?>:</b><br />
<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>
<br />
<?php } ?>
<?php } ?>
</div>
</div><!--tab4-->
</div><!--tabs_content_container-->
Here is the javascript for the form submit that Opencart uses.
<script type="text/javascript"><!--
$('#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['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
//--></script>
The problem will be that the closing </form> tag won't be around the tab content. You need to move the </form> after your content and that should do it