如何基于下拉选择刷新Wix Stores Gallery并关联外部数据库

我现有一段在repeater上正常运行的代码，用户选择下拉选项后点击「Shop Now」会跳转至lake-apparel-showcase页面，也可在此页面修改州/湖选项。现在需要将该逻辑迁移至「Shop All」页面，但不知道如何刷新Gallery（替代原repeater）。

由于Wix Stores产品集合无法添加state或lake字段，我创建了名为Import791的独立数据库，包含所有州、湖及对应产品名称。希望通过产品名称关联Wix Stores产品集合与Import791数据库，实现选中指定州和湖时，展示对应的Wix Stores产品。

以下是lake-apparel-showcase页面的现有代码：

import wixData from 'wix-data';
import {session} from 'wix-storage';

$w.onReady(async function () {
    $w('#stateDropdown').options = [];
    $w('#lakeDropdown').options = [];

    const savedState = session.getItem("selectedState");
    const savedLake = session.getItem("selectedLake");

    try {
        await populateStateData();
        
        if (savedState) {
            $w('#stateDropdown').value = savedState;
            await populateLakeData(savedState);
            
            if (savedLake) {
                $w('#lakeDropdown').value = savedLake;
            }
        }
        
        await refreshRepeater();
    } catch (error) {
        console.error("Error in initialization:", error);
    }

    $w('#stateDropdown').onChange(async (event) => {
        await populateLakeData(event.target.value);
        await refreshRepeater();
    });

    $w('#lakeDropdown').onChange(() => {
        refreshRepeater();
    });
});

async function populateStateData() {
    try {
        const results = await wixData.query("Import791")
            .ascending("state")
            .limit(1000)
            .find();
        const uniqueTitles = getUniqueItems(results.items, "state");
        $w("#stateDropdown").options = buildOptions(uniqueTitles);
    } catch (error) {
        console.error("Error populating states:", error);
        throw error;
    }
}

async function populateLakeData(state) {
    try {
        const results = await wixData.query("Import791")
            .ascending("lakeName")
            .limit(1000)
            .eq("state", state)
            .find();
        const uniqueTitles = getUniqueItems(results.items, "lakeName");
        $w("#lakeDropdown").options = buildOptions(uniqueTitles);
    } catch (error) {
        console.error("Error populating lakes:", error);
        throw error;
    }
}

function getUniqueItems(items, property) {
    const uniques = items.map(item => item[property]);
    return [...new Set(uniques)];
}

function buildOptions(uniqueList) {
    return uniqueList.map(curr => {
        return { label: curr, value: curr };
    });
}

async function refreshRepeater() {
    const selectedState = $w('#stateDropdown').value;
    const selectedLake = $w('#lakeDropdown').value;
    
    let query = wixData.query("Import791");
    
    if (selectedState) {
        query = query.eq("state", selectedState);
    }
    
    if (selectedLake) {
        query = query.eq("lakeName", selectedLake);
    }
    
    try {
        const results = await query.find();
        $w("#listRepeater").data = results.items;
    } catch (error) {
        console.error("Error refreshing repeater:", error);
    }
}

解决方案 #

核心思路 #

1. 通过Import791数据库筛选出对应州/湖的产品名称列表
2. 用该名称列表查询Wix Stores产品集合，获取匹配的产品数据
3. 将匹配的产品数据绑定到Gallery组件

完整代码实现 #

import wixData from 'wix-data';
import { session } from 'wix-storage';
import wixStores from 'wix-stores'; // 引入Wix Stores模块

$w.onReady(async function () {
    $w('#stateDropdown').options = [];
    $w('#lakeDropdown').options = [];

    const savedState = session.getItem("selectedState");
    const savedLake = session.getItem("selectedLake");

    try {
        await populateStateData();
        
        if (savedState) {
            $w('#stateDropdown').value = savedState;
            await populateLakeData(savedState);
            
            if (savedLake) {
                $w('#lakeDropdown').value = savedLake;
            }
        }
        
        await refreshGallery(); // 替换原refreshRepeater为refreshGallery
    } catch (error) {
        console.error("初始化错误:", error);
    }

    $w('#stateDropdown').onChange(async (event) => {
        await populateLakeData(event.target.value);
        await refreshGallery();
    });

    $w('#lakeDropdown').onChange(() => {
        refreshGallery();
    });
});

// 以下函数与原代码逻辑一致，无需修改
async function populateStateData() {
    try {
        const results = await wixData.query("Import791")
            .ascending("state")
            .limit(1000)
            .find();
        const uniqueTitles = getUniqueItems(results.items, "state");
        $w("#stateDropdown").options = buildOptions(uniqueTitles);
    } catch (error) {
        console.error("加载州数据错误:", error);
        throw error;
    }
}

async function populateLakeData(state) {
    try {
        const results = await wixData.query("Import791")
            .ascending("lakeName")
            .limit(1000)
            .eq("state", state)
            .find();
        const uniqueTitles = getUniqueItems(results.items, "lakeName");
        $w("#lakeDropdown").options = buildOptions(uniqueTitles);
    } catch (error) {
        console.error("加载湖数据错误:", error);
        throw error;
    }
}

function getUniqueItems(items, property) {
    const uniques = items.map(item => item[property]);
    return [...new Set(uniques)];
}

function buildOptions(uniqueList) {
    return uniqueList.map(curr => {
        return { label: curr, value: curr };
    });
}

// 核心修改：替换repeater刷新逻辑为Gallery刷新
async function refreshGallery() {
    const selectedState = $w('#stateDropdown').value;
    const selectedLake = $w('#lakeDropdown').value;
    
    // 第一步：从Import791筛选对应州/湖的产品名称
    let importQuery = wixData.query("Import791");
    if (selectedState) importQuery = importQuery.eq("state", selectedState);
    if (selectedLake) importQuery = importQuery.eq("lakeName", selectedLake);
    
    try {
        const importResults = await importQuery.find();
        // 提取所有匹配的产品名称并去重，避免重复查询
        const productNames = [...new Set(importResults.items.map(item => item.productName))];
        
        if (productNames.length === 0) {
            $w("#productGallery").data = []; // 无匹配时清空Gallery
            return;
        }
        
        // 第二步：查询Wix Stores产品集合，匹配产品名称
        const storeProducts = await wixStores.queryProducts()
            .hasSome("name", productNames) // 通过产品名称精准匹配
            .find();
        
        // 第三步：将产品数据绑定到Gallery
        $w("#productGallery").data = storeProducts.items;
    } catch (error) {
        console.error("刷新Gallery错误:", error);
    }
}

注意事项 #

• 确保Import791数据库中的productName字段值与Wix Stores产品的名称完全一致（包括大小写、空格）
• 将代码中的#productGallery替换为「Shop All」页面中Gallery组件的实际ID
• 若产品数量较多，可添加分页逻辑优化查询性能

内容的提问来源于stack exchange，提问作者slc1axj