COMO CREAR BARRA DE BUSQUEDA DE PRODUCTOS | WIX | ESPAÑOL | TUTORIAL

Hey, aqui les traigo este nuevo video BARRA DE BUSQUEDA DE PRODUCTOS en WIX STUDIO. Podrás buscar los productos de tu tienda desde cualquier página de tu sitio!

No olvides subscribirte y comentar alguna pregunta!

---

URL PUBLICADA https://universalwebcode.wixstudio.io/qrcode/product-page/i-m-a-product-mi-prueba3

CÓDIGO MASTERPAGE.JS

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world
import wixData from 'wix-data';
import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function () {
    $w("#searchProduct").onInput((ev) => {
        console.log("value", $w("#searchProduct").value);
        filtrarPorNombre($w("#searchProduct").value)
    })

    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#nombre").text = itemData.name;
        $item("#image").src = itemData.mainMedia;
        $item("#box2").onClick((ev) => {
            wixLocationFrontend.to(itemData.productPageUrl);
        })
    })
    // getProducts();
});

async function filtrarPorNombre(nombre) {
    if (nombre != "") {

        const products = await wixData.query("Stores/Products")
            .contains("name", nombre)
            .find()
            .then((results) => {
                if (results.items.length > 0) {
                    return results.items;
                } else {
                    // handle case where no matching items found
                    return [];
                }
            })
            .catch((err) => {
                console.log(err);
                return [];
            });

        if (products.length > 3) {

            $w("#repeater1").data = products.slice(0, 3);
            console.log(products);
        } else {
            $w("#repeater1").data = products;
        }
        $w("#box3").show();
    }else{
        $w("#box3").hide();
    }
}

async function getProducts() {
    const products = await wixData.query("Stores/Products")
        .find()
        .then((results) => {
            if (results.items.length > 0) {
                return results.items;
            } else {
                // handle case where no matching items found
                return [];
            }
        })
        .catch((err) => {
            console.log(err);
            return [];
        });
}

#wix #español #tutorial #wixstudio #studio #velo #wixsite #code #youtube #products #searchbar #wixstore #wixsite