Obanana.Corporation
/
obanana_b2b_test
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Product Single page CSS & Double click add to cart UI issue

This commit is contained in:
Stacy 2024-04-23 09:10:36 +08:00
parent 31910967a4
commit 3a0f07e6fa
2 changed files with 85 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
header.php
View File

@ -140,6 +140,8 @@ if ($_SESSION["userId"] <> "") {
line-height: 1;
}
</style>
<!--Ec Header Top Start -->
<div class="header-top">
<div class="container">
@ -180,6 +182,7 @@ if ($_SESSION["userId"] <> "") {
<?php } ?>
</div>
<script>
function displayPopup() {
// Show the pop-up
@ -205,6 +208,7 @@ if ($_SESSION["userId"] <> "") {
}
</script>
<!-- Newsletter Modal Start -->
<div id="ec-popnews-bg2"></div>
<div id="ec-popnews-box2">
@ -308,6 +312,7 @@ if ($_SESSION["userId"] <> "") {
</div>
</div>
<!-- Ec Header Top End -->
<!-- Ec Header Bottom Start -->
<div class="ec-header-bottom d-none d-lg-block">
<div class="container position-relative">
@ -428,19 +433,30 @@ if ($_SESSION["userId"] <> "") {
</a>
<div class="ec-pro-content">
<a href="product-left-sidebar.php?id=<?php echo $order['items'][0]['product']['product_id']; ?>" class="cart_pro_title"><?php echo $order['items'][0]['product']['name']; ?></a>
<a href="product-left-sidebar.php?id=<?php echo $order['items'][0]['product']['product_id']; ?>" class="cart_pro_title">
<?php echo $order['items'][0]['product']['name']; ?>
</a>
<span class="cart-price">Unit Price: <span><?php echo $order['items'][0]['price']; ?></span></span>
<div class="cart-price">
<span class="subtotal-<?php echo $order['_id']; ?>">Subtotal: <?php echo $order['total_amount'] ?></span>
</div>
<!-- 02-16-2024 Stacy added style -->
<div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; padding-top:10px;">
<div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="qtyDecrement('<?php echo $order['_id']; ?>' , '<?php echo $order['items'][0]['_id']; ?>')">-</div>
<input style="width:100px; height:40px" id="qty-input-<?php echo $order['items'][0]['_id']; ?>" class="qty-input" type="number" name="ec_qtybtn" value="<?php echo $order['items'][0]['quantity']; ?>" oninput="handleQtyInput(this, '<?php echo $order['_id']; ?>', '<?php echo $order['items'][0]['_id']; ?>')" />
<div class="qty-btn" style="color:#ffaa00; font-size:30px; padding-left:5px; cursor: pointer;" onclick="qtyIncrement('<?php echo $order['_id']; ?>' , '<?php echo $order['items'][0]['_id']; ?>', false)">+</div>
<div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; margin-top:5px;">
<div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="qtyDecrement('<?php echo $order['_id']; ?>' ,
'<?php echo $order['items'][0]['_id']; ?>')" onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">-
</div>
<input style="width:100px; height:40px" id="qty-input-<?php echo $order['items'][0]['_id']; ?>" class="qty-input" type="number"
name="ec_qtybtn" value="<?php echo $order['items'][0]['quantity']; ?>" oninput="handleQtyInput(this, '<?php echo $order['_id']; ?>',
'<?php echo $order['items'][0]['_id']; ?>')" />
<div class="qty-btn" style="color:#ffaa00; font-size:30px; margin-left:5px; cursor: pointer;" onclick="qtyIncrement('<?php echo $order['_id']; ?>' ,
'<?php echo $order['items'][0]['_id']; ?>', false)" onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">+
</div>
<!-- <a class="remove">x</a> -->
<!-- <a href="#" class="removeCart" onclick="deleteOrder('<?php #echo $order['_id']; ?>')">x</a> -->
<a href="#" class="removeCart" onclick="deleteOrder('<?php echo $order['_id']; ?>')"><i class="ecicon eci-trash" style="padding:20px; opacity:70%"></i></a>
<a href="#" class="removeCart" style="margin-left:30px;" onclick="deleteOrder('<?php echo $order['_id']; ?>')">
<i class="ecicon eci-trash" style="color:#7e7e7e;" onmouseover="this.style.color='#aaaaaa'"
onmouseout="this.style.color='#7e7e7e'"></i>
</a>
</div>
<!-- 02-16-2024 Stacy added style -->
</div>

