quick view load fast.

[sumnima-studio]

is there any way to make quick view load fast. it's really really slow.

[Tiggerito]

I agree.

I tried to do some preloading for its content but the way it loads caused it to re-load it again.

My idea was to preload the view when the user hovers over the product card. So when they click the button, it is more likely that the content is already loaded.

I may try the idea again, but this time preload using fetch.

[Tiggerito]

No joy with using fetch. I presume it is designed not to cache. So I think a preload mechanism would need to be built in.

This is what I tried:

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('mouseover', function() {
     
      var fetched = this.getAttribute('data-fetched');

      if (fetched) return;

      this.setAttribute('data-fetched', 'true');

      var productId = this.getAttribute('data-entity-id');

      var url = '/products.php?productId=' + productId;

      fetch(url, {
        credentials: "include",
        headers: {
          'stencil-config': '{}', 
          'stencil-options': '{"render_with":"products/quick-view"}', 
          'x-xsrf-token': BCData.csrf_token, 
          'x-requested-with': 'stencil-utils', 
          'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
        },
        method: "GET"
      })
        .then(response => response.text())
        .then(data => {
          console.log('Product data:', data);
        })
        .catch(error => {
          console.error('Error fetching product data:', error);
        });
    });
  });
});
</script>```