Post by peterban » Sun May 16, 2010 1:02 am

Hi,
i've modded the default template (OC 1.4.7) but something went wrong :P

The main problem is the following:
I put the cart in header.tpl. Jquery animation works fine, but clicking on "Add to cart" button, the products are not included and updated.

Javascript added on header.tpl:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function () {
	$('#add_to_cart').replaceWith('<a onclick="" id="add_to_cart" class="middle">' + $('#add_to_cart').html() + '</a>');
	$('#add_to_cart').click(function () {
		$.ajax({
			type: 'post',
			url: 'index.php?route=module/cart/callback',
			dataType: 'html',
			data: $('#product :input'),
			data: $('#prodotto :input'),
			success: function (html) {
				$('#top_cart .middle').html(html);
			},	
			complete: function () {
				var image = $('#image').offset();
				var cart  = $('#top_cart').offset();
				$('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
	
				params = {
					top : cart.top + 'px',
					left : cart.left + 'px',
					opacity : 0.0,
					width : $('#top_cart').width(),  
					heigth : $('#top_cart').height()
				};		
				$('#temp').animate(params, 'slow', false, function () {
					$('#temp').remove();
				});		
			}			
		});			
	});			
});
//--></script>
Cart DIV container (in header.tpl):

Code: Select all

			<div id="top_cart" onclick="location.href='<?php echo $cart; ?>';" style="cursor:pointer;" class="middle">
				<p id="top_cart_title">
					SPESA ATTUALE
				</p>
				<p id="top_cart_product">
					La tua spesa &egrave; di:
				</p>
				<p id="top_cart_product_number">
					&nbsp;<i><?php echo $this->currency->format($this->cart->getSubTotal()); ?></i>
				</p>
			</div>
Add to cart button (in product.tpl):

Code: Select all

					<div id="product_info_header_left" style="cursor:pointer;">
					<a onclick="$('#product').submit();" id="add_to_cart" class="middle">
						<img src="/store/image/templates/vinitricardi/add_cart.jpg" alt="Aggiungi al Carrello"/>
					</a>
					</div>
If you want look the problem in action visit: http://www.vinitricardi.com/store/index ... duct_id=60 (for example)


Any ideas?

Sito Web


User avatar
Newbie

Posts

Joined
Sat May 15, 2010 11:53 pm

Post by Xsecrets » Sun May 16, 2010 2:41 am

I don't think it's the cart code. I think the problem is in the product page. you removed the qty input box and it doesn't look like you replaced it with a hidden input and therefore the post doesn't actually send any data, and nothing gets added to the cart.

Actually after looking at it the product id doesn't get posted either. Something has gotten messed up with the form in the product page template. you need to send the product_id and quantity and your form doesn't send anything.

OpenCart commercial mods and development http://spotonsolutions.net
Layered Navigation
Shipment Tracking
Vehicle Year/Make/Model Filter


Guru Member

Posts

Joined
Sun Oct 25, 2009 3:51 am
Location - FL US

Post by peterban » Sun May 16, 2010 3:55 am

Hi Xsecrets, thank for reply!!! i've just added the form code to send qty and product_id with this code:

Code: Select all

<form action="<?php echo str_replace('&', '&', $action); ?>" method="post" enctype="multipart/form-data" id="product">
	<div class="content"><?php echo $text_qty; ?>
		<input type="text" name="quantity" size="3" value="1" />
			<a onclick="$('#product').submit();" id="inserisco_prodotto" class="middle">
				Aggiungi a carrello
			</a>
	</div>
    <div>
    	<input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
		<input type="hidden" name="redirect" value="<?php echo str_replace('&', '&', $redirect); ?>" />
	</div>
</form>
still nothing...

maybe an ajax update problem?!?

