I'd like to be able to have parent and child collections using Eleventy, which I can then loop through to create navigation.
I currently have some posts with in a collection called continents, with the front matter displayed like this:
---
title: Europe
tags: continents
---
Which I loop through to create a list of links:
<ul class="parent-list">
{% for post in collections.continents %}
<li>{{ post.data.title}}</li>
{% endfor %}
</ul>
Is it possible to have a child collection of continents? For example countries? If so, where would this data need to be added to my theme?
It would be great to be able to then loop through the collections like this:
<ul class="parent-list">
{% for post in collections.continents %}
<li>{{ post.data.title}}</li>
<ul class="child-list">
{% for post in collections.countries %}
<li>{{ post.data.title}}</li>
{% endfor %}
</ul>
{% endfor %}
</ul>
I'm aware of eleventy-navigation but it looks like you can only have one level of navigation with this too.
As far as I know, collections are only one level deep, so you can't do collections.parent.child. You could dynamically create collections such that you had collections.europe and collections.northamerica. You could then switch your second inner loop to something like this:
{% for post in collections.countries[post.data.title] %}
Does that make sense?
I should add, in order for this to work, your child posts should use front matter to set their parent, like: continent: europe
Related
I have printed a for loop as below in my HTML Template:
<td>
{% for athlete in booking.athlete.all %}
{{athletes.id}}
{% endfor %}
</td>
The Output in HTML is as below.
<td>
1
2
3
</td>
Is it possible to get the output to appear as [ "1", "2", "3" ], so we can then use this as a JS array or object?
I have tried a few things from the Django Template but it does not remove the additional white space.
The easiest way is probably to use a custom template tag to get the list of athlete.ids, and then the built-in json_script filter to render those ids as json.
Let's assume your app name is myapp. If you don't have any custom filters yet, create the directory myapp/templatetags/, and add an empty __init__.py file. Then in the file myapp/templatetags/myapp_filters.py add:
from django import template
register = template.Library()
#register.filter
def qs_to_id_list(qs):
return list(qs.values_list('id', flat=True))
In your template example, you would do:
{% load myapp_filters %}
{% for booking in bookings %}
<tr>
<td>{{booking.id}}</td>
<td>{{booking.program_type}}</td>
<td>{{booking.booking_time}}</td>
{# set a unique script id for easier access in javascript #}
{% with script_id='athletes-data-'|add:booking.id %}
{{booking.athlete.all|qs_to_id_list|json_script:script_id}}
{% endwith %}
</tr>
{% endfor %}
The json_script filter will render a block like this (in each table row):
<script id="athletes-data-5" type="application/json">[1, 2, 3]</script>
which can be accessed in your client-side javascript.
The code is written in Django-Python. The project is created using the models in Django and shown in navigation as dropdown menu.
The drop-down menu is shown using the Django-HTML as shown in following way:
This code works well for dropdown menu. but I want to open the different project url based on click.
I am not sure exactly how to assign id and use javascript to code do onclick bsed html loading !!
I have tried some javascript code, but I am novice.. so If I put here.. it would be more confusing.
<div class="dropdown-menu" id="navbarDropdown">
{% if project_records %}
{% for p in project_records %}
{{ p.pName }}
{% endfor %}
{% endif %}
</div>
I expect that projectB.html will be loaded if click projectB in dropdown menu in navigation bar.
Add the href attribute in anchor tag appropriately. Assuming http://someurl/ is the prefix and the project name is the suffix of your project URLs, you may form the target URL in a variable and use it. Here is your modified code:
<div class="dropdown-menu" id="navbarDropdown">
{% if project_records %}
{% for p in project_records %}
{% with project_url="http://someurl"|add:p.pName %}
{{ p.pName }}
{% endfor %}
{% endif %}
</div>
When the first page is loaded, I want the user to come across all the music, but if he selects a list from RadioButton, I only want the music in that list, but the javascript function doesn't work.
Let me add that I don't normally know JavaScript, but I need to use it.
<div style = "margin-top : 100px;"class = "container">
{% for table in tables %}
<input type="radio" name="list1" onclick="mL('{{table}}')"> {{table}}
{% endfor %}
<div align="center">
<audio class="my_audio" controls="controls" autoplay="autoplay" style="width:500px;"></audio>
<ul>
{% for table in tables %}
{% for music in musics %}
<li style="list-style-type:None">
<a id="{{table}}" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
</li>
{% endfor %}
{% endfor %}
{% for music in musics %}
<li style="list-style-type:None">
<a id="default" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<script> function mL(x)
{
{% for table in tables %}
if (x=={{table}})
document.getElementById("{{table}}").style.display="block";
document.getElementById("default").style.display="none";
{% endfor %}
else
document.getElementById("{{table}}").style.display="none";
document.getElementById("default").style.display="block";
return;
}
</script>
This isn't a Django issue, it's purely about the JavaScript (or should be).
Here are some problems with your code:
In HTML, the id attribute should be unique in the document. You seem to have many <a> tags with the same id. Use the class attribute, or even better use your own data attribute like data-table.
You can code generate JavaScript using Django template tags like you have, but I think it's a bad idea because it's very hard to reason about how the code will work. Don't use {% for %} inside the <script> block.
JavaScript doesn't use spaces for code blocks like Python does. You need to use braces { } instead.
Once those things are fixed, use the debugging console in your browser (F12 in Firefox and Chrome). It will let you see any syntax errors, and you can even run code in the console to see how things like document.getElementById work.
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.
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.