2024-02-12 10:35:09 +08:00
|
|
|
|
<?php
|
|
|
|
|
|
include "functions.php";
|
2024-02-15 20:42:37 +08:00
|
|
|
|
|
2024-02-12 10:35:09 +08:00
|
|
|
|
$_SESSION["url"] = $_SERVER['REQUEST_URI'];
|
|
|
|
|
|
if ($_SESSION["userId"] <> "") {
|
|
|
|
|
|
$_SESSION["isLoggedIn"] = true;
|
|
|
|
|
|
$customer_data = getCustomerbyLoginId($_SESSION["userId"]);
|
|
|
|
|
|
$customerId = $customer_data[0]['_id'];
|
|
|
|
|
|
// $cart_items = isset($_SESSION['cart_items']) ? $_SESSION['cart_items'] : [];
|
|
|
|
|
|
$cart_items = getOrderbyCustomerId($customerId);
|
|
|
|
|
|
|
|
|
|
|
|
$cart_decode = json_decode($cart_items, true);
|
|
|
|
|
|
$cartItems = array_filter($cart_decode, function ($order) {
|
|
|
|
|
|
return isset($order['status']) && $order['status'] === 'CART' && isset($order['items'][0]['product']);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$order_ids = [];
|
|
|
|
|
|
if ($cartItems) {
|
|
|
|
|
|
$cartencode = json_encode($cartItems);
|
|
|
|
|
|
foreach ($cartItems as $item) {
|
|
|
|
|
|
array_push($order_ids, $item['_id']);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// $filteredIds = array_map(function ($order) {
|
|
|
|
|
|
// return isset($order['_id']) ? $order['_id'] : null;
|
|
|
|
|
|
// }, $cartItems);
|
|
|
|
|
|
|
|
|
|
|
|
$filteredIdsJSON = json_encode($order_ids);
|
|
|
|
|
|
// $cartItemsArray = json_decode($cartItemsJSON, true);
|
|
|
|
|
|
// // $cartItemsJSON = $cartItems
|
|
|
|
|
|
// var_dump($cartItemsArray[12]);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
$_SESSION["isLoggedIn"] = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (isset($customer_data[0]["address"]) && is_array($customer_data[0]["address"])) {
|
|
|
|
|
|
// Iterate through addresses
|
|
|
|
|
|
foreach ($customer_data[0]["address"] as $address) {
|
|
|
|
|
|
// Check if billing is true
|
|
|
|
|
|
if ($address["billing"] === true) {
|
|
|
|
|
|
$billing = $address;
|
|
|
|
|
|
break; // Stop iterating once a match is found
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// var_dump($customer_data[0]["address"])
|
|
|
|
|
|
|
|
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
|
|
<!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 -->
|
2024-03-07 10:27:30 +08:00
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
|
|
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
|
|
|
|
<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>
|
2024-03-07 10:27:30 +08:00
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
|
|
#sidebar-category:hover{
|
|
|
|
|
|
color: #ffaa00;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
2024-02-12 10:35:09 +08:00
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body onload="updateCartItemCount(); updateWishItemCount()" class="checkout_page">
|
|
|
|
|
|
<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 -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ekka Cart Start -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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">Checkout</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">Checkout</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<!-- ec-breadcrumb-list end -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Ec breadcrumb end -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Ec checkout page -->
|
|
|
|
|
|
<section class="ec-page-content section-space-p">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="ec-checkout-leftside col-lg-8 col-md-12 ">
|
|
|
|
|
|
<!-- checkout content Start -->
|
|
|
|
|
|
<div class="ec-checkout-content">
|
|
|
|
|
|
<div class="ec-checkout-inner">
|
|
|
|
|
|
<!-- <div class="ec-checkout-wrap margin-bottom-30">
|
|
|
|
|
|
<div class="ec-checkout-block ec-check-new">
|
|
|
|
|
|
<h3 class="ec-checkout-title">New Customer</h3>
|
|
|
|
|
|
<div class="ec-check-block-content">
|
|
|
|
|
|
<div class="ec-check-subtitle">Checkout Options</div>
|
|
|
|
|
|
<form action="#">
|
|
|
|
|
|
<span class="ec-new-option">
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<input type="radio" id="account1" name="radio-group" checked>
|
|
|
|
|
|
<label for="account1">Register Account</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<input type="radio" id="account2" name="radio-group">
|
|
|
|
|
|
<label for="account2">Guest Account</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
<div class="ec-new-desc">By creating an account you will be able to shop faster,
|
|
|
|
|
|
be up to date on an order's status, and keep track of the orders you have
|
|
|
|
|
|
previously made.
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-new-btn"><a href="#" class="btn btn-primary">Continue</a></div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-checkout-block ec-check-login">
|
|
|
|
|
|
<h3 class="ec-checkout-title">Returning Customer</h3>
|
|
|
|
|
|
<div class="ec-check-login-form">
|
|
|
|
|
|
<form action="#" method="post">
|
|
|
|
|
|
<span class="ec-check-login-wrap">
|
|
|
|
|
|
<label>Email Address</label>
|
|
|
|
|
|
<input type="text" name="name" placeholder="Enter your email address" required />
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span class="ec-check-login-wrap">
|
|
|
|
|
|
<label>Password</label>
|
|
|
|
|
|
<input type="password" name="password" placeholder="Enter your password" required />
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
<span class="ec-check-login-wrap ec-check-login-btn">
|
|
|
|
|
|
<button class="btn btn-primary" type="submit">Login</button>
|
|
|
|
|
|
<a class="ec-check-login-fp" href="#">Forgot Password?</a>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<div class="ec-checkout-wrap margin-bottom-30 padding-bottom-3">
|
|
|
|
|
|
<div class="ec-checkout-block ec-check-bill">
|
|
|
|
|
|
<h3 class="ec-checkout-title">Billing Details</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="ec-bl-block-content">
|
|
|
|
|
|
<?php
|
|
|
|
|
|
foreach ($customer_data as $customer) {
|
|
|
|
|
|
?>
|
|
|
|
|
|
<div class="shipping">
|
|
|
|
|
|
<h3>Delivery Address:</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="sName">
|
|
|
|
|
|
<h5>Name:
|
|
|
|
|
|
<span id="selectedFName"><?php echo $customer['address'][0]['first_name']; ?></span>
|
|
|
|
|
|
<span id="selectedLName"> <?php echo $customer['address'][0]['last_name']; ?></span>
|
|
|
|
|
|
</h5>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="sContact">
|
|
|
|
|
|
<h5>Contact #:
|
|
|
|
|
|
<span id="selectedContact"> <?php echo $customer['address'][0]['phone']; ?></span>
|
|
|
|
|
|
</h5>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="sAddress">
|
|
|
|
|
|
<h5>Address:
|
|
|
|
|
|
<span id="sBuilding"><?php echo $customer['address'][0]['address_1']; ?></span>
|
|
|
|
|
|
<span id="sStreet"><?php echo $customer['address'][0]['address_2']; ?></span>
|
|
|
|
|
|
<span id="sBarangay"><?php echo $customer['address'][0]['barangay']; ?></span>
|
|
|
|
|
|
<span id="sCity"><?php echo $customer['address'][0]['city']; ?></span>
|
|
|
|
|
|
<span id="sProvince"><?php echo $customer['address'][0]['province']; ?></span>
|
|
|
|
|
|
<span id="sCountry"><?php echo $customer['address'][0]['country']; ?></span>
|
|
|
|
|
|
</h5>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button type="button" class="btn btn-primary" id="addressModalBtn" data-bs-toggle="modal" data-bs-target="#address">Select Address</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<?php } ?>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Modal HTML -->
|
|
|
|
|
|
<div class="modal fade" id="address" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#secondModal">Add New Address</button>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Display a list of addresses and let the user choose -->
|
2024-03-07 10:27:30 +08:00
|
|
|
|
<form id="addressForm" style="min-width: 500px;">
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<label>Select Address:</label>
|
|
|
|
|
|
<?php foreach ($customer_data as $customer_index => $customer) { ?>
|
|
|
|
|
|
<?php foreach ($customer['address'] as $address_index => $address) { ?>
|
2024-03-07 10:27:30 +08:00
|
|
|
|
<!-- added new id for filter delete -->
|
|
|
|
|
|
<div class="form-check" id="form-check-<?php echo $address_index ?>">
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<input type="radio" class="form-check-input" name="selectedAddress" id="address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>" value="<?php echo $customer_index; ?>_<?php echo $address_index; ?>">
|
2024-03-07 10:27:30 +08:00
|
|
|
|
<label class="form-check-label" style="max-width: 80%; word-wrap: break-word;" for="address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>">
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<?php echo $address['first_name']; ?> <?php echo $address['last_name']; ?><br>
|
|
|
|
|
|
<?php echo $address['address_1']; ?> <?php echo $address['address_2']; ?>
|
|
|
|
|
|
<?php echo $address['barangay']; ?>, <?php echo $address['city']; ?>,
|
|
|
|
|
|
<?php echo $address['province']; ?> <?php echo $address['country']; ?><br>
|
|
|
|
|
|
Phone: <?php echo $address['phone']; ?>
|
|
|
|
|
|
</label>
|
2024-03-07 10:27:30 +08:00
|
|
|
|
<!-- raymart added icon march 4 2024 -->
|
|
|
|
|
|
<?php
|
|
|
|
|
|
$address['id'] =$address_index;
|
|
|
|
|
|
$jsonAddress = json_encode($address)?>
|
|
|
|
|
|
<a onclick="deleteAddress('<?php echo $customer['_id']; ?>', <?php echo $address_index; ?>, true)"
|
|
|
|
|
|
class="fa-regular fa-trash-can" id="sidebar-category" style="float: right; font-size: 20px;"></a>
|
|
|
|
|
|
<a data-bs-toggle="modal" data-bs-target="#thirdModal" data-value=' <?php echo $jsonAddress; ?>'
|
|
|
|
|
|
class="fa-regular fa-pen-to-square" id="sidebar-category" style="float: right; font-size: 20px; padding-right: 50px;"></a>
|
|
|
|
|
|
<!-- raymart added icon march 4 2024 -->
|
2024-02-12 10:35:09 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<?php } ?>
|
|
|
|
|
|
<?php } ?>
|
|
|
|
|
|
<button type="button" onclick="useSelectedAddress()">Use Selected Address</button>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var customerData = <?php echo json_encode($customer_data); ?>;
|
|
|
|
|
|
|
2024-03-07 10:27:30 +08:00
|
|
|
|
// raymart/sir jun added delete function for customer id march 4 2024
|
|
|
|
|
|
function deleteAddress(customerId, addressIndex) {
|
|
|
|
|
|
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId)
|
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
|
.then(data => {
|
|
|
|
|
|
let existingAddresses = data.address || [];
|
|
|
|
|
|
if (addressIndex >= 0 && addressIndex < existingAddresses.length) {
|
|
|
|
|
|
existingAddresses.splice(addressIndex, 1);
|
|
|
|
|
|
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId, {
|
|
|
|
|
|
method: 'PATCH',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
|
address: existingAddresses
|
|
|
|
|
|
}),
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
// filter the delete action
|
|
|
|
|
|
document.getElementById('form-check-' + addressIndex).remove();
|
|
|
|
|
|
|
|
|
|
|
|
// location.reload();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('Failed to submit data');
|
|
|
|
|
|
alert('Failed to submit data');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
alert('Error submitting data');
|
|
|
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.log("Invalid address index.");
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
alert('Error fetching customer data');
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
// raymart/sir jun added delete function for customer id march 4 2024
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-02-12 10:35:09 +08:00
|
|
|
|
function useSelectedAddress() {
|
|
|
|
|
|
// Get the selected address radio button
|
|
|
|
|
|
var selectedAddress = document.querySelector('input[name="selectedAddress"]:checked');
|
|
|
|
|
|
|
|
|
|
|
|
if (selectedAddress) {
|
|
|
|
|
|
// Extract customer and address indices from the value attribute
|
|
|
|
|
|
var indices = selectedAddress.value.split('_');
|
|
|
|
|
|
var customerIndex = indices[0];
|
|
|
|
|
|
var addressIndex = indices[1];
|
|
|
|
|
|
|
|
|
|
|
|
// Update the name and contact number in the "Billing Details" section
|
|
|
|
|
|
document.getElementById('selectedFName').innerText = customerData[customerIndex]['address'][addressIndex]['first_name'];
|
|
|
|
|
|
document.getElementById('selectedLName').innerText = customerData[customerIndex]['address'][addressIndex]['last_name'];
|
|
|
|
|
|
document.getElementById('selectedContact').innerText = customerData[customerIndex]['address'][addressIndex]['phone'];
|
|
|
|
|
|
document.getElementById('sBuilding').innerText = customerData[customerIndex]['address'][addressIndex]['address_1'];
|
|
|
|
|
|
document.getElementById('sStreet').innerText = customerData[customerIndex]['address'][addressIndex]['address_2'];
|
|
|
|
|
|
document.getElementById('sBarangay').innerText = customerData[customerIndex]['address'][addressIndex]['barangay'];
|
|
|
|
|
|
document.getElementById('sCity').innerText = customerData[customerIndex]['address'][addressIndex]['city'];
|
|
|
|
|
|
document.getElementById('sProvince').innerText = customerData[customerIndex]['address'][addressIndex]['province'];
|
|
|
|
|
|
document.getElementById('sCountry').innerText = customerData[customerIndex]['address'][addressIndex]['country'];
|
|
|
|
|
|
// Close the modal (optional)
|
|
|
|
|
|
$('#address').modal('hide');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
alert('Please select an address.');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
<div class="modal-body" style="overflow-y: auto; max-height: 90vh;">
|
|
|
|
|
|
<form>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="addressFirstName" class="text-dark font-weight-medium pt-3 mb-2">First Name</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressFirstName">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="addressLastName" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressLastName">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="addressContact" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
|
|
|
|
|
|
<input type="number" class="form-control" id="addressContact">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2"> Building,Number </label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressBuilding">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="addressStreet" class="text-dark font-weight-medium pt-3 mb-2"> Street </label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressStreet">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="provinceSelect">Province</label>
|
|
|
|
|
|
<select class="form-select" id="provinceSelect">
|
|
|
|
|
|
<option value="" disabled selected hidden>Select Province</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="citySelect">Municipality/City</label>
|
|
|
|
|
|
<select class="form-select" id="citySelect" required>
|
|
|
|
|
|
<option value="" disabled selected hidden>Select Municipality/City</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="barangaySelect">Barangay</label>
|
|
|
|
|
|
<select class="form-select" id="barangaySelect" required>
|
|
|
|
|
|
<option value="" disabled selected hidden>Select Barangay</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="addressCountry" class="text-dark font-weight-medium pt-3 mb-2">Country</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressCountry">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button type="button" class="btn btn-primary" id="submitBtn">Submit</button>
|
2024-03-07 10:27:30 +08:00
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2024-02-12 10:35:09 +08:00
|
|
|
|
|
2024-03-07 10:27:30 +08:00
|
|
|
|
<!-- raymart added 3rd modal march to show the customer address 04 2024 -->
|
|
|
|
|
|
<div class="modal fade" id="thirdModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
|
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
|
<div class="modal-body" style="overflow-y: auto; max-height: 90vh;">
|
|
|
|
|
|
<form>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
|
|
|
|
|
|
<label for="addressFirstName" class="text-dark font-weight-medium pt-3 mb-2">First Name</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressFirstName2" value="<?php echo $address['first_name']; ?>">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <label for="addressFirstName" class="text-dark font-weight-medium pt-3 mb-2">First Name</label>-->
|
|
|
|
|
|
<input type="hidden" class="form-control" id="addressId" >
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
|
|
|
|
|
|
<label for="addressLastName" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressLastName2" value="<?php echo $address['last_name']; ?>">
|
|
|
|
|
|
<!-- <label for="addressLastName" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressLastName"> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
|
|
|
|
|
|
<label for="addressContact" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressContact2" value="<?php echo $address['phone']; ?>">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <label for="addressContact" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
|
|
|
|
|
|
<input type="number" class="form-control" id="addressContact"> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
|
|
|
|
|
|
<label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2">Building,Number</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressBuilding2" value="<?php echo $address['address_1']; ?>">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2"> Building,Number </label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressBuilding"> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
|
|
|
|
|
|
<label for="addressStreet" class="text-dark font-weight-medium pt-3 mb-2">Street </label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressStreet2" value="<?php echo $address['address_2']; ?>">
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <label for="addressStreet" class="text-dark font-weight-medium pt-3 mb-2"> Street </label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressStreet"> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
|
|
|
|
|
|
<label for="provinceSelect2">Province</label>
|
|
|
|
|
|
<select class="form-select" id="provinceSelect2">
|
|
|
|
|
|
<option id="provinceSelect2Opt" value="<?php echo $address['province']; ?>" >Select Province</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <label for="provinceSelect">Province</label>
|
|
|
|
|
|
<select class="form-select" id="provinceSelect">
|
|
|
|
|
|
<option value="" disabled selected hidden>Select Province</option>
|
|
|
|
|
|
</select> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="citySelect2">Municipality/City</label>
|
|
|
|
|
|
<select class="form-select" id="citySelect2" required>
|
|
|
|
|
|
<option value="" id="citySelect2Opt" selected hidden>Select Municipality/City</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="barangaySelect2">Barangay</label>
|
|
|
|
|
|
<select class="form-select" id="barangaySelect2" required>
|
|
|
|
|
|
<option value="" id="barangaySelect2Opt" selected hidden>Select Barangay</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="addressCountry2" class="text-dark font-weight-medium pt-3 mb-2">Country</label>
|
|
|
|
|
|
<input type="text" class="form-control" id="addressCountry2">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button type="button" class="btn btn-primary" id="submitBtn2">Submit</button>
|
|
|
|
|
|
<!-- raymart added 3rd modal march to show the customer address 04 2024 -->
|
|
|
|
|
|
|
2024-02-12 10:35:09 +08:00
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2024-03-07 10:27:30 +08:00
|
|
|
|
<script>
|
|
|
|
|
|
// raymart/sir mark added function to show the addresses of the customer in the third modal march 04 2024
|
|
|
|
|
|
$('#thirdModal').on('shown.bs.modal', function (event) {
|
|
|
|
|
|
|
|
|
|
|
|
var jsonString = $(event.relatedTarget).data('value');
|
|
|
|
|
|
|
|
|
|
|
|
var jsonObject = JSON.parse(jsonString);
|
|
|
|
|
|
console.log(jsonObject)
|
|
|
|
|
|
|
|
|
|
|
|
// document.getElementById("addressFirstName2").value('mmmm');
|
|
|
|
|
|
// $('#addressFirstName2').setAttribute('value','My default value');
|
|
|
|
|
|
document.querySelector('input[id="addressFirstName2"]').value = jsonObject.first_name;
|
|
|
|
|
|
document.querySelector('input[id="addressLastName2"]').value = jsonObject.last_name;
|
|
|
|
|
|
document.querySelector('input[id="addressContact2"]').value = jsonObject.phone;
|
|
|
|
|
|
document.querySelector('input[id="addressBuilding2"]').value = jsonObject.address_1;
|
|
|
|
|
|
document.querySelector('input[id="addressStreet2"]').value = jsonObject.address_2;
|
|
|
|
|
|
document.querySelector('option[id="provinceSelect2Opt"]').text = jsonObject.province;
|
|
|
|
|
|
document.querySelector('option[id="provinceSelect2Opt"]').value = jsonObject.province;
|
|
|
|
|
|
|
|
|
|
|
|
document.querySelector('option[id="citySelect2Opt"]').text = jsonObject.city;
|
|
|
|
|
|
document.querySelector('option[id="citySelect2Opt"]').value = jsonObject.city;
|
|
|
|
|
|
|
|
|
|
|
|
document.querySelector('option[id="barangaySelect2Opt"]').text = jsonObject.barangay;
|
|
|
|
|
|
document.querySelector('option[id="barangaySelect2Opt"]').value = jsonObject.barangay;
|
|
|
|
|
|
|
|
|
|
|
|
document.querySelector('input[id="addressCountry2"]').value = jsonObject.country;
|
|
|
|
|
|
document.querySelector('input[id="addressId"]').value = jsonObject.id;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('id ' + jsonObject.id)
|
|
|
|
|
|
const provinceSelect = $('#provinceSelect2'); // Use jQuery to select the element
|
|
|
|
|
|
const citySelect = $('#citySelect2'); // Use jQuery to select the element
|
|
|
|
|
|
const barangaySelect = $('#barangaySelect2'); // Use jQuery to select the element
|
|
|
|
|
|
|
|
|
|
|
|
// const provinceSelect = $('#provinceSelect2'); // Use jQuery to select the element
|
|
|
|
|
|
// const citySelect = $('#citySelect2'); // Use jQuery to select the element
|
|
|
|
|
|
// const barangaySelect = $('#barangaySelect2'); // Use jQuery to select the element
|
|
|
|
|
|
|
|
|
|
|
|
// Initialize Select2 on the provinceSelect, citySelect, and barangaySelect elements
|
|
|
|
|
|
provinceSelect.select2({
|
|
|
|
|
|
dropdownParent: $('#thirdModal'),
|
|
|
|
|
|
containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
citySelect.select2({
|
|
|
|
|
|
dropdownParent: $('#thirdModal'),
|
|
|
|
|
|
containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
|
|
|
|
|
|
});
|
|
|
|
|
|
barangaySelect.select2({
|
|
|
|
|
|
dropdownParent: $('#thirdModal'),
|
|
|
|
|
|
containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch provinces data
|
|
|
|
|
|
fetch('https://psgc.gitlab.io/api/provinces')
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
return response.json();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('Failed to fetch provinces');
|
|
|
|
|
|
throw new Error('Failed to fetch provinces');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(provincesData => {
|
|
|
|
|
|
// Iterate through the provinces data and add options
|
|
|
|
|
|
provincesData.forEach(province => {
|
|
|
|
|
|
const option = new Option(province.name, province.code);
|
|
|
|
|
|
provinceSelect.append(option);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Add an extra option manually
|
|
|
|
|
|
const extraOption = new Option('Metro Manila', '130000000');
|
|
|
|
|
|
provinceSelect.append(extraOption);
|
|
|
|
|
|
|
|
|
|
|
|
// Add event listener to provinceSelect
|
|
|
|
|
|
provinceSelect.on('change', function() {
|
|
|
|
|
|
// Clear existing options in citySelect and barangaySelect
|
|
|
|
|
|
citySelect.html('<option value="" disabled selected hidden>Select City</option>');
|
|
|
|
|
|
barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch and update cities/municipalities based on the selected province
|
|
|
|
|
|
updateCities();
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Function to update city/municipality options based on the selected province
|
|
|
|
|
|
function updateCities() {
|
|
|
|
|
|
const selectedProvinceCode = provinceSelect.val(); // Use val() to get the selected value with Select2
|
|
|
|
|
|
if (selectedProvinceCode) {
|
|
|
|
|
|
let citiesEndpoint;
|
|
|
|
|
|
if (selectedProvinceCode === '130000000') {
|
|
|
|
|
|
// Check if Metro Manila is selected
|
|
|
|
|
|
citiesEndpoint = 'https://psgc.gitlab.io/api/regions/130000000/cities-municipalities/';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
citiesEndpoint = `https://psgc.gitlab.io/api/provinces/${selectedProvinceCode}/cities-municipalities/`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
fetch(citiesEndpoint)
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
return response.json();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('Failed to fetch cities/municipalities');
|
|
|
|
|
|
throw new Error('Failed to fetch cities/municipalities');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(citiesData => {
|
|
|
|
|
|
// Iterate through the cities data and add options
|
|
|
|
|
|
citiesData.forEach(city => {
|
|
|
|
|
|
const option = new Option(city.name, city.code);
|
|
|
|
|
|
citySelect.append(option);
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Add event listener to citySelect
|
|
|
|
|
|
citySelect.on('change', function() {
|
|
|
|
|
|
// Clear existing options in barangaySelect
|
|
|
|
|
|
barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch and update barangays based on the selected city/municipality
|
|
|
|
|
|
const selectedCityCode = citySelect.val();
|
|
|
|
|
|
if (selectedCityCode) {
|
|
|
|
|
|
fetch(`https://psgc.gitlab.io/api/cities-municipalities/${selectedCityCode}/barangays/`)
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
return response.json();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('Failed to fetch barangays');
|
|
|
|
|
|
throw new Error('Failed to fetch barangays');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(barangaysData => {
|
|
|
|
|
|
// Iterate through the barangays data and add options
|
|
|
|
|
|
barangaysData.forEach(barangay => {
|
|
|
|
|
|
const option = new Option(barangay.name, barangay.code);
|
|
|
|
|
|
barangaySelect.append(option);
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// document.querySelector('input[id="addressFirstName2"]').value = jsonObject.last_name;
|
|
|
|
|
|
});
|
|
|
|
|
|
// raymart/sir mark added function to show the addresses of the customer in the third modal march 04 2024
|
|
|
|
|
|
const customerId = '<?php echo $customerId ?>';
|
2024-02-12 10:35:09 +08:00
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
// Get the select elements
|
|
|
|
|
|
const provinceSelect = $('#provinceSelect'); // Use jQuery to select the element
|
|
|
|
|
|
const citySelect = $('#citySelect'); // Use jQuery to select the element
|
|
|
|
|
|
const barangaySelect = $('#barangaySelect'); // Use jQuery to select the element
|
|
|
|
|
|
|
|
|
|
|
|
// Initialize Select2 on the provinceSelect, citySelect, and barangaySelect elements
|
|
|
|
|
|
provinceSelect.select2({
|
|
|
|
|
|
dropdownParent: $('#secondModal'),
|
|
|
|
|
|
containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
citySelect.select2({
|
|
|
|
|
|
dropdownParent: $('#secondModal'),
|
|
|
|
|
|
containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
|
|
|
|
|
|
});
|
|
|
|
|
|
barangaySelect.select2({
|
|
|
|
|
|
dropdownParent: $('#secondModal'),
|
|
|
|
|
|
containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch provinces data
|
|
|
|
|
|
fetch('https://psgc.gitlab.io/api/provinces')
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
return response.json();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('Failed to fetch provinces');
|
|
|
|
|
|
throw new Error('Failed to fetch provinces');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(provincesData => {
|
|
|
|
|
|
// Iterate through the provinces data and add options
|
|
|
|
|
|
provincesData.forEach(province => {
|
|
|
|
|
|
const option = new Option(province.name, province.code);
|
|
|
|
|
|
provinceSelect.append(option);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Add an extra option manually
|
|
|
|
|
|
const extraOption = new Option('Metro Manila', '130000000');
|
|
|
|
|
|
provinceSelect.append(extraOption);
|
|
|
|
|
|
|
|
|
|
|
|
// Add event listener to provinceSelect
|
|
|
|
|
|
provinceSelect.on('change', function() {
|
|
|
|
|
|
// Clear existing options in citySelect and barangaySelect
|
|
|
|
|
|
citySelect.html('<option value="" disabled selected hidden>Select City</option>');
|
|
|
|
|
|
barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch and update cities/municipalities based on the selected province
|
|
|
|
|
|
updateCities();
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Function to update city/municipality options based on the selected province
|
|
|
|
|
|
function updateCities() {
|
|
|
|
|
|
const selectedProvinceCode = provinceSelect.val(); // Use val() to get the selected value with Select2
|
|
|
|
|
|
if (selectedProvinceCode) {
|
|
|
|
|
|
let citiesEndpoint;
|
|
|
|
|
|
if (selectedProvinceCode === '130000000') {
|
|
|
|
|
|
// Check if Metro Manila is selected
|
|
|
|
|
|
citiesEndpoint = 'https://psgc.gitlab.io/api/regions/130000000/cities-municipalities/';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
citiesEndpoint = `https://psgc.gitlab.io/api/provinces/${selectedProvinceCode}/cities-municipalities/`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
fetch(citiesEndpoint)
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
return response.json();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('Failed to fetch cities/municipalities');
|
|
|
|
|
|
throw new Error('Failed to fetch cities/municipalities');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(citiesData => {
|
|
|
|
|
|
// Iterate through the cities data and add options
|
|
|
|
|
|
citiesData.forEach(city => {
|
|
|
|
|
|
const option = new Option(city.name, city.code);
|
|
|
|
|
|
citySelect.append(option);
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Add event listener to citySelect
|
|
|
|
|
|
citySelect.on('change', function() {
|
|
|
|
|
|
// Clear existing options in barangaySelect
|
|
|
|
|
|
barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
|
|
|
|
|
|
|
|
|
|
|
|
// Fetch and update barangays based on the selected city/municipality
|
|
|
|
|
|
const selectedCityCode = citySelect.val();
|
|
|
|
|
|
if (selectedCityCode) {
|
|
|
|
|
|
fetch(`https://psgc.gitlab.io/api/cities-municipalities/${selectedCityCode}/barangays/`)
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
return response.json();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('Failed to fetch barangays');
|
|
|
|
|
|
throw new Error('Failed to fetch barangays');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(barangaysData => {
|
|
|
|
|
|
// Iterate through the barangays data and add options
|
|
|
|
|
|
barangaysData.forEach(barangay => {
|
|
|
|
|
|
const option = new Option(barangay.name, barangay.code);
|
|
|
|
|
|
barangaySelect.append(option);
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$('#submitBtn').on('click', function() {
|
|
|
|
|
|
// Retrieve existing addresses from the API
|
|
|
|
|
|
// fetch('https://api.obanana.shop/api/v1/customers/65482e8d209ff8d348bd30fd')
|
2024-02-15 20:42:37 +08:00
|
|
|
|
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId)
|
2024-02-12 10:35:09 +08:00
|
|
|
|
.then(response => response.json())
|
|
|
|
|
|
.then(data => {
|
|
|
|
|
|
// Get the existing addresses array
|
|
|
|
|
|
const existingAddresses = data.address || [];
|
|
|
|
|
|
|
|
|
|
|
|
// Get the new address details
|
|
|
|
|
|
const firstName = $('#addressFirstName').val();
|
|
|
|
|
|
const lastName = $('#addressLastName').val();
|
|
|
|
|
|
const contact = $('#addressContact').val();
|
|
|
|
|
|
const buildingNumber = $('#addressBuilding').val();
|
|
|
|
|
|
const street = $('#addressStreet').val();
|
|
|
|
|
|
const province = $('#provinceSelect :selected').text();
|
|
|
|
|
|
const city = $('#citySelect :selected').text();
|
|
|
|
|
|
const barangay = $('#barangaySelect :selected').text();
|
|
|
|
|
|
const country = $('#addressCountry').val();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Create a new address object
|
|
|
|
|
|
const newAddress = {
|
|
|
|
|
|
first_name: firstName,
|
|
|
|
|
|
last_name: lastName,
|
|
|
|
|
|
phone: contact,
|
|
|
|
|
|
address_1: buildingNumber,
|
|
|
|
|
|
address_2: street,
|
|
|
|
|
|
city: city,
|
|
|
|
|
|
province: province,
|
|
|
|
|
|
barangay: barangay,
|
|
|
|
|
|
country: country,
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// Add the new address to the existing addresses
|
|
|
|
|
|
existingAddresses.push(newAddress);
|
|
|
|
|
|
|
|
|
|
|
|
// Make a PATCH request to update the addresses array
|
2024-02-15 20:42:37 +08:00
|
|
|
|
return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId, {
|
2024-02-12 10:35:09 +08:00
|
|
|
|
method: 'PATCH',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
|
address: existingAddresses
|
|
|
|
|
|
}),
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
// Handle success (e.g., show a success message)
|
|
|
|
|
|
location.reload();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// Handle error
|
|
|
|
|
|
console.error('Failed to submit data');
|
|
|
|
|
|
alert('Failed to submit data');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
// Handle network or other errors
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
alert('Error submitting data');
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
2024-03-07 10:27:30 +08:00
|
|
|
|
|
|
|
|
|
|
// raymart/sir mark added submitbtn2 for edited customerId march 04 2024
|
|
|
|
|
|
$('#submitBtn2').on('click', function() {
|
|
|
|
|
|
// function updateAddress(){
|
|
|
|
|
|
// Retrieve existing addresses from the API
|
|
|
|
|
|
// fetch('https://api.obanana.shop/api/v1/customers/65482e8d209ff8d348bd30fd')
|
|
|
|
|
|
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId)
|
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
|
.then(data => {
|
|
|
|
|
|
// Get the existing addresses array
|
|
|
|
|
|
const existingAddresses = data.address || [];
|
|
|
|
|
|
|
|
|
|
|
|
// Get the new address details
|
|
|
|
|
|
const firstName = $('#addressFirstName2').val();
|
|
|
|
|
|
const lastName = $('#addressLastName2').val();
|
|
|
|
|
|
const contact = $('#addressContact2').val();
|
|
|
|
|
|
const buildingNumber = $('#addressBuilding2').val();
|
|
|
|
|
|
const street = $('#addressStreet2').val();
|
|
|
|
|
|
const province = $('#provinceSelect2 :selected').text();
|
|
|
|
|
|
const city = $('#citySelect2 :selected').text();
|
|
|
|
|
|
const barangay = $('#barangaySelect2 :selected').text();
|
|
|
|
|
|
const country = $('#addressCountry2').val();
|
|
|
|
|
|
const id = $('#addressId').val();
|
|
|
|
|
|
console.log('clickkkkkkkk'+ id)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Create a new address object
|
|
|
|
|
|
const newAddress = {
|
|
|
|
|
|
first_name: firstName,
|
|
|
|
|
|
last_name: lastName,
|
|
|
|
|
|
phone: contact,
|
|
|
|
|
|
address_1: buildingNumber,
|
|
|
|
|
|
address_2: street,
|
|
|
|
|
|
city: city,
|
|
|
|
|
|
province: province,
|
|
|
|
|
|
barangay: barangay,
|
|
|
|
|
|
country: country,
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// Add the new address to the existing addresses
|
|
|
|
|
|
// existingAddresses.push(newAddress);
|
|
|
|
|
|
|
|
|
|
|
|
// var newAddresses= existingAddresses.filter((e,i)=>i!==id)
|
|
|
|
|
|
let existingAddress = existingAddresses
|
|
|
|
|
|
|
|
|
|
|
|
existingAddress[id]={
|
|
|
|
|
|
first_name: firstName,
|
|
|
|
|
|
last_name: lastName,
|
|
|
|
|
|
phone: contact,
|
|
|
|
|
|
address_1: buildingNumber,
|
|
|
|
|
|
address_2: street,
|
|
|
|
|
|
city: city,
|
|
|
|
|
|
province: province,
|
|
|
|
|
|
barangay: barangay,
|
|
|
|
|
|
country: country,
|
|
|
|
|
|
};
|
|
|
|
|
|
console.log( existingAddress[id])
|
|
|
|
|
|
// Make a PATCH request to update the addresses array
|
|
|
|
|
|
return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId, {
|
|
|
|
|
|
method: 'PATCH',
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json'
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
|
address: existingAddress
|
|
|
|
|
|
}),
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
.then(response => {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
// Handle success (e.g., show a success message)
|
|
|
|
|
|
location.reload();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// Handle error
|
|
|
|
|
|
console.error('Failed to submit data');
|
|
|
|
|
|
alert('Failed to submit data');
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
// Handle network or other errors
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
alert('Error submitting data');
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
2024-02-12 10:35:09 +08:00
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<span class="ec-check-order-btn">
|
2024-03-13 10:59:15 +08:00
|
|
|
|
<?php
|
|
|
|
|
|
if (empty($cartItems)) {
|
|
|
|
|
|
echo '<!-- $cartItems is empty, "Place Order" button will not be displayed -->';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
echo '
|
|
|
|
|
|
<span class="ec-check-order-btn">
|
2024-03-07 10:35:05 +08:00
|
|
|
|
<a class="btn btn-primary" id="submitButton">Place Order</a>
|
2024-03-13 10:59:15 +08:00
|
|
|
|
</span>';
|
|
|
|
|
|
}
|
|
|
|
|
|
?>
|
2024-02-12 10:35:09 +08:00
|
|
|
|
</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!--cart content End -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Sidebar Area Start -->
|
|
|
|
|
|
<div class="ec-checkout-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">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="ec-checkout-pro">
|
|
|
|
|
|
<?php foreach ($cartItems as $checkout) { ?>
|
|
|
|
|
|
<div class="col-sm-12 mb-6">
|
|
|
|
|
|
<?php foreach ($checkout['items'] as $item) { ?>
|
|
|
|
|
|
<div class="ec-product-inner">
|
2024-02-29 13:21:33 +08:00
|
|
|
|
<div class="ec-pro-image-outer" >
|
|
|
|
|
|
<div class="ec-pro-image" style="width: 128px; height: 150px; display: flex; justify-content: center; align-items: center;">
|
|
|
|
|
|
<a href="product-left-sidebar.php?id=<?php echo $item['product']['product_id']; ?>">
|
|
|
|
|
|
<?php
|
|
|
|
|
|
if (isset($item['product']['product_image'])) {
|
|
|
|
|
|
$image_urls = explode(',', $item['product']['product_image']);
|
|
|
|
|
|
if (!empty($image_urls)) {
|
|
|
|
|
|
$first_image_url = trim($image_urls[0]);
|
|
|
|
|
|
?>
|
|
|
|
|
|
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" />
|
|
|
|
|
|
<?php
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
?>
|
|
|
|
|
|
<img class="main-image" src="https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png" alt="edit" />
|
|
|
|
|
|
<?php
|
|
|
|
|
|
}
|
|
|
|
|
|
?>
|
2024-02-12 10:35:09 +08:00
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-pro-content">
|
2024-02-29 13:21:33 +08:00
|
|
|
|
<h5 class="ec-pro-title"><a href="product-left-sidebar.php?id=<?php echo $item['product']['product_id']; ?>"><?php echo $item['product']['name']; ?></a></h5>
|
2024-03-20 14:46:03 +08:00
|
|
|
|
<!-- <div class="ec-pro-rating">
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<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>
|
2024-03-20 14:46:03 +08:00
|
|
|
|
</div> -->
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<span class="ec-price">
|
|
|
|
|
|
<span class="new-price"><?php echo $item['price']; ?> x <?php echo $item['quantity']; ?></span>
|
|
|
|
|
|
</span>
|
2024-02-29 13:21:33 +08:00
|
|
|
|
<?php $checkProduct = getProduct($item['product']['product_id']);
|
|
|
|
|
|
$decodedProduct = json_decode($checkProduct, true);
|
|
|
|
|
|
$freeShipping = false;
|
|
|
|
|
|
if (!empty($decodedProduct['promo']) && $decodedProduct['promo'][0]['free-shipping'] === 'Yes') {
|
|
|
|
|
|
$freeShipping = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// Set the shipping fee based on the condition
|
|
|
|
|
|
$shippingFee = $freeShipping ? 0 : $checkout['shipping_fee'];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Set the shipping fee based on the condition
|
|
|
|
|
|
?>
|
|
|
|
|
|
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<span class="ec-price">
|
2024-02-29 13:21:33 +08:00
|
|
|
|
<span class="new-price">Shipping Fee: <?php echo $shippingFee; ?></span>
|
2024-02-12 10:35:09 +08:00
|
|
|
|
</span>
|
|
|
|
|
|
<span class="ec-price">
|
2024-02-29 13:21:33 +08:00
|
|
|
|
<span class="new-price">Subtotal: <?php echo $shippingFee + $checkout['total_amount']; ?></span>
|
2024-02-12 10:35:09 +08:00
|
|
|
|
</span>
|
2024-02-27 09:11:14 +08:00
|
|
|
|
<!-- 02-22-2024 Stacy hide variation -->
|
2024-02-27 08:56:59 +08:00
|
|
|
|
<!-- <div class="ec-pro-option">
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<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:#6d4c36;"></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:#ffb0e1;"></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:#8beeff;"></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:#74f8d1;"></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="$95.00" data-new="$79.00" data-tooltip="Small">S</a></li>
|
|
|
|
|
|
<li><a href="#" class="ec-opt-sz" data-old="$90.00" data-new="$70.00" data-tooltip="Medium">M</a></li>
|
|
|
|
|
|
<li><a href="#" class="ec-opt-sz" data-old="$80.00" data-new="$60.00" data-tooltip="Large">X</a></li>
|
|
|
|
|
|
<li><a href="#" class="ec-opt-sz" data-old="$70.00" data-new="$50.00" data-tooltip="Extra Large">XL</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
2024-02-27 08:56:59 +08:00
|
|
|
|
</div> -->
|
2024-02-27 09:11:14 +08:00
|
|
|
|
<!-- 02-22-2024 Stacy hide variation -->
|
2024-02-12 10:35:09 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<?php } ?>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<?php } ?>
|
|
|
|
|
|
<!-- <div class="col-sm-12 mb-0">
|
|
|
|
|
|
<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 class="main-image"
|
|
|
|
|
|
src="assets/images/product-image/8_1.jpg"
|
|
|
|
|
|
alt="Product" />
|
|
|
|
|
|
<img class="hover-image"
|
|
|
|
|
|
src="assets/images/product-image/8_2.jpg"
|
|
|
|
|
|
alt="Product" />
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-pro-content">
|
|
|
|
|
|
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Smart I watch 2GB</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>
|
|
|
|
|
|
<span class="ec-price">
|
|
|
|
|
|
<span class="old-price">$58.00</span>
|
|
|
|
|
|
<span class="new-price">$45.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/8_2.jpg"
|
|
|
|
|
|
data-src-hover="assets/images/product-image/8_2.jpg"
|
|
|
|
|
|
data-tooltip="Gray"><span
|
|
|
|
|
|
style="background-color:#f3f3f3;"></span></a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li><a href="#" class="ec-opt-clr-img"
|
|
|
|
|
|
data-src="assets/images/product-image/8_3.jpg"
|
|
|
|
|
|
data-src-hover="assets/images/product-image/8_3.jpg"
|
|
|
|
|
|
data-tooltip="Orange"><span
|
|
|
|
|
|
style="background-color:#fac7f3;"></span></a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li><a href="#" class="ec-opt-clr-img"
|
|
|
|
|
|
data-src="assets/images/product-image/8_4.jpg"
|
|
|
|
|
|
data-src-hover="assets/images/product-image/8_4.jpg"
|
|
|
|
|
|
data-tooltip="Green"><span
|
|
|
|
|
|
style="background-color:#c5f1ff;"></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="$48.00" data-new="$45.00"
|
|
|
|
|
|
data-tooltip="Small">S</a></li>
|
|
|
|
|
|
<li><a href="#" class="ec-opt-sz" data-old="$90.00"
|
|
|
|
|
|
data-new="$70.00" data-tooltip="Medium">M</a></li>
|
|
|
|
|
|
<li><a href="#" class="ec-opt-sz" data-old="$80.00"
|
|
|
|
|
|
data-new="$60.00" data-tooltip="Large">X</a></li>
|
|
|
|
|
|
<li><a href="#" class="ec-opt-sz" data-old="$70.00"
|
|
|
|
|
|
data-new="$50.00" data-tooltip="Extra Large">XL</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-checkout-summary">
|
|
|
|
|
|
<!-- <div>
|
|
|
|
|
|
<span class="text-left">Coupan Discount</span>
|
|
|
|
|
|
<span class="text-right"><a class="ec-checkout-coupan">Apply Coupan</a></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-checkout-coupan-content">
|
|
|
|
|
|
<form class="ec-checkout-coupan-form" name="ec-checkout-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-checkout-summary-total">
|
|
|
|
|
|
|
|
|
|
|
|
<?php
|
|
|
|
|
|
$totalAmount = 0;
|
|
|
|
|
|
foreach ($cartItems as $checkout) {
|
2024-02-29 13:21:33 +08:00
|
|
|
|
foreach ($checkout['items'] as $item) {
|
|
|
|
|
|
$checkProduct = getProduct($item['product']['product_id']);
|
|
|
|
|
|
$decodedProduct = json_decode($checkProduct, true);
|
|
|
|
|
|
$freeShipping = false;
|
|
|
|
|
|
|
|
|
|
|
|
if (!empty($decodedProduct['promo']) && $decodedProduct['promo'][0]['free-shipping'] === 'Yes') {
|
|
|
|
|
|
$freeShipping = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$shippingFee = $freeShipping ? 0 : $checkout['shipping_fee'];
|
|
|
|
|
|
|
2024-04-04 18:01:18 +08:00
|
|
|
|
$totalAmount += ($item['price'] * $item['quantity']) + $shippingFee ;
|
2024-02-29 13:21:33 +08:00
|
|
|
|
}
|
2024-02-12 10:35:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
|
|
<span class="text-left">Total Amount</span>
|
|
|
|
|
|
<span class="text-right"><?php echo $totalAmount; ?></span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Sidebar Summary Block -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="ec-sidebar-wrap ec-checkout-del-wrap"> -->
|
|
|
|
|
|
<!-- Sidebar Summary Block -->
|
|
|
|
|
|
<!-- <div class="ec-sidebar-block">
|
|
|
|
|
|
<div class="ec-sb-title">
|
|
|
|
|
|
<h3 class="ec-sidebar-title">Delivery Method</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-sb-block-content">
|
|
|
|
|
|
<div class="ec-checkout-del">
|
|
|
|
|
|
<div class="ec-del-desc">Please select the preferred shipping method to use on this
|
|
|
|
|
|
order.</div>
|
|
|
|
|
|
<form action="#">
|
|
|
|
|
|
<span class="ec-del-option">
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<span class="ec-del-opt-head">Free Shipping</span>
|
|
|
|
|
|
<input type="radio" id="del1" name="radio-group" checked>
|
|
|
|
|
|
<label for="del1">Rate - $0 .00</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<span class="ec-del-opt-head">Flat Rate</span>
|
|
|
|
|
|
<input type="radio" id="del2" name="radio-group">
|
|
|
|
|
|
<label for="del2">Rate - $5.00</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span class="ec-del-commemt">
|
|
|
|
|
|
<span class="ec-del-opt-head">Add Comments About Your Order</span>
|
|
|
|
|
|
<textarea name="your-commemt" placeholder="Comments"></textarea>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<!-- Sidebar Summary Block -->
|
|
|
|
|
|
<!-- </div> -->
|
|
|
|
|
|
<div class="ec-sidebar-wrap ec-checkout-pay-wrap">
|
|
|
|
|
|
<!-- Sidebar Payment Block -->
|
|
|
|
|
|
<div class="ec-sidebar-block">
|
|
|
|
|
|
<div class="ec-sb-title">
|
|
|
|
|
|
<h3 class="ec-sidebar-title">Payment Method</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-sb-block-content">
|
|
|
|
|
|
<div class="ec-checkout-pay">
|
|
|
|
|
|
<div class="ec-pay-desc">Please select the preferred payment method to use on this
|
|
|
|
|
|
order.</div>
|
|
|
|
|
|
<span class="ec-pay-option">
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<input type="radio" id="pay1" name="radio-group" checked>
|
|
|
|
|
|
<label for="pay1"> Paymongo</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<input type="radio" id="pay2" name="radio-group" checked>
|
|
|
|
|
|
<label for="pay2"> ObananaPay</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<input type="radio" id="pay3" name="radio-group" checked>
|
|
|
|
|
|
<label for="pay3"> Cash on Delivery</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<!-- <button id="submitButton">Submit</button> -->
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
const pay1RadioButton = document.getElementById('pay1');
|
|
|
|
|
|
const pay2RadioButton = document.getElementById('pay2');
|
|
|
|
|
|
const pay3RadioButton = document.getElementById('pay3');
|
|
|
|
|
|
const billingFName = '<?php echo $billing['first_name']; ?>';
|
|
|
|
|
|
const billingLName = '<?php echo $billing['last_name']; ?>';
|
|
|
|
|
|
const billingNumber = '<?php echo $billing['phone']; ?>';
|
|
|
|
|
|
const billingBuilding = '<?php echo $billing['address_1']; ?>';
|
|
|
|
|
|
const billingStreet = '<?php echo $billing['address_2']; ?>';
|
|
|
|
|
|
const billingCity = '<?php echo $billing['city']; ?>';
|
|
|
|
|
|
const billingBarangay = '<?php echo $billing['barangay']; ?>';
|
|
|
|
|
|
const billingProvince = '<?php echo $billing['province']; ?>';
|
|
|
|
|
|
const billingCountry = '<?php echo $billing['country']; ?>';
|
|
|
|
|
|
const submitButton = document.getElementById('submitButton');
|
|
|
|
|
|
const totalAmount = '<?php echo $totalAmount; ?>';
|
|
|
|
|
|
const username = "hey";
|
|
|
|
|
|
const password = "heytoo";
|
|
|
|
|
|
let itemNames = [];
|
|
|
|
|
|
submitButton.addEventListener('click', async function() {
|
|
|
|
|
|
if (pay1RadioButton.checked) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
<?php foreach ($cartItems as $checkout) { ?>
|
|
|
|
|
|
<?php foreach ($checkout['items'] as $item) { ?>
|
|
|
|
|
|
itemNames.push("<?php echo str_replace('"', "\\'", $item['product']['name']) . ' (' . $item['quantity'] . ')'; ?>");
|
|
|
|
|
|
<?php } ?>
|
|
|
|
|
|
<?php } ?>
|
|
|
|
|
|
const username1 = "sk_test_d3udfWvkBPvjExLPmyeJxXFa";
|
|
|
|
|
|
// const password = "c2tfdGVzdF9kM3VkZld2a0JQdmpFeExQbXllSnhYRmE6";
|
|
|
|
|
|
const base64Credentials = btoa(`${username1}`);
|
|
|
|
|
|
|
|
|
|
|
|
const data = {
|
|
|
|
|
|
data: {
|
|
|
|
|
|
|
|
|
|
|
|
attributes: {
|
|
|
|
|
|
amount: totalAmount * 100,
|
|
|
|
|
|
description: itemNames.join(', '),
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const response = await fetch('https://api.paymongo.com/v1/links/', {
|
|
|
|
|
|
method: "POST",
|
|
|
|
|
|
body: JSON.stringify(data),
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
Authorization: `Basic ${base64Credentials}`,
|
|
|
|
|
|
Accept: 'application/json',
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
console.log(JSON.stringify(data));
|
|
|
|
|
|
const result = await response.json();
|
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
// window.open(result.data.attributes.checkout_url);
|
|
|
|
|
|
window.location.href = result.data.attributes.checkout_url;
|
|
|
|
|
|
// Handle the result as needed
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
// Handle errors
|
|
|
|
|
|
}
|
|
|
|
|
|
} else if (pay2RadioButton.checked) {
|
|
|
|
|
|
try {
|
2024-04-04 18:01:18 +08:00
|
|
|
|
const selectedFName = document.getElementById('selectedFName').innerText;
|
|
|
|
|
|
const selectedLName = document.getElementById('selectedLName').innerText;
|
|
|
|
|
|
const selectedContact = document.getElementById('selectedContact').innerText;
|
|
|
|
|
|
const sBuilding = document.getElementById('sBuilding').innerText;
|
|
|
|
|
|
const sStreet = document.getElementById('sStreet').innerText;
|
|
|
|
|
|
const sCity = document.getElementById('sCity').innerText;
|
|
|
|
|
|
const sBarangay = document.getElementById('sBarangay').innerText;
|
|
|
|
|
|
const sProvince = document.getElementById('sProvince').innerText;
|
|
|
|
|
|
const sCountry = document.getElementById('sCountry').innerText;
|
|
|
|
|
|
if (
|
|
|
|
|
|
selectedFName.trim() === "" ||
|
|
|
|
|
|
selectedLName.trim() === "" ||
|
|
|
|
|
|
selectedContact.trim() === "" ||
|
|
|
|
|
|
sBuilding.trim() === "" ||
|
|
|
|
|
|
sStreet.trim() === "" ||
|
|
|
|
|
|
sCity.trim() === "" ||
|
|
|
|
|
|
sBarangay.trim() === "" ||
|
|
|
|
|
|
sProvince.trim() === "" ||
|
|
|
|
|
|
sCountry.trim() === ""
|
|
|
|
|
|
) {
|
|
|
|
|
|
alert("Please select address.");
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-02-29 13:21:33 +08:00
|
|
|
|
<?php foreach ($cartItems as $checkout) { ?>
|
|
|
|
|
|
<?php foreach ($checkout['items'] as $item) { ?>
|
|
|
|
|
|
itemNames.push("<?php echo str_replace('"', "\\'", $item['product']['name']) . ' (' . $item['quantity'] . ')'; ?>");
|
|
|
|
|
|
<?php } ?>
|
|
|
|
|
|
<?php } ?>
|
2024-02-12 10:35:09 +08:00
|
|
|
|
|
|
|
|
|
|
const base64Credentialss = btoa(`${username}:${password}`);
|
2024-02-21 09:09:50 +08:00
|
|
|
|
const response = await fetch('https://<?php echo $_SESSION["obpay_gate"]; ?>/payment/links', {
|
2024-02-12 10:35:09 +08:00
|
|
|
|
method: "POST",
|
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
|
amount: totalAmount * 100,
|
2024-02-29 13:21:33 +08:00
|
|
|
|
description: itemNames.join(', '),
|
2024-02-12 10:35:09 +08:00
|
|
|
|
}),
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
'Authorization': `Basic ${base64Credentialss}`,
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
|
throw new Error(`Error: ${response.status} ${response.statusText}`);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const result = await response.json();
|
|
|
|
|
|
console.log(result);
|
|
|
|
|
|
|
|
|
|
|
|
if (result) {
|
|
|
|
|
|
|
|
|
|
|
|
const currentDate = new Date();
|
|
|
|
|
|
const iso8601String = currentDate.toISOString();
|
|
|
|
|
|
const ordersToUpdate = <?php echo $cartencode; ?>;
|
|
|
|
|
|
const newArray = Object.values(ordersToUpdate)
|
|
|
|
|
|
console.log(newArray)
|
|
|
|
|
|
const refchar = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
|
|
|
|
let uniqueRef = '';
|
|
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
|
|
|
|
const randomIndex = Math.floor(Math.random() * refchar.length);
|
|
|
|
|
|
uniqueRef += refchar.charAt(randomIndex);
|
|
|
|
|
|
}
|
|
|
|
|
|
newArray.forEach(async (orderId) => {
|
|
|
|
|
|
console.log(orderId)
|
|
|
|
|
|
const token = '<?php echo $_SESSION["token"] ?>';
|
|
|
|
|
|
const shippingfee = parseFloat(orderId.shipping_fee)
|
2024-02-15 20:42:37 +08:00
|
|
|
|
const patchResponse = await fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId._id}`, {
|
2024-02-12 10:35:09 +08:00
|
|
|
|
method: "PATCH",
|
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
|
shipping_address: {
|
2024-04-04 18:01:18 +08:00
|
|
|
|
shipping_first_name: selectedFName,
|
|
|
|
|
|
shipping_last_name: selectedLName,
|
|
|
|
|
|
shipping_phone: selectedContact,
|
|
|
|
|
|
shipping_address_1: sBuilding,
|
|
|
|
|
|
shipping_address_2: sStreet,
|
|
|
|
|
|
shipping_city: sCity,
|
|
|
|
|
|
shipping_barangay: sBarangay,
|
|
|
|
|
|
shipping_state: sProvince,
|
|
|
|
|
|
shipping_country: sCountry,
|
2024-02-12 10:35:09 +08:00
|
|
|
|
},
|
|
|
|
|
|
billing_address: {
|
|
|
|
|
|
billing_first_name: billingFName,
|
|
|
|
|
|
billing_last_name: billingLName,
|
|
|
|
|
|
billing_phone: billingNumber,
|
|
|
|
|
|
billing_address_1: billingBuilding,
|
|
|
|
|
|
billing_address_2: billingStreet,
|
|
|
|
|
|
billing_city: billingCity,
|
|
|
|
|
|
billing_barangay: billingBarangay,
|
|
|
|
|
|
billing_state: billingProvince,
|
|
|
|
|
|
billing_country: billingCountry,
|
|
|
|
|
|
},
|
|
|
|
|
|
payment: {
|
|
|
|
|
|
status: "UNPAID",
|
|
|
|
|
|
reference_number: result.attributes.reference_number,
|
|
|
|
|
|
},
|
|
|
|
|
|
total_amount: parseFloat(orderId.total_amount) + shippingfee,
|
|
|
|
|
|
order_date: iso8601String,
|
|
|
|
|
|
payment_method: "Obananapay",
|
|
|
|
|
|
}),
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
'Authorization': "Bearer " + token,
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
if (!patchResponse.ok) {
|
|
|
|
|
|
throw new Error(`Error updating payment status: ${patchResponse.status} ${patchResponse.statusText}`);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
2024-04-04 18:01:18 +08:00
|
|
|
|
console.log("Payment Successfull")
|
2024-02-12 10:35:09 +08:00
|
|
|
|
window.location.href = 'user-history.php';
|
|
|
|
|
|
// console.log( <?php echo $filteredIdsJSON; ?>);
|
|
|
|
|
|
}
|
|
|
|
|
|
window.location.href = result.attributes.checkout_url;
|
|
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
} else if (pay3RadioButton.checked) {
|
|
|
|
|
|
try {
|
|
|
|
|
|
const currentDate = new Date();
|
|
|
|
|
|
const iso8601String = currentDate.toISOString();
|
|
|
|
|
|
const ordersToUpdate = <?php echo $cartencode; ?>;
|
|
|
|
|
|
const newArray = Object.values(ordersToUpdate)
|
|
|
|
|
|
console.log(newArray)
|
|
|
|
|
|
const refchar = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
|
|
|
|
let uniqueRef = '';
|
|
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
|
|
|
|
const randomIndex = Math.floor(Math.random() * refchar.length);
|
|
|
|
|
|
uniqueRef += refchar.charAt(randomIndex);
|
|
|
|
|
|
}
|
2024-03-13 10:59:15 +08:00
|
|
|
|
|
|
|
|
|
|
const selectedFName = document.getElementById('selectedFName').innerText;
|
|
|
|
|
|
const selectedLName = document.getElementById('selectedLName').innerText;
|
|
|
|
|
|
const selectedContact = document.getElementById('selectedContact').innerText;
|
|
|
|
|
|
const sBuilding = document.getElementById('sBuilding').innerText;
|
|
|
|
|
|
const sStreet = document.getElementById('sStreet').innerText;
|
|
|
|
|
|
const sCity = document.getElementById('sCity').innerText;
|
|
|
|
|
|
const sBarangay = document.getElementById('sBarangay').innerText;
|
|
|
|
|
|
const sProvince = document.getElementById('sProvince').innerText;
|
|
|
|
|
|
const sCountry = document.getElementById('sCountry').innerText;
|
|
|
|
|
|
if (
|
|
|
|
|
|
selectedFName.trim() === "" ||
|
|
|
|
|
|
selectedLName.trim() === "" ||
|
|
|
|
|
|
selectedContact.trim() === "" ||
|
|
|
|
|
|
sBuilding.trim() === "" ||
|
|
|
|
|
|
sStreet.trim() === "" ||
|
|
|
|
|
|
sCity.trim() === "" ||
|
|
|
|
|
|
sBarangay.trim() === "" ||
|
|
|
|
|
|
sProvince.trim() === "" ||
|
|
|
|
|
|
sCountry.trim() === ""
|
|
|
|
|
|
) {
|
|
|
|
|
|
alert("Please select address.");
|
2024-04-04 18:01:18 +08:00
|
|
|
|
return;
|
2024-03-13 10:59:15 +08:00
|
|
|
|
}
|
2024-02-12 10:35:09 +08:00
|
|
|
|
newArray.forEach(async (orderId) => {
|
|
|
|
|
|
console.log(orderId)
|
|
|
|
|
|
const token = '<?php echo $_SESSION["token"] ?>';
|
|
|
|
|
|
const shippingfee = parseFloat(orderId.shipping_fee)
|
2024-03-07 10:27:30 +08:00
|
|
|
|
|
|
|
|
|
|
const orderProductId = orderId.items[0].product.product_id;
|
|
|
|
|
|
const productResponse = await fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/${orderProductId}`);
|
|
|
|
|
|
const productData = await productResponse.json();
|
|
|
|
|
|
let freeShippingCod = false;
|
|
|
|
|
|
if (productData.promo && productData.promo.length > 0 && productData.promo[0]['free-shipping'] === 'Yes') {
|
|
|
|
|
|
freeShippingCod = true;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const shippingFees = freeShippingCod ? 0 : shippingfee;
|
2024-02-15 20:42:37 +08:00
|
|
|
|
const patchResponse = await fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId._id}`, {
|
2024-02-12 10:35:09 +08:00
|
|
|
|
method: "PATCH",
|
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
|
shipping_address: {
|
2024-03-07 10:27:30 +08:00
|
|
|
|
shipping_first_name: selectedFName,
|
|
|
|
|
|
shipping_last_name: selectedLName,
|
|
|
|
|
|
shipping_phone: selectedContact,
|
|
|
|
|
|
shipping_address_1: sBuilding,
|
|
|
|
|
|
shipping_address_2: sStreet,
|
|
|
|
|
|
shipping_city: sCity,
|
|
|
|
|
|
shipping_barangay: sBarangay,
|
|
|
|
|
|
shipping_state: sProvince,
|
|
|
|
|
|
shipping_country: sCountry,
|
2024-02-12 10:35:09 +08:00
|
|
|
|
},
|
|
|
|
|
|
billing_address: {
|
|
|
|
|
|
billing_first_name: billingFName,
|
|
|
|
|
|
billing_last_name: billingLName,
|
|
|
|
|
|
billing_phone: billingNumber,
|
|
|
|
|
|
billing_address_1: billingBuilding,
|
|
|
|
|
|
billing_address_2: billingStreet,
|
|
|
|
|
|
billing_city: billingCity,
|
|
|
|
|
|
billing_barangay: billingBarangay,
|
|
|
|
|
|
billing_state: billingProvince,
|
|
|
|
|
|
billing_country: billingCountry,
|
|
|
|
|
|
},
|
|
|
|
|
|
payment: {
|
|
|
|
|
|
status: "UNPAID",
|
|
|
|
|
|
reference_number: uniqueRef,
|
|
|
|
|
|
},
|
2024-03-07 10:27:30 +08:00
|
|
|
|
total_amount: parseFloat(orderId.total_amount) + shippingFees,
|
2024-02-12 10:35:09 +08:00
|
|
|
|
status: "TO PAY",
|
|
|
|
|
|
order_date: iso8601String,
|
|
|
|
|
|
payment_method: "Cash On Delivery",
|
|
|
|
|
|
}),
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
|
|
'Authorization': "Bearer " + token,
|
|
|
|
|
|
},
|
|
|
|
|
|
});
|
2024-03-13 10:59:15 +08:00
|
|
|
|
|
2024-02-12 10:35:09 +08:00
|
|
|
|
if (!patchResponse.ok) {
|
|
|
|
|
|
throw new Error(`Error updating payment status: ${patchResponse.status} ${patchResponse.statusText}`);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
// Handle the result of the original POST request as needed
|
|
|
|
|
|
console.log("COD Successfull")
|
|
|
|
|
|
window.location.href = 'user-history.php';
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
// Handle errors
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <form action="#">
|
|
|
|
|
|
<span class="ec-pay-option">
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<input type="radio" id="pay1" name="radio-group" checked>
|
|
|
|
|
|
<label for="pay1">Cash On Delivery</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span class="ec-pay-option">
|
|
|
|
|
|
<span>
|
|
|
|
|
|
<input type="radio" id="pay2" name="radio-group" checked>
|
|
|
|
|
|
<label for="pay2">Cash On Delivery</label>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span class="ec-pay-commemt">
|
|
|
|
|
|
<span class="ec-pay-opt-head">Add Comments About Your Order</span>
|
|
|
|
|
|
<textarea name="your-commemt" placeholder="Comments"></textarea>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
<span class="ec-pay-agree"><input type="checkbox" value=""><a href="#">I have
|
|
|
|
|
|
read and agree to the <span>Terms & Conditions</span></a><span
|
|
|
|
|
|
class="checked"></span></span>
|
|
|
|
|
|
</form> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Sidebar Payment Block -->
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="ec-sidebar-wrap ec-check-pay-img-wrap"> -->
|
|
|
|
|
|
<!-- Sidebar Payment Block -->
|
|
|
|
|
|
<!-- <div class="ec-sidebar-block">
|
|
|
|
|
|
<div class="ec-sb-title">
|
|
|
|
|
|
<h3 class="ec-sidebar-title">Payment Method</h3>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-sb-block-content">
|
|
|
|
|
|
<div class="ec-check-pay-img-inner">
|
|
|
|
|
|
<div class="ec-check-pay-img">
|
|
|
|
|
|
<img src="assets/images/icons/payment1.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-check-pay-img">
|
|
|
|
|
|
<img src="assets/images/icons/payment2.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-check-pay-img">
|
|
|
|
|
|
<img src="assets/images/icons/payment3.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-check-pay-img">
|
|
|
|
|
|
<img src="assets/images/icons/payment4.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-check-pay-img">
|
|
|
|
|
|
<img src="assets/images/icons/payment5.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-check-pay-img">
|
|
|
|
|
|
<img src="assets/images/icons/payment6.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="ec-check-pay-img">
|
|
|
|
|
|
<img src="assets/images/icons/payment7.png" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
<!-- Sidebar Payment 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">
|
|
|
|
|
|
|
|
|
|
|
|
<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 class="main-image" src="assets/images/product-image/6_1.jpg" alt="Product" />
|
|
|
|
|
|
<img 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 class="main-image" src="assets/images/product-image/7_1.jpg" alt="Product" />
|
|
|
|
|
|
<img 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 class="main-image" src="assets/images/product-image/1_1.jpg" alt="Product" />
|
|
|
|
|
|
<img 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 class="main-image" src="assets/images/product-image/2_1.jpg" alt="Product" />
|
|
|
|
|
|
<img 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 class="img-responsive" src="assets/images/product-image/3_1.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img class="img-responsive" src="assets/images/product-image/3_2.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img class="img-responsive" src="assets/images/product-image/3_3.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img class="img-responsive" src="assets/images/product-image/3_4.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img class="img-responsive" src="assets/images/product-image/3_5.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-nav-thumb">
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img class="img-responsive" src="assets/images/product-image/3_1.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img class="img-responsive" src="assets/images/product-image/3_2.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img class="img-responsive" src="assets/images/product-image/3_3.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img class="img-responsive" src="assets/images/product-image/3_4.jpg" alt="">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="qty-slide">
|
|
|
|
|
|
<img 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 -->
|
|
|
|
|
|
|
2024-02-20 15:54:42 +08:00
|
|
|
|
<!-- raymart remove popup feb 20 2024 -->
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<!-- Recent Purchase Popup -->
|
2024-02-20 15:54:42 +08:00
|
|
|
|
<!-- <div class="recent-purchase">
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<img 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>
|
2024-02-20 15:54:42 +08:00
|
|
|
|
</div> -->
|
2024-02-12 10:35:09 +08:00
|
|
|
|
<!-- 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 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 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 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 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 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 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>
|
