2271 lines
162 KiB
PHP
2271 lines
162 KiB
PHP
<?php
|
||
include "functions.php";
|
||
|
||
$_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 -->
|
||
<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" />
|
||
|
||
<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>
|
||
|
||
<style>
|
||
|
||
#sidebar-category:hover{
|
||
color: #ffaa00;
|
||
}
|
||
</style>
|
||
</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 strtoupper($customer['address'][0]['first_name']); ?></span>
|
||
<span id="selectedLName"><?php echo strtoupper($customer['address'][0]['last_name']); ?></span>
|
||
</h5>
|
||
<!-- <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 -->
|
||
<form id="addressForm" style="min-width: 500px;">
|
||
<label>Select Address:</label>
|
||
<?php foreach ($customer_data as $customer_index => $customer) { ?>
|
||
<?php foreach ($customer['address'] as $address_index => $address) { ?>
|
||
<!-- added new id for filter delete -->
|
||
<div class="form-check" id="form-check-<?php echo $address_index ?>">
|
||
<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; ?>">
|
||
<label class="form-check-label" style="max-width: 80%; word-wrap: break-word;" for="address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>">
|
||
<?php echo strtoupper($address['first_name']); ?> <?php echo strtoupper($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>
|
||
<!-- 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 -->
|
||
</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); ?>;
|
||
|
||
// 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
|
||
|
||
|
||
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>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 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 -->
|
||
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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 ?>';
|
||
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')
|
||
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 = $('#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
|
||
return 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) {
|
||
// 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');
|
||
});
|
||
});
|
||
|
||
|
||
// 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');
|
||
});
|
||
});
|
||
|
||
});
|
||
</script>
|
||
<span class="ec-check-order-btn">
|
||
<?php
|
||
if (empty($cartItems)) {
|
||
echo '<!-- $cartItems is empty, "Place Order" button will not be displayed -->';
|
||
} else {
|
||
echo '
|
||
<span class="ec-check-order-btn">
|
||
<a class="btn btn-primary" id="submitButton">Place Order</a>
|
||
</span>';
|
||
}
|
||
?>
|
||
</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">
|
||
<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 loading="lazy" class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" />
|
||
<?php
|
||
}
|
||
} else {
|
||
?>
|
||
<img loading="lazy" 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
|
||
}
|
||
?>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="ec-pro-content">
|
||
<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>
|
||
<!-- <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="new-price"><?php echo $item['price']; ?> x <?php echo $item['quantity']; ?></span>
|
||
</span>
|
||
<?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
|
||
?>
|
||
|
||
<span class="ec-price">
|
||
<span class="new-price">Shipping Fee: <?php echo $shippingFee; ?></span>
|
||
</span>
|
||
<span class="ec-price">
|
||
<span class="new-price">Subtotal: <?php echo $shippingFee + $checkout['total_amount']; ?></span>
|
||
</span>
|
||
<!-- 02-22-2024 Stacy hide variation -->
|
||
<!-- <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:#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>
|
||
</div> -->
|
||
<!-- 02-22-2024 Stacy hide variation -->
|
||
</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 loading="lazy" class="main-image"
|
||
src="assets/images/product-image/8_1.jpg"
|
||
alt="Product" />
|
||
<img loading="lazy" 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) {
|
||
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'];
|
||
|
||
$totalAmount += ($item['price'] * $item['quantity']) + $shippingFee ;
|
||
}
|
||
}
|
||
?>
|
||
|
||
<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) {
|
||
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;
|
||
}
|
||
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 {
|
||
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;
|
||
}
|
||
|
||
<?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 base64Credentialss = btoa(`${username}:${password}`);
|
||
const response = await fetch('https://<?php echo $_SESSION["obpay_gate"]; ?>/payment/links', {
|
||
method: "POST",
|
||
body: JSON.stringify({
|
||
amount: totalAmount * 100,
|
||
description: itemNames.join(', '),
|
||
}),
|
||
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)
|
||
const orderPay2ProductId = orderId.items[0].product.product_id;
|
||
const productPay2Response = await fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/${orderPay2ProductId}`);
|
||
const productPay2Data = await productPay2Response.json();
|
||
let freeShippingObPay = false;
|
||
if (productPay2Data.promo && productPay2Data.promo.length > 0 && productPay2Data.promo[0]['free-shipping'] === 'Yes') {
|
||
freeShippingObPay = true;
|
||
}
|
||
const shippingFeesPay2 = freeShippingObPay ? 0 : shippingfee;
|
||
const patchResponse2 = await fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId._id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({
|
||
shipping_address: {
|
||
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,
|
||
},
|
||
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,
|
||
},
|
||
shipping_fee: shippingFeesPay2,
|
||
total_amount: parseFloat(orderId.total_amount) + shippingFeesPay2,
|
||
order_date: iso8601String,
|
||
payment_method: "Obananapay",
|
||
}),
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': "Bearer " + token,
|
||
},
|
||
});
|
||
|
||
if (!patchResponse2.ok) {
|
||
throw new Error(`Error updating payment status: ${patchResponse2.status} ${patchResponse2.statusText}`);
|
||
}
|
||
})
|
||
console.log("Payment Successfull")
|
||
// 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);
|
||
}
|
||
let paymentDeetsId = 'obn_cod_id_';
|
||
for (let i = 0; i < 16; i++) {
|
||
const randomIndex = Math.floor(Math.random() * refchar.length);
|
||
paymentDeetsId += refchar.charAt(randomIndex);
|
||
}
|
||
let paymentUniqueId = '';
|
||
for (let i = 0; i < 24; i++) {
|
||
const randomIndex = Math.floor(Math.random() * refchar.length);
|
||
paymentUniqueId += refchar.charAt(randomIndex);
|
||
}
|
||
let dataPaymentUniqueId = '';
|
||
for (let i = 0; i < 24; i++) {
|
||
const randomIndex = Math.floor(Math.random() * refchar.length);
|
||
dataPaymentUniqueId += refchar.charAt(randomIndex);
|
||
}
|
||
|
||
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;
|
||
}
|
||
newArray.forEach(async (orderId) => {
|
||
console.log(orderId)
|
||
const token = '<?php echo $_SESSION["token"] ?>';
|
||
const shippingfee = parseFloat(orderId.shipping_fee)
|
||
|
||
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;
|
||
const patchResponse = await fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId._id}`, {
|
||
method: "PATCH",
|
||
body: JSON.stringify({
|
||
shipping_address: {
|
||
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,
|
||
},
|
||
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,
|
||
details: [
|
||
{
|
||
id: paymentDeetsId,
|
||
attributes:{
|
||
data:{
|
||
attributes:{
|
||
amount: parseFloat(orderId.total_amount) * 100 ,
|
||
description: orderId.items[0].product.name + " (" + orderId.items[0].quantity + ")" ,
|
||
status: "unpaid",
|
||
fee:shippingFees * 100,
|
||
tax_amount:"null",
|
||
taxes:[],
|
||
reference_number: uniqueRef,
|
||
payments:[
|
||
{
|
||
attributes:{
|
||
billing:{
|
||
phone: billingNumber
|
||
},
|
||
source: {
|
||
type: "Cash On Delivery"
|
||
},
|
||
amount:parseFloat(orderId.total_amount) * 100,
|
||
currency: "PHP",
|
||
description: orderId.items[0].product.name + " (" + orderId.items[0].quantity + ")" ,
|
||
fee:shippingFees,
|
||
net_amount: parseFloat(orderId.total_amount) * 100,
|
||
statement_descriptor: "Obanana E-commerce Checkout",
|
||
status: "unpaid",
|
||
tax_amount:0,
|
||
refunds: [],
|
||
},
|
||
_id: paymentUniqueId,
|
||
createdAt: iso8601String,
|
||
updatedAt: iso8601String
|
||
}
|
||
],
|
||
currency:"PHP",
|
||
},
|
||
_id:dataPaymentUniqueId,
|
||
createdAt: iso8601String,
|
||
updatedAt: iso8601String
|
||
},
|
||
created_at: iso8601String,
|
||
updated_at: iso8601String
|
||
}
|
||
}
|
||
]
|
||
},
|
||
total_amount: parseFloat(orderId.total_amount) + shippingFees,
|
||
status: "TO PAY",
|
||
shipping_fee: shippingFees,
|
||
order_date: iso8601String,
|
||
payment_method: "Cash On Delivery",
|
||
}),
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': "Bearer " + token,
|
||
},
|
||
});
|
||
|
||
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 loading="lazy" src="assets/images/icons/payment1.png" alt="">
|
||
</div>
|
||
<div class="ec-check-pay-img">
|
||
<img loading="lazy" src="assets/images/icons/payment2.png" alt="">
|
||
</div>
|
||
<div class="ec-check-pay-img">
|
||
<img loading="lazy" src="assets/images/icons/payment3.png" alt="">
|
||
</div>
|
||
<div class="ec-check-pay-img">
|
||
<img loading="lazy" src="assets/images/icons/payment4.png" alt="">
|
||
</div>
|
||
<div class="ec-check-pay-img">
|
||
<img loading="lazy" src="assets/images/icons/payment5.png" alt="">
|
||
</div>
|
||
<div class="ec-check-pay-img">
|
||
<img loading="lazy" src="assets/images/icons/payment6.png" alt="">
|
||
</div>
|
||
<div class="ec-check-pay-img">
|
||
<img loading="lazy" 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 loading="lazy" class="main-image" src="assets/images/product-image/6_1.jpg" alt="Product" />
|
||
<img loading="lazy" class="hover-image" src="assets/images/product-image/6_2.jpg" alt="Product" />
|
||
</a>
|
||
<span class="percentage">20%</span>
|
||
<a href="#" class="quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#ec_quickview_modal"><i class="fi-rr-eye"></i></a>
|
||
<div class="ec-pro-actions">
|
||
<a href="compare.html" class="ec-btn-group compare" title="Compare"><i class="fi fi-rr-arrows-repeat"></i></a>
|
||
<button title="Add To Cart" class="add-to-cart"><i class="fi-rr-shopping-basket"></i> Add To Cart</button>
|
||
<a class="ec-btn-group wishlist" title="Wishlist"><i class="fi-rr-heart"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ec-pro-content">
|
||
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Round Neck T-Shirt</a></h5>
|
||
<div class="ec-pro-rating">
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star"></i>
|
||
</div>
|
||
<div class="ec-pro-list-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dutmmy text ever since the 1500s, when an unknown printer took a galley.</div>
|
||
<span class="ec-price">
|
||
<span class="old-price">$27.00</span>
|
||
<span class="new-price">$22.00</span>
|
||
</span>
|
||
<div class="ec-pro-option">
|
||
<div class="ec-pro-color">
|
||
<span class="ec-pro-opt-label">Color</span>
|
||
<ul class="ec-opt-swatch ec-change-img">
|
||
<li class="active"><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/6_1.jpg" data-src-hover="assets/images/product-image/6_1.jpg" data-tooltip="Gray"><span style="background-color:#e8c2ff;"></span></a></li>
|
||
<li><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/6_2.jpg" data-src-hover="assets/images/product-image/6_2.jpg" data-tooltip="Orange"><span style="background-color:#9cfdd5;"></span></a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="ec-pro-size">
|
||
<span class="ec-pro-opt-label">Size</span>
|
||
<ul class="ec-opt-size">
|
||
<li class="active"><a href="#" class="ec-opt-sz" data-old="$25.00" data-new="$20.00" data-tooltip="Small">S</a></li>
|
||
<li><a href="#" class="ec-opt-sz" data-old="$27.00" data-new="$22.00" data-tooltip="Medium">M</a></li>
|
||
<li><a href="#" class="ec-opt-sz" data-old="$35.00" data-new="$30.00" data-tooltip="Extra Large">XL</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 pro-gl-content">
|
||
<div class="ec-product-inner">
|
||
<div class="ec-pro-image-outer">
|
||
<div class="ec-pro-image">
|
||
<a href="shop-left-sidebar-col-4.php" class="image">
|
||
<img loading="lazy" class="main-image" src="assets/images/product-image/7_1.jpg" alt="Product" />
|
||
<img loading="lazy" class="hover-image" src="assets/images/product-image/7_2.jpg" alt="Product" />
|
||
</a>
|
||
<span class="percentage">20%</span>
|
||
<span class="flags">
|
||
<span class="sale">Sale</span>
|
||
</span>
|
||
<a href="#" class="quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#ec_quickview_modal"><i class="fi-rr-eye"></i></a>
|
||
<div class="ec-pro-actions">
|
||
<a href="compare.html" class="ec-btn-group compare" title="Compare"><i class="fi fi-rr-arrows-repeat"></i></a>
|
||
<button title="Add To Cart" class="add-to-cart"><i class="fi-rr-shopping-basket"></i> Add To Cart</button>
|
||
<a class="ec-btn-group wishlist" title="Wishlist"><i class="fi-rr-heart"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ec-pro-content">
|
||
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Full Sleeve Shirt</a></h5>
|
||
<div class="ec-pro-rating">
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star"></i>
|
||
</div>
|
||
<div class="ec-pro-list-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dutmmy text ever since the 1500s, when an unknown printer took a galley.</div>
|
||
<span class="ec-price">
|
||
<span class="old-price">$12.00</span>
|
||
<span class="new-price">$10.00</span>
|
||
</span>
|
||
<div class="ec-pro-option">
|
||
<div class="ec-pro-color">
|
||
<span class="ec-pro-opt-label">Color</span>
|
||
<ul class="ec-opt-swatch ec-change-img">
|
||
<li class="active"><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/7_1.jpg" data-src-hover="assets/images/product-image/7_1.jpg" data-tooltip="Gray"><span style="background-color:#01f1f1;"></span></a></li>
|
||
<li><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/7_2.jpg" data-src-hover="assets/images/product-image/7_2.jpg" data-tooltip="Orange"><span style="background-color:#b89df8;"></span></a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="ec-pro-size">
|
||
<span class="ec-pro-opt-label">Size</span>
|
||
<ul class="ec-opt-size">
|
||
<li class="active"><a href="#" class="ec-opt-sz" data-old="$12.00" data-new="$10.00" data-tooltip="Small">S</a></li>
|
||
<li><a href="#" class="ec-opt-sz" data-old="$15.00" data-new="$12.00" data-tooltip="Medium">M</a></li>
|
||
<li><a href="#" class="ec-opt-sz" data-old="$20.00" data-new="$17.00" data-tooltip="Extra Large">XL</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 pro-gl-content">
|
||
<div class="ec-product-inner">
|
||
<div class="ec-pro-image-outer">
|
||
<div class="ec-pro-image">
|
||
<a href="shop-left-sidebar-col-4.php" class="image">
|
||
<img loading="lazy" class="main-image" src="assets/images/product-image/1_1.jpg" alt="Product" />
|
||
<img loading="lazy" class="hover-image" src="assets/images/product-image/1_2.jpg" alt="Product" />
|
||
</a>
|
||
<span class="percentage">20%</span>
|
||
<span class="flags">
|
||
<span class="sale">Sale</span>
|
||
</span>
|
||
<a href="#" class="quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#ec_quickview_modal"><i class="fi-rr-eye"></i></a>
|
||
<div class="ec-pro-actions">
|
||
<a href="compare.html" class="ec-btn-group compare" title="Compare"><i class="fi fi-rr-arrows-repeat"></i></a>
|
||
<button title="Add To Cart" class="add-to-cart"><i class="fi-rr-shopping-basket"></i> Add To Cart</button>
|
||
<a class="ec-btn-group wishlist" title="Wishlist"><i class="fi-rr-heart"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ec-pro-content">
|
||
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Cute Baby Toy's</a></h5>
|
||
<div class="ec-pro-rating">
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star"></i>
|
||
</div>
|
||
<div class="ec-pro-list-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dutmmy text ever since the 1500s, when an unknown printer took a galley.</div>
|
||
<span class="ec-price">
|
||
<span class="old-price">$40.00</span>
|
||
<span class="new-price">$30.00</span>
|
||
</span>
|
||
<div class="ec-pro-option">
|
||
<div class="ec-pro-color">
|
||
<span class="ec-pro-opt-label">Color</span>
|
||
<ul class="ec-opt-swatch ec-change-img">
|
||
<li class="active"><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/1_1.jpg" data-src-hover="assets/images/product-image/1_1.jpg" data-tooltip="Gray"><span style="background-color:#90cdf7;"></span></a></li>
|
||
<li><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/1_2.jpg" data-src-hover="assets/images/product-image/1_2.jpg" data-tooltip="Orange"><span style="background-color:#ff3b66;"></span></a></li>
|
||
<li><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/1_3.jpg" data-src-hover="assets/images/product-image/1_3.jpg" data-tooltip="Green"><span style="background-color:#ffc476;"></span></a></li>
|
||
<li><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/1_4.jpg" data-src-hover="assets/images/product-image/1_4.jpg" data-tooltip="Sky Blue"><span style="background-color:#1af0ba;"></span></a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="ec-pro-size">
|
||
<span class="ec-pro-opt-label">Size</span>
|
||
<ul class="ec-opt-size">
|
||
<li class="active"><a href="#" class="ec-opt-sz" data-old="$40.00" data-new="$30.00" data-tooltip="Small">S</a></li>
|
||
<li><a href="#" class="ec-opt-sz" data-old="$50.00" data-new="$40.00" data-tooltip="Medium">M</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 pro-gl-content">
|
||
<div class="ec-product-inner">
|
||
<div class="ec-pro-image-outer">
|
||
<div class="ec-pro-image">
|
||
<a href="shop-left-sidebar-col-4.php" class="image">
|
||
<img loading="lazy" class="main-image" src="assets/images/product-image/2_1.jpg" alt="Product" />
|
||
<img loading="lazy" class="hover-image" src="assets/images/product-image/2_2.jpg" alt="Product" />
|
||
</a>
|
||
<span class="percentage">20%</span>
|
||
<span class="flags">
|
||
<span class="new">New</span>
|
||
</span>
|
||
<a href="#" class="quickview" data-link-action="quickview" title="Quick view" data-bs-toggle="modal" data-bs-target="#ec_quickview_modal"><i class="fi-rr-eye"></i></a>
|
||
<div class="ec-pro-actions">
|
||
<a href="compare.html" class="ec-btn-group compare" title="Compare"><i class="fi fi-rr-arrows-repeat"></i></a>
|
||
<button title="Add To Cart" class="add-to-cart"><i class="fi-rr-shopping-basket"></i> Add To Cart</button>
|
||
<a class="ec-btn-group wishlist" title="Wishlist"><i class="fi-rr-heart"></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ec-pro-content">
|
||
<h5 class="ec-pro-title"><a href="shop-left-sidebar-col-4.php">Jumbo Carry Bag</a></h5>
|
||
<div class="ec-pro-rating">
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star"></i>
|
||
</div>
|
||
<div class="ec-pro-list-desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dutmmy text ever since the 1500s, when an unknown printer took a galley.</div>
|
||
<span class="ec-price">
|
||
<span class="old-price">$50.00</span>
|
||
<span class="new-price">$40.00</span>
|
||
</span>
|
||
<div class="ec-pro-option">
|
||
<div class="ec-pro-color">
|
||
<span class="ec-pro-opt-label">Color</span>
|
||
<ul class="ec-opt-swatch ec-change-img">
|
||
<li class="active"><a href="#" class="ec-opt-clr-img" data-src="assets/images/product-image/2_1.jpg" data-src-hover="assets/images/product-image/2_2.jpg" data-tooltip="Gray"><span style="background-color:#fdbf04;"></span></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12 shop-all-btn"><a href="#">Shop All Collection</a></div>
|
||
</div>
|
||
</div>
|
||
</section> -->
|
||
<!-- New Product end -->
|
||
|
||
<!-- Footer Start -->
|
||
<?php include "footer.php" ?>
|
||
<!-- Footer Area End -->
|
||
|
||
<!-- Modal -->
|
||
<div class="modal fade" id="ec_quickview_modal" tabindex="-1" role="dialog">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<button type="button" class="btn-close qty_close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-md-5 col-sm-12 col-xs-12">
|
||
<!-- Swiper -->
|
||
<div class="qty-product-cover">
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_1.jpg" alt="">
|
||
</div>
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_2.jpg" alt="">
|
||
</div>
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_3.jpg" alt="">
|
||
</div>
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_4.jpg" alt="">
|
||
</div>
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_5.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="qty-nav-thumb">
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_1.jpg" alt="">
|
||
</div>
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_2.jpg" alt="">
|
||
</div>
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_3.jpg" alt="">
|
||
</div>
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_4.jpg" alt="">
|
||
</div>
|
||
<div class="qty-slide">
|
||
<img loading="lazy" class="img-responsive" src="assets/images/product-image/3_5.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-7 col-sm-12 col-xs-12">
|
||
<div class="quickview-pro-content">
|
||
<h5 class="ec-quick-title"><a href="shop-left-sidebar-col-4.php">Handbag leather purse for women</a>
|
||
</h5>
|
||
<div class="ec-quickview-rating">
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star fill"></i>
|
||
<i class="ecicon eci-star"></i>
|
||
</div>
|
||
|
||
<div class="ec-quickview-desc">Lorem Ipsum is simply dummy text of the printing and
|
||
typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
|
||
since the 1500s,</div>
|
||
<div class="ec-quickview-price">
|
||
<span class="old-price">$100.00</span>
|
||
<span class="new-price">$80.00</span>
|
||
</div>
|
||
|
||
<div class="ec-pro-variation">
|
||
<div class="ec-pro-variation-inner ec-pro-variation-color">
|
||
<span>Color</span>
|
||
<div class="ec-pro-color">
|
||
<ul class="ec-opt-swatch">
|
||
<li><span style="background-color:#696d62;"></span></li>
|
||
<li><span style="background-color:#d73808;"></span></li>
|
||
<li><span style="background-color:#577023;"></span></li>
|
||
<li><span style="background-color:#2ea1cd;"></span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="ec-pro-variation-inner ec-pro-variation-size ec-pro-size">
|
||
<span>Size</span>
|
||
<div class="ec-pro-variation-content">
|
||
<ul class="ec-opt-size">
|
||
<li class="active"><a href="#" class="ec-opt-sz" data-tooltip="Small">S</a></li>
|
||
<li><a href="#" class="ec-opt-sz" data-tooltip="Medium">M</a></li>
|
||
<li><a href="#" class="ec-opt-sz" data-tooltip="Large">X</a></li>
|
||
<li><a href="#" class="ec-opt-sz" data-tooltip="Extra Large">XL</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ec-quickview-qty">
|
||
<div class="qty-plus-minus">
|
||
<input class="qty-input" type="text" name="ec_qtybtn" value="1" />
|
||
</div>
|
||
<div class="ec-quickview-cart ">
|
||
<button class="btn btn-primary"><i class="fi-rr-shopping-basket"></i> Add To Cart</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Modal end -->
|
||
|
||
<!-- Footer navigation panel for responsive display -->
|
||
<div class="ec-nav-toolbar">
|
||
<div class="container">
|
||
<div class="ec-nav-panel">
|
||
<div class="ec-nav-panel-icons">
|
||
<a href="#ec-mobile-menu" class="navbar-toggler-btn ec-header-btn ec-side-toggle"><i class="fi-rr-menu-burger"></i></a>
|
||
</div>
|
||
<div class="ec-nav-panel-icons">
|
||
<a href="#ec-side-cart" class="toggle-cart ec-header-btn ec-side-toggle"><i class="fi-rr-shopping-bag"></i><span class="ec-cart-noti ec-header-count cart-count-lable">3</span></a>
|
||
</div>
|
||
<div class="ec-nav-panel-icons">
|
||
<a href="index.php" class="ec-header-btn"><i class="fi-rr-home"></i></a>
|
||
</div>
|
||
<div class="ec-nav-panel-icons">
|
||
<a href="wishlist.html" class="ec-header-btn"><i class="fi-rr-heart"></i><span class="ec-cart-noti">4</span></a>
|
||
</div>
|
||
<div class="ec-nav-panel-icons">
|
||
<a href="login.php" class="ec-header-btn"><i class="fi-rr-user"></i></a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Footer navigation panel for responsive display end -->
|
||
|
||
<!-- raymart remove popup feb 20 2024 -->
|
||
<!-- Recent Purchase Popup -->
|
||
<!-- <div class="recent-purchase">
|
||
<img loading="lazy" src="assets/images/product-image/1.jpg" alt="payment image">
|
||
<div class="detail">
|
||
<p>Someone in new just bought</p>
|
||
<h6>stylish baby shoes</h6>
|
||
<p>10 Minutes ago</p>
|
||
</div>
|
||
<a href="javascript:void(0)" class="icon-btn recent-close">×</a>
|
||
</div> -->
|
||
<!-- Recent Purchase Popup end -->
|
||
|
||
<!-- Cart Floating Button -->
|
||
<div class="ec-cart-float">
|
||
<a href="#ec-side-cart" class="ec-header-btn ec-side-toggle">
|
||
<div class="header-icon"><i class="fi-rr-shopping-basket"></i>
|
||
</div>
|
||
<span class="ec-cart-count cart-count-lable">3</span>
|
||
</a>
|
||
</div>
|
||
<!-- Cart Floating Button end -->
|
||
|
||
<!-- Whatsapp -->
|
||
<div class="ec-style ec-right-bottom">
|
||
<!-- Start Floating Panel Container -->
|
||
<div class="ec-panel">
|
||
<!-- Panel Header -->
|
||
<div class="ec-header">
|
||
<strong>Need Help?</strong>
|
||
<p>Chat with us on WhatsApp</p>
|
||
</div>
|
||
<!-- Panel Content -->
|
||
<div class="ec-body">
|
||
<ul>
|
||
<!-- Start Single Contact List -->
|
||
<li>
|
||
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
|
||
<div class="d-flex bd-highlight">
|
||
<!-- Profile Picture -->
|
||
<div class="ec-img-cont">
|
||
<img loading="lazy" src="assets/images/whatsapp/profile_01.jpg" class="ec-user-img" alt="Profile image">
|
||
<span class="ec-status-icon"></span>
|
||
</div>
|
||
<!-- Display Name & Last Seen -->
|
||
<div class="ec-user-info">
|
||
<span>Sahar Darya</span>
|
||
<p>Sahar left 7 mins ago</p>
|
||
</div>
|
||
<!-- Chat iCon -->
|
||
<div class="ec-chat-icon">
|
||
<i class="fa fa-whatsapp"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<!--/ End Single Contact List -->
|
||
<!-- Start Single Contact List -->
|
||
<li>
|
||
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
|
||
<div class="d-flex bd-highlight">
|
||
<!-- Profile Picture -->
|
||
<div class="ec-img-cont">
|
||
<img loading="lazy" src="assets/images/whatsapp/profile_02.jpg" class="ec-user-img" alt="Profile image">
|
||
<span class="ec-status-icon ec-online"></span>
|
||
</div>
|
||
<!-- Display Name & Last Seen -->
|
||
<div class="ec-user-info">
|
||
<span>Yolduz Rafi</span>
|
||
<p>Yolduz is online</p>
|
||
</div>
|
||
<!-- Chat iCon -->
|
||
<div class="ec-chat-icon">
|
||
<i class="fa fa-whatsapp"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<!--/ End Single Contact List -->
|
||
<!-- Start Single Contact List -->
|
||
<li>
|
||
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
|
||
<div class="d-flex bd-highlight">
|
||
<!-- Profile Picture -->
|
||
<div class="ec-img-cont">
|
||
<img loading="lazy" src="assets/images/whatsapp/profile_03.jpg" class="ec-user-img" alt="Profile image">
|
||
<span class="ec-status-icon ec-offline"></span>
|
||
</div>
|
||
<!-- Display Name & Last Seen -->
|
||
<div class="ec-user-info">
|
||
<span>Nargis Hawa</span>
|
||
<p>Nargis left 30 mins ago</p>
|
||
</div>
|
||
<!-- Chat iCon -->
|
||
<div class="ec-chat-icon">
|
||
<i class="fa fa-whatsapp"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<!--/ End Single Contact List -->
|
||
<!-- Start Single Contact List -->
|
||
<li>
|
||
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
|
||
<div class="d-flex bd-highlight">
|
||
<!-- Profile Picture -->
|
||
<div class="ec-img-cont">
|
||
<img loading="lazy" src="assets/images/whatsapp/profile_04.jpg" class="ec-user-img" alt="Profile image">
|
||
<span class="ec-status-icon ec-offline"></span>
|
||
</div>
|
||
<!-- Display Name & Last Seen -->
|
||
<div class="ec-user-info">
|
||
<span>Khadija Mehr</span>
|
||
<p>Khadija left 50 mins ago</p>
|
||
</div>
|
||
<!-- Chat iCon -->
|
||
<div class="ec-chat-icon">
|
||
<i class="fa fa-whatsapp"></i>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<!--/ End Single Contact List -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!--/ End Floating Panel Container -->
|
||
<!-- Start Right Floating Button-->
|
||
<div class="ec-right-bottom">
|
||
<div class="ec-box">
|
||
<div class="ec-button rotateBackward">
|
||
<img loading="lazy" class="whatsapp" src="assets/images/common/whatsapp.png" alt="whatsapp icon" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/ End Right Floating Button-->
|
||
</div>
|
||
<!-- Whatsapp end -->
|
||
|
||
<!-- Feature tools -->
|
||
<div class="ec-tools-sidebar-overlay"></div>
|
||
<div class="ec-tools-sidebar">
|
||
<div class="tool-title">
|
||
<h3>Features</h3>
|
||
</div>
|
||
<a href="#" class="ec-tools-sidebar-toggle in-out">
|
||
<img loading="lazy" alt="icon" src="assets/images/common/settings.png" />
|
||
</a>
|
||
<div class="ec-tools-detail">
|
||
<div class="ec-tools-sidebar-content ec-change-color ec-color-desc">
|
||
<h3>Color Scheme</h3>
|
||
<ul class="bg-panel">
|
||
<li class="active" data-color="01"><a href="#" class="colorcode1"></a></li>
|
||
<li data-color="02"><a href="#" class="colorcode2"></a></li>
|
||
<li data-color="03"><a href="#" class="colorcode3"></a></li>
|
||
<li data-color="04"><a href="#" class="colorcode4"></a></li>
|
||
<li data-color="05"><a href="#" class="colorcode5"></a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="ec-tools-sidebar-content">
|
||
<h3>Backgrounds</h3>
|
||
<ul class="bg-panel">
|
||
<li class="bg"><a class="back-bg-1" id="bg-1">Background-1</a></li>
|
||
<li class="bg"><a class="back-bg-2" id="bg-2">Background-2</a></li>
|
||
<li class="bg"><a class="back-bg-3" id="bg-3">Background-3</a></li>
|
||
<li class="bg"><a class="back-bg-4" id="bg-4">Default</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="ec-tools-sidebar-content">
|
||
<h3>Full Screen mode</h3>
|
||
<div class="ec-fullscreen-mode">
|
||
<div class="ec-fullscreen-switch">
|
||
<div class="ec-fullscreen-btn">Mode</div>
|
||
<div class="ec-fullscreen-on">On</div>
|
||
<div class="ec-fullscreen-off">Off</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ec-tools-sidebar-content">
|
||
<h3>Dark mode</h3>
|
||
<div class="ec-change-mode">
|
||
<div class="ec-mode-switch">
|
||
<div class="ec-mode-btn">Mode</div>
|
||
<div class="ec-mode-on">On</div>
|
||
<div class="ec-mode-off">Off</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ec-tools-sidebar-content">
|
||
<h3>RTL mode</h3>
|
||
<div class="ec-change-rtl">
|
||
<div class="ec-rtl-switch">
|
||
<div class="ec-rtl-btn">Rtl</div>
|
||
<div class="ec-rtl-on">On</div>
|
||
<div class="ec-rtl-off">Off</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ec-tools-sidebar-content">
|
||
<h3>Clear local storage</h3>
|
||
<a class="clear-cach" href="javascript:void(0)">Clear Cache & Default</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Feature tools end -->
|
||
|
||
<!-- Vendor JS -->
|
||
<!-- <script src="assets/js/vendor/jquery-3.5.1.min.js"></script> -->
|
||
<script src="assets/js/vendor/popper.min.js"></script>
|
||
<script src="assets/js/vendor/bootstrap.min.js"></script>
|
||
<script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
|
||
<script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
|
||
|
||
<!--Plugins JS-->
|
||
<script src="assets/js/plugins/swiper-bundle.min.js"></script>
|
||
<script src="assets/js/plugins/countdownTimer.min.js"></script>
|
||
<script src="assets/js/plugins/scrollup.js"></script>
|
||
<script src="assets/js/plugins/jquery.zoom.min.js"></script>
|
||
<script src="assets/js/plugins/slick.min.js"></script>
|
||
<script src="assets/js/plugins/infiniteslidev2.js"></script>
|
||
<script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
|
||
<script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
|
||
|
||
<!-- Main Js -->
|
||
<script src="assets/js/vendor/index.js"></script>
|
||
<script src="assets/js/main.js"></script>
|
||
|
||
</body>
|
||
|
||
</html>
|