What does the vertical bar mean in Flask Templates? - javascript

I am working on a flask tutorial, and in the sample code, it contains the following:
| {% for pr in providers %}
{{ pr.name }} |
{% endfor %}
In this context, what do the vertical bars mean?

| {% for pr in providers %}
{{ pr.name }} |
{% endfor %}
this bars will be displayed in the html output, it is there to enhance readability. For example, if the providers list contains say 3 links in total they will be displayed one after another separated by | due to for loop.
possible output:
|link1|
link2|
link3|

Related

HTML if else condition for printing items in list

I'm making a website with flask, and I pass in a list. My .html file has this code:
{$ for file in list %}
<div>
<img ... > </img>
</div>
{% endfor %}
Now if list.length == 0 I want it to just do something like
<h2> Error </h2>
instead. How do I make an if statement to check if the list is empty, and if it is then I print error on the website, if it is not, I print the images in the list. I tried to put:
<script>
if(list.length==0){
<h2>Error</h2>
}
else{
"the for loop stuff"
}
</script>
but this does not work.
THanks
In Flask with Jinja2 as a template engine, the if-else syntax requires you to write the following statement
{% if mylist.length == 0 %}
<div>error</div>
{% else %}
<!-- loop -->
{% endif %}
Note: Since list is a Python keyword i suggest you to use another name for your list in order to avoid possible conflicts.
In this pythonprogramming page about flask 7, you will find some example code and a video. The example shows an if-else statement:
{% for post in posts %}
<h3> {{ post.title }}</h3>
<p>{{ post.body }}</p>
{% if author %}
<span style="font-size:0.5em;color:yellowgreen">{{ post.author }} </span>
{% endif %}
{% if date %}
<span style="font-size:0.5em;color:yellowgreen">{{ post.date }}</span>
{% endif %}
{% endfor %}
I decided to post my answer to share this learning resource because I have noted that the example does not use any <script> tag (not sure if it helps).
The comparison operator is almost the same everywhere as you can see in both the Python and Jinja references.
Therefore, the equivalent for your code would be:
{% if list.length == 0 %}
...
{% endif %}

Pagination doesn't work with extendable layouts in 11ty ( eleventy )

Describe the bug
When I extend nunjuck layout, pagination doesn't work
To Reproduce
{% extends "layouts/default.njk" %}
---
pagination:
data: categories
size: 1
alias: category
eleventyComputed:
title: "{{ category.name }}"
---
{% block content %}
{%- for category in categories %}
<h1>{{ category.name }}</h1>
{% endfor -%}
{% endblock %}
Expected behavior
It should generate the categories pages
Screenshots
the result file is empty
Environment:
OS and Version: Windows 10
Eleventy Version 0.12.1
Additional context
Add any other context about the problem here.
Front matter needs to be, well, front. It has to be on top. Try moving the extends above the block. (But still below the front matter.)

Shopify getJSON('/cart.js') custom values of liquids

Good time of day.
Trying to improve the pop-up cart was stuck on the possibility of using custom values instead of existing ones.
This example works as expected:
$.getJSON('/cart.js').then(
function(cart) {
$('#example').html(theme.Currency.formatMoney(cart.total_price, theme.moneyFormat));
});
In the cart template, I have made other values by liquid codes. Here is an example:
{% for item in cart.items %}
{% assign totalfive = 0 %}
{% assign fiveminus = cart.total_price | times: 0.05 %}
{% assign totalfive = cart.total_price | minus: fiveminus %}
{% endfor %}
In HTML, this value looks like this: <span>{{ totalfive | money }}</span>
The question is about how can I get this value by JSON? Maybe there is a way to catch it with an element based on ID? Or it definitely impossible?

How to show blog posts on product page

I am trying to show blog posts on product pages by matching their tags. I have this code, but the problem is it's fetching only the latest 50 posts. How can I loop through all articles?
{% for article in blogs.news.articles %}
{% for tag in product.tags %}
{% if article.tags contains tag %}
{{ article.title }}
{% endif %}
{% endfor %}
{% endfor %}
Shopify have a limit of 50 items per loop for collections and blogs. This means that you can't go outside those limitations.
This limitation is set in order to keep the requests to their server as small as possible.
So the short answer is that you can't loop more than 50 articles or products.

Shopify - Load 'collections/all' page on my front page

How to load http://example.myshopify.com/collections/all content
to my shopify frontpage http://example.myshopify.com/
I figured out a way that I hardcode <script>window.location.href='collections/all'</script> on index.liquid, but I'm pretty sure thats' not a clean way.
and I try to copy whole collection.liquid's code to index.liquid, but it prompt me Liquid error: Array 'collection.all.products' is not paginateable. error and no product showing the index.liquid page.
Any idea how to load collections/all on shopify's front page?
I'm using Timber Framework as people recommend to start to build a theme
inside
In the Timber framework, you could change this line in index.liquid:
{% for product in collections.frontpage.products limit:4 %}
to:
{% for product in collections.all.products %}
Depending on how many products you have, you probably still want to limit how many are displayed, or paginate the output.
E.g.
{% paginate collections.all.products by 12 %}
{% for product in collections.all.products %}
...
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
You include this:
{% for product in collections.all.products %}
// here you have access to each product
{% endfor %}
This will loop all of your products.
You can review http://cheat.markdunkley.com/ what product variables you have access to in that loop.

Categories

Resources