Shapes Sun Marni

{% if page.handle == 'apparel-accessories' %}
{% else %}
<div class="w-100 text-center filter-famiglia">
<span class="element all">All,</span>
<span class="element icons">Icons,</span>
<span class="element round">Round,</span>
<span class="element square">Square,</span>
<span class="element mask">Mask,</span>
<span class="element cateye">Cat eye,</span>
<span class="element aviator">Aviator</span>
</div>
<style>
.col-6.col-md-4.col-lg-3:last-child {
height:500px;
}
</style>
{% endif %}
{% comment %}
Collections are listed here.
{% endcomment %}

{% assign image_size = '1200x818' %}

{% if linklists[page.handle].links.size > 0 %}

{% assign number_of_links = 0 %}
<div class="row" style="background-color: #000">
<div style="display:none">PAGE HANDLE: {{ page.handle }}</div>

{% 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="col-6 col-md-4 col-lg-3 product-grid-col"
data-value=" {{ collection.tags }} ">
<div class="product-grid-item">
<p class="collection-grid__item-title">
<a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
</p>
<a href="{{ link.url }}" class="d-flex h-100 align-items-center collection-grid__image">
{% 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>
</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="col-6 col-md-4 col-lg-3">
<a href="{{ link.url }}" class="collection-item__title">
<div class="grid__image product-grid-image">
<p class="collection-grid__item-title" style="position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);color: #fff">
{{ link.title }}
</p>
</div>
</a>
</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 %}

.template-page-shapes .grid__item.visible {
display: block !important;
}

.template-page-shapes .noborder {
border-right: 0 !important;
}
</style>

$(".all").addClass('active');

$(".icons").click(function () {
$(".all, .new, .round, .square, .mask, .cateye, .aviator").removeClass('active');
$(".icons").addClass('active');
$(".product-grid-col").addClass('d-none');
$("[data-value*='Marni-Icons']").removeClass('d-none');
});

$(".new").click(function () {
$(".all, .icons, .round, .square, .mask, .cateye, .aviator").removeClass('active');
$(".new").addClass('active');
$(".product-grid-col").addClass('d-none');
$("[data-value*='Marni-Newarrival']").removeClass('d-none');
});

$(".round").click(function () {
$(".all, .new, .icons, .square, .mask, .cateye, .aviator").removeClass('active');
$(".round").addClass('active');
$(".product-grid-col").addClass('d-none');
$("[data-value*='Marni-Round']").removeClass('d-none');
});

$(".square").click(function () {
$(".all, .new, .icons, .round, .mask, .cateye, .aviator").removeClass('active');
$(".square").addClass('active');
$(".product-grid-col").addClass('d-none');
$("[data-value*='Marni-Square']").removeClass('d-none');
});

$(".mask").click(function () {
$(".all, .new, .icons, .round, .square, .cateye, .aviator").removeClass('active');
$(".mask").addClass('active');
$(".product-grid-col").addClass('d-none');
$("[data-value*='Marni-Mask']").removeClass('d-none');
});

$(".cateye").click(function () {
$(".all, .new, .icons, .round, .square, .mask, .aviator").removeClass('active');
$(".cateye").addClass('active');
$(".product-grid-col").addClass('d-none');
$("[data-value*='Marni-Cat']").removeClass('d-none');
});

$(".aviator").click(function () {
$(".all, .new, .icons, .round, .square, .mask, .cateye").removeClass('active');
$(".aviator").addClass('active');
$(".product-grid-col").addClass('d-none');
$("[data-value*='Marni-Aviator']").removeClass('d-none');
});

$(".all").click(function () {
$(".new, .icons, .round, .square, .mask, .cateye, .aviator").removeClass('active');
$(".all").addClass('active');
$(".product-grid-col").removeClass('d-none');
});
});
</script>