时间戳

首页 > 解决方案 > 重新加载

javascript - 重新加载
    带有事件处理函数

问题描述

我对 JavaScript/HTML/CSS 非常陌生。作为第一个网站项目，我正在使用 Shopify 开发我的在线商店。

这是我的网站

在更改其中一个选项（大小或颜色）后，我正在尝试更新图像列表（主图片下方的缩略图）。

通过使用每个图形的 alt_text 首次加载页面时，我已经设法显示正确的图像。例如，如果您更改选项并重新加载网站，您将看到相应的数字。我这样做如下：

{% assign wanted_alts = product.selected_or_first_available_variant.options %}
<ul>
{% for media in product.media %}
    {% if wanted_alts contains media.alt or media.alt == "All" %}
        <li>
        ...
        </li>
    {% endif %}
{% endfor %}
</ul>

基本上，我只加载 alt_text 等于所选选项的图像。

我现在想在选择一个选项时更改所有缩略图，例如您选择不同的颜色。目前它只有在你

  1. 首先选择选项。
  2. 然后刷新页面。

我希望列表自动更新。我发现选择另一个选项的事件是由这个函数处理的：

_onSelectChange: function() {
      var variant = this._getVariantFromOptions();

      this.container.dispatchEvent(
        new CustomEvent('variantChange', {
          detail: {
            variant: variant
          },
          bubbles: true,
          cancelable: true
        })
      );

      if (!variant) {
        return;
      }

      this._updateMasterSelect(variant);
      this._updateImages(variant);
      this._updatePrice(variant);
      this._updateSKU(variant);
      this.currentVariant = variant;

      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }
    }

我想实现类似（原谅我的无知）：

_onSelectChange: function() {
        ...
     /* Reload the <ul> tag that sets which figures to display */
    }

有人可以指出我正确的方向吗？

编辑： 我已经能够通过以下方式获得所需的行为（以非最佳方式）：

_onSelectChange: function() {
        ...
        location.reload();
    }

重新加载整个页面。

我试图重新加载只是<ul>，但我不知道该怎么做。我尝试了以下方法，但没有奏效：

<div id="myID">
{% assign wanted_alts = product.selected_or_first_available_variant.options %}
<ul>
{% for media in product.media %}
    {% if wanted_alts contains media.alt or media.alt == "All" %}
        <li>
        ...
        </li>
    {% endif %}
{% endfor %}
</ul>
</div>

和：

_onSelectChange: function() {
        ...
        $('#myID').load(document.URL +  ' #myID');
    }

任何帮助表示赞赏。

标签： javascripthtmlshopifyliquid

解决方案

基本上，我给出的是这个想法，而不是代码示例，因为很难将工作代码与调试一起放在网站上。

您遵循这些步骤来实现它。

  1. 像普通滑块一样加载所有图像，现在一旦页面加载，您就可以检查变化并显示具有相似 alt 标签的图像，并使用内联 CSS 或自定义类隐藏另一个。

  2. 一旦变体发生变化，您可以检查图像的 ul li，然后根据选定的变体数据再次隐藏/显示。

我想你明白了。

推荐阅读