this is javascript (in header):

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function () {
	$('#inserisco_prodotto').replaceWith('<a onclick="" id="inserisco_prodotto" class="middle">' + $('#inserisco_prodotto').html() + '</a>');
	$('#inserisco_prodotto').click(function () {
		$.ajax({
			type: 'post',
			url: 'index.php?route=module/cart/callback',
			dataType: 'html',
			data: $('#product :input'),
			data: $('#prodotto :input'),
			success: function (html) {
				$('#top_cart .middle').html(html);
			},	
			complete: function () {
				var image = $('#image').offset();
				var cart  = $('#top_cart').offset();
				$('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
	
				params = {
					top : cart.top + 'px',
					left : cart.left + 'px',
					opacity : 0.0,
					width : $('#top_cart').width(),  
					heigth : $('#top_cart').height()
				};		
				$('#temp').animate(params, 'slow', false, function () {
					$('#temp').remove();
				});		
			}			
		});			
	});			
});
//--></script>
??? ??? ???

Sito Web


User avatar
Newbie

Posts

Joined
Sat May 15, 2010 11:53 pm

Post by Xsecrets » Sun May 16, 2010 4:02 am

I'm pretty sure it's not an ajax problem if you look at firebug on your site the post doesn't send any data, and on the default template it sends the product_id and quantity.

OpenCart commercial mods and development http://spotonsolutions.net
Layered Navigation
Shipment Tracking
Vehicle Year/Make/Model Filter


Guru Member

Posts

Joined
Sun Oct 25, 2009 3:51 am
Location - FL US

Post by peterban » Sun May 16, 2010 4:47 am

ok.... i found the problem:
there was 2 data in javascript:

data: $('#product :input'),
data: $('#prodotto :input'),

But cart in header doesn't refresh on click :)

Sito Web


User avatar
Newbie

Posts

Joined
Sat May 15, 2010 11:53 pm

Post by channelcommerce » Tue May 18, 2010 3:47 am

peterban wrote: But cart in header doesn't refresh on click :)
Have you updated the div id in the Ajax code. Look at the bottom of catalog/view/theme/YOURTHEME/template/module/cart.tpl

There is 1 occurance of #module_cart .middle and 3 of #module_cart to replace with whatever div id you are using in the header.

Opencart Themes and eCommerce Solutions


New member

Posts

Joined
Tue Apr 13, 2010 4:46 am

Post by peterban » Tue May 18, 2010 6:30 pm

SOLVED

The problem was in ajax code and in catalog/controller/module/cart.php

For updated subtotal in header i added a new publicfunction in cart.php:

Code: Select all

public function subtotale() {
		$this->language->load('module/cart');

		$this->load->model('tool/seo_url');
		
		if ($this->request->server['REQUEST_METHOD'] == 'POST') {
			if (isset($this->request->post['option'])) {
				$option = $this->request->post['option'];
			} else {
				$option = array();	
			}
			
      		$this->cart->add($this->request->post['product_id'], $this->request->post['quantity'], $option);
			
			unset($this->session->data['shipping_methods']);
			unset($this->session->data['shipping_method']);
			unset($this->session->data['payment_methods']);
			unset($this->session->data['payment_method']);			
		}
				
		$output = '<table cellpadding="2" cellspacing="0" style="width: 100%;">';
		$output .= '</table>';
    	$output .= '&nbsp;<i>' .  $this->currency->format($this->cart->getTotal()) . '</i>';
		$this->response->setOutput($output, $this->config->get('config_compression'));
	} 
And i called the function in javascript:

Code: Select all

<script type="text/javascript"><!--
$(document).ready(function () {
	$('#inserisco_prodotto').replaceWith('<a onclick="" id="inserisco_prodotto" class="middle">' + $('#inserisco_prodotto').html() + '</a>');
	$('#inserisco_prodotto').click(function () {
		$.ajax({
			type: 'post',
			url: 'index.php?route=module/cart/subtotale',
			dataType: 'html',
			data: $('#product :input'),
			success: function (html) {
				$('#top_cart_product_number').html(html);
			},	
			complete: function () {
				var image = $('#image').offset();
				var cart  = $('#top_cart').offset();
				$('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
				params = {
					top : cart.top + 'px',
					left : cart.left + 'px',
					opacity : 0.0,
					width : $('#top_cart').width(),  
					heigth : $('#top_cart').height()
				};		
				$('#temp').animate(params, 'slow', false, function () {
					$('#temp').remove();
				});		
			}			
		});			
	});
	
				
});
//--></script>

Sito Web


User avatar
Newbie

Posts

Joined
Sat May 15, 2010 11:53 pm
Who is online

Users browsing this forum: No registered users and 7 guests