I'm diving into the static site generators and trying to build a blog out using the basic eleventy blog:
https://github.com/11ty/eleventy-base-blog
So far, everything is good, but I'm wondering how to go about to get it to show the latest post on the home/index page.
Right out of the box, it will show the 3 latest links to the posts using nunjucks:
{% set postslist = collections.posts | head(-3) %}
{% set postslistCounter = collections.posts | length %}
{% include "postslist.njk" %}
But what I'm wondering how to get the latest markdown post from the posts directory and see if it can pull that to render.
I am thinking that there's got to be a way to check the date within nunjucks like this (I know this is wrong, but trying to get an idea):
{% if post.date = currdate %}
{% include "posts.njk" %}
{% endif %}
Anyways, I know it's possible, but I'm still trying to learn and looking to get pointed in the right direction.
I think this could work for you:
{% set postslist = collections.posts | head(-3) %}
<h1>Latest Post</h1>
{{ postslist[0].templateContent | safe }}
I basically just use the templateContent variable of the first post. I moved that set command higher in the template so I could use another H3. Here's my entire file:
---
layout: layouts/home.njk
eleventyNavigation:
key: Home
order: 1
---
{% set postslist = collections.posts | head(-3) %}
<h1>Latest Post</h1>
{{ postslist[0].templateContent | safe }}
<h1>Latest 3 Posts</h1>
{% set postslistCounter = collections.posts | length %}
{% include "postslist.njk" %}
<p>More posts can be found in the archive.</p>
Related
Is there a way to get all the products starting with title A or B or C in Shopify without using collection.
Unfortunately this might be not possible.
Ideally this would work but it doesn't:
{% assign my_products = collections['all'].products | where: "title.first", "A" %}
{% for product in my_products %}
{{ product.title }}
{% endfor %}
I'm new to liquid coding while starting my own Shopify store (although I had some experience with coding). I'm currently stuck trying to get this code to function. I've added 3 text options in the liquid file for each variable. The idea is that when the criteria are met, it would display the appropriate text option. Please see the code string here for ref.
{% if section.settings.free_shipping_announcement_bar %}
{% assign promote_text = section.settings.promote_free_shipping_text | escape %}
{% assign unlocked_text = section.settings.unlocked_free_shipping_text | escape %}
{% assign unlocked_del_text = section.settings.unlocked_free_delivery_text | escape %}
{% assign threshold = section.settings.free_shipping_threshold | times: 100 %}
{% assign value_left = threshold | minus:cart.total_price %}
{% assign value_left_money = value_left | money %}
<div class="announcement-bar">
{% if value_left <= 0 %}
<p class="announcement-bar__message">{{unlocked_text}}</p>
{% elsif value_left >= 1 and value_left < 50 %}
<p class="announcement-bar__message">{{unlocked_del_text}}</p>
{% else %}
<p class="announcement-bar__message">{{promote_text | replace:'(value)' , value_left_money}}</p>
{% endif %}
basically, the idea is if the cart total is between $0-$99 I will show the "promote_text", if it's between $100-$149 it will show the "Unlocked_free_del_text"(free delivery), then at $150+ in the cart it shows "unlocked_text".
It currently shows the "promote_text" from $0-$149 then changes directly to the "unlocked_text" and skips the middle section for "unlocked_del_text"
my best assumption is that I'm using the elsif function wrong but I've trailed as many adjustments as I can think of without breaking the code, so any advice would be greatly appreciated!
Update:
After checking and testing the code over dev store I find you need to use divided_by to value_left value to compare with the value into normalized format.
so your code needs an update to this line
{% assign value_left = threshold | minus:cart.total_price | divided_by: 100%}
becase case is multile of 100 to process to cart value and need to normalized before test into if else condition.
The code looks great, I am not sure why this not works properly, you can check and try in this way also and I hope it will work. overwise you need to post the whole code along with schema and anyone replicate it dev store and find the solution.
{% if section.settings.free_shipping_announcement_bar %}
{% assign promote_text = section.settings.promote_free_shipping_text | escape %}
{% assign unlocked_text = section.settings.unlocked_free_shipping_text | escape %}
{% assign unlocked_del_text = section.settings.unlocked_free_delivery_text | escape %}
{% assign threshold = section.settings.free_shipping_threshold | times: 100 %}
{% assign value_left = threshold | minus:cart.total_price | divided_by: 100%}
{% assign value_left_money = value_left | money %}
<div class="announcement-bar">
{% if value_left <= 0 %}
<p class="announcement-bar__message">{{unlocked_text}}</p>
{% elsif value_left >= 1 and value_left < 50 %}
<p class="announcement-bar__message">{{unlocked_del_text}}</p>
{% else %}
<p class="announcement-bar__message">{{promote_text | replace:'(value)' , value_left_money}}</p>
{% endif %}
</div>
{% endif %}
Thanks for the quick response! I trialed the snippet you added but unfortunately ran into the same issue. here is the schema that I added to impact the section of code I input. If you are able to spot a simple issue in here please let me know, otherwise, I will continue to troubleshoot personally and hopefully find a solution or alternate method, to avoid troubling someone with having to replicate the entire code to recreate the issue.
{
"type":"checkbox",
"label":"enable free shipping bar",
"id":"free_shipping_announcement_bar",
"default":false
},
{
"type":"text",
"id":"promote_free_shipping_text",
"label":"message to promote free shipping"
},
{
"type":"text",
"id":"unlocked_free_shipping_text",
"label":"message for unlocked free shipping"
},
{
"type":"text",
"id":"unlocked_free_delivery_text",
"label":"message for unlocked free delivery"
},
{
"type":"range",
"id":"free_shipping_threshold",
"label":"threshold for free shipping",
"min":0,
"max":200,
"step":5,
"unit":"$",
"default":150
}
In blog-templte.liquid
{% assign articleSortOrder = '' %}
....
{% for article in blog.articles {{articleSortOrder}} %}
got an error : Liquid syntax error: Unexpected character { in "article in blog.articles {{articleSortOrder}}"
The intention is to pass the variable to sort the articles depending on some condition.
Q: is how to make it work?
This is not a valid liquid code:
{% for article in blog.articles {{articleSortOrder}} %}
You can't pass a liquid inside a liquid, a.k.a {% {{ }} %}
In addition for loops accept only a few parameters:
reversed - which will reverse the loop
limit - which will limit the iterations
offset - which will make the loop skip a specific set number of items
Sort is not one of them.
You can read more about the for loop here: https://shopify.dev/docs/liquid/reference/tags/iteration-tags
In order to sort the blog in a specific way you must code it like so:
{% assign articleSortOrder = '' %}
{% assign blog_articles_sort = blog.articles | sort: articleSortOrder %}
{% for article in blog_articles_sort %}
{% endfor %}
Where you assign the articles in a specific variable and sort them.
Please have in mind that this will sort ONLY 50 articles.
If you like to sort more than 50 you will need to overwrite the paginate object {% paginate blog.articles by 9999 %}
Then your code will look like this:
{% paginate blog.articles by 9999 %}
{% assign articleSortOrder = '' %}
{% assign blog_articles_sort = blog.articles | sort: articleSortOrder %}
{% for article in blog_articles_sort %}
{% endfor %}
{% endpaginate %}
More about paginate can be seen here: https://shopify.dev/docs/liquid/reference/tags/theme-tags/#paginate
Please have in mind that the sort function in Shopify is limited. You may need to sort them with javascript or another approach depending one what you are looking for.
I am trying to display color boxes next to items based on item varients. However, it has been giving me weird results in my array. Yes I know there are no real arrays in liquid. I have two options below. The first one doesnt work. It gives me things like "background-color: [''''''' ". Along with all the correct ones too.
So the second option i just hard coded all the colors and checked against that. This works as long as the colors are in order... but if the colors are not in order than it will display duplicates.
New to liquid but this seems super ugly and probably means i am doing it wrong.
<div class="color-box-wrapper">
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.option2%}
{% unless values contains value %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
{% for color in values %}
{% if color.size > 0%}
<div class="product-color-box" style="background-color:{{color}}"></div>
{% endif %}
{% endfor %}
{% endunless %}
{% endfor %}
</div>
THIS WAY KINDA WORKS BUT SEEMS HACKY.
<div class="color-box-wrapper">
{% assign realColors = 'yellow, blue, white, burgandy, black, red, green, purple, beige, light_brown' | split: ", "%}
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.option2 | downcase%}
{% unless values contains value %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
{% for color in values %}
{% if realColors contains color %}
<div class="product-color-box" style="background-color:{{color}}"></div>
{% endif %}
{% endfor %}
{% endunless %}
{% endfor %}
</div>
It might work better to use the product.options_with_values field, something like this:
{% assign color_option = product.options_with_values | where: 'name', 'color' | first %}
<h1>Color option is in position {{ color_option.position }}!</h1>
<h2>Array of all values is: {{ color_option.values | json }}</h2>
{% for value in color_option %}
<h3>Gimmie a {{ value }}!! {% if value == color_option.selected_value %}(Selected){% endif %}</h3>
{% endfor %}
It's a bit trickier if your colours are not CSS-recognized colour names, but there are certainly a number of things you can do for that. I typically prefer adding a CSS layer that can translate colour values into the appropriate display values (either background images or colour hex-codes). Some ideas are:
Add a data attribute or a class to your element (usually using the | handle filter to standardize the output) and use a CSS sheet to assign background images or colours appropriately
Create a section with blocks that allows you to map colour values to hex codes. If you are creating this for someone other than yourself, it would allow the merchant to set up the colours themselves and fine-tune all the shades.
Use metafields on your product that can generate the correct colour code using the options as the lookup. (Eg: If you create a metafield namespace on your products of product.metafields.colors and use the colour names as the keys and hex codes as the values, you can output {{ product.metafields.colors[value] }} to get the right computer colour. (This generally requires installing an app to manage - though metafields themselves are native Shopify functionality, Shopify doesn't have any native way to set them in the admin)
Hope this helps!
References:
Shopify Liquid Reference - Product objects: https://help.shopify.com/en/themes/liquid/objects/product#product-options_with_values
Shopify Liquid Reference - Product Option objects (from options_with_values): https://help.shopify.com/en/themes/liquid/objects/product_option
In my shopify store, I am using SuperFields in order to customize my site, though my question isn't about the app. On one of my pages, I need the value for the following:
variant.metafields.sf_{{ collection.title | downcase }}[meta_tag_key]
The value should be 0 or 1. If I evaluate the statement directly, such as:
{if variant.metafields.sf_{{ collection.title | downcase }}[meta_tag_key] =1%}
It throws an error when I render the page: Unexpected character '{'
I've also tried the following:
{% capture defaultImage %}variant.metafields.sf_{{ collection.title | downcase }}[meta_tag_key]{% endcapture %}
{% assign test = defaultImage %}
But 'test' is considered nil and doesn't return any value. I have tried to search for answers here and on the shopify forum, but, as my clumsy post title suggests, I'm having a hard time concisely searching for a solution to this problem. Any help is greatly appreciated.
You can try :
{% assign metafield-key = collection.title | downcase | prepend: "sf_" %}
{% assign key = variant.metafields[metafield-key][meta_tag_key] %}
{% if key == 1 %}
Do the twist !
{% endif %}
You are missing a % sign in your code. Hence the error message. Your if statement started with {% and not just {
If you working in liquid then you have to use {% %} for defining any variable & also for condition in shopify. You can't use { this.