109
product-left-sidebar.php
View File

@ -490,25 +490,31 @@ if (isset($_GET['id'])) {
$product_price = (!empty($product_details['sale_price'])) ? $product_details['sale_price'] : $product_details['regular_price'] ;
if ($_SESSION["isLoggedIn"]) {
if ($product_details['product_type'] === "variable") {
echo '<div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="decrement()">-</div>';
echo '<div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="decrement()"
onmouseover="this.style.color=\'#a15d00\'" onmouseout="this.style.color=\'#ffaa00\'">-</div>';
echo '<input class="qty-inputs" style="width:110px; height:40px" type="number" name="ec_qtybtn" value="';
echo (!empty($product_details['minimum_order'])) ? $product_details['minimum_order'] : "1";
echo '" id="qty-input" oninput="handleInput()" />';
echo '<div class="qty-btn" style="color:#ffaa00; font-size:25px; padding-left:5px; cursor: pointer;" onclick="increment()">+</div>';
echo '<div style="display:flex; margin-left:45px;"><button type="button" class="btn btn-primary" id="contactSellerButton" style="background:#ffaa00; width:190px;" data-bs-toggle="modal" data-bs-target="#priceModal"><i class="fi-rr-envelope" style="font-size:20px; margin-bottom:-3px; margin-right:10px;"></i>Contact Seller</button>';
echo '" id="qty-input" />';
echo '<div class="qty-btn" style="color:#ffaa00; font-size:25px; padding-left:5px; cursor: pointer;" onclick="increment()"
onmouseover="this.style.color=\'#a15d00\'" onmouseout="this.style.color=\'#ffaa00\'">+</div>';
echo '<div style="display:flex; margin-left:45px;"><button type="button" class="btn btn-primary" id="contactSellerButton" style="background:#ffaa00; width:190px;"
data-bs-toggle="modal" data-bs-target="#priceModal"><i class="fi-rr-envelope" style="font-size:20px; margin-bottom:-3px; margin-right:10px;"></i>Contact Seller</button>';
echo '<button class="btn btn-primary" id="addToCartButton" style="display:none">Add To Cart</button>';
echo '<div class="ec-single-wishlist">
<a class="ec-btn-group wishlist" title="Wishlist" onclick="wishlist()"><i class="fi fi-rr-heart" style="color:#B80F0A; font-size:20px;"></i></a>
</div></div>';
} else {
if (!empty($product_details['regular_price']) || !empty($product_details['sale_price'])) {
echo '<div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="decrement()">-</div>';
echo '<div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="decrement()"
onmouseover="this.style.color=\'#a15d00\'" onmouseout="this.style.color=\'#ffaa00\'">-</div>';
echo '<input class="qty-inputs" style="width:100px; height:40px" type="number" name="ec_qtybtn" value="';
echo (!empty($product_details['minimum_order'])) ? $product_details['minimum_order'] : "1";
echo '" id="qty-input" oninput="handleInput()" />';
echo '<div class="qty-btn" style="color:#ffaa00; font-size:25px; padding-left:5px; cursor: pointer;" onclick="increment()">+</div>';
// echo '<div id="addToCartMessage" style="border:1px solid red;"></div>';
echo '<div> <div id="addToCartMessage" style="padding-left:45px;"></div> <button class="btn btn-primary" id="addToCartButton" style="text-wrap:nowrap; background:#ffaa00; margin-left:55px;"><i class="fi-rr-shopping-bag" style="font-size:20px; margin-bottom:-3px; margin-right:10px;"></i>Add To Cart</button></div>';
echo '" id="qty-input" />';
echo '<div class="qty-btn" style="color:#ffaa00; font-size:25px; margin-left:5px; cursor: pointer;" onclick="increment()"
onmouseover="this.style.color=\'#a15d00\'" onmouseout="this.style.color=\'#ffaa00\'">+</div>';
echo '<div> <div id="addToCartMessage" style="padding-left:45px;"></div> <button class="btn btn-primary" id="addToCartButton" style="text-wrap:nowrap;
background:#ffaa00; margin-left:55px;" onmouseover="this.style.background=\'#df9000\'" onmouseout="this.style.background=\'#ffaa00\'">
<i class="fi-rr-shopping-bag" style="font-size:20px; margin-bottom:-3px; margin-right:10px;"></i>Add To Cart</button></div>';
echo '<div class="ec-single-wishlist">
<a class="ec-btn-group wishlist" title="Wishlist" onclick="wishlist()"><i class="fi fi-rr-heart" style="color:#B80F0A; font-size:20px;"></i></a>
</div>';
@ -518,7 +524,8 @@ if (isset($_GET['id'])) {
}
} else {
echo '<div class="login-button" style=""><p style="color:red; text-wrap:nowrap;">Please log in to your account.</p>';
echo '<a href="login.php" style="margin-left:-2px;"><button type="button" class="btn btn-primary" style="margin-left:-2px; margin-top:-20px; background:#ffaa00; border-radius:10px; letter-spacing:1px;" data-bs-toggle="modal">LOGIN</button></a></div>';
echo '<a href="login.php" style="margin-left:-2px;"><button type="button" class="btn btn-primary" style="margin-left:-2px; margin-top:-20px; background:#ffaa00;
border-radius:10px; letter-spacing:1px;" data-bs-toggle="modal">LOGIN</button></a></div>';
}
?>
<!-- <div class="ec-single-wishlist" style="border: 1px solid yellow;">
@ -1087,25 +1094,29 @@ if (isset($_GET['id'])) {
newOrder.id = `order_${response._id}`;
console.log(response)
newOrder.innerHTML = `
<a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img">
<img src="${response.items[0].product.product_image}" alt="product">
</a>
<div class="ec-pro-content">
<a href="shop-left-sidebar-col-4.php" class="cart_pro_title">${response.items[0].product.name}</a>
<span class="cart-price" id="cart-price">
Unit Price: <span>${response.items[0].price}</span>
</span>
<span id="subtotal-${response._id}" class="subtotal-${response._id}">Subtotal: ${totalAmount}</span>
<!-- 02-16-2024 Stacy added style -->
<div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; padding-top:10px;">
<div class="qty-btn" style="color:#ffaa00; font-size:35px; padding-right:5px; cursor: pointer;" onclick="qtyDecrement('${response._id}', '${response.items[0]._id}', true)">-</div>
<input style="width:100px; height:40px" id="qty-input-${response.items[0]._id}" class="qty-input" type="number" name="ec_qtybtn" value="${productData.quantity}" oninput="handleQtyInput(this, '${response._id}', '${response.items[0]._id}', true)"/>
<div class="qty-btn" style="color:#ffaa00; font-size:30px; padding-left:5px; cursor: pointer;" onclick="qtyIncrement('${response._id}', '${response.items[0]._id}', true)">+</div>
<a href="#" class="removeCart" onclick="deleteOrder('${response._id}')"><i class="ecicon eci-trash" style="padding:20px; opacity:70%"></i></a>
</div>
<!-- 02-16-2024 Stacy added style -->
</div>
`;
<a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img">
<img src="${response.items[0].product.product_image}" alt="product">
</a>
<div class="ec-pro-content">
<a href="shop-left-sidebar-col-4.php" class="cart_pro_title">${response.items[0].product.name}</a>
<span class="cart-price" id="cart-price">
Unit Price: <span>${response.items[0].price}</span>
</span>
<span id="subtotal-${response._id}" class="subtotal-${response._id}">Subtotal: ${totalAmount}</span>
<!-- 02-16-2024 Stacy added style -->
<div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; margin-top:5px;">
<div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="qtyDecrement('${response._id}', '${response.items[0]._id}', true)"
onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">-</div>
<input style="width:100px; height:40px" id="qty-input-${response.items[0]._id}" class="qty-input" type="number" name="ec_qtybtn" value="${productData.quantity}" oninput="handleQtyInput(this, '${response._id}', '${response.items[0]._id}', true)"/>
<div class="qty-btn" style="color:#ffaa00; font-size:30px; margin-left:5px; cursor: pointer;" onclick="qtyIncrement('${response._id}', '${response.items[0]._id}', true)"
onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">+</div>
<a href="#" class="removeCart" style="margin-left:30px;" onclick="deleteOrder('${response._id}')">
<i class="ecicon eci-trash" style="color:#7e7e7e;" onmouseover="this.style.color='#aaaaaa'"
onmouseout="this.style.color='#7e7e7e'"></i></a>
</div>
<!-- 02-16-2024 Stacy added style -->
</div>
`;
getLatestOrders()
updateCartItemCount()
cartList.appendChild(newOrder);
@ -1166,23 +1177,29 @@ if (isset($_GET['id'])) {
var totalAmount = response.items[0].price * updatedQuantity;
// If the cart item already exists, update its content using innerHTML
cartItem.innerHTML = `
<a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img">
<img src="${response.items[0].product.product_image}" alt="product">
</a>
<div class="ec-pro-content">
<a href="shop-left-sidebar-col-4.php" class="cart_pro_title">${response.items[0].product.name}</a>
<span class="cart-price" id="cart-price">
Unit Price: <span>${response.items[0].price}</span>
</span>
<span id="subtotal-${response._id}" class="subtotal-${response._id}">Subtotal: ${totalAmount}</span>
<div class="qty-plus-minuses">
<div class="qty-btn" onclick="qtyDecrement('${response._id}', '${response.items[0]._id}', true)">-</div>
<input id="qty-input-${response.items[0]._id}" class="qty-input" type="number" name="ec_qtybtn" value="${productData.quantity}" oninput="handleQtyInput(this, '${response._id}', '${response.items[0]._id}', true)"/>
<div class="qty-btn" onclick="qtyIncrement('${response._id}', '${response.items[0]._id}', true)">+</div>
</div>
<a href="#" class="removeCart" onclick="deleteOrder('${response._id}')">x</a>
</div>
`;
<a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img">
<img src="${response.items[0].product.product_image}" alt="product">
</a>
<div class="ec-pro-content">
<a href="shop-left-sidebar-col-4.php" class="cart_pro_title">${response.items[0].product.name}</a>
<span class="cart-price" id="cart-price">
Unit Price: <span>${response.items[0].price}</span>
</span>
<span id="subtotal-${response._id}" class="subtotal-${response._id}">Subtotal: ${totalAmount}</span>
<!-- 04-17-2024 Stacy added style -->
<div class="qty-plus-minuses" style="display:flex; overflow:visible; align-items:center; margin-top:5px;">
<div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="qtyDecrement('${response._id}', '${response.items[0]._id}', true)"
onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">-</div>
<input style="width:100px; height:40px" id="qty-input-${response.items[0]._id}" class="qty-input" type="number" name="ec_qtybtn" value="${productData.quantity}" oninput="handleQtyInput(this, '${response._id}', '${response.items[0]._id}', true)"/>
<div class="qty-btn" style="color:#ffaa00; font-size:30px; margin-left:5px; cursor: pointer;" onclick="qtyIncrement('${response._id}', '${response.items[0]._id}', true)"
onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">+</div>
<a href="#" class="removeCart" style="margin-left:30px;" onclick="deleteOrder('${response._id}')">
<i class="ecicon eci-trash" style="color:#7e7e7e;" onmouseover="this.style.color='#aaaaaa'"
onmouseout="this.style.color='#7e7e7e'"></i></a>
</div>
<!-- 04-17-2024 Stacy added style -->
</div>
`;
document.getElementById(`qty-input-${response.items[0]._id}`).value = updatedQuantity;
} else {
// If the cart item doesn't exist, create a new one