Jump to content

JQuery to swap images after anchor click


parapet74

Recommended Posts

I am modifying the Shopping Cart tutorial to create multiple rows, with one product per row (like a spreadsheet). Each row begins with the img of a large, empty checkbox (emptychk.jpg) and ends with the usual "add to cart" <a href> tag.

 

When someone clicks the add-to-cart <a href> at the end of any product row, I would like to:

A - change the anchor tag to "remove from cart" ; and

B - change img emptychk.jpg to a different image (greenchk.jpg)

C - Ideally, I would like clicking on the empty checkbox <img> (at the start of any row) to do the same thing as clicking <a href>add to cart </a> for that row. Is that possible? How could that be done?

 

I am guessing that questions A and B would happen inside the addToCart.php script, but I'm stuck there. Note that my addToCart.php file is exactly the same as at the end of Ben's video (converted from XML to SQL db)

 

function render_products_from_mysql() 
{
$products = get_mysql_products() ;
if ($products == FALSE) 
{
	$output = '<table class="products">' ;
	$output.= '<tr><td>No products to display.</td></tr>' ;
	$output.= '</table>' ;
}
else 
{
	$output = '<div class="shoptable">' ;
	$output.= '	<table class="products">' ;
	$output.= '<tr>' ;
	$output.= '<td class="prodhdchek">Buy</td>' ;
	$output.= '<td class="prodhdicon"> </td>' ;
	$output.= '<td class="prodhditem"><h3>Item</h3></td>' ;
	$output.= '<td class="prodhddesc"><h3>Description</h3></td>' ;
	$output.= '<td class="prodhdprix"><h3>Price</h3></td>' ;
	$output.= '</tr>' ;

	foreach ($products as $product)	
	{
		$output .= 
		'<tr>
			<td class="prodchek"><img src="./public/images/emptychk.jpg" height="40" width="40" /></td>
			<td class="prodicon"><img src="'.$product['image'].'" height="15" width="15" /></td>
			<td class="proditem"><h4>'.$product['title'].'</h4></td>
			<td class="proddesc">'.$product['description'].'</td>
			<td class="prodprix">$'.number_format($product['price'], 2).'</td>
	    <td class="prodhdhref"><a href="./addToCart.php?id='.$product['id'].'">add to cart</a>
		</tr>' ;
	}
}
$output .= '</table>' ;
return $output ;
}

 

<?php
////////////////////  addToCart.php   ///////////////////////////////// 


require_once '../functions/functions.php';

$shopping_cart = get_shopping_cart() ;

echo render_header();

$product_id = $_REQUEST['id'] ;

If (product_exists($product_id)) 
 {	$shopping_cart->AddItem($product_id) ; }
?>

<table class='shoppingCartCheckout'>
<tr class='shoppingCartCheckoutHeader'>
	<th>Product ID</th>
	<th>Quantity</th>
	<th>Amount</th>
</tr>

<?php
$line_item_counter = 1 ;
foreach($shopping_cart->GetItems() as $product_id) {
	echo render_shopping_cart_row($shopping_cart, $product_id, $line_item_counter) ;
	$line_item_counter++ ;
}

echo render_shopping_cart_subtotal_row($shopping_cart) ;
echo render_shopping_cart_tax_row($shopping_cart) ;
echo render_shopping_cart_total_row($shopping_cart) ;
?>	

</table>


<?php set_shopping_cart($shopping_cart) ; ?>

<?php echo render_footer() ; ?>

Link to comment
Share on other sites

A - change the anchor tag to "remove from cart" ; and

B - change img emptychk.jpg to a different image (greenchk.jpg)

C - Ideally, I would like clicking on the empty checkbox <img> (at the start of any row) to do the same thing as clicking <a href>add to cart </a> for that row. Is that possible? How could that be done?

 

I'd probably do it by adding onclick to the add to cart link. This would then call a function that would change the link to remove from cart and could also change the image from emptychk.jpg to greenchck.jpg. Do this by putting the images into div or span tags and giving them an id, this way you can easily reference them in your javascript.

 

To make the img at the start of the row do the same simple wrap anchor tags round the image the same the link.

 

i.e. <a href="" onclick="somefunction()"><img src="path/to/image"></a>

Link to comment
Share on other sites

