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 : 700 px ;
padding : 30 px ;
border : 0 ;
display : none ;
z - index : 100 ;
text - align : center ;
border - radius : 5 px ;
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 : 22 px ;
line - height : 33 px ;
font - weight : 600 ;
margin : 0 auto 10 px ;
letter - spacing : 0 ;
text - transform : capitalize ;
}
#ec-popnews-box2 p {
margin - bottom : 20 px ;
color : #777;
}
#ec-popnews-box2 form {
margin - bottom : 0 px ;
}
#ec-popnews-box2 input {
height : 45 px ;
background - color : transparent ;
border : 1 px solid #ededed;
color : #444444;
font - size : 14 px ;
margin - bottom : 20 px ;
padding : 0 15 px ;
width : 100 % ;
outline : none ;
background - color : #fff;
border - radius : 30 px ;
}
#ec-popnews-box2 button {
height : 40 px ;
line - height : 42 px ;
font - size : 16 px ;
text - transform : uppercase ;
border - radius : 30 px ;
}
#ec-popnews-close2 {
position : absolute ;
top : 10 px ;
right : 10 px ;
cursor : pointer ;
width : 30 px ;
height : 30 px ;
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 : 16 px ;
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 : 100 vh ;
/* width:100vw; */
/* background-color:red; */
color : green ;
display : flex ;
justify - content : flex - end ;
align - items : flex - end ;
left : 95 vw ;
}
. message_card_btn {
2024-02-12 10:35:09 +08:00
position : fixed ;
2024-05-21 09:18:10 +08:00
height : 50 px ;
width : 50 px ;
background - color : white ;
display : flex ;
position : relative ;
right : 30 px ;
z - index : 999 ;
display : flex ;
border - radius : 100 % ;
justify - content : center ;
align - items : center ;
font - size : 27 px ;
color : #ffaa00;
bottom : 20 px ;
box - shadow : 2 px 2 px 2 px rgba ( 0 , 0 , 0 , 0.15 );
border : 2 px solid #eee;
}
#chat-container {
height : 500 px ;
/* 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 : 10 px ;
}
. messages {
margin - bottom : 10 px ;
/* 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 : 10 px ;
}
li . sender {
width : 100 % ;
display : flex ;
justify - content : flex - start ;
color : blue ;
padding : 3 px ;
padding - left : 10 px
/* background-color:#ffaa00 */
}
. chat_start {
height : 500 px ;
width : 100 % ;
display : flex ;
justify - content : center ;
align - items : center ;
}
. chat_start_button {
width : auto ;
display : flex ;
color : #fff;
padding : 10 px ;
background - color : #ffaa00;
border - radius : 15 px ;
}
. 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 : 10 px ;
background - color : #ffaa00;
border - radius : 15 px ;
}
. message_card . sender {
width : auto ;
display : flex ;
color : #000;
padding : 10 px ;
background - color : #ffffea;
border - radius : 15 px ;
}
. time - stamp {
font - size : 8 px ;
padding - left : 10 px ;
padding - top : 5 px ;
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 : 1 px solid #eee;
border - radius : 15 px ;
width : 80 % ;
margin - right : 10 px ;
margin - top : 20 px ;
}
#send-btn {
border - radius : 15 px ;
width : 20 % ;
height : 50 px ;
background - color : #ffaa00;
color : #fff;
margin - top : 20 px ;
cursor : pointer ;
}
#send-btn:hover {
background - color : #eb9c00;
}
. modalHeader {
width : 100 % ;
display : flex ;
justify - content : space - between ;
flex - direction : row ;
padding : 10 px ;
align - items : center ;
/* background-color:#333; */
}
. userWrap {
display : flex ;
justify - content : space - between ;
flex - direction : row ;
width : auto ;
}
. img - user {
height : 30 px ;
width : 30 px ;
border - radius : 100 px ;
margin : 0 px 10 px ;
}
. gallery - icon {
2024-02-12 10:35:09 +08:00
height : 100 % ;
2024-05-21 09:18:10 +08:00
width : 80 px ;
margin - top : 20 px ;
cursor : pointer ;
font - size : 25 px ;
padding : 1 px ;
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 : 100 px ;
width : 80 % ;
border - radius : 5 px ;
display : flex ;
justify - content : center ;
align - items : center ;
flex - direction : row ;
}
#message-preview.hide {
height : 0 px ;
width : 0 px ;
border - radius : 5 px ;
display : flex ;
justify - content : center ;
align - items : center ;
}
. img - prev {
height : 80 px ;
width : 80 px ;
border - radius : 5 px ;
object - fit : cover ;
}
. vid - prev {
height : auto ;
width : 150 px ;
border - radius : 5 px ;
object - fit : cover ;
}
. remove - prev {
cursor : pointer ;
height : 20 px ;
width : 20 px ;
border - radius : 35 px ;
display : flex ;
justify - content : center ;
align - items : center ;
font - weight : 400 ;
font - size : 10 px ;
/* position:absolute; */
z - index : 30 ;
background - color : #eee;
border : 1 px solid #ccc;
/* top:-20px; */
font - size : 18 px ;
font - weight : 500 ;
padding : 10 px ;
margin - top : 20 px ;
margin - left : 30 px ;
}
. remove - prev . hide {
2024-02-12 10:35:09 +08:00
display : none ;
2024-05-21 09:18:10 +08:00
height : 0 px ;
width : 0 px ;
}
. message - image {
height : auto ;
width : 100 % ;
2024-02-12 10:35:09 +08:00
border - radius : 5 px ;
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 : 5 px ;
object - fit : cover ;
2024-02-12 10:35:09 +08:00
}
2024-05-21 09:18:10 +08:00
#scroller {
height : 500 px ;
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 : 1 px ;
}
. product - con {
height : 150 px ;
2024-02-12 10:35:09 +08:00
width : 100 % ;
2024-05-21 09:18:10 +08:00
border - radius : 15 px ;
display : flex ;
justify - content : space - between ;
align - items : center ;
flex - direction : row ;
padding : 10 px ;
2024-02-12 10:35:09 +08:00
background - color : #fff;
2024-05-21 09:18:10 +08:00
border - radius : 10 px ;
border : 1 px 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 : 100 px ;
}
. productImg {
height : 100 px ;
width : 100 px ;
border - radius : 10 px ;
border : 1 px 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 : 10 px ;
}
. prodTxtName {
font - size : 14 px ;
font - weight : 600 ;
text - align : left ;
color : #000;
}
. prodTxtPrice {
color : #ffaa00;
font - size : 12 px ;
font - weight : 500 ;
text - align : left ;
}
. prodTxtQty {
color : #333;
font - size : 12 px ;
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 : 20 px ;
height : 20 px ;
background - color : #eee;
border - radius : 4 px ;
}
/* 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 : 7 px ;
top : 3 px ;
width : 6 px ;
height : 12 px ;
border : solid #ffaa00;
border - width : 0 3 px 3 px 0 ;
transform : rotate ( 45 deg );
}
/* Optional: Style the label text */
. custom - checkbox {
display : flex ;
align - items : center ;
cursor : pointer ;
2024-02-12 10:35:09 +08:00
font - size : 16 px ;
}
2024-05-03 16:31:55 +08:00
2024-05-21 09:18:10 +08:00
. custom - checkbox . checkmark {
margin - right : 8 px ;
2024-05-03 16:31:55 +08:00
}
2024-04-23 09:10:36 +08:00
2024-05-21 09:18:10 +08:00
. qty - inputs {
border : 1 px solid #eee;
border - radius : 15 px ;
width : 80 px ;
height : 30 px ;
margin - left : 10 px ;
}
2024-04-23 09:10:36 +08:00
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 : 12 px ;
font - weight : 500 ;
text - align : left ;
margin - top : 10 px ;
}
</ 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 >
document . addEventListener ( " DOMContentLoaded " , function () {
let userDataGlobal = null ;
let globalQuantity = null ;
let globalProductId = null ;
let globalProduct = null ;
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 >
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 ( isset ( $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-04-23 09:10:36 +08:00
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-04-23 09:10:36 +08:00
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 " >
2024-04-23 11:17:55 +08:00
< 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 >
2024-05-03 18:07:31 +08:00
< span id = " wishNewItemCount " class = " ec-header-count " > 0 </ span >
2024-02-12 10:35:09 +08:00
</ a >
<!-- Header Cart End -->
<!-- Header Cart Start -->
2024-04-16 10:12:45 +08:00
< 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 >
2024-05-03 18:07:31 +08:00
< 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 -->
2024-04-16 10:12:45 +08:00
<!-- < 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 >
2024-04-16 10:12:45 +08:00
</ 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-04-23 09:10:36 +08:00
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 " ]) {
?>
2024-04-16 16:07:26 +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 {
?>
< 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 -->
2024-05-03 18:07:31 +08:00
< ? 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 : 15 px ;
width : 15 px ;
margin - right : 5 px ;
}
</ style >
< ul class = " eccart-pro-items " >
< ? php
2024-02-12 10:35:09 +08:00
//var_dump($order_data[0]['items'][0]['product']);
foreach ( $order_data as $order ) {
// Ensure that the required data is available before accessing it
if ( isset ( $order [ 'status' ]) && $order [ 'status' ] === 'CART' && isset ( $order [ 'items' ][ 0 ][ 'product' ])) {
$totalAmount += $order [ 'total_amount' ];
$product = getProduct ( $order [ 'items' ][ 0 ][ 'product' ][ 'product_id' ]);
$product_data = json_decode ( $product , true );
?>
2024-05-21 09:18:10 +08:00
< 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
2024-02-29 13:21:33 +08:00
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 ]);
?>
2024-05-21 09:18:10 +08:00
< img loading = " lazy " src = " <?php echo $first_image_url ; ?> "
alt = " product " />
< ? php
2024-02-29 13:21:33 +08:00
}
} else {
?>
2024-05-21 09:18:10 +08:00
< 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>
</ 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'] ; ?>',
2024-04-23 09:10:36 +08:00
'<?php echo $order[' items '][0][' _id ']; ?>' ) " />
2024-05-21 09:18:10 +08:00
< 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 >
2024-02-12 10:35:09 +08:00
< ? php
}
}
}
} 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-04-04 18:18:05 +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);
// 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 >
2024-05-03 18:07:31 +08:00
< ? 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 " >
2024-05-08 18:00:10 +08:00
< ? 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-05-08 18:00:10 +08:00
}
?>
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 " >
2024-04-23 11:17:55 +08:00
< 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 >
2024-04-23 11:17:55 +08:00
< 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 >
2024-04-23 11:17:55 +08:00
< 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 >
2024-04-23 11:17:55 +08:00
< 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 >
2024-03-19 18:28:43 +08:00
< 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 >
2024-03-19 18:28:43 +08:00
< 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 -->