刷新站点时产品购物车为空白

Question

当您输入www.mutantshop.mx并将产品添加到购物车时，一切都很好，并且所有产品都出现在右侧浮动购物车中，如下图所示：

但是，当您尝试使用 F5 刷新页面或尝试导航到另一页面，然后再尝试单击购物车时，问题就出现了，它显示为空白，没有产品详细信息，如下图：

我已经尝试了很多技巧来解决此问题，但我做不到，真的希望我能帮上忙！问候

Answer 1

这是因为在页面加载中初始化购物车被隐藏了。如果您将商品添加到购物车中，它将运行事件或显示该购物车的功能。

如果购物车在页面加载时有项目，则可以调用此事件或函数。

这是在香草js中经过测试的有效示例：

function pageLoadShowCart() {
  if(document.querySelectorAll('.xoo-wsc-container .xoo-wsc-product').length) {
    // call event or function which show cart
    document.getElementsByClassName('xoo-wsc-basket')[0].click();
  }
}

pageLoadShowCart();

上面的代码有两个步骤。首先尝试查找购物车中已经存在的产品，并且购物车不为空，然后模拟点击购物车图标。在页面加载时，如果不为空，则打开购物车。

这应该在索引上。[html，php，asp]。

您还可以使用您的主要语言而不是javascript来制作此IF。


===编辑===
如果不起作用，可能是由于购物车小部件加载引起的。在某些情况下，js需要时间进行加载。
尝试将代码包装到超时函数中。可能会有帮助。

function pageLoadShowCart() {
  setTimeout(function() {
    if(document.querySelectorAll('.xoo-wsc-container .xoo-wsc-product').length) {
      // call event or function which show cart
      document.getElementsByClassName('xoo-wsc-basket')[0].click();
    }
  }, 150);
}