用于创建相关产品列表的 Wix 指南不会在点击时自行重新加载

Question

我已按照 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 然后更新然后从数据库中重新获取数据。

Answer 1

的确，你是对的。选择相关项目时，页面本身不会重新加载，因此不会生成新的相关项目列表。实际上，在发布此示例时，没有简单的方法来解决这个问题。

从那时起，Wix 公开了 wix-location.onChange() 功能来解决这个问题。您需要做的就是添加以下行：

wixLocation.onChange( () => loadRelatedProducts() );

将它添加到 onReady() 之前甚至 onReady() 内部可能是最有意义的。

用于创建相关产品列表的 Wix 指南不会在点击时自行重新加载

Wix guide for creating Related Product list doesn't reload itself onclick

javascript

velo