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 -%}
Related
I have a problem with the visibility of description of ARTICLES in block's post, they are showing other content but not the first paragraph of the article, as it supposed to do.
print screen
here is the code (just the part of the BLOG)
<div class="lp-section blog-section">
<h2>
Blog
</h2>
<ul>
{% set rec_posts = blog_recent_posts("default", 3) %}
{% for rec_post in rec_posts %}
<li>
<div class="lp-block">
{% if rec_post.featured_image %}
<a class="resource__post-image"
alt="{{ rec_post.featured_image_alt_text }}"
style="background-image: url('{{ rec_post.featured_image }}');"
href="{{ rec_post.absolute_url }}">
</a>
{% endif %}
{% set featured_tag = rec_post.topic_list | first %}
{% if featured_tag %}
<div class="content content-description">
<div>
<span class="keyword">{{ featured_tag }}</span>
{% endif %}
<h3>{{ rec_post.name }}</h3>
<p class="description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(150, '...', false) }}</p>
</div>
<div>
<a class="ghost-cta" href="{{ rec_post.absolute_url }}">
Read more
</a>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<a class="link" href="https://ai.reportlinker.com/en/resources/blog">+ More articles </a>
</div>
Could somebody please help me please?
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 %}
How do I wrap my products in a new <div class="row"></div> after every 3rd product? I have looked at using the cycle iteration tag but can't quite figure out how to implement properly in my code.
{% for product in collection.products %}
<!-- product -->
<div class="col-xs-6 col-md-4 product">
<!-- / product-link -->
<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="">
<!-- / product-image -->
<!-- product-details -->
<div class="product-details">
<h3 class="product-title">{{product.title}}</h3>
<h6 class="product-price"> {{ product.price | money }}</h6>
</div><!-- / product-details -->
</div><!-- / product -->
{% endfor %}
You might use a modulo calculation applied on forloop.index then apply an if statement according to modulo result.
{% assign modulo = forloop.index | modulo : 3 %}
{% if modulo == 0 %}
<div class=«row»>
{% endif %}
https://help.shopify.com/themes/liquid/filters/math-filters#modulo
Worked it out, if there are any better ways/suggestions I would be happy to hear them :)
{% for product in collection.products %}
{% cycle '<div class="row">','','' %}
<!-- product -->
<div class="col-xs-6 col-md-4 product">
<!-- / product-link -->
<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="">
<!-- / product-image -->
<!-- product-details -->
<div class="product-details">
<h3 class="product-title">{{product.title}}</h3>
<h6 class="product-price"> {{ product.price | money }}</h6>
</div><!-- / product-details -->
</div><!-- / product -->
{% cycle '','','</div>' %}
{% endfor %}
I'm currently working on a Shopify theme, I have a list of all products, I've filtered them to only show anything with the following tag 'Neoprene' - how do I not limit the tagged product to only show 4?
Any help would be grateful!
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% for product in collections.all.products limit: 9999 %}
{% if product.tags contains 'Neoprene' %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% assign a = 0 %}
{% for product in collections.all.products limit: 9999 %}
{% if a == 4 %}
{% break %}
{% else %}
{% if product.tags contains 'Neoprene' %}
{% assign a = a | plus : 1 %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>
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>