Changing the order of mainMedia pictures displayed in a Repeater

Ask the community
, ,
1

Hello,

is it possible to display the 4th or 5th image from a product mainMedia into a repeater, instead of the 1st picture?

import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’; // Import the wix-location module to handle redirects

$w.onReady(function () {
// First, find the ID of the collection named “НОВИ ПРЕДЛОЖЕНИЯ”
wixData.query(“Stores/Collections”)
.eq(“name”, “НОВИ ПРЕДЛОЖЕНИЯ”)
.find()
.then((results) => {
if (results.items.length > 0) {
const collectionId = results.items[0]._id;

        // Now, query the products that are part of this collection
        return wixData.query("Stores/Products")
            .hasSome("collections", [collectionId])
            .find();
    } else {
        console.log("Collection not found");
        return Promise.reject("Collection not found");
    }
})
.then((results) => {
    if (results.items.length > 0) {
        // Set the data for the repeater
        $w("#productsRepeater").data = results.items;

        // Set up the repeater to display the data
        $w("#productsRepeater").onItemReady(($item, itemData, index) => {
            $item("#mainMedia").src = itemData.mainMedia; // assuming 'mainMedia' is the field key for the image in your collection
            $item("#itemTitle").text = itemData.name; // 'name' is the typical field key for product title in Wix Stores
            $item("#itemPrice").text = `${itemData.formattedPrice}`; // assuming 'price' is the field key for the product price

            if (itemData.ribbon && itemData.ribbon.trim() !== "") {
                $item("#ribbon").text = itemData.ribbon; // Display the ribbon text
                $item("#ribbonContainer").show(); // Ensure the ribbon container is visible
            } else {
                $item("#ribbonContainer").hide(); // Hide the ribbon container if there is no ribbon
            }

            // Add onClick event to navigate to the product page
            $item("#repeaterContainer").onClick(() => {
                // Check if slug exists and use it to construct the URL
                if (itemData.slug) {
                    const productUrl = `/product-page/${itemData.slug}`; // Construct the URL using the slug
                    wixLocation.to(productUrl);
                }
            });
        });
    } else {
        console.log("No products found in this collection.");
    }
})
.catch((err) => {
    console.log(err);
});

});

This is the code im using in Wix Studio. It currently displays the 1st picture for the product, and I would like to display the 4th and switch to the 5th on hover.

Thanks!

2

Thy this one…

import wixData from 'wix-data';
import wixLocation from 'wix-location'; // Import the wix-location module to handle redirects

$w.onReady(async function () {
    try {
        // First, find the ID of the collection named “НОВИ ПРЕДЛОЖЕНИЯ”
        const collectionsResults = await wixData.query("Stores/Collections")
            .eq("name", "НОВИ ПРЕДЛОЖЕНИЯ")
            .find();

        if (collectionsResults.items.length > 0) {
            const collectionId = collectionsResults.items[0]._id;

            // Now, query the products that are part of this collection
            const productsResults = await wixData.query("Stores/Products")
                .hasSome("collections", [collectionId])
                .find();

            if (productsResults.items.length > 0) {
                // Set the data for the repeater
                $w("#productsRepeater").data = productsResults.items;

                // Set up the repeater to display the data
                $w("#productsRepeater").onItemReady(($item, itemData, index) => {
                    // Ensure mainMedia is an array and has enough images
                    if (Array.isArray(itemData.mainMedia) && itemData.mainMedia.length >= 5) {
                        // Set the initial image to the 4th image
                        $item("#mainMedia").src = itemData.mainMedia[3].src; // Index 3 for the 4th image

                        // Handle hover effect to change to the 5th image
                        $item("#mainMedia").onMouseIn(() => {
                            $item("#mainMedia").src = itemData.mainMedia[4].src; // Index 4 for the 5th image
                        });
                        $item("#mainMedia").onMouseOut(() => {
                            $item("#mainMedia").src = itemData.mainMedia[3].src; // Back to the 4th image
                        });
                    } else {
                        console.log("Not enough images in mainMedia array");
                    }

                    $item("#itemTitle").text = itemData.name; // 'name' is the typical field key for product title in Wix Stores
                    $item("#itemPrice").text = `${itemData.formattedPrice}`; // assuming 'price' is the field key for the product price

                    if (itemData.ribbon && itemData.ribbon.trim() !== "") {
                        $item("#ribbon").text = itemData.ribbon; // Display the ribbon text
                        $item("#ribbonContainer").show(); // Ensure the ribbon container is visible
                    } else {
                        $item("#ribbonContainer").hide(); // Hide the ribbon container if there is no ribbon
                    }

                    // Add onClick event to navigate to the product page
                    $item("#repeaterContainer").onClick(() => {
                        // Check if slug exists and use it to construct the URL
                        if (itemData.slug) {
                            const productUrl = `/product-page/${itemData.slug}`; // Construct the URL using the slug
                            wixLocation.to(productUrl);
                        }
                    });
                });
            } else {
                console.log("No products found in this collection.");
            }
        } else {
            console.log("Collection not found");
        }
    } catch (err) {
        console.log(err);
    }
});
1 Like