obanana_b2b_test/cart.php

1430 lines
95 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php
use Symfony\Component\VarDumper\VarDumper;
include "functions.php";
$_SESSION["url"] = $_SERVER['REQUEST_URI'];
if ($_SESSION["userId"] <> "") {
$_SESSION["isLoggedIn"] = true;
$customer_data = getCustomerbyLoginId($_SESSION["userId"]);
} else {
$_SESSION["isLoggedIn"] = false;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>oBanana B2B - Elevate Your Business</title>
<meta name="keywords" content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
<meta name="description" content="Best ecommerce html template for single and multi vendor store.">
<meta name="author" content="ashishmaraviya">
<!-- site Favicon -->
<link rel="icon" href="assets/images/favicon/favicon.png" sizes="32x32" />
<link rel="apple-touch-icon" href="assets/images/favicon/favicon.png" />
<meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
<!-- css Icon Font -->
<link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
<!-- css All Plugins Files -->
<link rel="stylesheet" href="assets/css/plugins/animate.css" />
<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/plugins/jquery-ui.min.css" />
<link rel="stylesheet" href="assets/css/plugins/countdownTimer.css" />
<link rel="stylesheet" href="assets/css/plugins/slick.min.css" />
<link rel="stylesheet" href="assets/css/plugins/bootstrap.css" />
<!-- Main Style -->
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
<!-- Background css -->
<link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
<script>
function updateCartItemCount() {
$.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
if (data != "") {
console.log("Data: " + data + "\nStatus: " + status);
document.getElementById("cartItemCount").innerHTML = data;
}
});
}
function updateWishItemCount() {
$.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
if (data != "") {
document.getElementById("wishItemCount").innerHTML = data;
}
});
}
</script>
</head>
<body class="cart_page" onload="updateCartItemCount(); updateWishItemCount()">
<div id="ec-overlay">
<div class="ec-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Header start -->
<?php include "header.php" ?>
<!-- Header End -->
<!-- Category Sidebar start -->
<?php include "category-slider.php" ?>
<!-- ekka Cart Start -->
<div class="ec-side-cart-overlay"></div>
<div id="ec-side-cart" class="ec-side-cart">
<div class="ec-cart-inner">
<div class="ec-cart-top">
<div class="ec-cart-title">
<span class="cart_title">My Cart</span>
<button class="ec-close">×</button>
</div>
<ul class="eccart-pro-items">
<li>
<a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img"><img loading="lazy" src="assets/images/product-image/6_1.jpg" alt="product"></a>
<div class="ec-pro-content">
<a href="shop-left-sidebar-col-4.php" class="cart_pro_title">T-shirt For Women</a>
<span class="cart-price"><span>$76.00</span> x 1</span>
<div class="qty-plus-minus">
<input class="qty-input" type="text" name="ec_qtybtn" value="1" />
</div>
<a href="javascript:void(0)" class="remove">×</a>
</div>
</li>
<li>
<a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img"><img loading="lazy" src="assets/images/product-image/12_1.jpg" alt="product"></a>
<div class="ec-pro-content">
<a href="shop-left-sidebar-col-4.php" class="cart_pro_title">Women Leather Shoes</a>
<span class="cart-price"><span>$64.00</span> x 1</span>
<div class="qty-plus-minus">
<input class="qty-input" type="text" name="ec_qtybtn" value="1" />
</div>
<a href="javascript:void(0)" class="remove">×</a>
</div>
</li>
<li>
<a href="shop-left-sidebar-col-4.php" class="sidekka_pro_img"><img loading="lazy" src="assets/images/product-image/3_1.jpg" alt="product"></a>
<div class="ec-pro-content">
<a href="shop-left-sidebar-col-4.php" class="cart_pro_title">Girls Nylon Purse</a>
<span class="cart-price"><span>$59.00</span> x 1</span>
<div class="qty-plus-minus">
<input class="qty-input" type="text" name="ec_qtybtn" value="1" />
</div>
<a href="javascript:void(0)" class="remove">×</a>
</div>
</li>
</ul>
</div>
<div class="ec-cart-bottom">
<div class="cart-sub-total">
<table class="table cart-table">
<tbody>
<tr>
<td class="text-left">Sub-Total :</td>
<td class="text-right">$300.00</td>
</tr>
<tr>
<td class="text-left">VAT (20%) :</td>
<td class="text-right">$60.00</td>
</tr>
<tr>
<td class="text-left">Total :</td>
<td class="text-right primary-color">$360.00</td>
</tr>
</tbody>
</table>
</div>
<div class="cart_btn">
<a href="cart.html" class="btn btn-primary">View Cart</a>
<a href="checkout.html" class="btn btn-secondary">Checkout</a>
</div>
</div>
</div>
</div>
<!-- ekka Cart End -->
<!-- Ec breadcrumb start -->
<div class="sticky-header-next-sec ec-breadcrumb section-space-mb">
<div class="container">
<div class="row">
<div class="col-12">
<div class="row ec_breadcrumb_inner">
<div class="col-md-6 col-sm-12">
<h2 class="ec-breadcrumb-title">Cart</h2>
</div>
<div class="col-md-6 col-sm-12">
<!-- ec-breadcrumb-list start -->
<ul class="ec-breadcrumb-list">
<li class="ec-breadcrumb-item"><a href="index.php">Home</a></li>
<li class="ec-breadcrumb-item active">Cart</li>
</ul>
<!-- ec-breadcrumb-list end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Ec breadcrumb end -->
<!-- Ec cart page -->
<section class="ec-page-content section-space-p">
<div class="container">
<div class="row">
<div class="ec-cart-leftside col-lg-8 col-md-12 ">
<!-- cart content Start -->
<div class="ec-cart-content">
<div class="ec-cart-inner">
<div class="row">
<form action="#">
<div class="table-content cart-table-content">
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th style="text-align: center;">Quantity</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
if ($_SESSION["isLoggedIn"] && $customer_data) {
// var_dump($customer_data);
$customer = $customer_data[0];
$orders = getOrderbyCustomerId($customer['_id']);
$totalAmount = 0;
$totalAmount2 = 0;
if ($orders) {
$order_data = json_decode($orders, true);
$_SESSION['cart_items'] = $order_data;
?>
<?php
//var_dump($order_data[0]['items'][0]['product']);
foreach ($order_data as $order) {
// Ensure that the required data is available before accessing it
if (isset($order['status']) && $order['status'] === 'CART' && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
$totalAmount2 += 50;
$product = getProduct($order['items'][0]['product']['product_id']);
$product_data = json_decode($product, true);
?>
<tr id="cart_order_<?php echo $order['_id'] ?>">
<td data-label="Product" class="ec-cart-pro-name"><a href="product-left-sidebar.php?id=<?php echo $order['items'][0]['product']['product_id']; ?>">
<img loading="lazy" class="ec-cart-pro-img mr-4" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="" />
<?php echo $order['items'][0]['product']['name']; ?></a>
</td>
<td data-label="Price" class="ec-cart-pro-price"><span class="amount"><?php echo $order['items'][0]['price']; ?></span></td>
<td data-label="Quantity" class="ec-cart-pro-qty" style="text-align: center;">
<!-- CART UI -->
<div class="cart-qty-plus-minus2 d-flex justify-content-center mt-1">
<div class="qty-btn" style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;" onclick="qtyDecrementCart('<?php echo $order['_id']; ?>' ,
'<?php echo $order['items'][0]['_id']; ?>',false, '<?php echo $order['items'][0]['product']['product_id']; ?>')"
onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">-
</div>
<input style="width:100px; height:40px mt-3" id="cart_qty-input-<?php echo $order['items'][0]['_id']; ?>" class="qty-input" type="number" name="ec_qtybtn"
value="<?php echo $order['items'][0]['quantity']; ?>" oninput="handleQtyInputCart(this, '<?php echo $order['_id']; ?>',
'<?php echo $order['items'][0]['_id']; ?>','<?php echo $order['items'][0]['product']['product_id']; ?>')" />
<div class="qty-btn" style="color:#ffaa00; font-size:30px; margin-left:5px; cursor: pointer;" onclick="qtyIncrementCart('<?php echo $order['_id']; ?>' ,
'<?php echo $order['items'][0]['_id']; ?>',false, '<?php echo $order['items'][0]['product']['product_id']; ?>')"
onmouseover="this.style.color='#a15d00'" onmouseout="this.style.color='#ffaa00'">+</div>
</div>
<span id="cart_qty_<?php echo $order['_id'] ?>"></span>
</td>
<td data-label="Total" class="cart_subtotal-<?php echo $order['_id']; ?>" style="font-weight:bold"> <?php echo $order['total_amount'] ?></td>
<td data-label="Remove" class="ec-cart-pro-remove">
<!-- <a onclick="deleteOrderCart('<?php # echo $order['_id']; ?>')"><i class="ecicon eci-trash-o"></i></a> -->
<a href="#" class="removeCart" onclick="deleteOrderCart('<?php echo $order['_id']; ?>')">
<i class="ecicon eci-trash" style="color:#7e7e7e;" onmouseover="this.style.color='#aaaaaa'"
onmouseout="this.style.color='#7e7e7e'">
</i>
</a>
</td>
</tr>
<?php
}
}
}
} else {
echo '<tr> <td>No items in the cart</td></tr>';
}
?>
<script>
// let myLatestOrders = [];
function handleQtyInputCart(input, orderId, itemId, prodId) {
var newQuantity = parseInt(input.value);
// updateQuantityCart(orderId, itemId, newQuantity);
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/${prodId}`, {
method: 'GET'
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
console.log(data.stock)
// Quantity updated successfully, update the UI
// document.getElementById('qty-input').value = newQuantity;
if (data.stock !== "" || data.stock !== null || data.minimum_order !== "" || data.minimum_order !== null) {
if (newQuantity > parseInt(data.stock)) {
document.getElementById(`cart_qty_${orderId}`).innerText = `Maximum Limit is ${data.stock}!`;
updateQuantityCart(orderId, itemId, data.stock);
} else if (newQuantity < parseInt(data.minimum_order)) {
document.getElementById(`cart_qty_${orderId}`).innerText = `Minimum Limit is ${data.minimum_order}`;
updateQuantityCart(orderId, itemId, data.minimum_order);
} else {
console.log('herreeeee2')
updateQuantityCart(orderId, itemId, newQuantity);
document.getElementById(`cart_qty_${orderId}`).textContent = '';
}
} else {
console.log('herreeeee')
var newQuantity = parseInt(qtyInputCart.value) + 1;
qtyInput.value = newQuantity;
qtyInputCart.value = newQuantity;
updateQuantityCart(orderId, itemId, newQuantity, isFloat);
}
} else {
alert('Error updating quantity: ' + data.status);
}
})
.catch(error => console.error('Error:', error));
console.log('incrementing')
}
function qtyIncrementCart(orderId, itemId, isFloat, prodId) {
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/${prodId}`, {
method: 'GET'
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
console.log(data.stock)
// Quantity updated successfully, update the UI
// document.getElementById('qty-input').value = newQuantity;
if (data.stock !== "" || data.stock !== null) {
var qtyInput = document.getElementById('qty-input-' + itemId);
var qtyInputCart = document.getElementById('cart_qty-input-' + itemId);
var newQuantity = parseInt(qtyInputCart.value) + 1;
if (newQuantity > parseInt(data.stock)) {
document.getElementById(`cart_qty_${orderId}`).innerText = 'Max Limit!';
} else {
qtyInput.value = newQuantity;
qtyInputCart.value = newQuantity;
updateQuantityCart(orderId, itemId, newQuantity, isFloat);
document.getElementById(`cart_qty_${orderId}`).textContent = '';
}
} else {
var qtyInput = document.getElementById('qty-input-' + itemId);
var qtyInputCart = document.getElementById('cart_qty-input-' + itemId);
var newQuantity = parseInt(qtyInputCart.value) + 1;
qtyInput.value = newQuantity;
qtyInputCart.value = newQuantity;
updateQuantityCart(orderId, itemId, newQuantity, isFloat);
}
} else {
alert('Error updating quantity: ' + data.status);
}
})
.catch(error => console.error('Error:', error));
console.log('incrementing')
}
function qtyDecrementCart(orderId, itemId, isFloat, prodId) {
console.log('decrementing')
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/${prodId}`, {
method: 'GET'
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
console.log(data.stock)
// Quantity updated successfully, update the UI
// document.getElementById('qty-input').value = newQuantity;
if (data.minimum_order !== "" || data.minimum_order !== null) {
var qtyInput = document.getElementById('qty-input-' + itemId);
var qtyInputCart = document.getElementById('cart_qty-input-' + itemId);
var newQuantity = parseInt(qtyInputCart.value) - 1;
// qtyInput.value = newQuantity;
// qtyInputCart.value = newQuantity;
if (newQuantity >= 1) {
if (newQuantity < parseInt(data.minimum_order)) {
document.getElementById(`cart_qty_${orderId}`).innerText = 'Minimum Limit!';
} else {
qtyInput.value = newQuantity;
qtyInputCart.value = newQuantity;
updateQuantityCart(orderId, itemId, newQuantity, isFloat);
document.getElementById(`cart_qty_${orderId}`).textContent = '';
}
}
} else {
var qtyInput = document.getElementById('qty-input-' + itemId);
var qtyInputCart = document.getElementById('cart_qty-input-' + itemId);
var newQuantity = parseInt(qtyInputCart.value) + 1;
qtyInput.value = newQuantity;
qtyInputCart.value = newQuantity;
updateQuantityCart(orderId, itemId, newQuantity, isFloat);
}
} else {
alert('Error updating quantity: ' + data.status);
}
})
.catch(error => console.error('Error:', error));
}
function updateQuantityCart(orderId, itemId, newQuantity, isFloat) {
console.log(isFloat)
const token = '<?php echo $_SESSION["token"] ?>';
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}/items/${itemId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
},
body: JSON.stringify({
quantity: newQuantity
})
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
// Quantity updated successfully, update the UI
// document.getElementById('qty-input').value = newQuantity;
if (isFloat === true) {
document.getElementById('qty-input-' + itemId).value = newQuantity;
updateFloatTotalAmountCart(orderId);
} else {
document.getElementById('qty-input-' + itemId).value = newQuantity;
updateTotalAmountCart(orderId);
}
} else {
alert('Error updating quantity: ' + data.status);
}
})
.catch(error => console.error('Error:', error));
}
function updateFloatTotalAmountCart(orderId) {
// Fetch the order data
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`)
.then(response => response.json())
.then(orderData => {
console.log("This is the OrderData: " + JSON.stringify(orderData, null, 2));
if (orderData && orderData !== "") {
// Calculate the new total amount based on the updated quantities
let newTotalAmount = orderData.items.reduce((total, item) => {
return total + (item.quantity * item.price);
}, 0);
// Update the total amount in the UI
document.getElementById(`subtotal-${orderId}`).innerText = 'Subtotal: ' + newTotalAmount;
// document.getElementById(`cart-price subtotal-${orderId}`).innerText = 'Subtotal: ' + newTotalAmount;
// Perform the PATCH request to update the total amount in the API
const token = '<?php echo $_SESSION["token"] ?>';
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
},
body: JSON.stringify({
total_amount: newTotalAmount
})
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
getLatestOrdersCart()
} else {
alert('Error updating total amount: ' + data.status);
}
})
.catch(error => console.error('Error:', error));
} else {
alert('Error fetching order data');
}
})
.catch(error => console.error('Error:', error));
}
function updateTotalAmountCart(orderId) {
// Fetch the order data
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`)
.then(response => response.json())
.then(orderData => {
if (orderData && orderData !== "") {
// Calculate the new total amount based on the updated quantities
let newTotalAmount = orderData.items.reduce((total, item) => {
return total + (item.quantity * item.price);
}, 0);
// Update the total amount in the UI
document.querySelector(`.cart-price .subtotal-${orderId}`).innerText = 'Subtotal: ' + newTotalAmount;
document.querySelector(`.cart_subtotal-${orderId}`).innerText = newTotalAmount;
// document.getElementById(`cart-price subtotal-${orderId}`).innerText = 'Subtotal: ' + newTotalAmount;
// Perform the PATCH request to update the total amount in the API
const token = '<?php echo $_SESSION["token"] ?>';
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token
},
body: JSON.stringify({
total_amount: newTotalAmount
})
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
// Total amount updated successfully
getLatestOrdersCart()
} else {
alert('Error updating total amount: ' + data.status);
}
})
.catch(error => console.error('Error:', error));
} else {
alert('Error fetching order data');
}
})
.catch(error => console.error('Error:', error));
}
function getLatestOrdersCart() {
var customerId = '<?php echo $customer['_id'] ?>'
// Fetch the order data
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/customer/${customerId}`)
.then(response => response.json())
.then(orderData => {
if (orderData && orderData !== "") {
console.log(orderData)
const filteredOrders = orderData.filter(order => order.status.toUpperCase() === 'CART');
const totalAmountSum = filteredOrders.reduce((sum, order) => {
const totalAmount = parseFloat(order.total_amount);
return sum + totalAmount;
}, 0);
console.log('Total Amount Sum:', totalAmountSum);
document.getElementById(`floatCartTotalAmount`).innerText = totalAmountSum;
document.getElementById(`cart_total_amount`).innerText = totalAmountSum;
document.getElementById(`cart_total_amount2`).innerText = totalAmountSum;
var total = '<?php echo $totalAmount2 ?>'
// document.getElementById(`cart_total_amount2`).innerText = totalAmountSum + parseFloat(total);
} else {
alert('Error fetching order data');
}
})
.catch(error => console.error('Error:', error));
}
function deleteOrderCart(orderId) {
console.log('delete')
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/' + orderId, {
method: 'DELETE'
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
// Order deleted successfully, update the UI
document.getElementById('cart_order_' + data._id).remove();
getLatestOrdersCart()
} else {
alert('Error deleting order: ' + data.status);
}
})
.catch(error => console.error('Error:', error));
}
</script>
<!-- <tr>
<td data-label="Product" class="ec-cart-pro-name"><a
href="shop-left-sidebar-col-4.php"><img loading="lazy"
class="ec-cart-pro-img mr-4"
src="assets/images/product-image/2.jpg" alt="" />Unisex
Fully Solid Hoodie</a></td>
<td data-label="Price" class="ec-cart-pro-price"><span
class="amount">$75.00</span></td>
<td data-label="Quantity" class="ec-cart-pro-qty"
style="text-align: center;">
<div class="cart-qty-plus-minus">
<input class="cart-plus-minus" type="text"
name="cartqtybutton" value="1" />
</div>
</td>
<td data-label="Total" class="ec-cart-pro-subtotal">$75.00</td>
<td data-label="Remove" class="ec-cart-pro-remove">
<a href="#"><i class="ecicon eci-trash-o"></i></a>
</td>
</tr>
<tr>
<td data-label="Product" class="ec-cart-pro-name"><a
href="shop-left-sidebar-col-4.php"><img loading="lazy"
class="ec-cart-pro-img mr-4"
src="assets/images/product-image/3.jpg"
alt="" />Beautiful T-shirt For Women</a></td>
<td data-label="Price" class="ec-cart-pro-price"><span
class="amount">$48.00</span></td>
<td data-label="Quantity" class="ec-cart-pro-qty"
style="text-align: center;">
<div class="cart-qty-plus-minus">
<input class="cart-plus-minus" type="text"
name="cartqtybutton" value="1" />
</div>
</td>
<td data-label="Total" class="ec-cart-pro-subtotal">$48.00</td>
<td data-label="Remove" class="ec-cart-pro-remove">
<a href="#"><i class="ecicon eci-trash-o"></i></a>
</td>
</tr>
<tr>
<td data-label="Product" class="ec-cart-pro-name"><a
href="shop-left-sidebar-col-4.php"><img loading="lazy"
class="ec-cart-pro-img mr-4"
src="assets/images/product-image/4.jpg" alt="" />Wool
Hat For Men</a></td>
<td data-label="Price" class="ec-cart-pro-price"><span
class="amount">$95.00</span></td>
<td data-label="Quantity" class="ec-cart-pro-qty"
style="text-align: center;">
<div class="cart-qty-plus-minus">
<input class="cart-plus-minus" type="text"
name="cartqtybutton" value="1" />
</div>
</td>
<td data-label="Total" class="ec-cart-pro-subtotal">$95.00</td>
<td data-label="Remove" class="ec-cart-pro-remove">
<a href="#"><i class="ecicon eci-trash-o"></i></a>
</td>
</tr> -->
</tbody>
</table>
</div>
<div class="row">
<div class="col-lg-12">
<div class="ec-cart-update-bottom">
<a href="index.php">Continue Shopping</a>
<a style="text-decoration:none; color:white" href="checkout.php" class="btn btn-primary">Check Out</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!--cart content End -->
</div>
<!-- Sidebar Area Start -->
<div class="ec-cart-rightside col-lg-4 col-md-12">
<div class="ec-sidebar-wrap">
<!-- Sidebar Summary Block -->
<div class="ec-sidebar-block">
<div class="ec-sb-title">
<h3 class="ec-sidebar-title">Summary</h3>
</div>
<!-- <div class="ec-sb-block-content">
<h4 class="ec-ship-title">Estimate Shipping</h4>
<div class="ec-cart-form">
<p>Enter your destination to get a shipping estimate</p>
<form action="#" method="post">
<span class="ec-cart-wrap">
<label>Country *</label>
<span class="ec-cart-select-inner">
<select name="ec_cart_country" id="ec-cart-select-country"
class="ec-cart-select">
<option selected="" disabled="">United States</option>
<option value="1">Country 1</option>
<option value="2">Country 2</option>
<option value="3">Country 3</option>
<option value="4">Country 4</option>
<option value="5">Country 5</option>
</select>
</span>
</span>
<span class="ec-cart-wrap">
<label>State/Province</label>
<span class="ec-cart-select-inner">
<select name="ec_cart_state" id="ec-cart-select-state"
class="ec-cart-select">
<option selected="" disabled="">Please Select a region, state
</option>
<option value="1">Region/State 1</option>
<option value="2">Region/State 2</option>
<option value="3">Region/State 3</option>
<option value="4">Region/State 4</option>
<option value="5">Region/State 5</option>
</select>
</span>
</span>
<span class="ec-cart-wrap">
<label>Zip/Postal Code</label>
<input type="text" name="postalcode" placeholder="Zip/Postal Code">
</span>
</form>
</div>
</div> -->
<div class="ec-sb-block-content">
<div class="ec-cart-summary-bottom">
<div class="ec-cart-summary">
<div>
<span class="text-left">Sub-Total</span>
<span class="text-right" id='cart_total_amount'><?php echo $totalAmount; ?></span>
</div>
<!-- <div>
<span class="text-left">Delivery Charges</span>
<span class="text-right"><?php echo $totalAmount2; ?></span>
</div> -->
<!-- <div>
<span class="text-left">Coupan Discount</span>
<span class="text-right"><a class="ec-cart-coupan">Apply Coupan</a></span>
</div> -->
<div class="ec-cart-coupan-content">
<form class="ec-cart-coupan-form" name="ec-cart-coupan-form" method="post" action="#">
<input class="ec-coupan" type="text" required="" placeholder="Enter Your Coupan Code" name="ec-coupan" value="">
<button class="ec-coupan-btn button btn-primary" type="submit" name="subscribe" value="">Apply</button>
</form>
</div>
<div class="ec-cart-summary-total">
<span class="text-left">Total Amount</span>
<span class="text-right" id='cart_total_amount2'><?php echo $totalAmount; ?></span>
</div>
</div>
</div>
</div>
</div>
<!-- Sidebar Summary Block -->
</div>
</div>
</div>
</div>
</section>
<!----------------------- New Product Start ------------------->
<!-- <section class="section ec-new-product section-space-p">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="section-title">
<h2 class="ec-bg-title">New Arrivals</h2>
<h2 class="ec-title">New Arrivals</h2>
<p class="sub-title">Browse The Collection of Top Products</p>
</div>
</div>
</div>
<div class="row"> -->
<!-- New Product Content -->
<!-- <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 pro-gl-content">
<div class="ec-product-inner">
<div class="ec-pro-image-outer">
<div class="ec-pro-image">
<a href="shop-left-sidebar-col-4.php" class="image">
<img loading="lazy" class="main-image" src="assets/images/product-image/6_1.jpg" alt="Product" />
<img loading="lazy" class="hover-image" src="assets/images/product-image/6_2.jpg" alt="Product" />
</a>
<span class="percentage">20%</span>
<a href="#" class="quickview" data-link-action="quickview" title="Quick view"
data-bs-toggle="modal" data-bs-target="#ec_quickview_modal"><i
class="fi-rr-eye"></i></a>
<div class="ec-pro-actions">
<a href="compare.html" class="ec-btn-group compare" title="Compare"><i
class="fi fi-rr-arrows-repeat"></i></a>
<button title="Add To Cart" class="add-to-cart"><i
class="fi-rr-shopping-basket"></i> Add To Cart</button>
<a class="ec-btn-group wishlist" title="Wishlist"><i class="fi-rr-heart"></i></a>
</div>
</div>
</div>
<div class="ec-pro-content">
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Round Neck T-Shirt</a></h5>
<div class="ec-pro-rating">
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star"></i>
</div>
<div class="ec-pro-list-desc">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum is simply dutmmy text ever since the 1500s, when an
unknown printer took a galley.</div>
<span class="ec-price">
<span class="old-price">$27.00</span>
<span class="new-price">$22.00</span>
</span>
<div class="ec-pro-option">
<div class="ec-pro-color">
<span class="ec-pro-opt-label">Color</span>
<ul class="ec-opt-swatch ec-change-img">
<li class="active"><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/6_1.jpg"
data-src-hover="assets/images/product-image/6_1.jpg"
data-tooltip="Gray"><span style="background-color:#e8c2ff;"></span></a>
</li>
<li><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/6_2.jpg"
data-src-hover="assets/images/product-image/6_2.jpg"
data-tooltip="Orange"><span
style="background-color:#9cfdd5;"></span></a></li>
</ul>
</div>
<div class="ec-pro-size">
<span class="ec-pro-opt-label">Size</span>
<ul class="ec-opt-size">
<li class="active"><a href="#" class="ec-opt-sz" data-old="$25.00"
data-new="$20.00" data-tooltip="Small">S</a></li>
<li><a href="#" class="ec-opt-sz" data-old="$27.00" data-new="$22.00"
data-tooltip="Medium">M</a></li>
<li><a href="#" class="ec-opt-sz" data-old="$35.00" data-new="$30.00"
data-tooltip="Extra Large">XL</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 pro-gl-content">
<div class="ec-product-inner">
<div class="ec-pro-image-outer">
<div class="ec-pro-image">
<a href="shop-left-sidebar-col-4.php" class="image">
<img loading="lazy" class="main-image" src="assets/images/product-image/7_1.jpg" alt="Product" />
<img loading="lazy" class="hover-image" src="assets/images/product-image/7_2.jpg" alt="Product" />
</a>
<span class="percentage">20%</span>
<span class="flags">
<span class="sale">Sale</span>
</span>
<a href="#" class="quickview" data-link-action="quickview" title="Quick view"
data-bs-toggle="modal" data-bs-target="#ec_quickview_modal"><i
class="fi-rr-eye"></i></a>
<div class="ec-pro-actions">
<a href="compare.html" class="ec-btn-group compare" title="Compare"><i
class="fi fi-rr-arrows-repeat"></i></a>
<button title="Add To Cart" class="add-to-cart"><i
class="fi-rr-shopping-basket"></i> Add To Cart</button>
<a class="ec-btn-group wishlist" title="Wishlist"><i class="fi-rr-heart"></i></a>
</div>
</div>
</div>
<div class="ec-pro-content">
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Full Sleeve Shirt</a></h5>
<div class="ec-pro-rating">
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star"></i>
</div>
<div class="ec-pro-list-desc">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum is simply dutmmy text ever since the 1500s, when an
unknown printer took a galley.</div>
<span class="ec-price">
<span class="old-price">$12.00</span>
<span class="new-price">$10.00</span>
</span>
<div class="ec-pro-option">
<div class="ec-pro-color">
<span class="ec-pro-opt-label">Color</span>
<ul class="ec-opt-swatch ec-change-img">
<li class="active"><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/7_1.jpg"
data-src-hover="assets/images/product-image/7_1.jpg"
data-tooltip="Gray"><span style="background-color:#01f1f1;"></span></a>
</li>
<li><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/7_2.jpg"
data-src-hover="assets/images/product-image/7_2.jpg"
data-tooltip="Orange"><span
style="background-color:#b89df8;"></span></a></li>
</ul>
</div>
<div class="ec-pro-size">
<span class="ec-pro-opt-label">Size</span>
<ul class="ec-opt-size">
<li class="active"><a href="#" class="ec-opt-sz" data-old="$12.00"
data-new="$10.00" data-tooltip="Small">S</a></li>
<li><a href="#" class="ec-opt-sz" data-old="$15.00" data-new="$12.00"
data-tooltip="Medium">M</a></li>
<li><a href="#" class="ec-opt-sz" data-old="$20.00" data-new="$17.00"
data-tooltip="Extra Large">XL</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 pro-gl-content">
<div class="ec-product-inner">
<div class="ec-pro-image-outer">
<div class="ec-pro-image">
<a href="shop-left-sidebar-col-4.php" class="image">
<img loading="lazy" class="main-image" src="assets/images/product-image/1_1.jpg" alt="Product" />
<img loading="lazy" class="hover-image" src="assets/images/product-image/1_2.jpg" alt="Product" />
</a>
<span class="percentage">20%</span>
<span class="flags">
<span class="sale">Sale</span>
</span>
<a href="#" class="quickview" data-link-action="quickview" title="Quick view"
data-bs-toggle="modal" data-bs-target="#ec_quickview_modal"><i
class="fi-rr-eye"></i></a>
<div class="ec-pro-actions">
<a href="compare.html" class="ec-btn-group compare" title="Compare"><i
class="fi fi-rr-arrows-repeat"></i></a>
<button title="Add To Cart" class="add-to-cart"><i
class="fi-rr-shopping-basket"></i> Add To Cart</button>
<a class="ec-btn-group wishlist" title="Wishlist"><i class="fi-rr-heart"></i></a>
</div>
</div>
</div>
<div class="ec-pro-content">
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Cute Baby Toy's</a></h5>
<div class="ec-pro-rating">
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star"></i>
</div>
<div class="ec-pro-list-desc">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum is simply dutmmy text ever since the 1500s, when an
unknown printer took a galley.</div>
<span class="ec-price">
<span class="old-price">$40.00</span>
<span class="new-price">$30.00</span>
</span>
<div class="ec-pro-option">
<div class="ec-pro-color">
<span class="ec-pro-opt-label">Color</span>
<ul class="ec-opt-swatch ec-change-img">
<li class="active"><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/1_1.jpg"
data-src-hover="assets/images/product-image/1_1.jpg"
data-tooltip="Gray"><span style="background-color:#90cdf7;"></span></a>
</li>
<li><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/1_2.jpg"
data-src-hover="assets/images/product-image/1_2.jpg"
data-tooltip="Orange"><span
style="background-color:#ff3b66;"></span></a></li>
<li><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/1_3.jpg"
data-src-hover="assets/images/product-image/1_3.jpg"
data-tooltip="Green"><span style="background-color:#ffc476;"></span></a>
</li>
<li><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/1_4.jpg"
data-src-hover="assets/images/product-image/1_4.jpg"
data-tooltip="Sky Blue"><span
style="background-color:#1af0ba;"></span></a></li>
</ul>
</div>
<div class="ec-pro-size">
<span class="ec-pro-opt-label">Size</span>
<ul class="ec-opt-size">
<li class="active"><a href="#" class="ec-opt-sz" data-old="$40.00"
data-new="$30.00" data-tooltip="Small">S</a></li>
<li><a href="#" class="ec-opt-sz" data-old="$50.00" data-new="$40.00"
data-tooltip="Medium">M</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 pro-gl-content">
<div class="ec-product-inner">
<div class="ec-pro-image-outer">
<div class="ec-pro-image">
<a href="shop-left-sidebar-col-4.php" class="image">
<img loading="lazy" class="main-image" src="assets/images/product-image/2_1.jpg" alt="Product" />
<img loading="lazy" class="hover-image" src="assets/images/product-image/2_2.jpg" alt="Product" />
</a>
<span class="percentage">20%</span>
<span class="flags">
<span class="new">New</span>
</span>
<a href="#" class="quickview" data-link-action="quickview" title="Quick view"
data-bs-toggle="modal" data-bs-target="#ec_quickview_modal"><i
class="fi-rr-eye"></i></a>
<div class="ec-pro-actions">
<a href="compare.html" class="ec-btn-group compare" title="Compare"><i
class="fi fi-rr-arrows-repeat"></i></a>
<button title="Add To Cart" class="add-to-cart"><i
class="fi-rr-shopping-basket"></i> Add To Cart</button>
<a class="ec-btn-group wishlist" title="Wishlist"><i class="fi-rr-heart"></i></a>
</div>
</div>
</div>
<div class="ec-pro-content">
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Jumbo Carry Bag</a></h5>
<div class="ec-pro-rating">
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star"></i>
</div>
<div class="ec-pro-list-desc">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum is simply dutmmy text ever since the 1500s, when an
unknown printer took a galley.</div>
<span class="ec-price">
<span class="old-price">$50.00</span>
<span class="new-price">$40.00</span>
</span>
<div class="ec-pro-option">
<div class="ec-pro-color">
<span class="ec-pro-opt-label">Color</span>
<ul class="ec-opt-swatch ec-change-img">
<li class="active"><a href="#" class="ec-opt-clr-img"
data-src="assets/images/product-image/2_1.jpg"
data-src-hover="assets/images/product-image/2_2.jpg"
data-tooltip="Gray"><span style="background-color:#fdbf04;"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 shop-all-btn"><a href="#">Shop All Collection</a></div>
</div>
</div>
</section> -->
<!-- New Product end -->
<!-- Footer Start -->
<?php include "footer.php" ?>
<!-- Footer Area End -->
<!-- Modal -->
<div class="modal fade" id="ec_quickview_modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="btn-close qty_close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
<!-- Swiper -->
<div class="qty-product-cover">
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_1.jpg" alt="">
</div>
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_2.jpg" alt="">
</div>
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_3.jpg" alt="">
</div>
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_4.jpg" alt="">
</div>
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_5.jpg" alt="">
</div>
</div>
<div class="qty-nav-thumb">
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_1.jpg" alt="">
</div>
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_2.jpg" alt="">
</div>
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_3.jpg" alt="">
</div>
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_4.jpg" alt="">
</div>
<div class="qty-slide">
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_5.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="quickview-pro-content">
<h5 class="ec-quick-title"><a href="shop-left-sidebar-col-4.php">Handbag leather purse for
women</a>
</h5>
<div class="ec-quickview-rating">
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star fill"></i>
<i class="ecicon eci-star"></i>
</div>
<div class="ec-quickview-desc">Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s,</div>
<div class="ec-quickview-price">
<span class="old-price">$100.00</span>
<span class="new-price">$80.00</span>
</div>
<div class="ec-pro-variation">
<div class="ec-pro-variation-inner ec-pro-variation-color">
<span>Color</span>
<div class="ec-pro-color">
<ul class="ec-opt-swatch">
<li><span style="background-color:#696d62;"></span></li>
<li><span style="background-color:#d73808;"></span></li>
<li><span style="background-color:#577023;"></span></li>
<li><span style="background-color:#2ea1cd;"></span></li>
</ul>
</div>
</div>
<div class="ec-pro-variation-inner ec-pro-variation-size ec-pro-size">
<span>Size</span>
<div class="ec-pro-variation-content">
<ul class="ec-opt-size">
<li class="active"><a href="#" class="ec-opt-sz" data-tooltip="Small">S</a></li>
<li><a href="#" class="ec-opt-sz" data-tooltip="Medium">M</a></li>
<li><a href="#" class="ec-opt-sz" data-tooltip="Large">X</a></li>
<li><a href="#" class="ec-opt-sz" data-tooltip="Extra Large">XL</a></li>
</ul>
</div>
</div>
</div>
<div class="ec-quickview-qty">
<div class="qty-plus-minus">
<input class="qty-input" type="text" name="ec_qtybtn" value="1" />
</div>
<div class="ec-quickview-cart ">
<button class="btn btn-primary"><i class="fi-rr-shopping-basket"></i> Add To
Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal end -->
<!-- Footer navigation panel for responsive display -->
<div class="ec-nav-toolbar">
<div class="container">
<div class="ec-nav-panel">
<div class="ec-nav-panel-icons">
<a href="#ec-mobile-menu" class="navbar-toggler-btn ec-header-btn ec-side-toggle"><i class="fi-rr-menu-burger"></i></a>
</div>
<div class="ec-nav-panel-icons">
<a href="#ec-side-cart" class="toggle-cart ec-header-btn ec-side-toggle"><i class="fi-rr-shopping-bag"></i><span class="ec-cart-noti ec-header-count cart-count-lable">3</span></a>
</div>
<div class="ec-nav-panel-icons">
<a href="index.php" class="ec-header-btn"><i class="fi-rr-home"></i></a>
</div>
<div class="ec-nav-panel-icons">
<a href="wishlist.html" class="ec-header-btn"><i class="fi-rr-heart"></i><span class="ec-cart-noti">4</span></a>
</div>
<div class="ec-nav-panel-icons">
<a href="login.php" class="ec-header-btn"><i class="fi-rr-user"></i></a>
</div>
</div>
</div>
</div>
<!-- Footer navigation panel for responsive display end -->
<!-- raymart remove popup feb 20 2024 -->
<!-- Recent Purchase Popup -->
<!-- <div class="recent-purchase">
<img loading="lazy" src="assets/images/product-image/1.jpg" alt="payment image">
<div class="detail">
<p>Someone in new just bought</p>
<h6>stylish baby shoes</h6>
<p>10 Minutes ago</p>
</div>
<a href="javascript:void(0)" class="icon-btn recent-close">×</a>
</div> -->
<!-- Recent Purchase Popup end -->
<!-- Cart Floating Button -->
<div class="ec-cart-float">
<a href="#ec-side-cart" class="ec-header-btn ec-side-toggle">
<div class="header-icon"><i class="fi-rr-shopping-basket"></i>
</div>
<span class="ec-cart-count cart-count-lable">3</span>
</a>
</div>
<!-- Cart Floating Button end -->
<!-- Whatsapp -->
<div class="ec-style ec-right-bottom">
<!-- Start Floating Panel Container -->
<div class="ec-panel">
<!-- Panel Header -->
<div class="ec-header">
<strong>Need Help?</strong>
<p>Chat with us on WhatsApp</p>
</div>
<!-- Panel Content -->
<div class="ec-body">
<ul>
<!-- Start Single Contact List -->
<li>
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
<div class="d-flex bd-highlight">
<!-- Profile Picture -->
<div class="ec-img-cont">
<img loading="lazy" src="assets/images/whatsapp/profile_01.jpg" class="ec-user-img" alt="Profile image">
<span class="ec-status-icon"></span>
</div>
<!-- Display Name & Last Seen -->
<div class="ec-user-info">
<span>Sahar Darya</span>
<p>Sahar left 7 mins ago</p>
</div>
<!-- Chat iCon -->
<div class="ec-chat-icon">
<i class="fa fa-whatsapp"></i>
</div>
</div>
</a>
</li>
<!--/ End Single Contact List -->
<!-- Start Single Contact List -->
<li>
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
<div class="d-flex bd-highlight">
<!-- Profile Picture -->
<div class="ec-img-cont">
<img loading="lazy" src="assets/images/whatsapp/profile_02.jpg" class="ec-user-img" alt="Profile image">
<span class="ec-status-icon ec-online"></span>
</div>
<!-- Display Name & Last Seen -->
<div class="ec-user-info">
<span>Yolduz Rafi</span>
<p>Yolduz is online</p>
</div>
<!-- Chat iCon -->
<div class="ec-chat-icon">
<i class="fa fa-whatsapp"></i>
</div>
</div>
</a>
</li>
<!--/ End Single Contact List -->
<!-- Start Single Contact List -->
<li>
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
<div class="d-flex bd-highlight">
<!-- Profile Picture -->
<div class="ec-img-cont">
<img loading="lazy" src="assets/images/whatsapp/profile_03.jpg" class="ec-user-img" alt="Profile image">
<span class="ec-status-icon ec-offline"></span>
</div>
<!-- Display Name & Last Seen -->
<div class="ec-user-info">
<span>Nargis Hawa</span>
<p>Nargis left 30 mins ago</p>
</div>
<!-- Chat iCon -->
<div class="ec-chat-icon">
<i class="fa fa-whatsapp"></i>
</div>
</div>
</a>
</li>
<!--/ End Single Contact List -->
<!-- Start Single Contact List -->
<li>
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
<div class="d-flex bd-highlight">
<!-- Profile Picture -->
<div class="ec-img-cont">
<img loading="lazy" src="assets/images/whatsapp/profile_04.jpg" class="ec-user-img" alt="Profile image">
<span class="ec-status-icon ec-offline"></span>
</div>
<!-- Display Name & Last Seen -->
<div class="ec-user-info">
<span>Khadija Mehr</span>
<p>Khadija left 50 mins ago</p>
</div>
<!-- Chat iCon -->
<div class="ec-chat-icon">
<i class="fa fa-whatsapp"></i>
</div>
</div>
</a>
</li>
<!--/ End Single Contact List -->
</ul>
</div>
</div>
<!--/ End Floating Panel Container -->
<!-- Start Right Floating Button-->
<div class="ec-right-bottom">
<div class="ec-box">
<div class="ec-button rotateBackward">
<img loading="lazy" class="whatsapp" src="assets/images/common/whatsapp.png" alt="whatsapp icon" />
</div>
</div>
</div>
<!--/ End Right Floating Button-->
</div>
<!-- Whatsapp end -->
<!-- Feature tools -->
<div class="ec-tools-sidebar-overlay"></div>
<div class="ec-tools-sidebar">
<div class="tool-title">
<h3>Features</h3>
</div>
<a href="#" class="ec-tools-sidebar-toggle in-out">
<img loading="lazy" alt="icon" src="assets/images/common/settings.png" />
</a>
<div class="ec-tools-detail">
<div class="ec-tools-sidebar-content ec-change-color ec-color-desc">
<h3>Color Scheme</h3>
<ul class="bg-panel">
<li class="active" data-color="01"><a href="#" class="colorcode1"></a></li>
<li data-color="02"><a href="#" class="colorcode2"></a></li>
<li data-color="03"><a href="#" class="colorcode3"></a></li>
<li data-color="04"><a href="#" class="colorcode4"></a></li>
<li data-color="05"><a href="#" class="colorcode5"></a></li>
</ul>
</div>
<div class="ec-tools-sidebar-content">
<h3>Backgrounds</h3>
<ul class="bg-panel">
<li class="bg"><a class="back-bg-1" id="bg-1">Background-1</a></li>
<li class="bg"><a class="back-bg-2" id="bg-2">Background-2</a></li>
<li class="bg"><a class="back-bg-3" id="bg-3">Background-3</a></li>
<li class="bg"><a class="back-bg-4" id="bg-4">Default</a></li>
</ul>
</div>
<div class="ec-tools-sidebar-content">
<h3>Full Screen mode</h3>
<div class="ec-fullscreen-mode">
<div class="ec-fullscreen-switch">
<div class="ec-fullscreen-btn">Mode</div>
<div class="ec-fullscreen-on">On</div>
<div class="ec-fullscreen-off">Off</div>
</div>
</div>
</div>
<div class="ec-tools-sidebar-content">
<h3>Dark mode</h3>
<div class="ec-change-mode">
<div class="ec-mode-switch">
<div class="ec-mode-btn">Mode</div>
<div class="ec-mode-on">On</div>
<div class="ec-mode-off">Off</div>
</div>
</div>
</div>
<div class="ec-tools-sidebar-content">
<h3>RTL mode</h3>
<div class="ec-change-rtl">
<div class="ec-rtl-switch">
<div class="ec-rtl-btn">Rtl</div>
<div class="ec-rtl-on">On</div>
<div class="ec-rtl-off">Off</div>
</div>
</div>
</div>
<div class="ec-tools-sidebar-content">
<h3>Clear local storage</h3>
<a class="clear-cach" href="javascript:void(0)">Clear Cache & Default</a>
</div>
</div>
</div>
<!-- Feature tools end -->
<!-- Vendor JS -->
<script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
<script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
<!--Plugins JS-->
<script src="assets/js/plugins/swiper-bundle.min.js"></script>
<script src="assets/js/plugins/countdownTimer.min.js"></script>
<script src="assets/js/plugins/scrollup.js"></script>
<script src="assets/js/plugins/jquery.zoom.min.js"></script>
<script src="assets/js/plugins/slick.min.js"></script>
<script src="assets/js/plugins/infiniteslidev2.js"></script>
<script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
<script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
<!-- Main Js -->
<script src="assets/js/vendor/index.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>