I have a shopping cart where the quantities or cart items can be adjusted or be removed via ajax so the page doesn't have to be refresh to reflect the changes etc.
I have an external shopping_cart.js that handles all the shopping cart js side of things. When i adjust cart item quantities i use DOM innerHTML on ajax success function to reflect the changes to the user, but for entirely removing a cart items i am using jquery load function to load an update_cart.php file into a container div element which displays the updated cart contents in a mouse over cart quick link when ever the user clicks to remove/add/minus a cart item.
Being that i am using jquery.load to load cart_update.php script, i have to include the external shopping_cart.js in the cart_update.php script for all the JS to work when the script is loaded, but the problem i am having is that when i include the js file in the cart_update.php and load it with jquery it seems to loop through the javascript multiple times each when i click any of the add/minus/remove buttons for each product, and compounding each loop with each click.
For example, when i click add qty the first time, the cart quantity will add one additional item, when i click again, it will loop through 2 additional items, then 4, 8, 16 and so on. But if i place the external js file in the main php page file and not in the cart_update script it works as normally after a page refresh and doesn't loop, though obviously the javascript doesn't work when the shopping cart is loaded with jquery.load when i try to remove a cart item as it cant access the js file as it's not included in the cart_update.php
I m really not sure where i am going wrong here. I am only a novice programmer
cart_update.php
<!-- Display cart contents -->
<script src="js/shopping_cart.js"></script>
<?php
// Call session start when the script is loaded via jquery.load
if (isset($_SESSION)){
} else {
session_start();
}
require_once "config.php";
$session_id = session_id();
$sql = "SELECT * FROM shopping_cart WHERE session_id='$session_id'";
$stmt = $PDOconnection->prepare($sql);
$stmt->execute();
$rowCount = $stmt->rowCount();
if($rowCount < 1 ){
echo "Your cart is empty.";
} else {
$points = 0;
while($result = $stmt->fetch(PDO::FETCH_ASSOC)){
$ui = $result['ui'];
$item_points = $result['item_points'];
// Display cart item name, price, quantity and amount of points earned
echo "<br>" . $result['item_name'] . " $" . number_format($result['item_price'],2) . " Qty: " . $result['item_quantity'] . " <a href='#' class='remove_item' data-ui='$ui'> X </a><br>";
$points = $points + number_format($item_points, 1);
}
echo "<hr />";
if (isset($_SESSION['user_name'])){
echo "You have earned $points points with this purchase!";
} else {
echo "Sign up to recieve $points points with this purchase! <a href'#'>What's this?</a>";
}
echo "<hr />";
echo "<a href='cart.php'>Check Out</a>";
}
?>
shopping_cart.js
function cart_data(cartData) {
// Get data values
var $item_stock_type = cartData.getAttribute('data-stock-type');
var $item_ui = cartData.getAttribute('data-stock-ui');
// Set value as one. As it's signle qty when adding to cart from the product list
var $item_qty = 1;
$(document).ready(function(e){
// Send data for processing in shopping_cart.php
$.ajax({
url: "php/shopping_cart.php",
data: { item_stock_type: $item_stock_type, item_ui: $item_ui, item_qty: $item_qty },
dataType: "json",
type: "post",
success: function(data, response){
document.getElementById("cart_total").innerHTML = data.cart_total;
document.getElementById("shoppingcart_link_quantity").innerHTML = data.cart_qty + '<br />';
switch (data.success)
{
case 0:
modal({
type: 'error',
title: 'Ooops',
text: data.error_message,
center: true,
animate: true,
});
break;
case 1:
modal({
type: 'alert',
title: '',
text: data.user_message,
center: true,
animate: true,
autoclose: true,
});
break;
case 2:
modal({
type: 'alert',
title: '',
text: data.user_message,
center: true,
animate: true,
});
break;
}
// Update Shopping cart contents
$("#shopping_cart_container").load("php/update_cart.php");
},
error: function(jqXHR, status, error){
var $jxr = jqXHR;
var $status = status;
var $error = error;
// Display error message to user
modal({
type: 'error',
title: 'Ooops!',
text: 'An Error has occured: <br><br>' + jqXHR + ": " + status + "; " + error,
center: true,
animate: true,
});
// Log error message
}
});
});
}
// Remove item from shopping cart quick link
$(document).ready( function(){
// Remove item from cart
$(".remove_item").click( function(e){
e.preventDefault();
var $ui = $(this).attr("data-ui");
$.ajax({
url: 'php/ajax.php',
data: { remove_cart_item: $ui },
dataType: "json",
type: "post",
success: function(data, response){
document.getElementById("cart_total").innerHTML = data.cart_total;
document.getElementById("shoppingcart_link_quantity").innerHTML = data.cart_qty + '<br />';
switch (data.success)
{
case 0:
modal({
type: 'error',
title: 'Ooops',
text: data.error_message,
center: true,
animate: true,
});
}
// Update Shopping cart quick link contents
$("#shopping_cart_container").load("php/update_cart.php");
},
error: function(jqXHR, status, error){
var $jxr = jqXHR;
var $status = status;
var $error = error;
// Display error message to user
modal({
type: 'error',
title: 'Ooops!',
text: 'An Error has occured: <br><br>' + jqXHR + ": " + status + "; " + error,
center: true,
animate: true,
});
// Log error message
}
});
});
});
// Add qty to shopping cart main page
$(document).ready( function(){
$(".add_item").click( function(e){
e.preventDefault();
var $ui = $(this).attr("data-ui");
$.ajax({
url: 'php/ajax.php',
data: { add_cart_item: $ui },
dataType: "json",
type: "post",
success: function(data, response){
switch (data.success)
{
case 0:
// No more stock. Notify user
modal({
type: 'error',
title: 'Sorry',
text: data.error_message,
center: true,
animate: true,
});
break;
case 1:
// Update item qty
var $id = data.element_id;
document.getElementById("cart_total").innerHTML = data.cart_total;
document.getElementById("shoppingcart_link_quantity").innerHTML = data.cart_qty + '<br />';
document.getElementById($id).innerHTML = data.item_qty;
// Update Shopping cart quick link contents
$("#shopping_cart_container").load("php/update_cart.php");
break;
}
},
error: function(jqXHR, status, error){
var $jxr = jqXHR;
var $status = status;
var $error = error;
// Display error message to user
modal({
type: 'error',
title: 'Ooops!',
text: 'An Error has occured: <br><br>' + jqXHR + ": " + status + "; " + error,
center: true,
animate: true,
});
// Log error message
}
});
});
});
// Minus qty to shopping cart main page
$(document).ready( function(){
$(".minus_item").click( function(e){
e.preventDefault();
var $ui = $(this).attr("data-ui");
$.ajax({
url: 'php/ajax.php',
data: { minus_cart_item: $ui },
dataType: "json",
type: "post",
success: function(data, response){
switch (data.success)
{
case 0:
break;
case 1:
// Update item qty
var $id = data.element_id;
document.getElementById("cart_total").innerHTML = data.cart_total;
document.getElementById("shoppingcart_link_quantity").innerHTML = data.cart_qty + '<br />';
document.getElementById($id).innerHTML = data.item_qty;
// Update Shopping cart quick link contents
$("#shopping_cart_container").load("php/update_cart.php");
break;
}
},
error: function(jqXHR, status, error){
var $jxr = jqXHR;
var $status = status;
var $error = error;
// Display error message to user
modal({
type: 'error',
title: 'Ooops!',
text: 'An Error has occured: <br><br>' + jqXHR + ": " + status + "; " + error,
center: true,
animate: true,
});
// Log error message
}
});
});
});
