使用事件处理函数重新加载 <ul>

Question

我对 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 等于 selected 选项的图像。

我现在想在 selected 选项时更改所有缩略图，例如你 select 不同的颜色。目前它只适用于你

首先select选项。
然后你刷新页面。

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

_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');
    }

感谢任何帮助。

Answer 1

好吧，我可以想出一些方法来完成这项工作。其中之一是关于您编写一个函数来创建具有正确图像的元素！

我会更好地描述它：

const showProductImages = (wanted_alts, media) => {
  var ul = document.createElement('ul'); // Creat a new ul elemente

  // Do your filter and conditional here and create the li elements (with complete attributes)
  media.forEach(element => {
    if (Something like "if wanted_alts contains media.alt or media.alt == 'All'") {
      var li = document.createElement('li');
      li.innerHTML="<a onClick=''>...</a>"+" "+"etc..";
      ul.appendChild(li);
    }
  })

  // You should have a written html div with the id used below
  document.getElementById('thumbs').innerHTML = "";  // Clean up the div content
  document.getElementById('thumbs').appendChild(ul); // Set new thumbs list
}

创建此函数后，您可以在_onSelectChange 中调用它。

只是不要忘记使用 showProductsImages 中使用的 id 创建一个 div。

Answer 2

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

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

像常规滑块一样加载所有图像，现在一旦加载页面，您就可以检查变体并显示具有相似 alt 标签的图像，并使用内联 CSS 或自定义隐藏另一个图像class 在他们之上。
一旦变体发生变化，您就可以检查图像的 ul li，并根据所选的变体数据再次 hide/show。

我想你明白了。

使用事件处理函数重新加载 <ul>

Reload <ul> with event handler function

html

javascript

liquid

shopify