Reload <ul> with event handler function

user_14930014 0
Viewed 218

I am extremely new to JavaScript/HTML/CSS. As a first website project I am working on my online shop using Shopify.

This is My Website

I am trying to update the list of images (thumbnails below the main picture) after one of the options is changed (size or color).

I have managed to display the correct images when the page first loads by using the alt_text of each figure. For example, if you change the options and reload the website, you will see the appropriate figures. I did that as follows:

{% 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>

Basically, I just load the images that have an alt_text equal to the selected options.

I now want to change all the thumbnails when an option is selected e.g. you select a different color. At the moment it only works if you

  1. First select the options.
  2. Then you refresh the page.

I want the list to update automatically. I was able to find that the event of choosing another option is handled by this function:

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

I want to achieve something like (forgive my ignorance):

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

Can someone point me into the right direction?

EDIT: I have been able to get the desired behaviour (in a non-optimal way) with the following:

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

Which reloads the entire page.

I have tried to reload just the <ul>, but I don't know how to do it. I have tried the following, but it didn't work:

<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>

And:

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

Any help is appreciated.

shopify liquid html javascript
2 Answers

Basically, I am giving the idea, not code example because it is harder to put working code with debugging over the website.

These steps you follow to achieve it.

  1. Load all images like a regular slider, now once the page loaded you can check the variation and show the images that have similar alt tags and hide another one using inline CSS or custom class over them.

  2. once the variation changes you can check and the ul li of images thumbs and again hide/show based on selected variant data.

I think you got the idea.

user_71215070

Well, I can figure out some ways to do that work. One of these is about you write a function to create the elemente with the correct images!

I'll describe it better:

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
}

After create this function, you could just call it inside _onSelectChange.

Just dont forget to create a div with the id used inside showProductsImages.

user_149910160
Related