Very basically to get you started you could use the following:

 

<script type="text/javascript">
function addToCart(){
document.getElementById("link1").style.display='none';
document.getElementById("link2").style.display='block';
}
function removeFromCart(){
document.getElementById("link1").style.display='block';
document.getElementById("link2").style.display='none';
}
</script>

 

<a href="./addToCart.php?id=1" onclick="addToCart(); return false;" id="link1">Add to Cart</a>


<a href="./removeFromCart.php?id=1" onclick="removeFromCart(); return false;" id="link2" style="display:none;">Remove from Cart</a>

 

Just change the href to include your php and take out the return false, i just had that there for testing purposes. On the remove link when the page loads is set to display none. All the functions do is to one link to display and the other to hide. You can use the same script for the image to change, just wrap the same anchor tags around your image and styling on the image to have no border. For the image to change just had another rule to the javascript function to hide/show the relevant images

Link to comment
Share on other sites

Thanks for the reply and sample code. I wasn't able to get it to work, probably due to not knowing quite where to put things. I've had minimal success with jquery by inserting the code in the <head> between <script> tags.

 

My code now looks like this:

 

function render_products_from_mysql() {
$products = get_mysql_products() ;
if ($products == FALSE) {
	$output = '<table class="products">' ;
	$output.= '<tr><td>No products to display.</td></tr>' ;
	$output.= '</table>' ;
}
else {
	$output = '<div class="shoptable">' ;
	$output.= '	<table class="products">' ;
	$output.= '<tr id="tbl_head">' ;
	$output.= '<td class="prodhdchek"></td>' ;
	$output.= '<td class="prodhdicon"> </td>' ;
	$output.= '<td class="prodhditem"><h3>Item</h3></td>' ;
	$output.= '<td class="prodhddesc"><h3>Description</h3></td>' ;
	$output.= '<td class="prodhdprix"><h3>Price</h3></td>' ;
	$output.= '</tr>' ;

	foreach ($products as $product)	{
		$output .= 
		'<tr>
			<td class="prodchek">
         <div id="mt'.$product['id'].'"><img src="./public/images/emptychk.jpg" height="40" width="40" /></div>
         <div id="grn'.$product['id'].'"><img src="./public/images/greenchk.jpg" height="40" width="40" /></div>
       </td>
			<td class="prodicon"><img src="'.$product['image'].'" height="15" width="15" /></td>
			<td class="proditem"><h4>'.$product['title'].'</h4></td>
			<td class="proddesc">'.$product['description'].'</td>
			<td class="prodprix">$'.number_format($product['price'], 2).'</td>
	    <td class="prodhdhref"><a href="./addToCart.php?id='.$product['id'].' id="atc'.$product['id'].'">add to cart</a>
	    <a href="./removeFromCart.php?id='.$product['id'].' id="rfc'.$product['id'].'" style="display:none;">Remove from Cart</a>
		</tr>' ;
		}
	}
	$output .= '</table>' ;
	return $output ;
}

 

 

and

 

 

<?php
//// addToCart.php ////

 require_once '../functions/functions.php';

 $shopping_cart = get_shopping_cart() ;

 echo render_header();

 $product_id = $_REQUEST['id'] ;

 If (product_exists($product_id)) {
$shopping_cart->AddItem($product_id) ;
 }

 set_shopping_cart($shopping_cart) ; 

 echo render_products_from_mysql() ;

 echo render_footer() ; 

?>

 

 

The JQuery code, inserted into the <head> section, DOES display the green checked box, but only for a moment and then it reverts. My code is deficient in the following ways:

 

1) Code fires whenever I click ANY anchor tag... I intend to narrow that down to only AddToCart clicks.

2) greenchk.jpg DOES replace the emptychk.jpg, but only for a half-second and then it reverts

3) No matter where I click, the top row checkbox is the only one that changes. I have now set unique IDs for each mt/grn tag, but need assistance breaking out the uniqueness ($product.['id']) and using it to swap the appropriate jpg

4) I also wish to swap the "Add To Cart" anchor for a "Remove From Cart" anchor

 

Here's the relevant part of my <head> section:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$("a").click(function(){
	$("#mt").hide();
	$("#grn").show();
	});
});
</script>

Edited by parapet
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...