Javascript 创建相关产品列表的Wix指南&x27;不要一点击就重新装填
我按照Wix的指南在动态产品页面的底部创建了一个相关产品区域 它的工作原理基本上和你预期的一样。当您单击其中一个相关产品并看到“相关产品”列表没有更改以反映当前加载的产品时,就会出现问题 更改相关产品列表的唯一方法是刷新页面 有没有一个简单的解决办法?以下是他们的代码:Javascript 创建相关产品列表的Wix指南&x27;不要一点击就重新装填,javascript,velo,Javascript,Velo,我按照Wix的指南在动态产品页面的底部创建了一个相关产品区域 它的工作原理基本上和你预期的一样。当您单击其中一个相关产品并看到“相关产品”列表没有更改以反映当前加载的产品时,就会出现问题 更改相关产品列表的唯一方法是刷新页面 有没有一个简单的解决办法?以下是他们的代码: import wixData from 'wix-data'; import wixLocation from 'wix-location'; $w.onReady(function () { loadRelatedProd
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
loadRelatedProducts();
});
async function loadRelatedProducts() {
let product = await $w('#productPage1').getProduct();
let relatedProductResults = await Promise.all([
relatedProductsByTable(product),
relatedProductsByPrice(product)
]);
if (relatedProductResults[0].length > 0)
showRelatedProducts(relatedProductResults[0]);
else
showRelatedProducts(relatedProductResults[1]);
}
async function relatedProductsByTable(product) {
let productId = product._id;
// find related products by relation table
let relatedByTable = await Promise.all([
wixData.query('RelatedProducts')
.eq('productA', productId)
.include('productB')
.find(),
wixData.query('RelatedProducts')
.eq('productB', productId)
.include('productA')
.find()
]);
let relatedProducts = [
...relatedByTable[0].items.map(_ => _.productB),
...relatedByTable[1].items.map(_ => _.productA)
];
return relatedProducts;
}
async function relatedProductsByPrice(product) {
let productId = product._id;
// find related products by price
let relatedByPrice = await wixData.query('Stores/Products')
.between('price', product.price * 0.8, product.price * 1.2)
.ne('_id', productId)
.find();
return relatedByPrice.items;
}
function showRelatedProducts(relatedProducts){
if(relatedProducts.length > 0){
relatedProducts.splice(4, relatedProducts.length);
$w('#relatedItemsRepeater').onItemReady(relatedItemReady);
$w("#relatedItemsRepeater").data = relatedProducts;
$w("#relatedItems").expand();
}
else {
$w("#relatedItems").collapse();
}
}
function relatedItemReady($w, product){
$w("#productImage").src = product.mainMedia;
$w("#productName").text = product.name;
$w("#productPrice").text = product.formattedPrice;
$w('#productImage').onClick(() => {
wixLocation.to(product.productPageUrl);
});
}
我怀疑这一切都是由.onReady()
事件触发的。不幸的是,我不知道如何在另一个触发器上重新运行,比如在单击相关项时
单击某个相关产品时,页面本身不会重新加载。相反,我认为他们只是简单地重写URL,然后更新,然后从数据库中重新获取数据。事实上,你是对的。选择相关项时,页面本身不会重新加载,因此不会生成新的相关项列表。事实上,在这个例子发布的时候,没有简单的方法可以解决这个问题 从那时起,Wix公开了
Wix location.onChange()
函数来解决这个问题。您只需添加以下行:
wixLocation.onChange( () => loadRelatedProducts() );
将其添加到
onReady()
之前,甚至添加到onReady()
中,可能最有意义。你是我的英雄。