javascript - 用于创建相关产品列表的 Wix 指南不会在单击时自行重新加载
问题描述
我按照 Wix 的指南在其动态产品页面的底部创建了一个相关产品区域。
它主要按您的预期工作。当您单击其中一个相关产品并看到相关产品列表没有更改以反映当前加载的产品时,就会出现问题。
更改相关产品列表的唯一方法是刷新页面。
可能有一个简单的解决方法吗?下面是他们的代码:
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,然后更新然后重新从数据库中获取数据。
解决方案
的确,你是对的。The page itself doesn't reload when a related item is selected so a new list of related items is not generated. 实际上,在发布此示例时,还没有简单的方法可以解决此问题。
从那时起,Wix 就公开了wix-location.onChange()
解决这个问题的功能。您需要做的就是添加以下行:
wixLocation.onChange( () => loadRelatedProducts() );
在 .之前onReady()
或什至在onReady()
.
推荐阅读
- git - 无法将集合从 GitLab 安装到 RHEL AutomationHub
- javascript - 在 FireFox 中使用 Vaadin 按钮复制到剪贴板
- django - Django中的推荐应用
- reporting-services - 我想在 ssrs 2019 的列标题中显示文本,如下图所示
- javascript - Highchart Wordcloud 拖动选择
- python - Python:完成所需内容后重置计时器
- xaml - 未找到独立 ResourceDictionary 资源
- visual-studio-code - 任务完成后 vsc 任务不杀死终端
- android - async{} 内部流
- python - Python 缓存了哪些基本对象