obanana_b2b_test/header.php

3150 lines
160 KiB
PHP
Raw Normal View History

2024-04-01 18:27:45 +08:00
<?php
$_SESSION["url"] = $_SERVER['REQUEST_URI'];
2024-04-08 18:13:47 +08:00
2024-04-01 18:27:45 +08:00
if ($_SESSION["userId"] <> "") {
$_SESSION["isLoggedIn"] = true;
2024-04-08 18:13:47 +08:00
// $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"]);
}
2024-04-01 18:27:45 +08:00
} else {
2024-04-08 18:13:47 +08:00
$_SESSION["isLoggedIn"] = false;
}
2024-04-01 18:27:45 +08:00
?>
2024-02-12 10:35:09 +08:00
<?php ?>
<header class="ec-header">
<style>
2024-05-21 09:18:10 +08:00
/*---- 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 {
2024-02-12 10:35:09 +08:00
position: fixed;
2024-05-21 09:18:10 +08:00
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 {
2024-02-12 10:35:09 +08:00
width: 100%;
2024-05-21 09:18:10 +08:00
}
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 {
2024-02-12 10:35:09 +08:00
display: none;
}
2024-05-21 09:18:10 +08:00
#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 {
2024-02-12 10:35:09 +08:00
height: 100%;
2024-05-21 09:18:10 +08:00
width: 80px;
margin-top: 20px;
cursor: pointer;
font-size: 25px;
padding: 1px;
2024-02-12 10:35:09 +08:00
display: flex;
justify-content: center;
align-items: center;
2024-05-21 09:18:10 +08:00
background-color: "#000";
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
#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 {
2024-02-12 10:35:09 +08:00
display: none;
2024-05-21 09:18:10 +08:00
height: 0px;
width: 0px;
}
.message-image {
height: auto;
width: 100%;
2024-02-12 10:35:09 +08:00
border-radius: 5px;
2024-05-21 09:18:10 +08:00
object-fit: cover;
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
.message-video {
height: auto;
width: 100%;
border-radius: 5px;
object-fit: cover;
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
#scroller {
height: 500px;
overflow-y: auto;
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
#scroller * {
overflow-anchor: none;
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
#anchor {
overflow-anchor: auto;
height: 1px;
}
.product-con {
height: 150px;
2024-02-12 10:35:09 +08:00
width: 100%;
2024-05-21 09:18:10 +08:00
border-radius: 15px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 10px;
2024-02-12 10:35:09 +08:00
background-color: #fff;
2024-05-21 09:18:10 +08:00
border-radius: 10px;
border: 1px solid #eee;
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
.product-con.display {
width: 100%;
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
.product-prev {
2024-02-12 10:35:09 +08:00
position: absolute;
display: flex;
2024-05-21 09:18:10 +08:00
justify-content: center;
2024-02-12 10:35:09 +08:00
align-items: center;
2024-05-21 09:18:10 +08:00
flex-direction: row;
bottom: 100px;
}
.productImg {
height: 100px;
width: 100px;
border-radius: 10px;
border: 1px solid #eee;
}
.prodDetails {
height: 80%;
display: flex;
2024-02-12 10:35:09 +08:00
justify-content: center;
2024-05-21 09:18:10 +08:00
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;
2024-02-12 10:35:09 +08:00
font-size: 16px;
}
2024-05-03 16:31:55 +08:00
2024-05-21 09:18:10 +08:00
.custom-checkbox .checkmark {
margin-right: 8px;
2024-05-03 16:31:55 +08:00
}
2024-05-21 09:18:10 +08:00
.qty-inputs {
border: 1px solid #eee;
border-radius: 15px;
width: 80px;
height: 30px;
margin-left: 10px;
}
2024-05-21 09:18:10 +08:00
.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">&times;</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">&times;</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>
2024-05-30 10:03:49 +08:00
let userDataGlobal = null;
let globalQuantity = null;
let globalProductId = null;
let globalProduct = null;
2024-05-21 09:18:10 +08:00
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);
2024-05-30 10:03:49 +08:00
// console.log(productData)
2024-05-21 09:18:10 +08:00
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>
2024-02-12 10:35:09 +08:00
<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">
2024-05-21 09:18:10 +08:00
<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>
2024-02-12 10:35:09 +08:00
</ul>
</div>
</div>
<!-- Header Top social End -->
<!-- Header Top Message Start -->
2024-04-01 18:27:45 +08:00
<!-- <div class="col text-center header-top-center">
2024-02-12 10:35:09 +08:00
<div class="header-top-message text-upper">
<span>Free Shipping</span>This Week Order Over - $75
</div>
2024-04-01 18:27:45 +08:00
</div> -->
2024-02-12 10:35:09 +08:00
<!-- 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">
2024-04-01 18:27:45 +08:00
<!-- 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)) { ?>
2024-05-21 09:18:10 +08:00
<button style="cursor:default;">Hi <span
class="text-upper"><?php echo $customer_data[0]['first_name'] ?>!</span></button>
2024-04-08 18:13:47 +08:00
<?php } else if (isset($vendorData)) {?>
2024-05-21 09:18:10 +08:00
<button style="cursor:default;">Hi <span
class="text-upper"><?php echo ($vendorData['user_login']) ?>!</span></button>
2024-04-08 18:13:47 +08:00
<?php } else {?>
2024-05-21 09:18:10 +08:00
<button class="text-upper"><a href="login.php">Login</a></button>
<?php } ?>
2024-02-12 10:35:09 +08:00
</div>
2024-02-12 10:35:09 +08:00
<script>
2024-05-21 09:18:10 +08:00
function displayPopup() {
// Show the pop-up
$("#ec-popnews-bg2").fadeIn();
$("#ec-popnews-box2").fadeIn();
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
$("#ec-popnews-close2").click(() => {
$("#ec-popnews-bg2").fadeOut();
$("#ec-popnews-box2").fadeOut();
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
var dataValue = true;
ecCreateCookie('ecPopNewsLetter', dataValue, 1);
});
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
$("#ec-popnews-bg2").click(() => {
$("#ec-popnews-bg2").fadeOut();
$("#ec-popnews-box2").fadeOut();
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
var dataValue = true;
ecCreateCookie('ecPopNewsLetter', dataValue, 1);
});
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
}
2024-02-12 10:35:09 +08:00
</script>
2024-02-12 10:35:09 +08:00
<!-- 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">
2024-02-12 10:35:09 +08:00
</div>
<div class="col-md-6">
<div id="ec-popnews-box-content2">
<h2>Download ObananaPay Now</h2>
2024-05-21 09:18:10 +08:00
<p>Enjoy promos, discounts and more when you download, register and pay with
ObananaPay.</p>
2024-02-12 10:35:09 +08:00
<div class="obpay-download">
2024-05-21 09:18:10 +08:00
<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;">
2024-02-12 10:35:09 +08:00
</a>
2024-05-21 09:18:10 +08:00
<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;">
2024-02-12 10:35:09 +08:00
</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">
2024-05-21 09:18:10 +08:00
<button class="dropdown-toggle" data-bs-toggle="dropdown"><i
class="fi-rr-user"></i></button>
2024-02-12 10:35:09 +08:00
<ul class="dropdown-menu dropdown-menu-right">
<?php
if ($_SESSION["isLoggedIn"]) {
?><?php
if ($_SESSION["isVendor"]) {
?>
2024-02-29 13:21:33 +08:00
<li><a class="dropdown-item" href="vendor-dashboard.php">My Account</a></li>
2024-05-21 09:18:10 +08:00
<?php
2024-02-12 10:35:09 +08:00
} else {
?>
2024-05-21 09:18:10 +08:00
2024-02-12 10:35:09 +08:00
<li><a class="dropdown-item" href="user-profile.php">My Account</a></li>
2024-05-21 09:18:10 +08:00
<?php
2024-02-12 10:35:09 +08:00
}
?>
2024-05-21 09:18:10 +08:00
<li><a class="dropdown-item" href="logout.php">Logout</a></li>
<?php
2024-02-12 10:35:09 +08:00
} else {
?>
2024-05-21 09:18:10 +08:00
<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
2024-02-12 10:35:09 +08:00
}
?>
</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>
2024-02-12 10:35:09 +08:00
</a>
<!-- Header Cart End -->
<!-- Header Cart Start -->
<a href="cart.php" class="ec-header-btn ec-header-wishlist">
2024-02-12 10:35:09 +08:00
<div class="header-icon"><i class="fi-rr-shopping-bag"></i></div>
<span id="cartNewItemCount" class="ec-header-count">0</span>
2024-02-12 10:35:09 +08:00
</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">
2024-02-12 10:35:09 +08:00
<i class="fi fi-rr-menu-burger"></i>
</a> -->
2024-02-12 10:35:09 +08:00
<!-- Header menu End -->
</div>
</div>
<!-- Header Top responsive Action -->
</div>
</div>
</div>
<!-- Ec Header Top End -->
2024-02-12 10:35:09 +08:00
<!-- 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">
2024-05-21 09:18:10 +08:00
<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>
2024-02-12 10:35:09 +08:00
</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">
2024-05-21 09:18:10 +08:00
<input class="form-control ec-search-bar" name="searchText"
placeholder="Search products..." type="text" required>
2024-02-12 10:35:09 +08:00
<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">
2024-05-21 09:18:10 +08:00
<button class="dropdown-toggle" data-bs-toggle="dropdown"><i
class="fi-rr-user"></i></button>
2024-02-12 10:35:09 +08:00
<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>
2024-05-21 09:18:10 +08:00
<?php
2024-02-12 10:35:09 +08:00
} else {
?>
<li><a class="dropdown-item" href="user-profile.php">My Account</a></li>
2024-05-21 09:18:10 +08:00
<?php
2024-02-12 10:35:09 +08:00
}
?>
2024-05-21 09:18:10 +08:00
<li><a class="dropdown-item" href="logout.php">Logout</a></li>
<?php
2024-02-12 10:35:09 +08:00
} else {
?>
2024-05-21 09:18:10 +08:00
<li><a class="dropdown-item" href="register.php">Register</a></li>
<li><a class="dropdown-item" href="login.php">Login</a></li>
<?php
2024-02-12 10:35:09 +08:00
}
?>
</ul>
</div>
<!-- Header User End -->
<!-- Header wishlist Start -->
<?php
if (($_SESSION["isCustomer"] == true) && ($_SESSION["isVendor"] == false) || ($_SESSION["isLoggedIn"] == false)) {
?>
2024-02-12 10:35:09 +08:00
<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">
2024-05-21 09:18:10 +08:00
<p id="wishItemCount">0</p>
2024-02-12 10:35:09 +08:00
</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;
?>
2024-05-21 09:18:10 +08:00
<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;
}
2024-04-30 14:25:28 +08:00
2024-05-21 09:18:10 +08:00
.rowcartCheckbox {
height: 15px;
width: 15px;
margin-right: 5px;
}
</style>
<ul class="eccart-pro-items">
<?php
$cartEmpty = true;
2024-02-12 10:35:09 +08:00
//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 {
2024-02-12 10:35:09 +08:00
foreach ($order_data as $order) {
if (isset($order['status']) && $order['status'] === 'CART' && isset($order['items'][0]['product'])) {
$cartEmpty = false;
2024-02-12 10:35:09 +08:00
$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
2024-02-29 13:21:33 +08:00
}
?>
2024-05-21 09:18:10 +08:00
</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>
2024-05-21 09:18:10 +08:00
</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>
2024-05-21 09:18:10 +08:00
</div>
<!-- 02-16-2024 Stacy added style -->
2024-05-21 09:18:10 +08:00
</div>
</li>
2024-02-12 10:35:09 +08:00
<?php
}
}
}
2024-02-12 10:35:09 +08:00
}
} else {
echo '<li>No items in the cart</li>';
}
?>
2024-05-21 09:18:10 +08:00
</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");
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
})
.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);
2024-05-03 18:21:20 +08:00
} else {
2024-05-21 09:18:10 +08:00
throw new Error("Unable to update session token");
2024-05-03 18:21:20 +08:00
}
2024-04-30 14:25:28 +08:00
});
2024-05-21 09:18:10 +08:00
})
.catch(error => {
console.error("Error:", error.message);
});
}
2024-05-03 18:21:20 +08:00
2024-05-21 09:18:10 +08:00
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());
}
});
2024-04-30 14:25:28 +08:00
2024-05-21 09:18:10 +08:00
if (checkedValues.length === 0) {
return uncheckedValues;
} else {
console.log(checkedValues);
return checkedValues;
}
}
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
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
2024-04-30 14:25:28 +08:00
}
2024-05-21 09:18:10 +08:00
let newTotalAmount = orderData.items.reduce((total, item) => {
return total + (item.quantity * item.price);
}, 0);
console.log(response);
}
}
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
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);
}
})
}
2024-05-21 09:18:10 +08:00
// function handleQtyInput(input, orderId, itemId, isFloat) {
// login(email, password, function(token) {
// var newQuantity = parseInt(input.value);
// updateQuantity(orderId, itemId, newQuantity, isFloat, token);
// })
// }
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
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);
});
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
}
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);
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
})
.catch(error => console.error('Error:', error));
}
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
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
2024-02-12 10:35:09 +08:00
// const token = '<?php echo $_SESSION["token"] ?>';
2024-05-21 09:18:10 +08:00
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
method: 'PATCH',
2024-02-12 10:35:09 +08:00
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
2024-05-21 09:18:10 +08:00
2024-02-12 10:35:09 +08:00
},
body: JSON.stringify({
2024-05-21 09:18:10 +08:00
total_amount: newTotalAmount
2024-02-12 10:35:09 +08:00
})
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
2024-05-21 09:18:10 +08:00
getLatestOrders()
2024-02-12 10:35:09 +08:00
} else {
2024-05-21 09:18:10 +08:00
alert('Error updating total amount: ' + data
.status);
2024-02-12 10:35:09 +08:00
}
})
.catch(error => console.error('Error:', error));
2024-05-21 09:18:10 +08:00
} else {
alert('Error fetching order data');
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
})
.catch(error => console.error('Error:', error));
}
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
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,
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
},
body: JSON.stringify({
total_amount: newTotalAmount
})
2024-02-12 10:35:09 +08:00
})
.then(response => response.json())
.then(data => {
if (data && data !== "") {
2024-05-21 09:18:10 +08:00
// Total amount updated successfully
2024-02-12 10:35:09 +08:00
getLatestOrders()
} else {
2024-05-21 09:18:10 +08:00
alert('Error updating total amount: ' + data
.status);
2024-02-12 10:35:09 +08:00
}
})
.catch(error => console.error('Error:', error));
2024-05-21 09:18:10 +08:00
} else {
alert('Error fetching order data');
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
})
.catch(error => console.error('Error:', error));
}
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
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');
2024-04-30 14:25:28 +08:00
var checkedCategories = getCheckedCheckboxes();
2024-05-21 09:18:10 +08:00
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));
2024-04-30 14:25:28 +08:00
2024-05-21 09:18:10 +08:00
} 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));
}
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
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);
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
})
.catch(error => console.error('Error:', error));
updateCartItemCount()
updateWishItemCount()
}
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
function handleCheckoutButton(event) {
event.preventDefault();
var checkedCategories = getCheckedCheckboxes();
2024-02-12 10:35:09 +08:00
2024-05-21 09:18:10 +08:00
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>
2024-02-12 10:35:09 +08:00
</div>
</div>
<?php
}
?>
2024-02-12 10:35:09 +08:00
<!-- 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">
2024-05-21 09:18:10 +08:00
<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>
2024-02-12 10:35:09 +08:00
</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">
2024-05-21 09:18:10 +08:00
<input class="form-control ec-search-bar" name="searchText" placeholder="Search products..."
type="text" required>
2024-02-12 10:35:09 +08:00
<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"])) { ?>
2024-05-21 09:18:10 +08:00
<a href="javascript:void(0)" class="ec-header-btn ec-sidebar-toggle">
<i class="fi fi-rr-apps"></i>
</a>
<?php
}
?>
2024-02-12 10:35:09 +08:00
<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"
2024-02-12 10:35:09 +08:00
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"
2024-02-12 10:35:09 +08:00
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"
2024-02-12 10:35:09 +08:00
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"
2024-02-12 10:35:09 +08:00
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>
2024-02-12 10:35:09 +08:00
<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>
2024-05-21 09:18:10 +08:00
<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>
2024-02-12 10:35:09 +08:00
<!-- <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>
2024-05-03 16:31:55 +08:00
<?php
// Check if the current page is the index page
if(basename($_SERVER['PHP_SELF']) === 'index.php') {
//include the scroll menu
?>
2024-05-21 09:18:10 +08:00
<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
2024-05-03 16:31:55 +08:00
}
?>
<!-- <li class="dropdown scroll-to"><a href="javascript:void(0)"><i class="fi fi-rr-sort-amount-down-alt"></i></a>
2024-02-12 10:35:09 +08:00
<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>
2024-05-03 16:31:55 +08:00
<li><a href="javascript:void(0)" data-scroll="offers" class="nav-scroll">Offers</a></li>
2024-02-12 10:35:09 +08:00
<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>
2024-05-03 16:31:55 +08:00
<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>
2024-02-12 10:35:09 +08:00
</ul>
2024-05-03 16:31:55 +08:00
</li> -->
2024-02-12 10:35:09 +08:00
</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>
2024-05-21 09:18:10 +08:00
<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>
2024-02-12 10:35:09 +08:00
</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>
2024-02-16 12:59:22 +08:00
<li><a href="contact-us.php">Contact Us</a></li>
2024-02-12 10:35:09 +08:00
<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>
2024-02-12 10:35:09 +08:00
<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">
2024-05-21 09:18:10 +08:00
<button class="dropdown-toggle text-upper" data-bs-toggle="dropdown">Language <i
class="ecicon eci-caret-down" aria-hidden="true"></i></button>
2024-02-12 10:35:09 +08:00
<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">
2024-05-21 09:18:10 +08:00
<button class="dropdown-toggle text-upper" data-bs-toggle="dropdown">Currency <i
class="ecicon eci-caret-down" aria-hidden="true"></i></button>
2024-02-12 10:35:09 +08:00
<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">
2024-05-21 09:18:10 +08:00
<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>
2024-02-12 10:35:09 +08:00
</ul>
</div>
</div>
<!-- Social End -->
</div>
</div>
</div>
<!-- ekka mobile Menu End -->
</header>
<!-- Header End -->