import { auth, db } from './firebase.
js'; // Ensure this is correctly imported
import { doc, updateDoc, arrayUnion } from "firebase/firestore"; // Import
Firestore functions
import Lenis from '@studio-freight/lenis';
import { addToCart } from './[Link]';
// Initialize Lenis smooth scrolling
const lenis = new Lenis({
duration: 0.5, // Smooth scroll duration (in seconds)
easing: (t) => [Link](1, 1.001 - [Link](2, -10 * t)), // Custom easing
direction: 'vertical', // Scroll direction
smooth: true, // Enable smooth scrolling
smoothTouch: false, // Disable smooth scrolling for touch devices
});
// RAF for smooth scrolling
function raf(time) {
[Link](time);
requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
let lastScrollPosition = 0; // Track the last scroll position
const searchBar = [Link]('.search-container'); // Reference the
search bar container
// Function to handle scroll events
function handleScroll() {
const currentScrollPosition = [Link];
if (currentScrollPosition > lastScrollPosition) {
// Scrolling down
[Link] = 'translateY(-100%)'; // Hide search bar
} else {
// Scrolling up
[Link] = 'translateY(0)'; // Show search bar
}
lastScrollPosition = currentScrollPosition; // Update last scroll position
}
// Add event listener for scroll events
[Link]('scroll', handleScroll);
const API_BASE_URL = [Link].VITE_API_URL; // Replace with your API base
URL
// Dynamically set the user's profile photo
[Link](async (user) => {
const profilePhoto = [Link]('profile-photo');
if (user && [Link]) {
[Link] = [Link]; // Use the logged-in user's profile photo
URL
} else {
[Link] = '/src/assets/[Link]'; // Use a default
avatar if none exists
}
});
// Utility function to fetch data from API
function getCategoryFromURL() {
const urlParams = new URLSearchParams([Link]); // Extract query
params
const category = [Link]('category'); // Get the 'category' parameter
return category || 'default'; // Default category fallback
}
// Function to fetch category data
async function fetchCategoryData(category) {
[Link](category);
try {
const response = await fetch(`${API_BASE_URL}/${category}`);
if (![Link]) {
throw new Error(`Error fetching category data: ${[Link]}`);
}
return await [Link]();
} catch (error) {
[Link](error);
return [];
}
}
// Function to render items dynamically
function renderItems(items) {
const itemsContainer = [Link]('items-container');
if (!itemsContainer) {
[Link]('items-container not found in the DOM');
return;
}
[Link] = ''; // Clear any existing content
if ([Link] === 0) {
[Link] = `<p>No items found for this category.</p>`;
return;
}
[Link](item => {
const itemElement = [Link]('div');
[Link]('item-card');
[Link] = `
<img src="${item['Image URL']}" alt="${[Link]}" class="item-image"
loading="lazy">
<h3 class="item-name">${[Link]}</h3>
<p class="item-price">${[Link]}</p>
<button class="add-to-cart-btn">Add to Cart</button>
`;
// Add event listener for "Add to Cart" button
const addToCartButton = [Link]('.add-to-cart-btn');
[Link]('click', () => {
addToCart(item); // Call the addToCart function with the item
});
[Link](itemElement);
});
}
function filterItems(items, query) {
query = [Link]();
return [Link]((item) =>
[Link]().includes(query) ||
[Link]().includes(query)
);
}
// Function to initialize the page
async function initializePage() {
const category = new URLSearchParams([Link]).get("category");
const dynamicTitle = [Link]("dynamic-title");
if (!dynamicTitle) {
[Link]("dynamic-title element not found in the DOM");
return;
}
// Set the category title
[Link] = [Link](0).toUpperCase() +
[Link](1);
// Fetch items and render them
const items = await fetchCategoryData(category);
renderItems(items);
// Add search bar functionality
const searchBar = [Link]("search-bar");
if (!searchBar) {
[Link]("search-bar not found in the DOM");
return;
}
[Link]("input", (event) => {
const query = [Link];
const filteredItems = filterItems(items, query);
renderItems(filteredItems);
});
}
// Ensure DOM is fully loaded before initializing
[Link]("DOMContentLoaded", initializePage);
// Add cart button functionality
const cartButton = [Link]('.header-right button');
if (cartButton) {
[Link]('click', () => {
// Add your cart functionality here
[Link]('Cart button clicked');
});
}
// Add profile photo click functionality
const profilePhoto = [Link]('profile-photo');
if (profilePhoto) {
[Link]('click', () => {
// Add your profile functionality here
[Link]('Profile photo clicked');
});
}
// Add to cart function
// async function addToCart(item) {
// try {
// const user = [Link];
// if (!user) {
// [Link]('No user logged in');
// return;
// }
// // Reference to the user's document in Firestore
// const userDocRef = doc(db, 'users', [Link]);
// // Update the user's cart with the new item
// await updateDoc(userDocRef, {
// cart: arrayUnion(item) // Use arrayUnion to add the item to the cart
array
// });
// [Link]('Item added to cart:', item);
// // Trigger the animation
// animateToCart(item['Image URL']);
// } catch (error) {
// [Link]('Error adding to cart:', error);
// }
// }
// Function to animate the product image sliding into the cart
function animateToCart(imageUrl) {
// Create a clone of the product image
const flyingImage = [Link]('img');
[Link] = imageUrl;
[Link] = 'fixed';
[Link] = '50px'; // Initial size
[Link] = 'auto';
[Link] = '1001'; // Ensure it's above other elements
[Link] = 'none'; // Make it non-interactive
[Link] = '10px'; // Rounded corners for aesthetics
// Position the flying image at the current mouse position
const rect = [Link]('.button-
container').getBoundingClientRect();
[Link] = `${[Link] + [Link] / 2}px`;
[Link] = `${[Link] + [Link] / 2}px`;
// Append the flying image to the body
[Link](flyingImage);
// Get the cart icon position
const cartIcon = [Link]('.cart-icon');
const cartRect = [Link]();
// Animate the flying image to the cart icon
[Link](
[
{
left: `${[Link] + [Link] / 2}px`,
top: `${[Link] + [Link] / 2}px`,
transform: 'scale(1)',
opacity: 1,
},
{
left: `${[Link] + [Link] / 2}px`,
top: `${[Link] + [Link] / 2}px`,
transform: 'scale(0.5)', // Shrink as it moves
opacity: 0, // Fade out
},
],
{
duration: 800, // Animation duration in milliseconds
easing: 'ease-in-out', // Smooth easing
fill: 'forwards', // Keep the final state
}
);
// Remove the flying image after the animation ends
setTimeout(() => {
[Link]();
}, 800); // Match the animation duration
}
// Create button container
function createButtonContainer(event, item) {
// Remove any existing button container
const existingContainer = [Link]('.button-container');
if (existingContainer) {
[Link]('removing');
[Link]('animationend', () =>
[Link]());
}
// Create new container
const container = [Link]('div');
[Link] = 'button-container';
// Position the container at the click location
[Link] = `${[Link]}px`;
[Link] = `${[Link]}px`;
// Add buttons with new close button structure
[Link] = `
<button class="add-to-cart">
<img src="/src/assets/[Link]" alt="Add to Cart" class="cart-icon-
popup">
</button>
<button class="close">
<span class="X"></span>
<span class="Y"></span>
</button>
`;
// Add event listeners
[Link]('.add-to-cart').addEventListener('click', () => {
addToCart(item);
[Link]('removing');
[Link]('animationend', () => [Link]());
});
[Link]('.close').addEventListener('click', () => {
[Link]('removing');
[Link]('animationend', () => [Link]());
});
// Add click outside handler
setTimeout(() => {
[Link]('click', function clickOutsideHandler(e) {
if () {
[Link]('removing');
[Link]('animationend', () => {
[Link]();
[Link]('click', clickOutsideHandler);
});
}
});
}, 0);
// Append the container to the body
[Link](container);
// Hide the button container on scroll
const handleScroll = () => {
[Link]('removing');
[Link]('animationend', () => [Link]());
[Link]('scroll', handleScroll); // Remove listener
after hiding
};
[Link]('scroll', handleScroll);
// Automatically remove the container after 5 seconds
setTimeout(() => {
if (container && ) {
[Link]('removing');
[Link]('animationend', () => [Link]());
}
}, 5000); // 5 seconds timeout
}
