In a twig template showing a list of item names I use
{% for item in selection %}
<div>{{ item.name }}</div>
{% if loop.index % 4 == 0 %}
<div class="xyz">
<p>Content</p>
</div>
{% endif %}
{% endfor %}
to add a div after every 4th item. Is there a way to show a second div after every 4th item starting with the position "after #2"? So in the end I get the two divs alternating after every second item?
It's far easier to use the filter batch to create repeating structures in twig.
The following snippet will group the items by two, making it easier to alternate the extra div you want
{% for values in items|batch(2) %}
{% for value in values %}
<div>{{ value }}</div>
{% endfor %}
{% if loop.index0 is even %}
<div class="xyz">Div 1</div>
{% else %}
<div class="xyz">Div 2</div>
{% endif %}
{% endfor %}
demo
Related
Shopify Render some HTML only if the product has a certain tag
THE Problem is if the tag is 2 times it duplicates
if i hvae 'new' and 'new 1'
how to limit to show 1-time per page
{% for tag in product.tags %}
{% if tag contains 'new' %}
<div class="new-tag new-tag--absolute"> NEW </div>
{% endif %}
{% endfor %}
Use {% break %} to exit a for loop. Once you've discovered one 'new' tag, you can exit your loop.
{% for tag in product.tags %}
{% if tag contains 'new' %}
<div class="new-tag new-tag--absolute"> NEW </div>
{% break %}
{% endif %}
{% endfor %}
On the desktop version of our site, we have a 3 column section (the theme calls is text-adverts) with one about pickup, one about delivery, one about shipping. On mobile, it automatically converts to a flexslider with no arrows or really any way of knowing to swipe unless you watch it long enough. I'd much rather just have the 3 stacked so no users miss this critical info.
I've found the code dealing with the text-adverts on mobile but I don't know what to replace it with. Any help is much appreciated.
<div class="container d-block d-md-none">
<div class="row text-advert-section mobile-homepage-text-adverts flexslider text-adverts-alignment--{{ text-advert--alignment }}">
<ul class="slides">
{% for block in section.blocks %}
{%- assign advert_has_link = false -%}
{% if block.settings.link != blank %}
{%- assign advert_has_link = true -%}
{% endif %}
<li {{ block.shopify_attributes }}>
<div class="grid__item text-advert-section__item{% if advert_has_link %} text-advert-section__item--link{% endif %}">
{% if advert_has_link %}<a href="{{ block.settings.link }}">{% endif %}
{% if block.settings.icon != 'none' %}
<div class="text-advert-section__icon-wrapper {{ section.settings.icon-size }}">
<i data-feather="{{ block.settings.icon }}"></i>
</div>
{% endif %}
<div class="text-advert-section__text-wrapper">
{% if block.settings.heading != blank %}
<span class="text-advert-section__header type-subheading type-subheading--1">{{ block.settings.heading | escape }}</span>
{% endif %}
{% if block.settings.subheading != blank %}
<span class="text-advert-section__sub-header h6">{{ block.settings.subheading | escape }}</span>
{% endif %}
</div>
{% if advert_has_link %}</a>{% endif %}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
The flexslider is being initialised by javascript. So you need to find the script that initialises the slider. Most likely it will look something like this: $('.flexslider').flexslider({})
You should also remove the flexslider class from the div with class text-advert-section - because it shouldn't utilise any flexslider code.
having trouble with this code.
What i want do is:
if products is already in cart >
show a 'view cart' button once.
else
show add cart btn once
it does but it prints like if quantity of single product (comes in looping) is 5 so its repeats the add to cart btn 5 times.
anyway here my code:
{% for product in collections[collection_].products %}
<div class="single-product">
<div class="single-product-image"><img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}"></div>
<div class="single-product-details">
<h3>{{ product.title }}</h3>
<div class="product-price">
<span class="new-price">{{ product.price | money }}</span>
</div>
</div>
<div class="single-product-action">
{% for item in cart.items %}
{% if item.product.id == product.id %}
View Cart
{% else %}
{% assign not_in_cart = true %}
{% endif %}
{% endfor %}
{% if not_in_cart %}
Add to Cart btn
{% endif %}
</div>
</div>
{% endfor %}
i need it output:
view cart btn once if products is in cart
or
add to cart btn if product is not in cart
Thanks
You should change your logic slightly.
{% assign not_in_cart = true %}
{% for item in cart.items %}
{% if item.product.id == product.id %}
{% assign not_in_cart = false %}
{% break %}
{% endif %}
{% endfor %}
{% if not_in_cart %}
View Cart
{% else %}
Add to Cart btn
{% endif %}
We set the default value for the not_in_cart to be false -> {% assign not_in_cart = true %}
After that we look in the cart items if the items is present, if it is we overwrite the variable to true and break from the loop. ( the break is not required, but no point of looping if we already know it's present )
And after that we just create an if statement to check if the not_in_cart is true or not.
I hope someone may be able to help with this.
I am currently setting up my store with shopify and have duplicated my products for retail and wholesale customers.
The only issue I am faced with is that the retail products are still showing when a customer with the 'wholesale' tag uses the search box.
I was wondering if I add a 'retail' tag to the relevant products, can add any code in search.liquid so that if the customer.tag contains 'wholesale' do not show products with product.tags 'retail' or something along those lines?
My current search.liquid looks like:
<!-- /templates/search.liquid -->
{% comment %}
To return only products or pages in results:
- http://docs.shopify.com/manual/configuration/store-customization/return-only-product-in-storefront-search-results
- Or manually add type=product or type=page to the search URL as a parameter
{% endcomment %}
{% comment %}
Check to enforce respond.js
{% endcomment %}
{% assign respond_js_secret_key = shop.domain | md5 %}
{% unless search.terms == respond_js_secret_key %}
{% comment %}
Avoid accessing search.results before the opening paginate tag.
If you do, the pagination of results will be broken.
{% endcomment %}
{% paginate search.results by 12 %}
<div class="grid">
<div class="grid__item">
<header class="section-header text-center">
{% if search.performed %}
{% if search.results_count == 0 %}
<h1 class="text-center">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
{% else %}
<h1 class="text-center">{{ 'general.search.results_for_html' | t: terms: search.terms }}</h1>
{% endif %}
{% else %}
<h1 class="text-center">{{ 'general.search.title' | t }}</h1>
{% endif %}
<hr class="hr--small">
</header>
{% include 'search-bar', search_btn_style: 'btn', search_bar_location: 'search-bar--page' %}
{% if search.performed %}
<hr class="hr--medium hr--clear">
<div class="grid-uniform">
{% for item in search.results %}
{% assign itemIswholesale = false %}
{% if item.tags contains 'wholesale' or item.title contains 'wholesale' %}
{% assign itemIswholesale = true %}
{% endif %}
{% if itemIswholesale and customer and customer.tags contains 'wholesale' %}
{% if item.object_type == 'product' %}
{% assign product = item %}
{% include 'product-grid-item' %}
{% else %}
<div>
<div>
<a href="{{ item.url }}">
<span>
<span>{{ item.title }}</span>
{{ item.content | strip_html | truncatewords: 60 }}
</span>
</a>
</div>
</div>
{% endif %}
{% else %}
{% unless itemIswholesale %}
{% if item.object_type == 'product' %}
{% assign product = item %}
{% include 'product-grid-item' %}
{% else %}
<div>
<div>
<a href="{{ item.url }}">
<span>
<span>{{ item.title }}</span>
{{ item.content | strip_html | truncatewords: 60 }}
</span>
</a>
</div>
</div>
{% endif %}
{% endunless %}
{% endif %}
{% endfor %}
</div>
{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
{% endif %}
</div>
</div>
{% endpaginate %}
{% else %}
{% include 'respond' %}
{% layout none %}
{% endunless %}
I am a complete novice and have managed to get by this far following help and tutorials online so any help would be very much appreciated.
I can't afford to subscribe to an additional app at present, such as locksmith and would really like to keep control so I can continue administration in future,
Thanks in advance,
You may try doing something like that inside the
{% if search.performed %}
condition.
First get some information about user and store it:
{% assign wholesale = false %}
{% if customer %}
{% assign customer_tags = customer.tags | split: "," %}
{% if customer_tags contains 'wholesale' %}
{% assign wholesale = true %}
{% endif %}
{% endif %}
Explanations : first you assign a false statement to the wholesale status. Then you check if it is customer ( no need to go further if user is not connected). If he is, then you check if he has a wholesale tag. If he is you assign a true statement.
Then you are able to display something different this way:
{% for result in search.results %}
{% if wholesale %}
Do something
{% else %}
Do something else
{% endif %}
{% endfor %}
Please not that you may have some issues with pagination.
This is for a Shopify site. Is there a way to display only certain line item properties in the cart? I have several and it looks messy so only want to display a chosen two or three.
I am assuming you have set up your line item properties similar to how it suggests on the Shopify wiki (Line Item Properties).
You will have something like this in product.liquid:
<div>
<p><label for="property1">Property 1:</label></p>
<p><input type="text" id="property1" name="properties[Property1]" /></p>
</div>
Then put this code in cart.liquid, beneath the cart item's title:
{% for p in item.properties %}
{% if p.first == 'Property2' or p.first == 'Property5' %}
{% unless p.last == blank %}
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
<br />
{% endunless %}
{% endif %}
{% endfor %}
The code above is straight from the Line Item Properties article on the Shopify wiki (section 3.1 Displaying line item properties on the cart page). I've just added the if statement on the second line to only display the properties I want:
{% for p in item.properties %}
{% if p.first == 'Property2' or p.first == 'Property5' %}
...
{% endif %}
{% endfor %}
Or, if you want to display several properties in a row (e.g. the first 3 properties), you could do it like this (without the if statement):
{% for p in item.properties limit:3 %}
...
{% endfor %}