parapet74 Posted March 24, 2011 Report Share Posted March 24, 2011 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() ; ?> Quote Link to comment Share on other sites More sharing options...
pb1uk Posted March 24, 2011 Report Share Posted March 24, 2011 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> Quote Link to comment Share on other sites More sharing options...
pb1uk Posted March 24, 2011 Report Share Posted March 24, 2011 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 Quote Link to comment Share on other sites More sharing options...
parapet74 Posted March 24, 2011 Author Report Share Posted March 24, 2011 (edited) 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 March 24, 2011 by parapet Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 25, 2011 Report Share Posted March 25, 2011 Didn't go through your whole code, but instead of using .hide() .show() you can just use .toggle() it will hide the element if it's visible, and show the element if it's hidden. More info: http://api.jquery.com/toggle/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.