I was hoping I could use product.media.size to return an integer to be used in getting media by index.
Here is what I'm using now:
{% if product.media.size > 9 %}
<div style = "padding-bottom: 15px">
<div class="row">
<figure style = "margin: 0px">
<img class = "column" src="{{ product.media[8] | img_url: '500x500'}}">
</figure>
<figure style = "margin: 0px">
<img class = "column" src="{{ product.media[9] | img_url: '500x500'}}">
</figure>
</div>
<div class="row">
<img src="{{ product.media[10] | img_url: '1000x1000'}}">
</div>
</div>
{% endif %}
But I would like to do something like this if possible but its not working currently
{% if product.media.size > 9 %}
<div style = "padding-bottom: 15px">
<div class="row">
<figure style = "margin: 0px">
<img class = "column" src="{{ product.media[product.media.size-2] | img_url: '500x500'}}">
</figure>
<figure style = "margin: 0px">
<img class = "column" src="{{ product.media[product.media.size-1] | img_url: '500x500'}}">
</figure>
</div>
<div class="row">
<img src="{{ product.media[product.media.size] | img_url: '1000x1000'}}">
</div>
</div>
{% endif %}
In liquid the - sign isn't used to subtract numbers, you have to use the minus filter, here are the Liquid math filters.
I'm not sure that this {{ product.media[product.media.size | minus: 2] | img_url: '500x500'}} would work though.
So I assigned the numbers you wanted to variables, this should work:
{% if product.media.size > 9 %}
{% assign media_size = product.media.size %}
{% assign media_size_minus_2 = media_size | minus: 2 %}
{% assign media_size_minus_1 = media_size | minus: 1 %}
<div style = "padding-bottom: 15px">
<div class="row">
<figure style = "margin: 0px">
<img class = "column" src="{{ product.media[media_size_minus_2] | img_url: '500x500'}}">
</figure>
<figure style = "margin: 0px">
<img class = "column" src="{{ product.media[media_size_minus_1] | img_url: '500x500'}}">
</figure>
</div>
<div class="row">
<img src="{{ product.media[media_size] | img_url: '1000x1000'}}">
</div>
</div>
{% endif %}
Related
I Have a custom product grid for one of the brands I am selling that has 4 tabs to hover and the content is changing in every tab. When i try to create another grid, 2 of the tabs are not showing the pictures i've inserted. First tab that's not showing pictures
and 2 of the tabs are showing as needed.
Security section
The code is the same for both sections.
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'Switches')" id="defaultOpen">Switches</button>
<button class="tablinks" onmouseover="openCity(event, 'Routers')">Routers</button>
<button class="tablinks" onmouseover="openCity(event, 'Security')">Security</button>
<button class="tablinks" onmouseover="openCity(event, 'Wireless')">Wireless</button>
</div>
<script type="lazyload2">
// Get the element with id="defaultOpen" and click on it
setTimeout(function() { openCity(event, 'Switches'); document.getElementById('defaultOpen').className += " active"});
</script>
<div class="row tabcontent" id="Switches" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_1 }} col-sm-{{ section.settings.banner_col_1 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_1 != blank %}
{% assign img_banner_col_1 = section.settings.image_banner_col_1 | img_url: "master" %}
{% assign img_banner_col_1_alt = section.settings.image_banner_col_1_alt %}
{% else %}
{% assign img_banner_col_1 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_1 }}" alt="{{ img_banner_col_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_2}} col-sm-{{section.settings.banner_col_2}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_2_1 != blank %}
{% assign img_banner_col_2_1 = section.settings.image_banner_col_2_1 | img_url: "master" %}
{% assign img_banner_col_2_1_alt = section.settings.image_banner_col_2_1_alt %}
{% else %}
{% assign img_banner_col_2_1 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_1}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_2_2 != blank %}
{% assign img_banner_col_2_2 = section.settings.image_banner_col_2_2 | img_url: "master" %}
{% assign img_banner_col_2_2_alt = section.settings.image_banner_col_2_2_alt %}
{% else %}
{% assign img_banner_col_2_2 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_2 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_2}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_2_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_2 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-left:0px;">
{% if section.settings.image_banner_col_3 != blank %}
{% assign img_banner_col_3 = section.settings.image_banner_col_3 | img_url: "master" %}
{% assign img_banner_col_3_alt = section.settings.image_banner_col_3_alt %}
{% else %}
{% assign img_banner_col_3 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_3 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #dbe2e4); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_3}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_3_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_3 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
And this is the code i am using for other sections
<div class="row tabcontent" id="Security" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_7 }} col-sm-{{ section.settings.banner_col_7 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_7 != blank %}
{% assign img_banner_col_7 = section.settings.image_banner_col_7 | img_url: "master" %}
{% assign img_banner_col_7_alt = section.settings.image_banner_col_7_alt %}
{% else %}
{% assign img_banner_col_7 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_7 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_7 }}" alt="{{ img_banner_col_7_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_7 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_8}} col-sm-{{section.settings.banner_col_8}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_8 != blank %}
{% assign img_banner_col_8 = section.settings.image_banner_col_8 | img_url: "master" %}
{% assign img_banner_col_8_alt = section.settings.image_banner_col_8_alt %}
{% else %}
{% assign img_banner_col_8 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_8 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_8}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_8_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_8 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:0px;">
{% if section.settings.image_banner_col_9 != blank %}
{% assign img_banner_col_9 = section.settings.image_banner_col_9 | img_url: "master" %}
{% assign img_banner_col_9_alt = section.settings.image_banner_col_9_alt %}
{% else %}
{% assign img_banner_col_9 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_9 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_9}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_9_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_9 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_10 != blank %}
{% assign img_banner_col_10 = section.settings.image_banner_col_10 | img_url: "master" %}
{% assign img_banner_col_10_alt = section.settings.image_banner_col_10_alt %}
{% else %}
{% assign img_banner_col_10 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_10 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_10}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_10_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_10 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
What is the mistake i am making here?
I've tried copying the working grids code and edited from there. Still the same. Can't see banner parts.
I have a slideshow on my homepage on my shopify website. I have been given a task to add a class on each slide of the slideshow for google tag manager tracking on the anchor tag inside the "swiper-slide" div. I want to add the class based on the number of slides available. For example, for the first slide I want to add the class of "banner1", for 2nd slide "banner2" and so on. I tried the following:
<a href="{{ block.settings.button_link}}" class="full-width-link banner{{forloop.index}}" ></a>
but I end up having just "banner1" for all the slides.
<!-- Slider main container -->
<div class="main-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
{% assign banner_index = forloop.index %}
<!-- Slides -->
<div class="swiper-slide">
<a href="{{ block.settings.button_link}}" class="full-width-link " ></a>
<!--<img src="{{ block.settings.image | img_url: 'master'}}" class="img-responsive banner-img small--hide">
<img src="{{ block.settings.mobimage | img_url: 'master' }}" class="img-responsive banner-img medium-up--hide">-->
<picture>
<source media="(min-width:750px)" srcset="{{ block.settings.image | img_url: '1600x'}}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload" >
<img data-src="{{ block.settings.mobimage | img_url: '400x' }}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload">
</picture>
{% comment %}
<div class="sticky--shop-box">
<div class="slider--content setu-flex setu-direction-column height_100p">
<p>{{ block.settings.subheading}}</p>
<h1>{{ block.settings.slide_title}}</h1>
{% if block.settings.button_label != blank %}
<div class="hide shop-button--wrapper">
{{ block.settings.button_label}}
</div>
{% endif %}
</div>
</div>
{% endcomment %}
</div>
{%- endfor -%}
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
This works for me
{%- for block in section.blocks -%}
<div class="swiper-slide-{{ forloop.index }}">
</div>
{%- endfor -%}
I have created a template and under that, I am assigning 5 categories of blogs but it isn't sorting them all, it is sorting them one by one. can anyone help me with this?
{% assign blog_handles = "skin-care,hair-care,foot-care,sun-care,learn" | split: ","| sort:'published_at' %}
{% for handle in blog_handles %}
{% for article in blogs[handle].articles limit: %}
<div class="blog-articles__article article">
<div class="card-wrapper underline-links-hover">
<div class="card article-card card--card article-card__image--medium card--media color-background-1" style="--ratio-percent: 52.33333333333333%;">
<div class="card__inner ratio" style="--ratio-percent: 52.33333333333333%;">
<div class="article-card__image-wrapper card__media">
<div class="article-card__image media media--hover-effect">
<img
srcset="{{ article.image.src | img_url: '533x' }}"
src="{{ article.image.src | img_url: '533x' }}"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
loading="lazy">
</div>
</div>
</div>
<div class="card__content">
<div class="card__information">
<h3 class="card__heading h2">
<a href="{{ article.url }}" class="full-unstyled-link">
{{ article.title | truncate: 50 | escape }}
</a>
</h3>
<div class="article-card__info caption-with-letter-spacing h5">
<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>
</div>
<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
Thanks in Advance!
The sort filter should be applied to your loop object which contains the published_at info (your handle list doesn't).
Something like that (not tested) should work:
{% assign articles = blogs[handle].articles | sort:'published_at' %}
{% for article in articles %}
Do something
{% endfor %}
it shows only even image in slider odd images are hidden
0
I've assigned a variable in liquid and made odd and even classes I need one even and one odd in the image block class
was looking for the syntax on Google/Shopify cheatsheet/liquid Github wiki and can't seem to find anything that works
is this possible?
i was trying
{% for media in product.media %}
{% assign mod = forloop.index | modulo: 2 %}
<div class="image-block">
{%if mod == 0 %}
<div class="even">
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class=" product-single__thumbnail--{{ section.id }} even count-{{forloop.index}}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"> <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: 'large', scale: 2 }}" alt="{{ thumbnailAlt }}"></a>
</div>
{%endif%}
{% for media in product.media %}
{% assign mod2 = forloop.index | modulo: 2 %}
{%if mod2 != 0 %}
<div class="odd">
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class=" product-single__thumbnail--{{ section.id }} odd count-{{forloop.index}}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"> <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: 'large', scale: 2 }}" alt="{{ thumbnailAlt }}"></a>
</div>
{% break %}
{%endif%}
{% endfor %}
</div>
{% endfor %}
</div>[enter image description here][1]
Simply use the same as into snapshot on the desired element where you want to apply the class using cycle.
<div class="col px-2 px-lg-3 pb-3 pb-lg-4 {% cycle 'even','odd' %}">
and add the class on the front end like it.
Let me know if the same clears your doubts regarding it?
update in to your code:
{% for media in product.media %}
<div class="image-block">
<div class="{% cycle 'even','odd' %}">
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class=" product-single__thumbnail--{{ section.id }} even count-{{forloop.index}}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"> <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: 'large', scale: 2 }}" alt="{{ thumbnailAlt }}">
</a>
</div>
</div>
{% endfor %}
UPDATE
Ok I know what the problem is, but not how to solve it.
vendor:cow horn OR title:cow horn doesn't work
title:cow horn OR vendor:cow horn does.
Spaces are causing the additional prefixes to break where "OR" isn't properly working in my search results.
vendor:cow OR title:cow works
But the moment I put a space in the search then the title won't be searched.
I have a search bar, and I set it to search for an items tag, vendor & title.
Problem is this code prevents me from being able to use spaces in my search term, and if I append "*" I'm unable to use ampersands. Here's the code.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="original" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="original"]').val();
$('.searchtext').val("vendor:"+searchtext+" OR tag:"+searchtext+" OR title:"+searchtext);
});
</script>
If you need to see the search.liquid here it is.
<div id="impact-grid-header" class="collections-page">
<h1 id="regular-title">Search Results for: "{{ search.terms[1] | replace: 'vendor:', '' | replace: 'tag:', '' | replace: 'title:', '' | replace: '*', '' | strip | escape}}"</h1>
</div>
<div id="product-content" class="full-bleed">
<div class="content">
{% paginate search.results by 20 %}
<!-- Begin collection info -->
<div class="row">
<!-- End sort collection -->
<div class="column inventory-items">
{% include 'search-bar' %}
<div id="inventory" class="span12 content-grid">
<!-- Begin no products -->
{% if search.results.size == 0 %}
<div class="row">
<div class="span12 expanded-message">
<p>That's a great idea but unfortunately we don't have that item.<br/>Try again?</p>
</div>
</div>
{% endif %}
<div class="row products">
{% for item in search.results limit: settings.pagination_limit %}
{% if item.variants.first.inventory_quantity >= 0 %}
<div class="item product" data-tags="{% for tag in item.tags %}{{ tag | downcase }}, {% endfor %}">
<a href="{{ item.url }}">
<div class="product-pic">
<div class="inner-pic">
<img src="{{ item.featured_image | product_img_url: 'large' }}" alt="{{ item.title | escape }}"/>
</div>
<!-- Box that appears upon hover -->
<div class="view-product bg-black">
<i class="icon-search"></i>
<span>View</span>
</div>
</div>
</a>
<div class="description">
<span class="product-name">{{ item.title }}</span>
<span class="brand">{{ item.vendor }}</span>
<span class="price">
{% if item.available %}
{% if item.compare_at_price_max > item.price %}
<del>{{ item.compare_at_price | money }}</del>
{% endif %}
{% if item.price_varies %}
<em>from</em>
{% endif %}
<span>{{ item.price | money }}</span>
{% else %}
<span>
{{ item.price | money }} Sold Out
</span>
{% endif %}
</span>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% include 'pagination' %}
{% endpaginate %}
<!-- End no products -->
</div>
</div>
</div>
</div>