Forked from carolineschnapp/page.list-collections.liquid
Last active
June 7, 2021 14:51
-
-
Save jonathanmoore/f56808c020020dbefa008687fa798d56 to your computer and use it in GitHub Desktop.
Use entire file for the contents of page.list-collections.liquid. This specific version of the file was created to work with the premium Shopify theme District. Follow the guide at https://help.shopify.com/themes/customization/collections/featuring-collections-using-link-lists
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- /templates/page.liquid --> | |
<section class="page page-top"> | |
<div class="wrapper"> | |
<header class="content-util"> | |
{% include 'breadcrumb' %} | |
{% include 'social-icons' %} | |
</header> | |
<header class="page-header"> | |
<h1>{{ page.title }}</h1> | |
</header> | |
</div> | |
</section> | |
<section class="page"> | |
<div class="wrapper"> | |
<div class="content-container narrow rte"> | |
{{ page.content }} | |
</div> | |
<div class="featured-grid content-container rte"> | |
{% comment %} | |
Collections are listed here. | |
{% endcomment %} | |
{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %} | |
{% if uses_minimal_framework contains 'Liquid error' %} | |
{% assign uses_minimal_framework = false %} | |
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half large--col-3 medium--col-4 small--col-6' %} | |
{% else %} | |
{% assign uses_minimal_framework = true %} | |
{% assign grid_item_width = 'span3' %} | |
{% endif %} | |
{% assign image_size = '720x' %} | |
{% if linklists[page.handle].links.size > 0 %} | |
{% assign number_of_links = 0 %} | |
<div class="row row-3 grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix"> | |
{% for link in linklists[page.handle].links %} | |
{% if link.type == 'collection_link' %} | |
{% comment %} | |
If we have a collection link. | |
{% endcomment %} | |
{% assign collection = link.object %} | |
{% assign number_of_links = number_of_links | plus: 1 %} | |
<div class="box grid__item grid-item product-grid-item {{ grid_item_width }} text-center"> | |
<div class="grid__image product-grid-image"> | |
<a href="{{ link.url }}" class="grid-image--centered"> | |
{% comment %} | |
Bring in the featured image of the first product in the collection if no collection | |
image has been uploaded for it. | |
{% endcomment %} | |
{% if collection.image %} | |
<img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}"> | |
{% else %} | |
{% assign product = collection.products.first %} | |
<img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}"> | |
{% endif %} | |
</a> | |
</div> | |
<figcaption class="below"> | |
<h3><a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a></h3> | |
</figcaption> | |
</div> | |
{% if uses_minimal_framework %} | |
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %} | |
{% endif %} | |
{% elsif link.type == 'page_link' %} | |
{% comment %} | |
If we have a page link. | |
{% endcomment %} | |
{% assign number_of_links = number_of_links | plus: 1 %} | |
{% assign linked_page = link.object %} | |
{% assign have_image = false %} | |
{% comment %} | |
Does the page contain an image? If so, let's use it. | |
{% endcomment %} | |
{% if linked_page.content contains '<img' %} | |
{% assign have_image = true %} | |
{% assign src = linked_page.content | split: 'src="' %} | |
{% assign src = src[1] | split: '"' | first %} | |
{% capture image_suffix %}_{{ image_size }}.{% endcapture %} | |
{% assign src = src | replace: '_small.', image_suffix | replace: '_compact.', image_suffix | replace: '_medium.', image_suffix | replace: '_large.', image_suffix | replace: '_grande.', image_suffix %} | |
{% comment %} | |
If the page contains no image, and that page features collections, let's grab the image of the first | |
collection on it. | |
{% endcomment %} | |
{% elsif linklists[linked_page.handle].links.size > 0 and linklists[linked_page.handle].links.first.type == 'collection_link' %} | |
{% assign have_image = true %} | |
{% assign collection = linklists[linked_page.handle].links.first.object %} | |
{% if collection.image %} | |
{% assign src = collection | img_url: image_size %} | |
{% else %} | |
{% assign src = collection.products.first | img_url: image_size %} | |
{% endif %} | |
{% endif %} | |
<div class="box grid__item grid-item product-grid-item {{ grid_item_width }} text-center"> | |
<div class="grid-image product-grid-image"> | |
<a href="{{ link.url }}" class="grid-image--centered"> | |
{% if have_image %} | |
<img src="{{ src }}" alt="{{ link.title | escape }}" /> | |
{% else %} | |
<img src="{{ link.title | handle | append: '_' | append: image_size | append: '.png' | file_url }}" alt="{{ link.title | escape }}" /> | |
{% endif %} | |
</a> | |
</div> | |
<figcaption class="below"> | |
<h3><a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a></h3> | |
</figcaption> | |
</div> | |
{% if uses_minimal_framework %} | |
{% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %} | |
{% endif %} | |
{% endif %} | |
{% endfor %} | |
</div> | |
{% if number_of_links == 0 %} | |
<div class="grid"> | |
<div class="grid__item grid-item rte text-center"> | |
<p> | |
There are no links of type <i>Collection</i> in your <b>{{ page.title }}</b> link list. | |
Go ahead and <a href="/admin/link_lists/{{ linklists[page.handle].id }}" target="_blank">edit your link list</a> to use links that point to collections. | |
</p> | |
</div> | |
</div> | |
{% endif %} | |
{% else %} | |
<div class="grid"> | |
<div class="grid__item grid-item rte text-center"> | |
<p> | |
You do not have a link list with a handle set to <kbd>{{ page.handle }}</kbd>, or you do and it's empty. | |
Go ahead and create a link list called <b>{{ page.title }}</b> on your <a href="/admin/links" target="_blank">Navigation page</a> and populate that link list with links that point to collections, to see collections listed here. | |
Make sure the link list also has a handle set to <kbd>{{ page.handle }}</kbd>. | |
</p> | |
</div> | |
</div> | |
{% endif %} | |
<style> | |
kbd { | |
background-color: #FBFBE4; | |
padding: 1px 4px; | |
border-radius: 3px; | |
} | |
</style> | |
</div> | |
</div> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment