wix main menu links to shop categories

mail@pastecode.io avatar
unknown
javascript
14 days ago
2.2 kB
6
Indexable
Never
// in the main menu the links needed to have a suffix, shopPageUrl?category=example. in the shop page i used a function changeCategorytoUrlSlug, and in the onReady, it would check slug, and also, there was this issue while in the shop page, if I clicked a menu item it wouldn't change so there's a wixLocation.onChange part.

    categoryFromUrl = wixLocation.query.category;
    console.log("Category from URL:", categoryFromUrl);

    if (categoryFromUrl) {
        // If a category slug is present in the URL, change the category
        await changeCategoryToUrlSlug(categoryFromUrl);
    }

	wixLocation.onChange(() => {
        const newCategoryFromUrl = wixLocation.query.category;
        console.log("New category from URL:", newCategoryFromUrl);
        if (newCategoryFromUrl !== categoryFromUrl) {
            categoryFromUrl = newCategoryFromUrl;
            changeCategoryToUrlSlug(categoryFromUrl);
        }
        
        
        
    

async function changeCategoryToUrlSlug(categorySlug) {
    try {
        console.log(`Changing category to: ${categorySlug}`);

        // Query the collection to find the matching category by slug
        const collectionsResult = await wixData.query("Stores/Collections")
            .eq("name", categorySlug) // Find by slug
            .find();

        // Check if the category exists
        if (collectionsResult.items.length > 0) {
            const collection = collectionsResult.items[0];
            const collectionId = collection._id;
            console.log(`Found category: ${collection.name}, ID: ${collectionId}`);

            // Set the dropdown value and trigger the filter logic
            $w("#categoryDropdown").value = collectionId;

            // Apply the category filter
            categoryFilter = wixData.query("Stores/Products").hasSome("collections", collectionId);
            populateProductsRepeater(); // Populate the repeater with filtered products
        } else {
            console.log("No matching category found for slug:", categorySlug);
        }
    } catch (error) {
        console.error("Error changing category by URL slug:", error);
    }
}
Leave a Comment