Opencart how to add product options into a tab - opencart

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

Related

multi-language banners for Opencart v2.3

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>

Display thumbnail of category in category.tpl module in opencart?

I need to display thumbnail images of category in category.tpl module in opencart?
I want display thumbnail of category in extension/module/category.tpl not product/product.tpl
how i can do this?
opencart 2.3.0.2
Show images for the sub-categories in the opencart version 2.3
Find following code at catalog\controller\product\category.php
$data['categories'][] = array(
'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url)
);
Replace the code with below code:
$data['categories'][] = array(
'name' => $result['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
'image' => $this->model_tool_image->resize($result['image'], 100,100),
'href' => $this->url->link('product/category', 'path=' . $this->request->get['path'] . '_' . $result['category_id'] . $url)
);
Changed is 'image' => $this->model_tool_image->resize($result['image'], 100,100), if you have to increase the size then change 100 to other values.
Find following code at catalog\view\theme\default\template\product\category.tpl
<?php if ($categories) { ?>
<h3><?php echo $text_refine; ?></h3>
<?php if (count($categories) <= 5) { ?>
<div class="row">
<div class="col-sm-3">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php echo $category['name']; ?></li>
<?php } ?>
</ul>
</div>
</div>
<?php } else { ?>
<div class="row">
<?php foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
<div class="col-sm-3">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php echo $category['name']; ?></li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<?php } ?>
<?php } ?>
Replace with the below code
<?php if ($categories) { ?>
<h3><?php echo $text_refine; ?></h3>
<?php if (count($categories) <= 5) { ?>
<div class="row">
<div class="col-sm-3">
<ul>
<?php foreach ($categories as $category) { ?>
<li> <a href="<?php echo $category['href']; ?>">
<?php if($category['image']){ ?>
<img src="<?php echo $category['image']; ?>" ><br>
<?php } ?>
<?php echo $category['name']; ?></a></li>
<?php } ?>
</ul>
</div>
</div>
<?php } else { ?>
<div class="row">
<?php foreach (array_chunk($categories, ceil(count($categories) / 4)) as $categories) { ?>
<div class="col-sm-3">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>">
<?php if($category['image']){ ?>
<img src="<?php echo $category['image']; ?>" ><br>
<?php } ?>
<?php echo $category['name']; ?></a></li>
<?php } ?>
</ul>
</div>
<?php } ?>
</div>
<?php } ?>
<?php } ?>
Extra code added is below and there are two places to add the code:
<?php if($category['image']){ ?>
<img src="<?php echo $category['image']; ?>" ><br>
<?php } ?>
You are set for the default theme, but if you are using custom theme then you have to manage as per your theme.
https://webocreation.com/blog/show-images-sub-categories-opencart-version-2-3

How to auto run Carousel Module in opencart 2.2.0

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>

opencart 1.5.6.4 Add image in the middle of category list

I want to show an image or banner in the middle of product category list page. So if there are 10 products in the product category list then it will show 5 product, and then the image, and then the rest 5 product.
Can anybody show me how to do this? Thank you
Open this file:
catalog/view/theme/default/template/product/category.tpl
find foreach for products:
<?php foreach ($products as $product) { ?>
create a variable as a counter before foreach:
then go to the end of foreach (line 99):
<?php } ?>
add following code before it:
<?php if($i == 5){ ?>
<p>here is place for image</p>
<?php } $i++; ?>
Here is full code for foreach section:
<?php $i = 1; foreach ($products as $product) { ?>
<div>
<?php if ($product['thumb']) { ?>
<div class="image"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></div>
<?php } ?>
<div class="name"><?php echo $product['name']; ?></div>
<div class="description"><?php echo $product['description']; ?></div>
<?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 } ?>
<?php if ($product['tax']) { ?>
<br />
<span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
<?php } ?>
</div>
<?php } ?>
<?php if ($product['rating']) { ?>
<div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
<?php } ?>
<div class="cart">
<input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" />
</div>
<div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div>
<div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div>
</div>
<?php if($i == 5){ ?>
<p>here is place for image</p>
<?php } $i++; ?>
<?php } ?>

How To Add Add To Shopcart Button In Opencart Product Description

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.