3150 lines
160 KiB
PHP
3150 lines
160 KiB
PHP
<?php
|
||
$_SESSION["url"] = $_SERVER['REQUEST_URI'];
|
||
|
||
if ($_SESSION["userId"] <> "") {
|
||
$_SESSION["isLoggedIn"] = true;
|
||
// $customer_data = getCustomerbyLoginId($_SESSION["userId"]);
|
||
$vendorLoginId = searchVendorbyLoginId($_SESSION["userId"]);
|
||
$vendorLoginIdjson = json_decode($vendorLoginId, true);
|
||
// var_dump( $vendorLoginIdjson);
|
||
if (isset($vendorLoginIdjson['results'][0])) {
|
||
$vendorData = $vendorLoginIdjson['results'][0];
|
||
$vendorId = $vendorData['_id'];
|
||
$_SESSION["LoggedInVendorId"] = $vendorId;
|
||
}
|
||
if (empty($vendorLoginId)) {
|
||
$customer_data = getCustomerbyLoginId($_SESSION["userId"]);
|
||
}
|
||
} else {
|
||
$_SESSION["isLoggedIn"] = false;
|
||
}
|
||
?>
|
||
|
||
<?php ?>
|
||
<header class="ec-header">
|
||
<style>
|
||
/*---- Newsletter Page On load Style ----*/
|
||
#ec-popnews-bg2 {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: none;
|
||
z-index: 99;
|
||
}
|
||
|
||
#ec-popnews-box-content2 {
|
||
height: 100%;
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-direction: normal;
|
||
-ms-flex-direction: column;
|
||
flex-direction: column;
|
||
-webkit-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#ec-popnews-box2 {
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
-webkit-transform: translate(-50%, -50%);
|
||
transform: translate(-50%, -50%);
|
||
background-color: #fff;
|
||
color: #444444;
|
||
width: 100%;
|
||
max-width: 700px;
|
||
padding: 30px;
|
||
border: 0;
|
||
display: none;
|
||
z-index: 100;
|
||
text-align: center;
|
||
border-radius: 5px;
|
||
background-image: url("./assets/images/email-template/newsletter-bg.png");
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
|
||
#ec-popnews-box2 h2 {
|
||
text-decoration: none;
|
||
color: #444;
|
||
display: block;
|
||
font-size: 22px;
|
||
line-height: 33px;
|
||
font-weight: 600;
|
||
margin: 0 auto 10px;
|
||
letter-spacing: 0;
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
#ec-popnews-box2 p {
|
||
margin-bottom: 20px;
|
||
color: #777;
|
||
}
|
||
|
||
#ec-popnews-box2 form {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
#ec-popnews-box2 input {
|
||
height: 45px;
|
||
background-color: transparent;
|
||
border: 1px solid #ededed;
|
||
color: #444444;
|
||
font-size: 14px;
|
||
margin-bottom: 20px;
|
||
padding: 0 15px;
|
||
width: 100%;
|
||
outline: none;
|
||
background-color: #fff;
|
||
border-radius: 30px;
|
||
}
|
||
|
||
#ec-popnews-box2 button {
|
||
height: 40px;
|
||
line-height: 42px;
|
||
font-size: 16px;
|
||
text-transform: uppercase;
|
||
border-radius: 30px;
|
||
}
|
||
|
||
#ec-popnews-close2 {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
cursor: pointer;
|
||
width: 30px;
|
||
height: 30px;
|
||
color: #777;
|
||
border-color: #3474d4;
|
||
border-radius: 100%;
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-align: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
-webkit-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
}
|
||
|
||
@media (hover: hover),
|
||
(hover: none) {
|
||
|
||
.fi-rr-heart:hover,
|
||
.fi-rr-heart:active,
|
||
.fi-rr-user:hover,
|
||
.fi-rr-user:active,
|
||
.fi-rr-shopping-bag:hover,
|
||
.fi-rr-shopping-bag:active,
|
||
.fi-rr-shopping-basket:hover,
|
||
.fi-rr-shopping-basket:active,
|
||
.fi-rr-home:hover,
|
||
.fi-rr-home:active {
|
||
cursor: pointer !important;
|
||
color: #005eff !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
|
||
<!--Ec Header Top Start -->
|
||
<div class="header-top">
|
||
<style>
|
||
.float_messenger {
|
||
position: fixed;
|
||
height: 100vh;
|
||
/* width:100vw; */
|
||
/* background-color:red; */
|
||
color: green;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: flex-end;
|
||
left: 95vw;
|
||
}
|
||
|
||
.message_card_btn {
|
||
position: fixed;
|
||
height: 50px;
|
||
width: 50px;
|
||
background-color: white;
|
||
display: flex;
|
||
position: relative;
|
||
right: 30px;
|
||
z-index: 999;
|
||
display: flex;
|
||
border-radius: 100%;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 27px;
|
||
color: #ffaa00;
|
||
bottom: 20px;
|
||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
|
||
border: 2px solid #eee;
|
||
}
|
||
|
||
#chat-container {
|
||
height: 500px;
|
||
/* Set a fixed height for the chat container */
|
||
overflow-y: auto;
|
||
/* Enable vertical scrolling */
|
||
}
|
||
|
||
#chat-list {
|
||
list-style-type: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.message {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.messages {
|
||
margin-bottom: 10px;
|
||
/* width: 100%; */
|
||
width: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
ul.class_list li {
|
||
width: 100%;
|
||
}
|
||
|
||
li.user {
|
||
width: auto;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
color: red;
|
||
padding-right: 10px;
|
||
|
||
|
||
}
|
||
|
||
li.sender {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
color: blue;
|
||
padding: 3px;
|
||
padding-left: 10px
|
||
/* background-color:#ffaa00 */
|
||
}
|
||
|
||
.chat_start {
|
||
height: 500px;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.chat_start_button {
|
||
|
||
width: auto;
|
||
display: flex;
|
||
color: #fff;
|
||
padding: 10px;
|
||
background-color: #ffaa00;
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.message_card_con {
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
|
||
.message_card_con.user {
|
||
justify-content: flex-end;
|
||
|
||
}
|
||
|
||
.message_card_con.sender {
|
||
justify-content: flex-start;
|
||
|
||
}
|
||
|
||
.message_card {
|
||
width: auto;
|
||
max-width: 70%;
|
||
|
||
}
|
||
|
||
.message_card.user {
|
||
|
||
width: auto;
|
||
display: flex;
|
||
color: #fff;
|
||
padding: 10px;
|
||
background-color: #ffaa00;
|
||
border-radius: 15px;
|
||
|
||
}
|
||
|
||
.message_card.sender {
|
||
width: auto;
|
||
display: flex;
|
||
color: #000;
|
||
padding: 10px;
|
||
background-color: #ffffea;
|
||
border-radius: 15px;
|
||
|
||
}
|
||
|
||
.time-stamp {
|
||
font-size: 8px;
|
||
padding-left: 10px;
|
||
padding-top: 5px;
|
||
color: #333;
|
||
/* background-color:#ffaa00; */
|
||
width: auto;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
}
|
||
|
||
.time-stamp.user {
|
||
justify-content: flex-end;
|
||
|
||
}
|
||
|
||
.time-stamp.sender {
|
||
justify-content: flex-start;
|
||
|
||
}
|
||
|
||
.footer-chat {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.hide {
|
||
display: none;
|
||
}
|
||
|
||
#message-input {
|
||
border: 1px solid #eee;
|
||
border-radius: 15px;
|
||
width: 80%;
|
||
margin-right: 10px;
|
||
margin-top: 20px;
|
||
|
||
}
|
||
|
||
#send-btn {
|
||
border-radius: 15px;
|
||
width: 20%;
|
||
height: 50px;
|
||
background-color: #ffaa00;
|
||
color: #fff;
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
|
||
}
|
||
|
||
#send-btn:hover {
|
||
background-color: #eb9c00;
|
||
|
||
}
|
||
|
||
.modalHeader {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
padding: 10px;
|
||
align-items: center;
|
||
/* background-color:#333; */
|
||
}
|
||
|
||
.userWrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
width: auto;
|
||
}
|
||
|
||
.img-user {
|
||
height: 30px;
|
||
width: 30px;
|
||
border-radius: 100px;
|
||
margin: 0px 10px;
|
||
|
||
}
|
||
|
||
.gallery-icon {
|
||
height: 100%;
|
||
width: 80px;
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
|
||
font-size: 25px;
|
||
padding: 1px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: "#000";
|
||
}
|
||
|
||
#message-preview {
|
||
height: 100px;
|
||
width: 80%;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
|
||
}
|
||
|
||
#message-preview.hide {
|
||
height: 0px;
|
||
width: 0px;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.img-prev {
|
||
height: 80px;
|
||
width: 80px;
|
||
border-radius: 5px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.vid-prev {
|
||
height: auto;
|
||
width: 150px;
|
||
border-radius: 5px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.remove-prev {
|
||
cursor: pointer;
|
||
height: 20px;
|
||
width: 20px;
|
||
border-radius: 35px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 10px;
|
||
/* position:absolute; */
|
||
z-index: 30;
|
||
background-color: #eee;
|
||
border: 1px solid #ccc;
|
||
/* top:-20px; */
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
padding: 10px;
|
||
margin-top: 20px;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
.remove-prev.hide {
|
||
display: none;
|
||
height: 0px;
|
||
width: 0px;
|
||
}
|
||
|
||
.message-image {
|
||
height: auto;
|
||
width: 100%;
|
||
|
||
border-radius: 5px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.message-video {
|
||
height: auto;
|
||
width: 100%;
|
||
border-radius: 5px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
#scroller {
|
||
height: 500px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
#scroller * {
|
||
overflow-anchor: none;
|
||
}
|
||
|
||
#anchor {
|
||
overflow-anchor: auto;
|
||
height: 1px;
|
||
}
|
||
|
||
.product-con {
|
||
height: 150px;
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
padding: 10px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
border: 1px solid #eee;
|
||
}
|
||
|
||
.product-con.display {
|
||
width: 100%;
|
||
|
||
}
|
||
|
||
|
||
.product-prev {
|
||
position: absolute;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
bottom: 100px;
|
||
}
|
||
|
||
.productImg {
|
||
height: 100px;
|
||
width: 100px;
|
||
border-radius: 10px;
|
||
border: 1px solid #eee;
|
||
|
||
}
|
||
|
||
.prodDetails {
|
||
height: 80%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding: 10px;
|
||
|
||
}
|
||
|
||
.prodTxtName {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
color: #000;
|
||
}
|
||
|
||
.prodTxtPrice {
|
||
color: #ffaa00;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
|
||
}
|
||
|
||
.prodTxtQty {
|
||
color: #333;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
|
||
}
|
||
|
||
/* Hide the default checkbox */
|
||
.custom-checkbox input[type="checkbox"] {
|
||
display: none;
|
||
}
|
||
|
||
/* Create a custom checkmark */
|
||
.custom-checkbox .checkmark {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: #eee;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Create the checkmark/indicator (hidden when not checked) */
|
||
.custom-checkbox .checkmark::after {
|
||
content: "";
|
||
position: absolute;
|
||
display: none;
|
||
}
|
||
|
||
/* Show the checkmark when the checkbox is checked */
|
||
.custom-checkbox input[type="checkbox"]:checked+.checkmark::after {
|
||
display: block;
|
||
}
|
||
|
||
/* Style the checkmark/indicator */
|
||
.custom-checkbox .checkmark::after {
|
||
left: 7px;
|
||
top: 3px;
|
||
width: 6px;
|
||
height: 12px;
|
||
border: solid #ffaa00;
|
||
border-width: 0 3px 3px 0;
|
||
transform: rotate(45deg);
|
||
}
|
||
|
||
/* Optional: Style the label text */
|
||
.custom-checkbox {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.custom-checkbox .checkmark {
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.qty-inputs {
|
||
border: 1px solid #eee;
|
||
border-radius: 15px;
|
||
width: 80px;
|
||
height: 30px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.input-qty {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.input-qty-text {
|
||
color: #333;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
text-align: left;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
<div class="float_messenger">
|
||
<button data-bs-toggle="modal" data-bs-target="#chatModal" class="message_card_btn">
|
||
<i class="fa-solid fa-comments"></i>
|
||
</button>
|
||
</div>
|
||
<div class="modal fade" id="chatModal" tabindex="-1" role="dialog" aria-labelledby="chatModalLabel"
|
||
aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class=" modalHeader">
|
||
<div class="userWrap">
|
||
<img class="img-user"
|
||
src="https://socket.obanana.io/message-assets/6642c6699011bc193b4b79a7-20240515064745-430526d5-769f-42cc-ba1e-4e4e06eabdad.png"
|
||
alt="">
|
||
<p style="font-weight:500; font-size:16px">Obanana Support</p>
|
||
</div>
|
||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"
|
||
data-message="no-product">
|
||
<span style="font-weight:400; font-size:26px" aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<!-- Add your modal content here -->
|
||
<div id="chat-container">
|
||
<div id="scroller">
|
||
<ul id="chat-list"></ul>
|
||
<div id="anchor"></div>
|
||
</div>
|
||
</div>
|
||
<div class="product-prev" id='prod-prev'>
|
||
|
||
</div>
|
||
<div class="footer-chat" id="footer-chat">
|
||
|
||
<div class="gallery-icon">
|
||
|
||
<label for="file-input" class=""><i class="fa-regular fa-images"></i></label>
|
||
<input type="file" class="hide" id="file-input" accept="image/*,video/*">
|
||
</div>
|
||
<span class="remove-prev hide" id="remove-preview" style=""
|
||
aria-hidden="true">×</span>
|
||
<div id="message-preview" class="hide">
|
||
|
||
</div>
|
||
<textarea type="text" id="message-input" placeholder="Type a message..."></textarea>
|
||
<button id="send-btn">SEND</button>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- <div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Send</button>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
let userDataGlobal = null;
|
||
let globalQuantity = null;
|
||
let globalProductId = null;
|
||
let globalProduct = null;
|
||
document.addEventListener("DOMContentLoaded", function() {
|
||
|
||
|
||
let globalVariation = null;
|
||
let isSendProduct = false;
|
||
|
||
function getQueryParam(param) {
|
||
var url = window.location.href; // Get the full URL of the current page
|
||
var urlParams = new URLSearchParams(window.location
|
||
.search); // Parse query parameters
|
||
return urlParams.get(
|
||
param); // Return the value of the specified query parameter
|
||
}
|
||
|
||
// Example usage
|
||
var lastSegment = getQueryParam('id');
|
||
globalProductId = lastSegment;
|
||
console.log(globalProductId);
|
||
var chatModal = document.getElementById('chatModal');
|
||
|
||
async function getProdGlobal() {
|
||
try {
|
||
const response = await fetch(
|
||
'https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/' +
|
||
globalProductId);
|
||
const productData = await response.json();
|
||
globalProduct = productData;
|
||
|
||
} catch (error) {
|
||
console.error('Error fetching data:', error);
|
||
}
|
||
}
|
||
if (globalProductId) {
|
||
|
||
getProdGlobal()
|
||
}
|
||
|
||
chatModal.addEventListener('show.bs.modal', function(event) {
|
||
var button = event.relatedTarget; // Button that triggered the modal
|
||
var message = button.getAttribute(
|
||
'data-message');
|
||
|
||
if (message === 'product') {
|
||
let product = globalVariation ?? globalProduct;
|
||
console.log(product)
|
||
var prodPrev = document.getElementById('prod-prev');
|
||
let producPrice = product?.sale_price ?? product?.regular_price;
|
||
let productQty = 1;
|
||
|
||
function getFirstImageUrl(imageUrls) {
|
||
if (!imageUrls) return null;
|
||
// Split the string by comma and return the first element
|
||
const urls = imageUrls.split(',');
|
||
return urls.length > 0 ? urls[0] : null;
|
||
}
|
||
|
||
|
||
const firstImageUrl = getFirstImageUrl(product?.images);
|
||
prodPrev.innerHTML =
|
||
`<div class="product-con display">
|
||
<img src="${firstImageUrl}" class="productImg"></img>
|
||
<div class="prodDetails">
|
||
<p class="prodTxtName">${product?.product_name}</p>
|
||
<p class="prodTxtPrice">${producPrice??'No Price'}</p>
|
||
<div class="input-qty">
|
||
<p class="input-qty-text">Quantity: </p>
|
||
<input class="qty-inputs" type="number"
|
||
name="product_quantity"
|
||
value="${product?.minimum_order ?product?.minimum_order : 1}"
|
||
id="qty-input-prev"
|
||
on-input="handleInputPrev()"
|
||
min="${product?.minimum_order ?product?.minimum_order : 1}" />
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<label class="custom-checkbox" >
|
||
<input type="checkbox" id="sendProdCheckbox">
|
||
<span class="checkmark"></span>
|
||
<p style="font-size:10px;">include</p>
|
||
</label>
|
||
</div>
|
||
`;
|
||
document.getElementById('qty-input-prev').addEventListener('change',
|
||
handleInputPrev);
|
||
const sendProdCheckbox = document.getElementById('sendProdCheckbox');
|
||
|
||
sendProdCheckbox.addEventListener('change', function() {
|
||
if (this.checked) {
|
||
isSendProduct = true
|
||
// console.log('Checkbox is checked');
|
||
// Add additional logic for when the checkbox is checked
|
||
} else {
|
||
isSendProduct = false
|
||
// console.log('Checkbox is unchecked');
|
||
// Add additional logic for when the checkbox is unchecked
|
||
}
|
||
});
|
||
}
|
||
console.log(globalProduct);
|
||
console.log(globalQuantity);
|
||
|
||
});
|
||
|
||
function handleInputPrev() {
|
||
var qtyInput = document.getElementById('qty-input-prev');
|
||
var currentQuantity = parseInt(qtyInput.value);
|
||
|
||
let product = globalVariation ?? globalProduct;
|
||
var minimumOrder = product?.minimum_order ? product.minimum_order : 1;
|
||
|
||
/* Default to quantity 1 if input is empty */
|
||
if (!currentQuantity || isNaN(currentQuantity)) {
|
||
currentQuantity = minimumOrder;
|
||
}
|
||
|
||
/* Ensure the quantity does not go below the minimum order */
|
||
if (currentQuantity < minimumOrder) {
|
||
currentQuantity = minimumOrder;
|
||
console.log("The minimum order quantity is " + minimumOrder);
|
||
}
|
||
|
||
/* Ensure the quantity never goes below 1 */
|
||
currentQuantity = Math.max(currentQuantity, 1);
|
||
|
||
qtyInput.value = currentQuantity;
|
||
globalQuantity = currentQuantity;
|
||
}
|
||
|
||
// Adding an event listener to handle changes when input is finished
|
||
|
||
// Function to fetch data from API
|
||
async function fetchData(user) {
|
||
try {
|
||
const response = await fetch('https://socket.obanana.io/api/users/' + user);
|
||
const userData = await response.json();
|
||
userDataGlobal = userData;
|
||
if (userData) {
|
||
|
||
const response2 = await fetch('https://socket.obanana.io/api/channels/all/' +
|
||
userData.channels[0]._id);
|
||
const data = await response2.json();
|
||
|
||
const wsUrl = 'wss://websocket.obanana.io/' + userData.channels[0]._id +
|
||
'T1eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2NDE3OTI4MmE3M2ZlZWQ3MjgyM2ViOCIsImlhdCI6MTcxNTY2ODI4Nn0.ziEOLreXbCJRlyjRyIVLDsJNpeIvk73rf3kU7_HtO8E'; // Replace with your WebSocket URL
|
||
const websocket = startWebSocket(wsUrl, user);
|
||
return data.messages;
|
||
}
|
||
return null
|
||
|
||
} catch (error) {
|
||
console.error('Error fetching data:', error);
|
||
}
|
||
}
|
||
|
||
function extractProductDetailsId(message_text) {
|
||
const command = "/:product-details=";
|
||
const urlStartIndex = message_text.indexOf(command);
|
||
|
||
if (urlStartIndex === -1) {
|
||
return null; // Command not found
|
||
}
|
||
|
||
// Extract the URL after the command
|
||
const url = message_text.substring(urlStartIndex + command.length);
|
||
|
||
try {
|
||
const [baseUrl, paramsString] = url.split(' ');
|
||
|
||
// Handle potential missing parameters part
|
||
if (!paramsString) {
|
||
console.error("Invalid format: missing parameters part");
|
||
return null;
|
||
}
|
||
|
||
const urlObj = new URL(baseUrl);
|
||
const params = new URLSearchParams(paramsString);
|
||
|
||
const id = urlObj.searchParams.get('id');
|
||
const qty = params.get('qty');
|
||
|
||
if (id && qty) {
|
||
return {
|
||
id,
|
||
qty
|
||
};
|
||
} else {
|
||
console.error("Missing required parameters");
|
||
return null;
|
||
}
|
||
} catch (e) {
|
||
console.error("Invalid URL:", e);
|
||
return null;
|
||
}
|
||
}
|
||
// Function to append messages to the chat list
|
||
async function appendMessages(messages, user) {
|
||
const chatList1 = document.getElementById('chat-list');
|
||
const chatList2 = document.getElementById('footer-chat');
|
||
chatList1.innerHTML = "";
|
||
chatList2.classList.remove('hide');
|
||
|
||
for (const message of messages) {
|
||
const li = document.createElement('li');
|
||
li.classList.add('messages');
|
||
|
||
// Creating the message_card div
|
||
const messageCardCon = document.createElement('div');
|
||
messageCardCon.classList.add('message_card_con');
|
||
const messageCard = document.createElement('div');
|
||
messageCard.classList.add('message_card');
|
||
|
||
// Check if the sender is the user or not and add appropriate class
|
||
if (message.sender?._id === user) {
|
||
li.classList.add('user');
|
||
messageCard.classList.add('user');
|
||
messageCardCon.classList.add('user');
|
||
|
||
} else {
|
||
li.classList.add('sender');
|
||
messageCard.classList.add('sender');
|
||
messageCardCon.classList.add('sender');
|
||
|
||
}
|
||
|
||
// Appending message_card div to list item
|
||
messageCardCon.appendChild(messageCard);
|
||
|
||
li.appendChild(messageCardCon);
|
||
|
||
// Append message content based on message type
|
||
if (message.message_type === 'text' || message.message_type === 'reply') {
|
||
var productDetail = extractProductDetailsId(message?.message_text);
|
||
if (productDetail !== null) {
|
||
try {
|
||
const response = await fetch(
|
||
'https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/' +
|
||
productDetail.id);
|
||
const productData = await response.json();
|
||
let producPrice = productData.sale_price ?? productData.regular_price;
|
||
let productQty = 1;
|
||
|
||
function getFirstImageUrl(imageUrls) {
|
||
if (!imageUrls) return null;
|
||
// Split the string by comma and return the first element
|
||
const urls = imageUrls.split(',');
|
||
return urls.length > 0 ? urls[0] : null;
|
||
}
|
||
|
||
|
||
const firstImageUrl = getFirstImageUrl(productData?.images);
|
||
// console.log(productData)
|
||
const productCon = document.createElement('div');
|
||
productCon.className = 'product-con-wrap';
|
||
productCon.innerHTML =
|
||
`
|
||
<a class="product-con" href="/produt-left-sidebar.php?id=${productDetail.id}">
|
||
<img src="${firstImageUrl}" class="productImg"></img>
|
||
<div class="prodDetails">
|
||
<p class="prodTxtName">${productData.product_name}</p>
|
||
<p class="prodTxtPrice">${producPrice??'No Price'}</p>
|
||
<p class="prodTxtQty">${productDetail.qty} qty</p>
|
||
</div>
|
||
</a>
|
||
`;
|
||
|
||
messageCard.appendChild(
|
||
productCon);
|
||
} catch (error) {
|
||
console.error("Error fetching product data:", error);
|
||
}
|
||
} else {
|
||
|
||
const messageText = document.createElement('p');
|
||
messageText.textContent =
|
||
message.message_text;
|
||
messageCard.appendChild(messageText);
|
||
}
|
||
} else if (message.message_type === 'image') {
|
||
const image = document.createElement('img');
|
||
image.classList.add('message-image');
|
||
image.src = message.message_img[0]
|
||
.link; // Assuming only one image per message
|
||
messageCard.appendChild(image);
|
||
|
||
} else if (message.message_type === 'video') {
|
||
const video = document.createElement('video');
|
||
video.classList.add('message-video');
|
||
|
||
video.src = message.message_video[0]
|
||
.link; // Assuming only one video per message
|
||
video.controls = true;
|
||
messageCard.appendChild(video);
|
||
}
|
||
const createdAt = new Date(message.createdAt);
|
||
const formattedDate = formatDate(createdAt);
|
||
const timeStampElement = document.createElement('span');
|
||
timeStampElement.classList.add('time-stamp');
|
||
timeStampElement.textContent = formattedDate;
|
||
li.appendChild(timeStampElement);
|
||
|
||
function formatDate(date) {
|
||
const options = {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
hour: 'numeric',
|
||
minute: 'numeric'
|
||
};
|
||
const formattedDate = date.toLocaleDateString('en-US', options);
|
||
return formattedDate;
|
||
}
|
||
if (message.sender?._id === user) {
|
||
|
||
timeStampElement.classList.add('user');
|
||
|
||
} else {
|
||
timeStampElement.classList.add('sender');
|
||
|
||
|
||
}
|
||
// Appending list item to chat list
|
||
chatList1.appendChild(li);
|
||
};
|
||
|
||
scrollToBottom(chatList1);
|
||
}
|
||
|
||
|
||
// Call fetchData and appendMessages directly
|
||
// fetchData()
|
||
// .then(messages => appendMessages(messages))
|
||
// .catch(error => console.error('Error:', error));
|
||
// Function to fetch user data from API
|
||
async function fetchUserData() {
|
||
let userId =
|
||
'<?php echo $_SESSION['LoggedInVendorId'] !== null ? $_SESSION[
|
||
'LoggedInVendorId'] : $_SESSION[
|
||
'customerId']?>';
|
||
let response = null
|
||
try {
|
||
if ('<?php echo $_SESSION['customerId']; ?>') {
|
||
response = await fetch(
|
||
'https://api.obanana.shop/api/v1/customers/<?php echo $_SESSION['customerId']; ?>'
|
||
);
|
||
} else {
|
||
response = await fetch(
|
||
'https://api.obanana.shop/api/v1/vendors/<?php echo $_SESSION['LoggedInVendorId']; ?>'
|
||
);
|
||
}
|
||
|
||
|
||
const userData = await response.json();
|
||
return userData;
|
||
} catch (error) {
|
||
console.error('Error fetching user data:', error);
|
||
return null;
|
||
}
|
||
}
|
||
async function createUserAndPatchCustomer(userData) {
|
||
try {
|
||
// Create user
|
||
const createUserResponse = await fetch(
|
||
'https://socket.obanana.io/api/auth/register', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(userData)
|
||
});
|
||
|
||
// Check if user creation was successful
|
||
if (createUserResponse.ok) {
|
||
const createUserResult = await createUserResponse.json();
|
||
const userId = createUserResult._id;
|
||
// const userId="664178bc2a73feed72823c07"
|
||
let userId2 =
|
||
'<?php echo $_SESSION['LoggedInVendorId'] !== null ? $_SESSION[
|
||
'LoggedInVendorId'] : $_SESSION[
|
||
'customerId']?>';
|
||
if (userId2) {
|
||
|
||
} else {
|
||
localStorage.setItem("anon_user", userId)
|
||
}
|
||
console.log(createUserResult)
|
||
// Create channel for the user
|
||
const createChannelResponse = await fetch(
|
||
'https://socket.obanana.io/api/channels', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer <?php echo $_SESSION['token']; ?>`
|
||
},
|
||
body: JSON.stringify({
|
||
participants: [{
|
||
user: userId
|
||
}, {
|
||
user: "664179282a73feed72823eb8"
|
||
}],
|
||
channel_type: 'private',
|
||
status: 'active'
|
||
})
|
||
});
|
||
|
||
if (createChannelResponse.ok) {
|
||
const createChannelResult = await createChannelResponse.json();
|
||
const channelId = createChannelResult._id;
|
||
|
||
// Loop through participants and update user with channel ID
|
||
const participants = [{
|
||
user: userId
|
||
}, {
|
||
user: "664179282a73feed72823eb8"
|
||
}];
|
||
for (const participant of participants) {
|
||
const updateUserResponse = await fetch(
|
||
`https://socket.obanana.io/api/users/channel/${participant.user}`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer <?php echo $_SESSION['token']; ?>`
|
||
},
|
||
body: JSON.stringify({
|
||
channelId
|
||
})
|
||
});
|
||
|
||
if (!updateUserResponse.ok) {
|
||
throw new Error('Failed to update user');
|
||
}
|
||
}
|
||
let userId2 =
|
||
'<?php echo $_SESSION['LoggedInVendorId'] !== null ? $_SESSION[
|
||
'LoggedInVendorId'] : $_SESSION[
|
||
'customerId']?>';
|
||
if (userId2) {
|
||
let patchCustomerResponse = null
|
||
if ('<?php echo $_SESSION['customerId']; ?>') {
|
||
patchCustomerResponse = await fetch(
|
||
`https://api.obanana.shop/api/v1/customers/<?php echo $_SESSION['customerId']; ?>`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer <?php echo $_SESSION['token']; ?>`
|
||
},
|
||
body: JSON.stringify({
|
||
chat_id: createUserResult._id
|
||
})
|
||
});
|
||
} else {
|
||
patchCustomerResponse = await fetch(
|
||
`https://api.obanana.shop/api/v1/vendors/<?php echo $_SESSION['LoggedInVendorId']; ?>`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer <?php echo $_SESSION['token']; ?>`
|
||
},
|
||
body: JSON.stringify({
|
||
chat_id: createUserResult._id
|
||
})
|
||
});
|
||
}
|
||
// Now patch the customer
|
||
|
||
|
||
if (patchCustomerResponse.ok) {
|
||
main();
|
||
console.log(
|
||
'User created, channel created, user updated, and customer patched successfully'
|
||
);
|
||
} else {
|
||
throw new Error('Failed to patch customer');
|
||
}
|
||
} else {
|
||
const messages = await fetchData(createUserResult?._id);
|
||
appendMessages(messages, createUserResult._id);
|
||
}
|
||
} else {
|
||
throw new Error('Failed to create channel');
|
||
}
|
||
} else {
|
||
throw new Error('Failed to create user');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error:', error.message);
|
||
}
|
||
}
|
||
const send_btn = document.getElementById('send-btn');
|
||
|
||
async function startWebSocket(url, user) {
|
||
// Create a new WebSocket connection
|
||
const socket = new WebSocket(url);
|
||
|
||
// Event listener for when the WebSocket connection is established
|
||
socket.onopen = function(event) {
|
||
console.log('WebSocket connection established');
|
||
};
|
||
|
||
// Event listener for incoming messages
|
||
socket.onmessage = async function(event) {
|
||
// console.log('Received message:', event.data);
|
||
let message1 = JSON.parse(event.data);
|
||
let message = message1.content;
|
||
|
||
|
||
const chatList1 = document.getElementById('chat-list');
|
||
const chatList2 = document.getElementById('footer-chat');
|
||
|
||
|
||
const li = document.createElement('li');
|
||
li.classList.add('messages');
|
||
|
||
// Creating the message_card div
|
||
const messageCardCon = document.createElement('div');
|
||
messageCardCon.classList.add('message_card_con');
|
||
const messageCard = document.createElement('div');
|
||
messageCard.classList.add('message_card');
|
||
|
||
// Setting message text
|
||
|
||
// Check if the sender is the user or not and add appropriate class
|
||
if (message.sender._id === user) {
|
||
li.classList.add('user');
|
||
messageCard.classList.add('user');
|
||
messageCardCon.classList.add('user');
|
||
|
||
|
||
} else {
|
||
li.classList.add('sender');
|
||
messageCard.classList.add('sender');
|
||
messageCardCon.classList.add('sender');
|
||
|
||
|
||
}
|
||
messageCardCon.appendChild(messageCard);
|
||
|
||
li.appendChild(messageCardCon);
|
||
|
||
|
||
// Appending message text to message_card div
|
||
// messageCard.appendChild(messageText);
|
||
|
||
// Appending message_card div to list item
|
||
if (message.message_type === 'text' || message.message_type === 'reply ') {
|
||
var productDetail = extractProductDetailsId(message?.message_text);
|
||
if (productDetail !== null) {
|
||
try {
|
||
const response = await fetch(
|
||
'https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/' +
|
||
productDetail.id);
|
||
const productData = await response.json();
|
||
let producPrice = productData.sale_price ?? productData
|
||
.regular_price;
|
||
let productQty = 1;
|
||
|
||
function getFirstImageUrl(imageUrls) {
|
||
if (!imageUrls) return null;
|
||
// Split the string by comma and return the first element
|
||
const urls = imageUrls.split(',');
|
||
return urls.length > 0 ? urls[0] : null;
|
||
}
|
||
|
||
|
||
const firstImageUrl = getFirstImageUrl(productData?.images);
|
||
console.log(productData)
|
||
const productCon = document.createElement('div');
|
||
productCon.className = 'product-con-wrap';
|
||
productCon.innerHTML =
|
||
`
|
||
<a class="product-con" href="/produt-left-sidebar.php?id=${productDetail.id}">
|
||
<img src="${firstImageUrl}" class="productImg"></img>
|
||
<div class="prodDetails">
|
||
<p class="prodTxtName">${productData.product_name}</p>
|
||
<p class="prodTxtPrice">${producPrice??'No Price'}</p>
|
||
<p class="prodTxtQty">${productDetail.qty} qty</p>
|
||
</div>
|
||
</a>
|
||
|
||
`;
|
||
|
||
messageCard.appendChild(
|
||
productCon);
|
||
} catch (error) {
|
||
console.error("Error fetching product data:", error);
|
||
}
|
||
} else {
|
||
|
||
const messageText = document.createElement('p');
|
||
messageText.textContent =
|
||
message.message_text;
|
||
messageCard.appendChild(messageText);
|
||
}
|
||
} else if (message.message_type === 'image') {
|
||
const image = document.createElement('img');
|
||
image.classList.add('message-image');
|
||
image.src = message.message_img[0]
|
||
.link; // Assuming only one image per message
|
||
messageCard.appendChild(image);
|
||
|
||
} else if (message.message_type === 'video') {
|
||
const video = document.createElement('video');
|
||
video.classList.add('message-video');
|
||
|
||
video.src = message.message_video[0]
|
||
.link; // Assuming only one video per message
|
||
video.controls = true;
|
||
messageCard.appendChild(video);
|
||
}
|
||
const createdAt = new Date(message.createdAt);
|
||
const formattedDate = formatDate(createdAt);
|
||
const timeStampElement = document.createElement('span');
|
||
timeStampElement.classList.add('time-stamp');
|
||
timeStampElement.textContent = formattedDate;
|
||
li.appendChild(timeStampElement);
|
||
|
||
function formatDate(date) {
|
||
const options = {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
hour: 'numeric',
|
||
minute: 'numeric'
|
||
};
|
||
const formattedDate = date.toLocaleDateString('en-US', options);
|
||
return formattedDate;
|
||
}
|
||
if (message.sender?._id === user) {
|
||
|
||
timeStampElement.classList.add('user');
|
||
|
||
} else {
|
||
timeStampElement.classList.add('sender');
|
||
|
||
|
||
}
|
||
// Appending list item to chat list
|
||
chatList1.appendChild(li);
|
||
|
||
scrollToBottom(chatList1);
|
||
// Handle the received message here
|
||
};
|
||
|
||
// Event listener for WebSocket errors
|
||
socket.onerror = function(error) {
|
||
console.error('WebSocket error:', error);
|
||
};
|
||
|
||
// Event listener for WebSocket connection closures
|
||
socket.onclose = function(event) {
|
||
// main();
|
||
console.log('WebSocket connection closed');
|
||
};
|
||
|
||
// Return the WebSocket object so it can be accessed outside this function
|
||
return socket;
|
||
}
|
||
|
||
|
||
|
||
async function main() {
|
||
const userData = await fetchUserData();
|
||
console.log(userData)
|
||
let retrieveAnon = localStorage.getItem("anon_user")
|
||
let userId2 =
|
||
'<?php echo $_SESSION['LoggedInVendorId'] !== null ? $_SESSION[
|
||
'LoggedInVendorId'] : $_SESSION[
|
||
'customerId']?>';
|
||
console.log('userId2' + userId2)
|
||
if (userData?.chat_id) {
|
||
const messages = await fetchData(userData?.chat_id);
|
||
|
||
appendMessages(messages, userData?.chat_id);
|
||
scrollToBottom();
|
||
} else if (!userData?.chat_id && retrieveAnon && !userId2) {
|
||
const messages = await fetchData(retrieveAnon);
|
||
|
||
appendMessages(messages, retrieveAnon);
|
||
|
||
} else {
|
||
// Get the chat list element
|
||
const chatList1 = document.getElementById('chat-list');
|
||
const chatList2 = document.getElementById('footer-chat');
|
||
|
||
// Create a list item
|
||
const li = document.createElement('li');
|
||
li.classList.add('chat_start');
|
||
chatList2.classList.add('hide');
|
||
|
||
|
||
// Create the message_card div
|
||
const messageCard = document.createElement('div');
|
||
messageCard.classList.add('chat_start_button');
|
||
|
||
// Create the messageText (button)
|
||
const messageText = document.createElement('button');
|
||
messageText.textContent = 'Start Chatting';
|
||
messageText.type = 'button';
|
||
messageText.addEventListener('click', async function() {
|
||
|
||
const chatList3 = document.getElementById('chat_start_button');
|
||
messageText.textContent = 'preparing...';
|
||
|
||
const user = await fetchUserData();
|
||
const characters =
|
||
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||
let result = '';
|
||
for (let i = 0; i < 8; i++) {
|
||
result += characters.charAt(Math.floor(Math.random() *
|
||
characters
|
||
.length));
|
||
}
|
||
|
||
|
||
let userData = null;
|
||
let userId =
|
||
'<?php echo $_SESSION['LoggedInVendorId'] !== null ? $_SESSION[
|
||
'LoggedInVendorId'] : $_SESSION[
|
||
'customerId']?>';
|
||
if (userId) {
|
||
userData = {
|
||
fName: user.first_name,
|
||
lName: user.last_name,
|
||
email: user.user_email,
|
||
password: user.first_name + result
|
||
}
|
||
} else {
|
||
userData = {
|
||
fName: "Obanana",
|
||
lName: "Customer_" + result,
|
||
email: "obanana_" + result,
|
||
password: "anonymous" + result
|
||
}
|
||
}
|
||
createUserAndPatchCustomer(userData);
|
||
|
||
});
|
||
// Append the messageText to messageCard
|
||
messageCard.appendChild(messageText);
|
||
|
||
// Append the messageCard to the list item (li)
|
||
li.appendChild(messageCard);
|
||
|
||
// Append the list item to the chat list
|
||
chatList1.appendChild(li);
|
||
}
|
||
}
|
||
|
||
// Call main function
|
||
main();
|
||
|
||
|
||
const chatList = document.getElementById("chat-list");
|
||
const messageInput = document.getElementById("message-input");
|
||
const fileInput = document.getElementById("file-input");
|
||
const messagePreview = document.getElementById('message-preview');
|
||
const removePreview = document.getElementById('remove-preview');
|
||
|
||
const sendButton = document.getElementById("send-btn");
|
||
|
||
// Add event listener to trigger file input when gallery icon is clicked
|
||
// document.querySelector('.gallery-icon').addEventListener('click', () => {
|
||
// fileInput.click();
|
||
// });
|
||
|
||
// Add event listener to file input
|
||
fileInput.addEventListener('change', () => {
|
||
const files = fileInput.files;
|
||
for (const file of files) {
|
||
if (!file.type.startsWith('image/') && file.type !== 'video/mp4') {
|
||
alert('Please select image or video files only.');
|
||
fileInput.value = ''; // Clear selected files
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Hide message input and show preview
|
||
messageInput.classList.add('hide');
|
||
messagePreview.classList.remove('hide');
|
||
removePreview.classList.remove('hide');
|
||
|
||
|
||
// Display image or video preview
|
||
const file = files[0];
|
||
const fileType = file.type.split('/')[0]; // Get file type (image or video)
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
if (fileType === 'image') {
|
||
messagePreview.innerHTML =
|
||
`<img src="${reader.result}" class="img-prev" alt="Image preview">`;
|
||
} else if (fileType === 'video') {
|
||
messagePreview.innerHTML =
|
||
`<video class="vid-prev" controls><source src="${reader.result}" type="${file.type}"></video>`;
|
||
}
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
sendButton.addEventListener("click", sendMessage);
|
||
removePreview.addEventListener("click",
|
||
removePreviewFunc);
|
||
|
||
function removePreviewFunc() {
|
||
// Remove selected file
|
||
fileInput.value = '';
|
||
|
||
// Hide message preview and show message input
|
||
messageInput.classList.remove('hide');
|
||
messagePreview.classList.add('hide');
|
||
removePreview.classList.add('hide');
|
||
|
||
// Clear message preview content
|
||
messagePreview.innerHTML = '';
|
||
}
|
||
|
||
// function sendMessage() {
|
||
// const messageText = messageInput.value.trim();
|
||
// if (messageText !== "") {
|
||
// appendMessage(messageText);
|
||
// messageInput.value = ""; // Clear the input field
|
||
// scrollToBottom(); // Scroll to the bottom after adding a new message
|
||
// }
|
||
// }
|
||
|
||
// function appendMessage(messageText) {
|
||
// const messageItem = document.createElement("li");
|
||
// messageItem.className = "message";
|
||
// messageItem.textContent = messageText;
|
||
// chatList.appendChild(messageItem);
|
||
// }
|
||
|
||
|
||
async function sendMessage() {
|
||
if (isSendProduct === true) {
|
||
try {
|
||
let sender = userDataGlobal._id;
|
||
let channelId = userDataGlobal.channels[0]._id;
|
||
let product = globalVariation ?? globalProduct;
|
||
if (globalQuantity === null) {
|
||
globalQuantity = product?.minimum_order ? product?.minimum_order : 1
|
||
}
|
||
let messageText =
|
||
'/:product-details=https://b2b.obanana.com/product-left-sidebar.php?id=' +
|
||
product._id + ' ' + 'qty=' + globalQuantity
|
||
// Send text message
|
||
await createTextMessageProduct(messageText, sender, channelId);
|
||
var prodPrev = document.getElementById('prod-prev');
|
||
const sendProdCheckbox = document.getElementById('sendProdCheckbox');
|
||
sendProdCheckbox.checked = false;
|
||
prodPrev.innerHTML = '';
|
||
|
||
} catch (error) {
|
||
console.error('Error sending message:', error.message);
|
||
}
|
||
}
|
||
|
||
console.log(userDataGlobal)
|
||
let sender = userDataGlobal._id;
|
||
let channelId = userDataGlobal.channels[0]._id;
|
||
const messageText = messageInput.value.trim();
|
||
if (messageText !== "") {
|
||
send_btn.textContent = "Sending...";
|
||
send_btn.disabled = true
|
||
try {
|
||
// Send text message
|
||
await createTextMessage(messageText, sender, channelId);
|
||
} catch (error) {
|
||
console.error('Error sending message:', error.message);
|
||
}
|
||
} else if (fileInput.files[0]) {
|
||
send_btn.textContent = "Sending...";
|
||
send_btn.disabled = true
|
||
const imageFiles = fileInput.files;
|
||
const file = imageFiles[0];
|
||
const fileType = file.type.split('/')[0];
|
||
if (fileType === 'image') {
|
||
try {
|
||
// Upload image
|
||
const imageUrl = await uploadMedia(imageFiles[0], 'image', sender,
|
||
channelId);
|
||
// Send image message
|
||
await createMediaMessage(imageUrl, 'image', sender, channelId);
|
||
} catch (error) {
|
||
console.error('Error sending image message:', error.message);
|
||
}
|
||
}
|
||
|
||
const videoFiles = fileInput.files;
|
||
if (fileType === 'video') {
|
||
try {
|
||
// Upload video
|
||
const videoUrl = await uploadMedia(videoFiles[0], 'video', sender,
|
||
channelId);
|
||
// Send video message
|
||
await createMediaMessage(videoUrl, 'video', sender, channelId);
|
||
} catch (error) {
|
||
console.error('Error sending video message:', error.message);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
async function createTextMessageProduct(messageText, sender, channelId) {
|
||
const response = await fetch('https://socket.obanana.io/api/messages', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
sender: sender,
|
||
channel_id: channelId,
|
||
message_type: 'text',
|
||
message_text: messageText
|
||
})
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error('Failed to send text message');
|
||
} else {
|
||
// fileInput.value = '';
|
||
// messageInput.value = '';
|
||
// send_btn.textContent = "Send";
|
||
// send_btn.disabled = false
|
||
|
||
|
||
}
|
||
const messageData = await response.json();
|
||
// appendMessage({
|
||
// message_text: messageText,
|
||
// message_type: 'text'
|
||
// });
|
||
// Scroll to the bottom after adding a new message
|
||
scrollToBottom();
|
||
}
|
||
|
||
async function createTextMessage(messageText, sender, channelId) {
|
||
const response = await fetch('https://socket.obanana.io/api/messages', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
sender: sender,
|
||
channel_id: channelId,
|
||
message_type: 'text',
|
||
message_text: messageText
|
||
})
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error('Failed to send text message');
|
||
} else {
|
||
fileInput.value = '';
|
||
messageInput.value = '';
|
||
send_btn.textContent = "Send";
|
||
send_btn.disabled = false
|
||
|
||
|
||
}
|
||
const messageData = await response.json();
|
||
// appendMessage({
|
||
// message_text: messageText,
|
||
// message_type: 'text'
|
||
// });
|
||
// Scroll to the bottom after adding a new message
|
||
scrollToBottom();
|
||
}
|
||
|
||
async function uploadMedia(file, mediaType, sender, channelId) {
|
||
const formData = new FormData();
|
||
console.log(file)
|
||
const currentDate = new Date();
|
||
const formattedDate = currentDate.toISOString().replace(/[-T:]/g, "").slice(0, -5);
|
||
const fileName = `${formattedDate}-${file.name}`;
|
||
formData.append('image_id', channelId);
|
||
formData.append('category', 'message');
|
||
formData.append('image', file, fileName);
|
||
|
||
|
||
const response = await fetch('https://socket.obanana.io/api/upload_images', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error(`Failed to upload ${mediaType}`);
|
||
} else {
|
||
const responseData = await response.json();
|
||
|
||
const response1 = await fetch('https://socket.obanana.io/api/files', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify({
|
||
media_type: mediaType,
|
||
file_name: responseData.filename,
|
||
link: `https://socket.obanana.io/message-assets/${responseData.filename}`,
|
||
sender: sender,
|
||
channel_id: channelId,
|
||
})
|
||
});
|
||
if (!response1.ok) {
|
||
throw new Error(`Failed to send ${mediaType} message`);
|
||
} else {
|
||
const responseData1 = await response1.json();
|
||
|
||
return responseData1;
|
||
}
|
||
}
|
||
// const responseData = await response.json();
|
||
// return responseData.url;
|
||
}
|
||
|
||
async function createMediaMessage(mediaUrl, mediaType, sender, channelId) {
|
||
|
||
let data = null;
|
||
const newItem = {
|
||
file_id: mediaUrl._id,
|
||
link: mediaUrl.link,
|
||
};
|
||
if (mediaType === 'image') {
|
||
data = {
|
||
sender: sender,
|
||
channel_id: channelId,
|
||
message_type: mediaType,
|
||
message_img: [newItem]
|
||
}
|
||
} else if (mediaType === 'video') {
|
||
data = {
|
||
sender: sender,
|
||
channel_id: channelId,
|
||
message_type: mediaType,
|
||
message_video: [newItem]
|
||
}
|
||
}
|
||
const response = await fetch('https://socket.obanana.io/api/messages', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(data)
|
||
});
|
||
if (!response.ok) {
|
||
throw new Error(`Failed to send ${mediaType} message`);
|
||
} else {
|
||
fileInput.value = '';
|
||
|
||
// Hide message preview and show message input
|
||
messageInput.classList.remove('hide');
|
||
messagePreview.classList.add('hide');
|
||
removePreview.classList.add('hide');
|
||
messagePreview.innerHTML = '';
|
||
send_btn.textContent = "Send";
|
||
send_btn.disabled = false
|
||
|
||
}
|
||
const messageData = await response.json();
|
||
// appendMessage({
|
||
// message_text: mediaUrl,
|
||
// message_type: mediaType
|
||
// });
|
||
// Scroll to the bottom after adding a new message
|
||
scrollToBottom();
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
function scrollToBottom(chatList1) {
|
||
const scroller = document.getElementById('scroller');
|
||
scroller.scrollTop = scroller.scrollHeight;
|
||
}
|
||
});
|
||
</script>
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<!-- Header Top social Start -->
|
||
<div class="col text-left header-top-left d-none d-lg-block">
|
||
<div class="header-top-social">
|
||
<span class="social-text text-upper">Follow us on:</span>
|
||
<ul class="mb-0">
|
||
<li class="list-inline-item"><a class="hdr-facebook"
|
||
href="https://www.facebook.com/ObananaPH/" target="_blank"><i
|
||
class="ecicon eci-facebook"></i></a></li>
|
||
<li class="list-inline-item"><a class="hdr-twitter"
|
||
href="https://twitter.com/obananac?lang=en" target="_blank"><i
|
||
class="ecicon eci-twitter"></i></a></li>
|
||
<li class="list-inline-item"><a class="hdr-instagram"
|
||
href="https://www.instagram.com/obananaph/" target="_blank"><i
|
||
class="ecicon eci-instagram"></i></a></li>
|
||
<li class="list-inline-item"><a class="hdr-linkedin"
|
||
href="https://ph.linkedin.com/company/obananaph" target="_blank"><i
|
||
class="ecicon eci-linkedin"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Header Top social End -->
|
||
<!-- Header Top Message Start -->
|
||
<!-- <div class="col text-center header-top-center">
|
||
<div class="header-top-message text-upper">
|
||
<span>Free Shipping</span>This Week Order Over - $75
|
||
</div>
|
||
</div> -->
|
||
<!-- Header Top Message End -->
|
||
<!-- Header Top Language Currency -->
|
||
<div class="col header-top-right d-none d-lg-block">
|
||
<div class="header-top-lan-curr d-flex justify-content-end">
|
||
<!-- Download Modal -->
|
||
<div class="header-top-download">
|
||
<!-- 04-01-2024 Stacy modified this block of code -->
|
||
<!-- <button class="text-upper" onclick="displayPopup()">Download App <i aria-hidden="true"></i></button> -->
|
||
<?php if(!empty($customer_data)) { ?>
|
||
<button style="cursor:default;">Hi <span
|
||
class="text-upper"><?php echo $customer_data[0]['first_name'] ?>!</span></button>
|
||
<?php } else if (isset($vendorData)) {?>
|
||
<button style="cursor:default;">Hi <span
|
||
class="text-upper"><?php echo ($vendorData['user_login']) ?>!</span></button>
|
||
<?php } else {?>
|
||
<button class="text-upper"><a href="login.php">Login</a></button>
|
||
<?php } ?>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function displayPopup() {
|
||
// Show the pop-up
|
||
$("#ec-popnews-bg2").fadeIn();
|
||
$("#ec-popnews-box2").fadeIn();
|
||
|
||
$("#ec-popnews-close2").click(() => {
|
||
$("#ec-popnews-bg2").fadeOut();
|
||
$("#ec-popnews-box2").fadeOut();
|
||
|
||
var dataValue = true;
|
||
ecCreateCookie('ecPopNewsLetter', dataValue, 1);
|
||
});
|
||
|
||
$("#ec-popnews-bg2").click(() => {
|
||
$("#ec-popnews-bg2").fadeOut();
|
||
$("#ec-popnews-box2").fadeOut();
|
||
|
||
var dataValue = true;
|
||
ecCreateCookie('ecPopNewsLetter', dataValue, 1);
|
||
});
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<!-- Newsletter Modal Start -->
|
||
<div id="ec-popnews-bg2"></div>
|
||
<div id="ec-popnews-box2">
|
||
<div id="ec-popnews-close2"><i class="ecicon eci-close"></i></div>
|
||
<div class="row">
|
||
<div class="col-md-6 disp-no-767">
|
||
<img loading="lazy" src="../assets/images/img-1.png" alt="newsletter">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div id="ec-popnews-box-content2">
|
||
<h2>Download ObananaPay Now</h2>
|
||
<p>Enjoy promos, discounts and more when you download, register and pay with
|
||
ObananaPay.</p>
|
||
<div class="obpay-download">
|
||
<a href="https://play.google.com/store/apps/details?id=com.obanana.pay2"
|
||
target="_blank">
|
||
<img loading="lazy" src="../assets/images/playstore.png"
|
||
alt="newsletter"
|
||
style="object-fit:cover; height:45px; width:110px;">
|
||
</a>
|
||
<a href="https://apps.apple.com/ph/app/obananapay/id6447606481"
|
||
target="_blank">
|
||
<img loading="lazy" src="../assets/images/appstore.png" alt="newsletter"
|
||
style="object-fit:cover; height:45px; width:110px;">
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Newsletter Modal end -->
|
||
|
||
<!-- Download Modal -->
|
||
<!-- Language Start -->
|
||
<!-- <div class="header-top-lan dropdown">
|
||
<button class="dropdown-toggle text-upper" data-bs-toggle="dropdown">Language <i
|
||
class="ecicon eci-caret-down" aria-hidden="true"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li class="active"><a class="dropdown-item" href="#">English</a></li>
|
||
<li><a class="dropdown-item" href="#">Italiano</a></li>
|
||
</ul>
|
||
</div> -->
|
||
<!-- Language End -->
|
||
|
||
</div>
|
||
</div>
|
||
<!-- Header Top Language Currency -->
|
||
<!-- Header Top responsive Action -->
|
||
<div class="col d-lg-none ">
|
||
<div class="ec-header-bottons">
|
||
<!-- Header User Start -->
|
||
<div class="ec-header-user dropdown">
|
||
<button class="dropdown-toggle" data-bs-toggle="dropdown"><i
|
||
class="fi-rr-user"></i></button>
|
||
<ul class="dropdown-menu dropdown-menu-right">
|
||
<?php
|
||
if ($_SESSION["isLoggedIn"]) {
|
||
?><?php
|
||
if ($_SESSION["isVendor"]) {
|
||
?>
|
||
<li><a class="dropdown-item" href="vendor-dashboard.php">My Account</a></li>
|
||
<?php
|
||
} else {
|
||
?>
|
||
|
||
<li><a class="dropdown-item" href="user-profile.php">My Account</a></li>
|
||
<?php
|
||
}
|
||
?>
|
||
<li><a class="dropdown-item" href="logout.php">Logout</a></li>
|
||
<?php
|
||
} else {
|
||
?>
|
||
<li><a class="dropdown-item" href="register.php">Register</a></li>
|
||
<!-- <li><a class="dropdown-item" href="checkout.html">Checkout</a></li> -->
|
||
<li><a class="dropdown-item" href="login.php">Login</a></li>
|
||
<?php
|
||
}
|
||
?>
|
||
</ul>
|
||
</div>
|
||
<!-- Header User End -->
|
||
<!-- Header Cart Start -->
|
||
<a href="wishlist.php" class="ec-header-btn ec-header-wishlist">
|
||
<div class="header-icon"><i class="fi-rr-heart"></i></div>
|
||
<span id="wishNewItemCount" class="ec-header-count">0</span>
|
||
</a>
|
||
<!-- Header Cart End -->
|
||
<!-- Header Cart Start -->
|
||
<a href="cart.php" class="ec-header-btn ec-header-wishlist">
|
||
<div class="header-icon"><i class="fi-rr-shopping-bag"></i></div>
|
||
<span id="cartNewItemCount" class="ec-header-count">0</span>
|
||
</a>
|
||
<!-- Header Cart End -->
|
||
<a href="javascript:void(0)" class="ec-header-btn ec-sidebar-toggle">
|
||
<i class="fi fi-rr-apps"></i>
|
||
</a>
|
||
<!-- Header menu Start -->
|
||
<!-- <a href="#ec-mobile-menu" class="ec-header-btn ec-side-toggle d-lg-none">
|
||
<i class="fi fi-rr-menu-burger"></i>
|
||
</a> -->
|
||
<!-- Header menu End -->
|
||
</div>
|
||
</div>
|
||
<!-- Header Top responsive Action -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Ec Header Top End -->
|
||
|
||
<!-- Ec Header Bottom Start -->
|
||
<div class="ec-header-bottom d-none d-lg-block">
|
||
<div class="container position-relative">
|
||
<div class="row">
|
||
<div class="ec-flex">
|
||
<!-- Ec Header Logo Start -->
|
||
<div class="align-self-center">
|
||
<div class="header-logo">
|
||
<a href="index.php"><img loading="lazy" src="assets/images/logo/logo.png"
|
||
alt="Site Logo" /><img loading="lazy" class="dark-logo"
|
||
src="assets/images/logo/logo.png" alt="Site Logo" style="display: none;" /></a>
|
||
</div>
|
||
</div>
|
||
<!-- Ec Header Logo End -->
|
||
|
||
<!-- Ec Header Search Start -->
|
||
<div class="align-self-center">
|
||
<div class="header-search">
|
||
<form class="ec-btn-group-form" action="search_product_action.php">
|
||
<input class="form-control ec-search-bar" name="searchText"
|
||
placeholder="Search products..." type="text" required>
|
||
<button class="submit" type="submit"><i class="fi-rr-search"></i></button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- Ec Header Search End -->
|
||
|
||
<!-- Ec Header Button Start -->
|
||
<div class="align-self-center">
|
||
<div class="ec-header-bottons">
|
||
|
||
<!-- Header User Start -->
|
||
<div class="ec-header-user dropdown">
|
||
<button class="dropdown-toggle" data-bs-toggle="dropdown"><i
|
||
class="fi-rr-user"></i></button>
|
||
<ul class="dropdown-menu dropdown-menu-right">
|
||
<?php
|
||
if ($_SESSION["isLoggedIn"]) {
|
||
?><?php
|
||
if ($_SESSION["isVendor"]) {
|
||
?>
|
||
<li><a class="dropdown-item" href="vendor-dashboard.php">My Account</a></li>
|
||
<?php
|
||
} else {
|
||
?>
|
||
<li><a class="dropdown-item" href="user-profile.php">My Account</a></li>
|
||
<?php
|
||
}
|
||
?>
|
||
<li><a class="dropdown-item" href="logout.php">Logout</a></li>
|
||
<?php
|
||
} else {
|
||
?>
|
||
<li><a class="dropdown-item" href="register.php">Register</a></li>
|
||
<li><a class="dropdown-item" href="login.php">Login</a></li>
|
||
<?php
|
||
}
|
||
?>
|
||
</ul>
|
||
</div>
|
||
<!-- Header User End -->
|
||
<!-- Header wishlist Start -->
|
||
<?php
|
||
if (($_SESSION["isCustomer"] == true) && ($_SESSION["isVendor"] == false) || ($_SESSION["isLoggedIn"] == false)) {
|
||
?>
|
||
<a href="wishlist.php" class="ec-header-btn ec-header-wishlist">
|
||
<div class="header-icon"><i class="fi-rr-heart"></i></div>
|
||
<span class="ec-header-count">
|
||
<p id="wishItemCount">0</p>
|
||
</span>
|
||
</a>
|
||
<!-- Header wishlist End -->
|
||
<!-- Header Cart Start -->
|
||
<a href="#ec-side-cart" class="ec-header-btn ec-side-toggle">
|
||
<div class="header-icon"><i class="fi-rr-shopping-bag"></i></div>
|
||
<span class="ec-header-count cart-count-lable">
|
||
<p id="cartItemCount">0</p>
|
||
</span>
|
||
</a>
|
||
<div class="ec-side-cart-overlay"></div>
|
||
<div id="ec-side-cart" class="ec-side-cart">
|
||
<div class="ec-cart-inner">
|
||
<?php
|
||
if ($_SESSION["isLoggedIn"] && $customer_data) {
|
||
$customer = $customer_data[0];
|
||
$orders = getOrderbyCustomerId($customer['_id']);
|
||
$totalAmount = 0;
|
||
if ($orders) {
|
||
$order_data = json_decode($orders, true);
|
||
$_SESSION['cart_items'] = $order_data;
|
||
?>
|
||
<div class="ec-cart-top">
|
||
<div class="ec-cart-title">
|
||
<span class="cart_title">My Cart</span>
|
||
<button class="ec-close">×</button>
|
||
</div>
|
||
<style>
|
||
.rowcart {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-self: center;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.rowcartCheckbox {
|
||
height: 15px;
|
||
width: 15px;
|
||
margin-right: 5px;
|
||
}
|
||
</style>
|
||
<ul class="eccart-pro-items">
|
||
<?php
|
||
$cartEmpty = true;
|
||
//var_dump($order_data[0]['items'][0]['product']);
|
||
|
||
foreach ($order_data as $order) {
|
||
if (isset($order['status']) && $order['status'] === 'CART' && isset($order['items'][0]['product'])) {
|
||
$cartEmpty = false;
|
||
break;
|
||
}
|
||
}
|
||
if ($cartEmpty) {
|
||
echo "<p>No items in the cart</p>";
|
||
} else {
|
||
foreach ($order_data as $order) {
|
||
if (isset($order['status']) && $order['status'] === 'CART' && isset($order['items'][0]['product'])) {
|
||
$cartEmpty = false;
|
||
$totalAmount += $order['total_amount'];
|
||
$product = getProduct($order['items'][0]['product']['product_id']);
|
||
$product_data = json_decode($product, true);
|
||
?>
|
||
<li class="rowcart" id="order_<?php echo $order['_id'] ?>">
|
||
<input type="checkbox" class="rowcartCheckbox" name="cart-item[]"
|
||
value="<?php echo $order['_id']?>" />
|
||
<a href="product-left-sidebar.php?id=<?php echo $order['items'][0]['product']['product_id']; ?>"
|
||
class="sidekka_pro_img">
|
||
<?php
|
||
if (isset($order['items'][0]['product']['product_image'])) {
|
||
$image_urls = explode(',', $order['items'][0]['product']['product_image']);
|
||
if (!empty($image_urls)) {
|
||
$first_image_url = trim($image_urls[0]);
|
||
?>
|
||
<img loading="lazy" src="<?php echo $first_image_url; ?>"
|
||
alt="product" />
|
||
<?php
|
||
}
|
||
} else {
|
||
?>
|
||
<img loading="lazy" class="hover-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 class="ec-pro-content">
|
||
|
||
<a href="product-left-sidebar.php?id=<?php echo $order['items'][0]['product']['product_id']; ?>"
|
||
class="cart_pro_title">
|
||
<?php echo $order['items'][0]['product']['name']; ?>
|
||
</a>
|
||
<span class="cart-price">Unit Price:
|
||
<span><?php echo $order['items'][0]['price']; ?></span></span>
|
||
<div class="cart-price">
|
||
<span class="subtotal-<?php echo $order['_id']; ?>">Subtotal:
|
||
<?php echo $order['total_amount'] ?></span>
|
||
</div>
|
||
<!-- 02-16-2024 Stacy added style -->
|
||
<div class="qty-plus-minuses"
|
||
style="display:flex; overflow:visible; align-items:center; margin-top:5px;">
|
||
<div class="qty-btn"
|
||
style="color:#ffaa00; font-size:35px; margin-right:5px; cursor: pointer;"
|
||
onclick="qtyDecrement('<?php echo $order['_id']; ?>' ,
|
||
'<?php echo $order['items'][0]['_id']; ?>')"
|
||
onmouseover="this.style.color='#a15d00'"
|
||
onmouseout="this.style.color='#ffaa00'">-
|
||
</div>
|
||
<input style="width:80px; height:40px"
|
||
id="qty-input-<?php echo $order['items'][0]['_id']; ?>"
|
||
class="qty-input" type="number" name="ec_qtybtn"
|
||
value="<?php echo $order['items'][0]['quantity']; ?>"
|
||
oninput="handleQtyInput(this, '<?php echo $order['_id']; ?>',
|
||
'<?php echo $order['items'][0]['_id']; ?>')" />
|
||
<div class="qty-btn"
|
||
style="color:#ffaa00; font-size:30px; margin-left:5px; cursor: pointer;"
|
||
onclick="qtyIncrement('<?php echo $order['_id']; ?>' ,
|
||
'<?php echo $order['items'][0]['_id']; ?>', false)"
|
||
onmouseover="this.style.color='#a15d00'"
|
||
onmouseout="this.style.color='#ffaa00'">+
|
||
</div>
|
||
<!-- <a class="remove">x</a> -->
|
||
<!-- <a href="#" class="removeCart" onclick="deleteOrder('<?php #echo $order['_id']; ?>')">x</a> -->
|
||
<a href="#" class="removeCart" style="margin-left:10px;"
|
||
onclick="deleteOrder('<?php echo $order['_id']; ?>')">
|
||
<i class="ecicon eci-trash" style="color:#7e7e7e;"
|
||
onmouseover="this.style.color='#aaaaaa'"
|
||
onmouseout="this.style.color='#7e7e7e'"></i>
|
||
</a>
|
||
</div>
|
||
<!-- 02-16-2024 Stacy added style -->
|
||
</div>
|
||
</li>
|
||
<?php
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} else {
|
||
echo '<li>No items in the cart</li>';
|
||
}
|
||
?>
|
||
</ul>
|
||
</div>
|
||
<script>
|
||
var sessionToken =
|
||
'<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>';
|
||
var email = '<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>';
|
||
var password =
|
||
'<?php echo isset($_SESSION["password"]) ? $_SESSION["password"] : ""; ?>';
|
||
|
||
function login(username, password, callback) {
|
||
fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
"X-Api-Key": "{{apiKey}}"
|
||
},
|
||
body: JSON.stringify({
|
||
username: username,
|
||
password: password
|
||
})
|
||
})
|
||
.then(response => {
|
||
if (response.ok) {
|
||
return response.json();
|
||
} else {
|
||
throw new Error("Unable to login");
|
||
}
|
||
})
|
||
.then(data => {
|
||
fetch("update-token-session.php", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json"
|
||
},
|
||
body: JSON.stringify({
|
||
token: data.token
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(result => {
|
||
if (result.status === 'success') {
|
||
sessionToken = data.token;
|
||
console.log("New Token:", sessionToken);
|
||
callback(sessionToken);
|
||
} else {
|
||
throw new Error("Unable to update session token");
|
||
}
|
||
});
|
||
})
|
||
.catch(error => {
|
||
console.error("Error:", error.message);
|
||
});
|
||
}
|
||
|
||
let myLatestOrders = [];
|
||
var checkboxes = document.querySelectorAll('input[name="cart-item[]"]');
|
||
checkboxes.forEach(function(checkbox) {
|
||
checkbox.addEventListener('change', function() {
|
||
getCheckedCheckboxes();
|
||
getLatestOrders();
|
||
// update_Total()
|
||
});
|
||
});
|
||
|
||
function getCheckedCheckboxes() {
|
||
var checkboxes = document.querySelectorAll('input[name="cart-item[]"]');
|
||
var checkedValues = [];
|
||
var uncheckedValues = [];
|
||
|
||
checkboxes.forEach(function(checkbox) {
|
||
if (checkbox.checked) {
|
||
checkedValues.push(checkbox.value.toLowerCase().trim());
|
||
} else {
|
||
uncheckedValues.push(checkbox.value.toLowerCase().trim());
|
||
}
|
||
});
|
||
|
||
if (checkedValues.length === 0) {
|
||
return uncheckedValues;
|
||
} else {
|
||
console.log(checkedValues);
|
||
return checkedValues;
|
||
}
|
||
}
|
||
|
||
function update_Total() {
|
||
|
||
|
||
console.log(orderData);
|
||
var checkedCategories = getCheckedCheckboxes();
|
||
if (orderData && orderData !== "") {
|
||
// Calculate the new total amount based on the updated quantities
|
||
const orderInitial = null
|
||
if (checkedCategories?.length > 0) {
|
||
orderInitial = orderData?.filter(order => checkedCategories?.includes(
|
||
order._id));
|
||
|
||
} else {
|
||
orderInitial = orderData
|
||
}
|
||
let newTotalAmount = orderData.items.reduce((total, item) => {
|
||
return total + (item.quantity * item.price);
|
||
}, 0);
|
||
console.log(response);
|
||
}
|
||
}
|
||
|
||
function handleQtyInput(input, orderId, itemId, isFloat) {
|
||
login(email, password, function(token) {
|
||
var newQuantity = parseInt(input.value);
|
||
if (newQuantity >= 1) {
|
||
updateQuantity(orderId, itemId, newQuantity, isFloat, token);
|
||
} else {
|
||
input.value = 0;
|
||
deleteOrder(orderId, itemId, 0, isFloat, token);
|
||
// input.value = 1;
|
||
// updateQuantity(orderId, itemId, 1, isFloat, token);
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
// function handleQtyInput(input, orderId, itemId, isFloat) {
|
||
// login(email, password, function(token) {
|
||
// var newQuantity = parseInt(input.value);
|
||
// updateQuantity(orderId, itemId, newQuantity, isFloat, token);
|
||
// })
|
||
// }
|
||
|
||
function qtyIncrement(orderId, itemId, isFloat) {
|
||
login(email, password, function(token) {
|
||
var qtyInput = document.getElementById('qty-input-' + itemId);
|
||
var newQuantity = parseInt(qtyInput.value) + 1;
|
||
qtyInput.value = newQuantity;
|
||
updateQuantity(orderId, itemId, newQuantity, isFloat, token);
|
||
});
|
||
|
||
}
|
||
|
||
function qtyDecrement(orderId, itemId, isFloat) {
|
||
login(email, password, function(token) {
|
||
var qtyInput = document.getElementById('qty-input-' + itemId);
|
||
var newQuantity = parseInt(qtyInput.value) - 1;
|
||
if (newQuantity >= 1) {
|
||
qtyInput.value = newQuantity;
|
||
updateQuantity(orderId, itemId, newQuantity, isFloat, token);
|
||
} else {
|
||
qtyInput.value = 0;
|
||
deleteOrder(orderId, itemId, 0, isFloat, token);
|
||
// qtyInput.value = 1;
|
||
// updateQuantity(orderId, itemId, 1, isFloat, token);
|
||
}
|
||
})
|
||
}
|
||
|
||
// function qtyDecrement(orderId, itemId, isFloat) {
|
||
// login(email, password, function(token) {
|
||
// var qtyInput = document.getElementById('qty-input-' + itemId);
|
||
// var newQuantity = parseInt(qtyInput.value) - 1;
|
||
// qtyInput.value = newQuantity;
|
||
// if (newQuantity >= 1) {
|
||
// updateQuantity(orderId, itemId, newQuantity, isFloat, token);
|
||
// }
|
||
// })
|
||
// }
|
||
|
||
function updateQuantity(orderId, itemId, newQuantity, isFloat, token) {
|
||
console.log(isFloat)
|
||
// const token = '<?php echo $_SESSION["token"] ?>';
|
||
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}/items/${itemId}`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': 'Bearer ' + token,
|
||
},
|
||
body: JSON.stringify({
|
||
quantity: newQuantity
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data && data !== "") {
|
||
// Quantity updated successfully, update the UI
|
||
// document.getElementById('qty-input').value = newQuantity;
|
||
if (isFloat === true) {
|
||
document.getElementById('qty-input-' + itemId).value =
|
||
newQuantity;
|
||
updateFloatTotalAmount(orderId, token);
|
||
|
||
} else {
|
||
|
||
document.getElementById('qty-input-' + itemId).value =
|
||
newQuantity;
|
||
updateTotalAmount(orderId, token);
|
||
}
|
||
} else {
|
||
alert('Error updating quantity: ' + data.status);
|
||
}
|
||
})
|
||
.catch(error => console.error('Error:', error));
|
||
}
|
||
|
||
function updateFloatTotalAmount(orderId, token) {
|
||
// Fetch the order data
|
||
fetch(
|
||
`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`
|
||
)
|
||
.then(response => response.json())
|
||
.then(orderData => {
|
||
console.log("This is the OrderData: " + JSON.stringify(orderData,
|
||
null, 2));
|
||
if (orderData && orderData !== "") {
|
||
// Calculate the new total amount based on the updated quantities
|
||
let newTotalAmount = orderData.items.reduce((total, item) => {
|
||
return total + (item.quantity * item.price);
|
||
}, 0);
|
||
|
||
// Update the total amount in the UI
|
||
document.getElementById(`subtotal-${orderId}`).innerText =
|
||
'Subtotal: ' + newTotalAmount;
|
||
// document.getElementById(`cart-price subtotal-${orderId}`).innerText = 'Subtotal: ' + newTotalAmount;
|
||
|
||
// Perform the PATCH request to update the total amount in the API
|
||
// const token = '<?php echo $_SESSION["token"] ?>';
|
||
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': 'Bearer ' + token,
|
||
|
||
},
|
||
body: JSON.stringify({
|
||
total_amount: newTotalAmount
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data && data !== "") {
|
||
getLatestOrders()
|
||
} else {
|
||
alert('Error updating total amount: ' + data
|
||
.status);
|
||
|
||
|
||
}
|
||
})
|
||
.catch(error => console.error('Error:', error));
|
||
} else {
|
||
alert('Error fetching order data');
|
||
}
|
||
})
|
||
.catch(error => console.error('Error:', error));
|
||
}
|
||
|
||
function updateTotalAmount(orderId, token) {
|
||
// Fetch the order data
|
||
fetch(
|
||
`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`
|
||
)
|
||
.then(response => response.json())
|
||
.then(orderData => {
|
||
if (orderData && orderData !== "") {
|
||
// Calculate the new total amount based on the updated quantities
|
||
let newTotalAmount = orderData.items.reduce((total, item) => {
|
||
return total + (item.quantity * item.price);
|
||
}, 0);
|
||
|
||
// Update the total amount in the UI
|
||
document.querySelector(`.cart-price .subtotal-${orderId}`)
|
||
.innerText = 'Subtotal: ' + newTotalAmount;
|
||
// document.getElementById(`cart-price subtotal-${orderId}`).innerText = 'Subtotal: ' + newTotalAmount;
|
||
|
||
// Perform the PATCH request to update the total amount in the API
|
||
// const token = '<?php echo $_SESSION["token"] ?>';
|
||
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
|
||
method: 'PATCH',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': 'Bearer ' + token,
|
||
|
||
},
|
||
body: JSON.stringify({
|
||
total_amount: newTotalAmount
|
||
})
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data && data !== "") {
|
||
// Total amount updated successfully
|
||
getLatestOrders()
|
||
} else {
|
||
alert('Error updating total amount: ' + data
|
||
.status);
|
||
}
|
||
})
|
||
.catch(error => console.error('Error:', error));
|
||
} else {
|
||
alert('Error fetching order data');
|
||
}
|
||
})
|
||
.catch(error => console.error('Error:', error));
|
||
}
|
||
|
||
function getLatestOrders() {
|
||
var customerId = '<?php echo $customer['_id'] ?>'
|
||
// Fetch the order data
|
||
fetch(
|
||
`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/customer/${customerId}`
|
||
)
|
||
.then(response => response.json())
|
||
.then(orderData => {
|
||
if (orderData && orderData !== "") {
|
||
console.log(orderData)
|
||
const filteredOrders = orderData.filter(order => order.status
|
||
.toUpperCase() === 'CART');
|
||
var checkedCategories = getCheckedCheckboxes();
|
||
let orderInitial = null;
|
||
if (filteredOrders && filteredOrders !== "") {
|
||
// Calculate the new total amount based on the updated quantities
|
||
if (checkedCategories?.length > 0) {
|
||
orderInitial = filteredOrders?.filter(order =>
|
||
checkedCategories?.includes(order._id));
|
||
|
||
} else {
|
||
orderInitial = filteredOrders
|
||
}
|
||
}
|
||
const totalAmountSum = orderInitial.reduce((sum, order) => {
|
||
const totalAmount = parseFloat(order.total_amount);
|
||
return sum + totalAmount;
|
||
}, 0);
|
||
|
||
console.log('Total Amount Sum:', totalAmountSum);
|
||
document.getElementById(`floatCartTotalAmount`).innerText =
|
||
totalAmountSum;
|
||
} else {
|
||
alert('Error fetching order data');
|
||
}
|
||
})
|
||
.catch(error => console.error('Error:', error));
|
||
}
|
||
|
||
function deleteOrder(orderId) {
|
||
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/' +
|
||
orderId, {
|
||
method: 'DELETE'
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data && data !== "") {
|
||
// Order deleted successfully, update the UI
|
||
document.getElementById('order_' + data._id).remove();
|
||
getLatestOrders()
|
||
} else {
|
||
alert('Error deleting order: ' + data.status);
|
||
}
|
||
})
|
||
.catch(error => console.error('Error:', error));
|
||
updateCartItemCount()
|
||
updateWishItemCount()
|
||
}
|
||
|
||
function handleCheckoutButton(event) {
|
||
event.preventDefault();
|
||
var checkedCategories = getCheckedCheckboxes();
|
||
|
||
const selectedIdString = checkedCategories.join('-');
|
||
login(email, password, function(token) {
|
||
|
||
window.location.href =
|
||
`checkouttest.php?selected=${selectedIdString}`;
|
||
});
|
||
}
|
||
|
||
function handleCartButton(event) {
|
||
event.preventDefault();
|
||
login(email, password, function(token) {
|
||
|
||
window.location.href = "cart.php";
|
||
});
|
||
}
|
||
</script>
|
||
<div class="ec-cart-bottom">
|
||
<div class="cart-sub-total">
|
||
<table class="table cart-table">
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-left">Total :</td>
|
||
<td class="text-right primary-color" id="floatCartTotalAmount">
|
||
<?php echo $totalAmount; ?></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="cart_btn">
|
||
<!-- <a href="cart.php" class="btn btn-primary">View Cart</a> -->
|
||
<a class="btn btn-secondary" onclick="handleCartButton(event)">View Cart</a>
|
||
<a class="btn btn-secondary"
|
||
onclick="handleCheckoutButton(event)">Checkout</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<?php
|
||
}
|
||
?>
|
||
<!-- Header Cart End -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Ec Header Button End -->
|
||
<!-- Header responsive Bottom Start -->
|
||
<div class="ec-header-bottom d-lg-none">
|
||
<div class="container position-relative">
|
||
<div class="row ">
|
||
|
||
<!-- Ec Header Logo Start -->
|
||
<div class="col">
|
||
<div class="header-logo">
|
||
<a href="index.php"><img loading="lazy" src="assets/images/logo/logo.png" alt="Site Logo" /><img
|
||
loading="lazy" class="dark-logo" src="assets/images/logo/dark-logo.png" alt="Site Logo"
|
||
style="display: none;" /></a>
|
||
</div>
|
||
</div>
|
||
<!-- Ec Header Logo End -->
|
||
<!-- Ec Header Search Start -->
|
||
<div class="col">
|
||
<div class="header-search">
|
||
<form class="ec-btn-group-form" action="search_product_action.php">
|
||
<input class="form-control ec-search-bar" name="searchText" placeholder="Search products..."
|
||
type="text" required>
|
||
<button class="submit" type="submit"><i class="fi-rr-search"></i></button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- Ec Header Search End -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Header responsive Bottom End -->
|
||
<!-- EC Main Menu Start -->
|
||
<div id="ec-main-menu-desk" class="d-none d-lg-block sticky-nav">
|
||
<div class="container position-relative">
|
||
<div class="row">
|
||
<div class="col-md-12 align-self-center">
|
||
<div class="ec-main-menu">
|
||
<?php
|
||
$currentFile = basename($_SERVER['PHP_SELF']);
|
||
if ($currentFile != 'login.php' && !isset($_SESSION["isVendor"])) { ?>
|
||
<a href="javascript:void(0)" class="ec-header-btn ec-sidebar-toggle">
|
||
<i class="fi fi-rr-apps"></i>
|
||
</a>
|
||
<?php
|
||
}
|
||
?>
|
||
<ul>
|
||
<li><a href="index.php">Home</a></li>
|
||
<!-- <li class="dropdown position-static"><a href="javascript:void(0)">Categories</a>
|
||
<ul class="mega-menu d-block">
|
||
<li class="d-flex">
|
||
<ul class="d-block">
|
||
<li class="menu_title"><a href="javascript:void(0)">Classic
|
||
Variation</a></li>
|
||
<li><a href="shop-left-sidebar-col-4.php">Left sidebar 3 column</a>
|
||
</li>
|
||
<li><a href="shop-left-sidebar-col-4.html">Left sidebar 4 column</a>
|
||
</li>
|
||
<li><a href="shop-right-sidebar-col-3.html">Right sidebar 3 column</a>
|
||
</li>
|
||
<li><a href="shop-right-sidebar-col-4.html">Right sidebar 4 column</a>
|
||
</li>
|
||
<li><a href="shop-full-width.html">Full width 4 column</a></li>
|
||
</ul>
|
||
<ul class="d-block">
|
||
<li class="menu_title"><a href="javascript:void(0)">Classic
|
||
Variation</a></li>
|
||
<li><a href="shop-banner-left-sidebar-col-3.html">Banner left sidebar 3
|
||
column</a></li>
|
||
<li><a href="shop-banner-left-sidebar-col-4.html">Banner left sidebar 4
|
||
column</a></li>
|
||
<li><a href="shop-banner-right-sidebar-col-3.html">Banner right sidebar
|
||
3 column</a></li>
|
||
<li><a href="shop-banner-right-sidebar-col-4.html">Banner right sidebar
|
||
4 column</a></li>
|
||
<li><a href="shop-banner-full-width.html">Banner Full width 4 column</a>
|
||
</li>
|
||
</ul>
|
||
<ul class="d-block">
|
||
<li class="menu_title"><a href="javascript:void(0)">Columns
|
||
Variation</a></li>
|
||
<li><a href="shop-full-width-col-3.html">3 Columns full width</a></li>
|
||
<li><a href="shop-full-width-col-4.html">4 Columns full width</a></li>
|
||
<li><a href="shop-full-width-col-5.html">5 Columns full width</a></li>
|
||
<li><a href="shop-full-width-col-6.html">6 Columns full width</a></li>
|
||
<li><a href="shop-banner-full-width-col-3.html">Banner 3 Columns</a>
|
||
</li>
|
||
</ul>
|
||
<ul class="d-block">
|
||
<li class="menu_title"><a href="javascript:void(0)">List Variation</a>
|
||
</li>
|
||
<li><a href="shop-list-left-sidebar.html">Shop left sidebar</a></li>
|
||
<li><a href="shop-list-right-sidebar.html">Shop right sidebar</a></li>
|
||
<li><a href="shop-list-banner-left-sidebar.html">Banner left sidebar</a>
|
||
</li>
|
||
<li><a href="shop-list-banner-right-sidebar.html">Banner right
|
||
sidebar</a></li>
|
||
<li><a href="shop-list-full-col-2.html">Full width 2 columns</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<ul class="ec-main-banner w-100">
|
||
<li><a class="p-0" href="shop-left-sidebar-col-4.php"><img loading="lazy"
|
||
class="img-responsive" src="assets/images/menu-banner/1.jpg"
|
||
alt=""></a></li>
|
||
<li><a class="p-0" href="shop-left-sidebar-col-4.html"><img loading="lazy"
|
||
class="img-responsive" src="assets/images/menu-banner/2.jpg"
|
||
alt=""></a></li>
|
||
<li><a class="p-0" href="shop-right-sidebar-col-3.html"><img loading="lazy"
|
||
class="img-responsive" src="assets/images/menu-banner/3.jpg"
|
||
alt=""></a></li>
|
||
<li><a class="p-0" href="shop-right-sidebar-col-4.html"><img loading="lazy"
|
||
class="img-responsive" src="assets/images/menu-banner/4.jpg"
|
||
alt=""></a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li> -->
|
||
<!-- <li class="dropdown"><a href="shop-left-sidebar-col-4.php">Products</a>
|
||
<ul class="sub-menu">
|
||
<li class="dropdown position-static"><a href="javascript:void(0)">Product page
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="shop-left-sidebar-col-4.php">Product left sidebar</a></li>
|
||
<li><a href="product-right-sidebar.html">Product right sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static"><a href="javascript:void(0)">Product 360
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="product-360-left-sidebar.html">360 left sidebar</a></li>
|
||
<li><a href="product-360-right-sidebar.html">360 right sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static"><a href="javascript:void(0)">Product video
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="product-video-left-sidebar.html">Video left sidebar</a>
|
||
</li>
|
||
<li><a href="product-video-right-sidebar.html">Video right sidebar</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static"><a href="javascript:void(0)">Product
|
||
gallery
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="product-gallery-left-sidebar.html">Gallery left sidebar</a>
|
||
</li>
|
||
<li><a href="product-gallery-right-sidebar.html">Gallery right
|
||
sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="product-full-width.html">Product full width</a></li>
|
||
<li><a href="product-360-full-width.html">360 full width</a></li>
|
||
<li><a href="product-video-full-width.html">Video full width</a></li>
|
||
<li><a href="product-gallery-full-width.html">Gallery full width</a></li>
|
||
</ul>
|
||
</li> -->
|
||
<li class="dropdown"><a href="vendor-list.php">Vendors</a>
|
||
<!-- <ul class="sub-menu">
|
||
<li><a href="about-us.html">About Us</a></li>
|
||
<li><a href="contact-us.html">Contact Us</a></li>
|
||
<li><a href="cart.html">Cart</a></li>
|
||
<li><a href="checkout.html">Checkout</a></li>
|
||
<li><a href="compare.html">Compare</a></li>
|
||
<li><a href="faq.php">FAQ</a></li>
|
||
<li><a href="login.php">Login</a></li>
|
||
<li><a href="register.php">Register</a></li>
|
||
<li><a href="track-order.html">Track Order</a></li>
|
||
<li><a href="terms-condition.html">Terms Condition</a></li>
|
||
<li><a href="privacy-policy.html">Privacy Policy</a></li>
|
||
</ul> -->
|
||
</li>
|
||
<li class="dropdown"><span class="main-label-note-new" data-toggle="tooltip"
|
||
title="NEW"></span><a href="next_day_delivery.php">Next-Day-Delivery</a>
|
||
<!-- <ul class="sub-menu">
|
||
<li class="dropdown position-static"><a href="javascript:void(0)">Mail
|
||
Confirmation
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="email-template-confirm-1.html">Mail Confirmation 1</a></li>
|
||
<li><a href="email-template-confirm-2.html">Mail Confirmation 2</a></li>
|
||
<li><a href="email-template-confirm-3.html">Mail Confirmation 3</a></li>
|
||
<li><a href="email-template-confirm-4.html">Mail Confirmation 4</a></li>
|
||
<li><a href="email-template-confirm-5.html">Mail Confirmation 5</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static"><a href="javascript:void(0)">Mail Reset
|
||
password
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="email-template-forgot-password-1.html">Reset password 1</a>
|
||
</li>
|
||
<li><a href="email-template-forgot-password-2.html">Reset password 2</a>
|
||
</li>
|
||
<li><a href="email-template-forgot-password-3.html">Reset password 3</a>
|
||
</li>
|
||
<li><a href="email-template-forgot-password-4.html">Reset password 4</a>
|
||
</li>
|
||
<li><a href="email-template-forgot-password-5.html">Reset password 5</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static"><a href="javascript:void(0)">Mail
|
||
Promotional
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="email-template-offers-1.html">Offer mail 1</a></li>
|
||
<li><a href="email-template-offers-2.html">Offer mail 2</a></li>
|
||
<li><a href="email-template-offers-3.html">Offer mail 3</a></li>
|
||
<li><a href="email-template-offers-4.html">Offer mail 4</a></li>
|
||
<li><a href="email-template-offers-5.html">Offer mail 5</a></li>
|
||
<li><a href="email-template-offers-6.html">Offer mail 6</a></li>
|
||
<li><a href="email-template-offers-7.html">Offer mail 7</a></li>
|
||
<li><a href="email-template-offers-8.html">Offer mail 8</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static">
|
||
<span class="label-note-hot"></span>
|
||
<a href="javascript:void(0)">Vendor account pages
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="vendor-dashboard.html">Vendor Dashboard</a></li>
|
||
<li><a href="vendor-profile.html">Vendor Profile</a></li>
|
||
<li><a href="vendor-uploads.html">Vendor Uploads</a></li>
|
||
<li><a href="vendor-settings.html">Vendor Settings</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static">
|
||
<span class="label-note-trending"></span>
|
||
<a href="javascript:void(0)">User account pages
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="user-profile.html">User Profile</a></li>
|
||
<li><a href="user-history.html">History</a></li>
|
||
<li><a href="wishlist.html">Wishlist</a></li>
|
||
<li><a href="track-order.html">Track Order</a></li>
|
||
<li><a href="user-invoice.html">Invoice</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static"><a href="javascript:void(0)">Construction
|
||
pages
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="404-error-page.html">404 error page</a></li>
|
||
<li><a href="under-maintenance.html">maintanence page</a></li>
|
||
<li><a href="coming-soon.html">Coming soon page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown position-static">
|
||
<span class="label-note-new"></span>
|
||
<a href="javascript:void(0)">Vendor Catalog pages
|
||
<i class="ecicon eci-angle-right"></i></a>
|
||
<ul class="sub-menu sub-menu-child">
|
||
<li><a href="catalog-single-vendor.html">Catalog Single Vendor</a></li>
|
||
<li><a href="catalog-multi-vendor.html">Catalog Multi Vendor</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul> -->
|
||
</li>
|
||
<!-- <li class="dropdown"><a href="javascript:void(0)">Blog</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="blog-left-sidebar.html">Blog left sidebar</a></li>
|
||
<li><a href="blog-right-sidebar.html">Blog right sidebar</a></li>
|
||
<li><a href="blog-detail-left-sidebar.html">Blog detail left sidebar</a></li>
|
||
<li><a href="blog-detail-right-sidebar.html">Blog detail right sidebar</a></li>
|
||
<li><a href="blog-full-width.html">Blog full width</a></li>
|
||
<li><a href="blog-detail-full-width.html">Blog detail full width</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown"><a href="javascript:void(0)">Elements</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="elemets-products.html">Products</a></li>
|
||
<li><a href="elemets-typography.html">Typography</a></li>
|
||
<li><a href="elemets-title.html">Titles</a></li>
|
||
<li><a href="elemets-categories.html">Categories</a></li>
|
||
<li><a href="elemets-buttons.html">Buttons</a></li>
|
||
<li><a href="elemets-tabs.html">Tabs</a></li>
|
||
<li><a href="elemets-accordions.html">Accordions</a></li>
|
||
<li><a href="elemets-blog.html">Blogs</a></li>
|
||
</ul>
|
||
</li> -->
|
||
<li><a href="offer.php">Hot Offers</a></li>
|
||
<?php
|
||
// Check if the current page is the index page
|
||
if(basename($_SERVER['PHP_SELF']) === 'index.php') {
|
||
//include the scroll menu
|
||
?>
|
||
<li class="dropdown scroll-to"><a href="javascript:void(0)"><i
|
||
class="fi fi-rr-sort-amount-down-alt"></i></a>
|
||
<ul class="sub-menu">
|
||
<li class="menu_title">Scroll To Section</li>
|
||
<li><a href="javascript:void(0)" data-scroll="collection" class="nav-scroll">Top
|
||
Collection</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="categories"
|
||
class="nav-scroll">Categories</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="vendors" class="nav-scroll">Top
|
||
Vendors</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="services"
|
||
class="nav-scroll">Services</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="arrivals" class="nav-scroll">New
|
||
Arrivals</a></li>
|
||
</ul>
|
||
</li>
|
||
<?php
|
||
}
|
||
?>
|
||
<!-- <li class="dropdown scroll-to"><a href="javascript:void(0)"><i class="fi fi-rr-sort-amount-down-alt"></i></a>
|
||
<ul class="sub-menu">
|
||
<li class="menu_title">Scroll To Section</li>
|
||
<li><a href="javascript:void(0)" data-scroll="collection" class="nav-scroll">Top
|
||
Collection</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="categories" class="nav-scroll">Categories</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="offers" class="nav-scroll">Offers</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="vendors" class="nav-scroll">Top
|
||
Vendors</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="services" class="nav-scroll">Services</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="arrivals" class="nav-scroll">New
|
||
Arrivals</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="reviews" class="nav-scroll">Client
|
||
Review</a></li>
|
||
<li><a href="javascript:void(0)" data-scroll="insta" class="nav-scroll">Instagram Feed</a></li>
|
||
</ul>
|
||
</li> -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Ec Main Menu End -->
|
||
<!-- ekka Mobile Menu Start -->
|
||
<div id="ec-mobile-menu" class="ec-side-cart ec-mobile-menu">
|
||
<div class="ec-menu-title">
|
||
<span class="menu_title">My Menu</span>
|
||
<button class="ec-close">×</button>
|
||
</div>
|
||
<div class="ec-menu-inner">
|
||
<div class="ec-menu-content">
|
||
<ul>
|
||
<li><a href="index.php">Home</a></li>
|
||
<li><a href="javascript:void(0)">Categories</a>
|
||
<ul class="sub-menu">
|
||
<li>
|
||
<a href="javascript:void(0)">Classic Variation</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="shop-left-sidebar-col-4.php">Left sidebar 3 column</a></li>
|
||
<li><a href="shop-left-sidebar-col-4.html">Left sidebar 4 column</a></li>
|
||
<li><a href="shop-right-sidebar-col-3.html">Right sidebar 3 column</a></li>
|
||
<li><a href="shop-right-sidebar-col-4.html">Right sidebar 4 column</a></li>
|
||
<li><a href="shop-full-width.html">Full width 4 column</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0)">Classic Variation</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="shop-banner-left-sidebar-col-3.html">Banner left sidebar 3
|
||
column</a></li>
|
||
<li><a href="shop-banner-left-sidebar-col-4.html">Banner left sidebar 4
|
||
column</a></li>
|
||
<li><a href="shop-banner-right-sidebar-col-3.html">Banner right sidebar 3
|
||
column</a></li>
|
||
<li><a href="shop-banner-right-sidebar-col-4.html">Banner right sidebar 4
|
||
column</a></li>
|
||
<li><a href="shop-banner-full-width.html">Banner Full width 4 column</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0)">Columns Variation</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="shop-full-width-col-3.html">3 Columns full width</a></li>
|
||
<li><a href="shop-full-width-col-4.html">4 Columns full width</a></li>
|
||
<li><a href="shop-full-width-col-5.html">5 Columns full width</a></li>
|
||
<li><a href="shop-full-width-col-6.html">6 Columns full width</a></li>
|
||
<li><a href="shop-banner-full-width-col-3.html">Banner 3 Columns</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="javascript:void(0)">List Variation</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="shop-list-left-sidebar.html">Shop left sidebar</a></li>
|
||
<li><a href="shop-list-right-sidebar.html">Shop right sidebar</a></li>
|
||
<li><a href="shop-list-banner-left-sidebar.html">Banner left sidebar</a></li>
|
||
<li><a href="shop-list-banner-right-sidebar.html">Banner right sidebar</a></li>
|
||
<li><a href="shop-list-full-col-2.html">Full width 2 columns</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="p-0" href="shop-left-sidebar-col-4.php"><img loading="lazy"
|
||
class="img-responsive" src="assets/images/menu-banner/1.jpg" alt=""></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Products</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="javascript:void(0)">Product page</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="shop-left-sidebar-col-4.php">Product left sidebar</a></li>
|
||
<li><a href="product-right-sidebar.html">Product right sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Product 360</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="product-360-left-sidebar.html">360 left sidebar</a></li>
|
||
<li><a href="product-360-right-sidebar.html">360 right sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Product vodeo</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="product-video-left-sidebar.html">vodeo left sidebar</a></li>
|
||
<li><a href="product-video-right-sidebar.html">vodeo right sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Product gallery</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="product-gallery-left-sidebar.html">Gallery left sidebar</a></li>
|
||
<li><a href="product-gallery-right-sidebar.html">Gallery right sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="product-full-width.html">Product full width</a></li>
|
||
<li><a href="product-360-full-width.html">360 full width</a></li>
|
||
<li><a href="product-video-full-width.html">Video full width</a></li>
|
||
<li><a href="product-gallery-full-width.html">Gallery full width</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Others</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="javascript:void(0)">Mail Confirmation</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="email-template-confirm-1.html">Mail Confirmation 1</a></li>
|
||
<li><a href="email-template-confirm-2.html">Mail Confirmation 2</a></li>
|
||
<li><a href="email-template-confirm-3.html">Mail Confirmation 3</a></li>
|
||
<li><a href="email-template-confirm-4.html">Mail Confirmation 4</a></li>
|
||
<li><a href="email-template-confirm-5.html">Mail Confirmation 5</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Mail Reset password</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="email-template-forgot-password-1.html">Reset password 1</a></li>
|
||
<li><a href="email-template-forgot-password-2.html">Reset password 2</a></li>
|
||
<li><a href="email-template-forgot-password-3.html">Reset password 3</a></li>
|
||
<li><a href="email-template-forgot-password-4.html">Reset password 4</a></li>
|
||
<li><a href="email-template-forgot-password-5.html">Reset password 5</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Mail Promotional</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="email-template-offers-1.html">Offer Mail 1</a></li>
|
||
<li><a href="email-template-offers-2.html">Offer Mail 2</a></li>
|
||
<li><a href="email-template-offers-3.html">Offer Mail 3</a></li>
|
||
<li><a href="email-template-offers-4.html">Offer Mail 4</a></li>
|
||
<li><a href="email-template-offers-5.html">Offer Mail 5</a></li>
|
||
<li><a href="email-template-offers-6.html">Offer Mail 6</a></li>
|
||
<li><a href="email-template-offers-7.html">Offer Mail 7</a></li>
|
||
<li><a href="email-template-offers-8.html">Offer Mail 8</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Vendor Account Pages</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="vendor-dashboard.php">Vendor Dashboard</a></li>
|
||
<li><a href="vendor-profile.html">Vendor Profile</a></li>
|
||
<li><a href="vendor-uploads.html">Vendor Uploads</a></li>
|
||
<li><a href="vendor-settings.html">Vendor Settings</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">User Account Pages</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="user-profile.html">User Profile</a></li>
|
||
<li><a href="user-history.html">User History</a></li>
|
||
<li><a href="wishlist.html">Wishlist</a></li>
|
||
<li><a href="track-order.html">Track Order</a></li>
|
||
<li><a href="user-invoice.html">User Invoice</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Construction Pages</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="404-error-page.html">404 Error Page</a></li>
|
||
<li><a href="under-maintenance.html">Maintenance Page</a></li>
|
||
<li><a href="coming-soon.html">Comming Soon Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Vendor Catalog Pages</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="catalog-single-vendor.html">Catalog Single Vendor</a></li>
|
||
<li><a href="catalog-multi-vendor.html">Catalog Multi Vendor</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="javascript:void(0)">Pages</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="about-us.html">About Us</a></li>
|
||
<li><a href="contact-us.php">Contact Us</a></li>
|
||
<li><a href="cart.html">Cart</a></li>
|
||
<li><a href="checkout.html">Checkout</a></li>
|
||
<li><a href="compare.html">Compare</a></li>
|
||
<li><a href="faq.php">FAQ</a></li>
|
||
<li><a href="login.php">Login</a></li>
|
||
<li><a href="register.php">Register</a></li>
|
||
<li><a href="track-order.html">Track Order</a></li>
|
||
<li><a href="terms-condition.html">Terms Condition</a></li>
|
||
<li><a href="privacy-policy.html">Privacy Policy</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown"><a href="javascript:void(0)">Blog</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="blog-left-sidebar.html">Blog left sidebar</a></li>
|
||
<li><a href="blog-right-sidebar.html">Blog right sidebar</a></li>
|
||
<li><a href="blog-detail-left-sidebar.html">Blog detail left sidebar</a></li>
|
||
<li><a href="blog-detail-right-sidebar.html">Blog detail right sidebar</a></li>
|
||
<li><a href="blog-full-width.html">Blog full width</a></li>
|
||
<li><a href="blog-detail-full-width.html">Blog detail full width</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown"><a href="javascript:void(0)">Elements</a>
|
||
<ul class="sub-menu">
|
||
<li><a href="elemets-products.html">Products</a></li>
|
||
<li><a href="elemets-typography.html">Typography</a></li>
|
||
<li><a href="elemets-title.html">Titles</a></li>
|
||
<li><a href="elemets-categories.html">Categories</a></li>
|
||
<li><a href="elemets-buttons.html">Buttons</a></li>
|
||
<li><a href="elemets-tabs.html">Tabs</a></li>
|
||
<li><a href="elemets-accordions.html">Accordions</a></li>
|
||
<li><a href="elemets-blog.html">Blogs</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="offer.html">Hot Offers</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="header-res-lan-curr">
|
||
<div class="header-top-lan-curr">
|
||
<!-- Language Start -->
|
||
<div class="header-top-lan dropdown">
|
||
<button class="dropdown-toggle text-upper" data-bs-toggle="dropdown">Language <i
|
||
class="ecicon eci-caret-down" aria-hidden="true"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li class="active"><a class="dropdown-item" href="#">English</a></li>
|
||
<li><a class="dropdown-item" href="#">Italiano</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Language End -->
|
||
<!-- Currency Start -->
|
||
<div class="header-top-curr dropdown">
|
||
<button class="dropdown-toggle text-upper" data-bs-toggle="dropdown">Currency <i
|
||
class="ecicon eci-caret-down" aria-hidden="true"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li class="active"><a class="dropdown-item" href="#">USD $</a></li>
|
||
<li><a class="dropdown-item" href="#">EUR €</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- Currency End -->
|
||
</div>
|
||
<!-- Social Start -->
|
||
<div class="header-res-social">
|
||
<div class="header-top-social">
|
||
<ul class="mb-0">
|
||
<li class="list-inline-item"><a class="hdr-facebook" href="#"><i
|
||
class="ecicon eci-facebook"></i></a></li>
|
||
<li class="list-inline-item"><a class="hdr-twitter" href="#"><i
|
||
class="ecicon eci-twitter"></i></a></li>
|
||
<li class="list-inline-item"><a class="hdr-instagram" href="#"><i
|
||
class="ecicon eci-instagram"></i></a></li>
|
||
<li class="list-inline-item"><a class="hdr-linkedin" href="#"><i
|
||
class="ecicon eci-linkedin"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Social End -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- ekka mobile Menu End -->
|
||
</header>
|
||
<!-- Header End -->
|