For example passing in a snippet
{% include 'icon-top', classes:'back-to-top__icon' %}
I can pass the class back-to-top__icon into icon-top snippet
<svg class="icon {{ classes }}" somesvg stuff here ></svg>
Doing the same with a section doesn't work - is there any way to do this in liquid?
Sections doesn't accept anything outside of the section file. You can look the section like a closed platform nothing comes inside or outside of the section.
The means that variables created outside/inside the section are not accessible inside/outside of it.
That said you can hack it slightly to achieve what you want.
For example:
The section file:
test.section.liquid
The section file code:
<div class="{{dummy_class}}"></div>
Then you call the section this way:
<div style="display: none;">
{% section 'test.section' %}
</div>
{% capture section_capture %}
{% section 'test.section' %}
{% endcapture %}
{{ section_capture | replace: '{{dummy_class}}', 'back-to-top__icon' }}
Clarification
You might be asking why are we calling the section two times?
When we call the section in a {% capture %} tag it's not shown in the admin panel that's why are showing it in a hidden div only to show it in the admin and we don't do anything else with it.
After that we capture the section in a variable section_capture, this will return the content of section and we can replace anything we want in there.
That's why we added this {{dummy_class}} dummy variable. It's wrapped in liquid but you can treat it as text and not liquid, so we can write it like so #dummy_class# as well.
After that we just target that string and replace it {{ section_capture | replace: '{{dummy_class}}', 'back-to-top__icon' }}
Related
Using craft CMS I am adding an option to be able to hide a section from a PDF.
The PDF is created using PHP and a library called Snappy.
The light-switch is turned off (0) by default.
I have added the conditional statement and the light-switch, tested by wrapping other sections of the site (not part of the PDF) inside the if condition.
When turning the light-switch on and off I am able to hide and show sections.
The PDF does not seem to be working that way. The section is always hidden even when the light-switch is turned on.
I don't understand how the backend of the PDF works so is it something to do with how PDFs are generated?
Also it's showing blank pages where the content "would" be which is not desired.
//====Master PDF layout
{% extends 'abc/pdf/_base.html' %}
{% block content %}
{% include 'abc/pdf/_section1.html' %}
{% include 'abc/pdf/_section2.html' %}
{% include 'abc/pdf/_section3.html' %}
{% include 'abc/pdf/_section4.html' %}
{% include 'abc/pdf/_section5.html' %}
{% endblock %}
//==== Section with condition (abc/pdf/_section4.html)
{% if (entry.showsection4 is defined and entry.showsection4) and dateRanges | length %}
<div class="page">
<div class="page__inner">
A bunch of content in section 4 that I want to hide and show
</div>
</div>
{% endif %}
Is it possible to assign a variable and use that variable in the for loop statement?
I'm trying to place a collection of products in a blog without having to create a new for loop for each article that needs a collection.
What I've done is using the article's tags and splitting just before the collection handle so I can inject it in the for loop, but it's not quite working dynamically yet...
Here's what I've done.. I added in the article tags
collection_some-page-handle
Then in the article.liquid
{% for tag in article.tags %}
{% assign tagMap = tag | split: '_' %}
{% if tagMap.first == 'collection' %}
{% assign collectionName = tagMap.last %}
{% endif %}
{% endfor %}
{{collectionName}} <!-- this shows the handle of the collection -->
{% for product in collections.collectionName.products limit: 8%}
<div class="productWrap">
<img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="">
<p class="product_title" style="border-top:1px solid #efefef;">{{ product.title | split: ' - ' | first }}</p>
</div>
{%endfor%}
Now if i try to put the variable in the for loop it doesnt work, but of course if i put the actual handle it works. Is there a way to do it dynamically?
Instead of using collections.collectionName use collections[collectionName].
This should fix your issue if your variable has the proper handle indeed.
To clarify when you use collections.collectionName you say - "Get me a collection that have handle collectionName`.
When you use collections[collectionName] you say - "Get me a collection using the variable collectionName as a handle."
I want to build something like this:
{% my_liquid_template "some parameter" %}
However I want it to also accept this:
{% my_liquid_template "{{ site.url }}/feed.rss" %}
The first one is easy. The second one just does not parse {{ site.url }}. How can I do that?
This is not about writing a liquid template plugin. I now how to do that. However I would like to pass the liquid template "{{ site.url }}/feed.rss" as a parameter.
I do not want to append the site.url in the liquid template code, because this will break {% my_liquid_template "some parameter" %}.
Even this does not work
{% my_liquid_template site.url %}
You can't nest tags in Liquid markup.
You could assign the variable then use it further down, for example:
{% assign my_site = site.url %}
{{ my_liquid_template my_site}}
on shopify, i want a line of code of code from theme.liquid to show only on collection pages regardless the template used (i have a few custom collection templates). how do i write the code to do this?
currently i'm using.
{% if template == 'collection.home' %}
<div class="filter_btn">
loremipsum
</div>
{% endif %}
{% if template == 'collection.featured' %}
<div class="filter_btn">
loremipsum
</div>
{% endif %}
similar duplicate of code above for other collection template
i will be adding new collections with new custom templates in the future, but that means i have to duplicate more of the same to cover new collection templates..
how can i have a line of code that covers all collection templates / collection pages
Use the contains operator instead:
{% if template contains 'collection' %}
I am likely a collection template
{% endif %}
See more about contains here:
http://docs.shopify.com/themes/liquid-documentation/basics/operators#contains
Hello Shopify Developers.
I'm a newbie on Shopify. I want to build a menu just like http://www.nastygal.com/. It shows menu items and featured products in menu area.
Would you give me a suggestion how to make a menu like this?
I'm not sure this is the best idea, though I think that I can create special collections to assign menus. I want to add a custom field in collection page to assign category to special menu. I noticed that I may use meta-fields for this but not sure.
How to add meta-fields to description fields in collection admin page?
How to get values from meta-fields in front page?
I'm open for suggestions, please teach me.
Best regards, Lorant.
I'd say there was a couple of steps to making this work, but it shouldn't be hard.
Create a collection that contains the products in it that you would like to show in the menu.
In your navigation link list create a link that points to collection you want to show in the menu. Call it something like show-products.
The menu liquid would look something like this:
{% assign linklist = linklists.main-menu %}
{% for link in linklist %}
{% if link.title == 'show-products' and link.type == 'collection_link' %}
{% assign menu_collection = link.object %}
{% for menu_product in menu_collection.products %}
{{ menu_product.featured_image | product_img_url: 'compact' | img_tag: menu_product.title }}
{{ menu_product.title }}
{% endfor %}
{% else %}
{% include 'my-normal-menu-link' with link %}
{% endif %}
{% endfor %}
Note: this code is untested, but I don't see why it wouldn't work.