Quick View doesn't work on some products in collection

Technical Q&A
1

Hello! I’m a newbie really working on implementing Quick View / Quick Shop functionality on collection pages. I’m mostly done, except for the fact that on some products in our default collections, clicking the “Quick view” button opens up the product page itself instead of opening the quick view modal.

As I haven’t published it yet you can view it in action in the preview here:

https://19fm4crtyr5ls0s1-21437011.shopifypreview.com

To see example of where the Quick view is not working:

  1. Move mouse over “SALE” in the main menu
  2. Click “Men’s On Sale” to open collection
  3. For all the products in the bottom row, clicking the Quick view opens the product page instead of the modal

Here is my collection-template.liquid code:

{%- assign per_row = section.settings.per_row -%}
{%- assign paginate_by = per_row | times: section.settings.rows_per_page -%}

{% paginate collection.products by paginate_by %}

  
  {%- if section.settings.description_position == 'top' -%}
  {% if collection.description != blank %}
    

      {{ collection.description }}
    

    

---

  {% endif %}
  {%- endif -%}

  {% if section.settings.subcollection_style == 'above' %}
    {% include 'subcollections', per_row: section.settings.subcollections_per_row %}
  {% endif %}

  

    

      
    

    
      {{ 'collections.general.items_with_count' | t: count: collection.products_count }}
    

    
      

        {% include 'bc-sf-filter-skeleton', width: 3 %}
      

    

  

  

  
    {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}

    {% case per_row %}
    {% when 2 %}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
    {% endcase %}
    
    {%- assign boost_grid_item_width = grid_item_width -%}

    {% for product in collection.products %}
      {% include 'product-grid-item' %}
    {% else %}
      

        

{{ 'collections.general.no_matches' | t }}

      

    {% endfor %}

  

  {% if section.settings.subcollection_style == 'below' %}
    {% include 'subcollections', per_row: section.settings.subcollections_per_row %}
  {% endif %}

  
    {% if paginate.pages > 1 %}
      {% include 'pagination' %}
    {% endif %}
  

  

  
    {%- if section.settings.description_position == 'bottom' -%}
    {% if collection.description != blank %}
      

---

      
        {{ collection.description }}
      

      

---

    {% endif %}
  	{%- endif -%}
  
  
    {%- if settings.quick_shop_enable -%}
      {%- for product in collection.products -%}
        {%- if product.available -%}
          {%- include 'quick-shop-modal' -%}
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
  

{% endpaginate %}

{% schema %}

  {
    "name": "Collection pages",
    "settings": [
      {
        "type": "select",
        "id": "description_position",
        "label": "Collection description position",
        "default": "top",
        "options": [
          {
            "value": "top",
            "label": "Top"
          },
          {
            "value": "bottom",
            "label": "Bottom"
          }
        ]
      },
      {
        "type": "header",
        "content": "Subcollections"
      },
      {
        "type": "paragraph",
        "content": "Links to collections from your menu will appear here. [Learn more](https://archetypethemes.co/blogs/impulse/how-do-i-create-subcollections)"
      },
      {
        "type": "select",
        "id": "subcollection_style",
        "label": "Subcollection style",
        "default": "above",
        "options": [
          {
            "value": "above",
            "label": "Above products"
          },
          {
            "value": "below",
            "label": "Below products"
          },
          {
            "value": "none",
            "label": "None"
          }
        ]
      },
      {
        "type": "range",
        "id": "subcollections_per_row",
        "label": "Subcollections per row",
        "default": 5,
        "min": 2,
        "max": 5,
        "step": 1
      },
      {
        "type": "header",
        "content": "Products"
      },
      {
        "type": "checkbox",
        "id": "enable_collection_count",
        "label": "Enable collection count",
        "default": true
      },
      {
        "type": "range",
        "id": "per_row",
        "label": "Products per row",
        "default": 4,
        "min": 2,
        "max": 5,
        "step": 1
      },
      {
        "type": "range",
        "id": "rows_per_page",
        "label": "Rows per page",
        "default": 7,
        "min": 3,
        "max": 20,
        "step": 1
      },
      {
        "type": "checkbox",
        "id": "mobile_flush_grid",
        "label": "Flush grid on mobile",
        "default": false
      }
    ]
  }
{% endschema %}

I was thinking that maybe this is due to the fact that when the products first load (page load has not completed) total products are shown in the collection page. And on page load completion, only products with inventory > 0 or those marked “Continue selling when out of stock” are left and the other are removed from display.

I tried removing {%- if product.available -%} condition from the quick view code in the above but that didn’t help.

One important thing to note:

If we click page 2 in the collection and navigate back to page 1, then the Quick view button works all all products without issue.

Help! Please!!