Hi guys,
I would like infinite scroll on my page in collection pages, I have infinte scroll in LIST VIEW but not in GRID VIEW,
I tried but I can´t do it, can someone help me ? I would really appreaciate it, thank you guys.
Site link: https://eltemplodelamoda.com/collections/ropa-de-mujer
this is the code of Collection-template.liquid:
{% if section.settings.show_collection_image and section.settings.banner_position == 'top' %}
{% if section.settings.show_collection_name %}
# {{ collection.title }}
{% endif %}
{% endif %}
{%- if settings.breadcrumb_cl -%}{%- include 'breadcrumb' -%}{%- else -%}
{%- endif -%}
{% if template contains 'list' %}
{%- assign limit = 500 -%}
{% else %}
{%- assign limit = section.settings.rows -%}
{% endif %}
{% paginate collection.products by limit %}
{%- assign sidebarPosition = '' -%}
{% case section.settings.sidebar_position %}
{% when 'left' %}
{%- assign sidebar_position = 'left' -%}
{%- assign content_position = 'right' -%}
{% when 'right' %}
{%- assign sidebar_position = 'right' -%}
{%- assign content_position = 'left' -%}
{% when 'popup' %}
{%- assign sidebar_position = 'popup' -%}
{% endcase %}
{%- assign conentClass = '' -%}
{% if section.settings.collection_sidebar %}
{% if sidebar_position == 'popup' %}
{%- assign conentClass = '' -%}
{% else %}
{%- assign conentClass = 'large-up--three-quarters' -%}
{% endif %}
{% endif %}
{% include 'collection-slideshow' %}
{% if section.settings.show_collection_image and section.settings.banner_position == 'content-side' %}
{% if collection.image and section.settings.banner_style == 'info-below' %}
{% endif %}
{% if section.settings.show_collection_name %}
# {{ collection.title }}
{% endif %}
{% endif %}
{% unless section.settings.show_collection_image %}
{% if section.settings.show_collection_name %}
# {{ collection.title }}
{% endif %}
{% endunless %}
{% if section.settings.collection-des == "top" %}
{% if collection.description != blank %}
{{ collection.description }}
{% endif %}
{% endif %}
{% include 'collection-filter' %}
{% case section.settings.grid %}
{% when 2 %}{%- assign grid_ds = 'large-up--one-half' -%}
{% when 3 %}{%- assign grid_ds = 'large-up--one-third' -%}
{% when 4 %}{%- assign grid_ds = 'large-up--one-quarter' -%}
{% when 5 %}{%- assign grid_ds = 'large--one-quarter widescreen--one-fifth' -%}
{% when 6 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-sixth' -%}
{% when 7 %}{%- assign grid_ds = 'large--one-fifth widescreen--one-seventh' -%}
{% endcase %}
{% case section.settings.tablet-grid %}
{% when 2 %}{%- assign grid_tb = 'medium--one-half' -%}
{% when 3 %}{%- assign grid_tb = 'medium--one-third' -%}
{% when 4 %}{%- assign grid_tb = 'medium--one-quarter' -%}
{% when 5 %}{%- assign grid_tb = 'medium--one-fifth' -%}
{% endcase %}
{% case section.settings.mobile-grid %}
{% when 1 %}{%- assign grid_mb = 'small--one-whole' -%}
{% when 2 %}{%- assign grid_mb = 'small--one-half' -%}
{% when 3 %}{%- assign grid_mb = 'small--one-third' -%}
{% endcase %}
{% unless template contains 'list' %}
{% for product in collection.products %}
{%- comment %}{% endcomment -%}
{% include 'product-card-grid' %}
{% else %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
{% for i in (1..limit) %}
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{{ 'homepage.onboarding.product_title' | t }}
$19.99
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
{% endunless %}
{% if template contains 'list' %}
{%- comment %}{% endcomment -%}
{% for product in collection.products %}
{%- comment %}{% endcomment -%}
{% assign box_animation_time = locksmith_8c56_forloop__index | minus:1 %}
{% assign delay_time = 100 | times : box_animation_time %}
{% include 'product-card-list', product: product %}
{% else %}
{% comment %}
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
{% for i in (1..4) %}
{%- assign placeholder = 'placeholder-product-' | append: i -%}
{% include placeholder %}
{{ 'homepage.onboarding.product_title' | t }}
$19.99
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
{% endif %}
{% if is_empty_collection %}
{{ 'collections.general.no_matches' | t }}
{% endif %}
{% if paginate.pages > 1 %}
{% if section.settings.pagination == "infinite" or section.settings.pagination == "button" %}
{% if paginate.next %}
{% if section.settings.pagination == "infinite" %}
{{ 'general.pagination.loading' | t }}
{% else %}
{{ 'general.pagination.loadmore' | t }}
{% endif %}
{% endif %}
{% else %}
---
{% include 'pagination' %}
{% endif %}
{% endif %}
{% if section.settings.collection-des == "bottom" %}
{% if collection.description != blank %}
{{ collection.description }}
{% endif %}
{% endif %}
{% if section.settings.collection_sidebar %}{% include 'collection-sidebar' %}
{% endif %}
{% assign kitchen_products = collection.products | where_exp: "products" , "products.tags contains 'blasdasdusa'" %}
{% assign all_categories = collection.products %}
{% for product in collection.products %}
{%- comment %}{% endcomment -%}
- {{ product.title.artico.typeClient }}
{% endfor %}
{% endpaginate %}
{% include 'filter-js' %}
{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "checkbox",
"id": "fullwidth",
"label": "Fullwidth?",
"default": true
},
{
"type": "header",
"content": "Collection Banner and Title",
"info":"display collection name, description or image. You can upload image from each collection or select background color"
},
{
"type": "checkbox",
"id": "show_collection_name",
"label": "Show Collection Name?",
"default": true
},
{
"type": "checkbox",
"id": "show_collection_image",
"label": "Show Collection Banner?",
"default": true
},
{
"type": "select",
"id": "banner_position",
"label": "Display Position",
"default": "top",
"options": [
{ "value": "top", "label": "Style 1 - On Top" },
{ "value": "content-side", "label": "Style 2 - In Content Area" }
]
},
{
"type": "range",
"id": "bheight",
"label": "Banner Height : Desktop",
"default": 300,
"min": 50,
"max": 400,
"step": 10,
"unit":"px"
},
{
"type": "range",
"id": "bheightipad",
"label": "Banner Height : Tablet",
"default": 200,
"min": 50,
"max": 400,
"step": 10,
"unit":"px"
},
{
"type": "range",
"id": "bheightmob",
"label": "Banner Height : Mobile",
"default": 100,
"min": 50,
"max": 400,
"step": 10,
"unit":"px"
}, {
"type": "paragraph",
"content": "Additinal Settings for Style 2 - In Content Area ==="
},
{
"type": "select",
"id": "banner_style",
"label": "Select Style",
"default": "info-below",
"options": [
{ "value": "info-below", "label": "Default" },
{ "value": "info-over", "label": "Info. Over Image" }
]
},
{
"type": "select",
"id": "text-align",
"label": "Text Align",
"default": "text-center",
"options": [
{ "value": "text-left", "label": "Left" },
{ "value": "text-center", "label": "Center" }
]
},
{
"type": "select",
"id": "collection-des",
"label": "Description Position",
"default": "top",
"options": [
{ "value": "top", "label": "Display Above Products" },
{ "value": "bottom", "label": "Display Below Products" }
]
},
{
"type": "header",
"content": "Appearance"
},
{
"type": "color",
"id": "clr_bg",
"label": "Background Color",
"default": "#eee",
"info":"if background image is not available"
},
{
"type": "color",
"id": "clr_text",
"label": "Collection Name",
"default": "#111"
},
{
"type": "color",
"id": "clr_text_des",
"label": "Collection Description",
"default": "#111"
},
{
"type": "paragraph",
"content": "Set Font Size From --> Theme Settings --> Fonts, Colors and Styles --> Collection Page"
},
{
"type": "header",
"content": "Products Grid"
},
{
"type": "checkbox",
"id": "secondary_image",
"label": "Show Second Image on hover?",
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show Vendor Name?",
"default": false
},
{
"type": "checkbox",
"id": "show_product_review",
"label": "Show Product Reviews?",
"default": true
},
{
"type": "checkbox",
"id": "prlist_btn_show",
"label": "Hide Buttons?",
"default": false,
"info": "add to cart,wishlist,quickview"
},
{
"type": "checkbox",
"id": "btn_mobiles",
"label": "Hide Buttons on Mobile?",
"default": false
},
{
"type": "header",
"content": "Color Swatches"
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show ?",
"default": true
},
{
"type": "select",
"id": "color_type",
"label": "Swatch Type",
"default": "color",
"info": "Custom color name should be predefined in 'Custom Colors' section.",
"options": [
{
"value": "color",
"label": "Color Swatch"
},
{
"value": "vrimage",
"label": "Variant Image"
}
]
},
{
"type": "select",
"id": "vr_bg_position",
"label": "Variant Image Position",
"default": "50% 0",
"options": [
{
"value": "50% 0",
"label": "Center Top"
},
{
"value": "50% 50%",
"label": "Center Center"
}
]
},
{
"type": "select",
"id": "color_size",
"label": "Swatch Size",
"default": "small",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "color_style",
"label": "Swatch Style",
"default": "rounded",
"options": [
{
"value": "rounded",
"label": "Rounded"
},
{
"value": "rectangle",
"label": "Square"
},
{
"value": "rounded_rectangle",
"label": "Rounded Rectangle"
}
]
},
{
"type": "header",
"content": "Appearance"
},
{
"type": "checkbox",
"id": "sort_enable",
"label": "Enable sorting",
"default": true
},
{
"type": "checkbox",
"id": "dis_prod_cnt",
"label": "Display Product Count?",
"default": true
},
{
"type": "checkbox",
"id": "dis_grid_icn",
"label": "Display Grid Icons?",
"default": true
},
{
"type": "select",
"id": "prbox_style",
"label": "Products Grid Style",
"default": "style1",
"options": [
{
"value": "style1",
"label": "Style 1 - Default Info Center"
},
{
"value": "style2",
"label": "Style 2 - Info Hover Image"
},
{
"value": "style3",
"label": "Style 3 - Info Below Image"
},
{
"value": "style4",
"label": "Style 4 - Default Info Left"
},
{
"value": "style5",
"label": "Style 5 - Display Text Button"
}
]
},
{
"type": "paragraph",
"content": "Products per row (grid only)"
},
{
"type": "range",
"id": "grid",
"label": "Desktop",
"default": 4,
"min": 2,
"max": 7,
"step": 1
},
{
"type": "range",
"id": "tablet-grid",
"label": "Tablet",
"default": 3,
"min": 2,
"max": 5,
"step": 1
},
{
"type": "range",
"id": "mobile-grid",
"label": "Mobile",
"default": 2,
"min": 1,
"max": 3,
"step": 1
},
{
"type": "text",
"id": "rows",
"label": "Products per page (grid only)",
"default": "24"
},
{
"type": "select",
"id": "pagination",
"label": "Pagination type",
"default": "button",
"options": [
{ "value": "default", "label": "Classic" },
{ "value": "infinite", "label": "Infinite Scroll" },
{ "value": "button", "label": "Load more button" }
]
},
{
"type": "header",
"content": "Sidebar & Filters"
},
{
"type": "checkbox",
"id": "collection_sidebar",
"label": "Enable Sidebar",
"default": true
},
{
"type": "select",
"id": "sidebar_position",
"label": "Sidebar Position",
"default": "left",
"info":"Only filter blocks show while select Popup Box option.",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
},
{
"value": "popup",
"label": "Popup Box"
}
]
},
{
"type": "paragraph",
"content": "Click on 'Add content' link below to add sidebar section."
}
],
"blocks": [
{
"type": "categories",
"name": "Categories",
"limit": 1,
"settings": [
{
"type":"text",
"id":"title",
"label":"Categories",
"default":"Categories"
},
{
"type": "link_list",
"id": "side_categories",
"label": "Select Categories",
"default": "main-menu"
}
]
},
{
"type": "filter_by",
"name": "Filter By",
"settings": [
{
"type": "text",
"id": "title",
"label": "Filter By Title",
"default": "Filter By Title",
"info": "i.e 'Filter by Size, Filter by Brands'"
},
{
"type": "textarea",
"id": "filter_tags",
"label": "Add Filter tags",
"info": "Separate by a comma, i.e \"Tag1, Tag2, Tag3\"."
},
{
"type": "checkbox",
"id": "twocall",
"label": "Show List in two column",
"default": false
}
]
},
{
"type": "by_color",
"name": "Filter by Colors",
"limit": 1,
"settings": [
{
"type":"text",
"id":"title",
"label":"Filter by section title",
"default":"Filter by Color"
},
{
"type": "textarea",
"id": "filter_tags",
"label": "Add Filter tags",
"info": "Separate by a comma, i.e \"Black, Red, Blue\". Filter will not work untill you don't assign the same TAG NAME to relavant products. Custom color name should be predefined in 'Custom Colors' section."
},
{
"type": "select",
"id": "color_size",
"label": "Swatch Size",
"default": "small",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "color_style",
"label": "Swatch Style",
"default": "rounded",
"options": [
{
"value": "rounded",
"label": "Rounded"
},
{
"value": "rectangle",
"label": "Square"
},
{
"value": "rounded_rectangle",
"label": "Rounded Rectangle"
}
]
}
]
},
{
"type": "products",
"name": "Products",
"limit": 1,
"settings": [
{
"type":"text",
"id":"title",
"label":"Title Text",
"default":"Popular Products"
},
{
"type": "collection",
"id": "sidebar_products",
"label": "Select Collection"
},
{
"type": "text",
"id": "num_of_products",
"label": "Number of products to show",
"default": "3"
},
{
"type": "checkbox",
"id": "side_all_products",
"label": "View all products button",
"default": false
},
{
"type": "text",
"id": "btn_txt",
"label": "Button Text",
"default": "View All"
},
{
"type": "select",
"id": "side_prod_opt",
"label": "Display Type",
"default": "slider",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "list",
"label": "List"
}
]
}
]
},
{
"type": "image_bnr",
"name": "Image Banner",
"settings": [
{
"type": "image_picker",
"id": "side_bnr_img",
"label": "Banner Image"
},
{
"type": "url",
"id": "side_bnr_link",
"label": "Banner"
}
]
},
{
"type": "static_text",
"name": "Static Text",
"settings": [
{
"type":"text",
"id":"title",
"label":"Title Text",
"default":"Static Block Title"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
}
]
},
{
"type": "slideshow",
"name": "Slideshow at content area",
"settings": [
{
"type": "paragraph",
"content": "Upload all the images of same size"
},
{
"type": "checkbox",
"id": "display_mobile",
"label": "Display Slideshow on Mobile",
"default": true
},
{
"type": "image_picker",
"id": "cat-bnr-1",
"label": "Banner 1"
},
{
"type": "url",
"id": "cat-bnr--url-1",
"label": "Banner 1 Url"
},
{
"type": "image_picker",
"id": "cat-bnr-2",
"label": "Banner 2"
},
{
"type": "url",
"id": "cat-bnr--url-2",
"label": "Banner 2 Url"
},
{
"type": "image_picker",
"id": "cat-bnr-3",
"label": "Banner 3"
},
{
"type": "url",
"id": "cat-bnr--url-3",
"label": "Banner 3 Url"
},
{
"type": "image_picker",
"id": "cat-bnr-4",
"label": "Banner 4"
},
{
"type": "url",
"id": "cat-bnr--url-4",
"label": "Banner 4 Url"
},
{
"type": "image_picker",
"id": "cat-bnr-5",
"label": "Banner 5"
},
{
"type": "url",
"id": "cat-bnr--url-5",
"label": "Banner 5 Url"
}
]
}
]
}
{% endschema %}