Reuse attach menu and prevent selection issues in Django-cms - django-cms

Ive developed an navigation bar and needed an way to attach an menu to some pages, but if i reuse the menu and attach it on more than one page all dropdowns gets opened if one of the attached navigation nodes gets selected.
currently i was filtering the nodes in the template, so i think the menu determinate the seletions by all nodes and not only by the shown.
Navigation template (line 219 - 237)
<div class="ci-evo-select">
<div class="hover h-100 w-100 pos-rel">
<a class="h-100 w-100" href="{{ child.get_absolute_url }}">
<span class="p-5vh-lr">{{ child.title }}{% if show_id %}{{ child.id }}{% endif %}</span>
</a>
<div class="dropdown w-100 pos-abs pos-bot-left ci-evo-weiß text-evo-block {% if child.selected %}show{% endif %}">
{% for drop in child.children %}
{% if drop.get_absolute_url == child.get_absolute_url %}
{# no child nodes #}
<div class="ci-evo-select hover">
<a class="w-100" href="{{ child.get_absolute_url }}#{{ drop.attr.identifier }}">
<span >{{ drop.title }}</span>
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
cms_menus.py (complete)
from menus.menu_pool import menu_pool
from menus.base import NavigationNode
from django.utils.translation import ugettext_lazy as _
from cms.menu_bases import CMSAttachMenu
from . import models
class AnchorAttachMenu(CMSAttachMenu):
name = _("AttachMenu")
def get_nodes(self, request):
nodes = [
# static nodes goes here
]
anchors = models.AnchorHookModel.objects.all()
for anchor in anchors:
n = NavigationNode(anchor.name, anchor.page.get_absolute_url(), anchor.parent.pk)
n.attr["identifier"] = anchor.identifier
n.selected = False
nodes.append(n)
return nodes
menu_pool.register_menu(AnchorAttachMenu)
is there a way to get the navigation node where the menu gets attached?

Related

How can i put bullet points on all listed items (collapsible content) DAWN

im trying to get bullet points on all listed items on that tab (collapsible content) on dawn theme with shopify. But i managed to get that just on first item, you can check here with preview url: https://1524t2hmp2urghsm-53196980409.shopifypreview.com
and here is part of code reference this issue:
{%- when 'collapsible_tab' -%}
<div class="product__acordion_container">
<div class="product__accordion accordion" {{ block.shopify_attributes }}>
<details id="Details-{{ block.id }}-{{ section.id }}">
<summary>
<div class="summary__title">
{% render 'icon-accordion', icon: block.settings.icon %}
<h2 class="h4 accordion__title">
{{ block.settings.heading | default: block.settings.page.title }}
</h2>
</div>
{% render 'icon-caret' %}
</summary>
<ul>
<li id="ProductAccordion-{{ block.id }}-{{ section.id }}">{{ block.settings.content }}</li>
{{ block.settings.page.content }}
</ul>
</details>
</div>
</div>
https://ed.codes/blogs/tutorials/add-a-youtube-video-inside-collapsible-row-block-accordion-on-shopify-product-page use this vid to add the element to the block
then add a container in the liquid
<p>
{% if product.metafields.custom.METAFIELDNAME %}
<div class="product-features__features Container">
{{product.metafields.custom.METAFIELDNAME}}
</div>
{% endif %}
</p>
and then link to the HTML formatted list as a multi-line text meta field.

django-tables2 multitablemixin and bootstrap tabs

So I am trying to render two tables in two tabs using same view and template.
I can display it alright but when sorting the table in second tab (if click) it gets redirected to first tab (obviously because of the URL). Can I change the URL code to correspond with the tab code (using JavaScript to get tab URLs)?
Table:
class TaskTableView(MultiTableMixin, TemplateView):
template_name = 'task_table.html'
def get_tables(self):
qs = Task.objects.all()
self.tables = [
TaskTable(qs.filter(assigned_to=self.request.user.userprofile), prefix='1-'),
TaskTable(qs.filter(created_by=self.request.user.userprofile), prefix='2-0'),
]
return super().get_tables()
Template:
<div class="tab-content" id="myTabContent">
{% for table in tables %}
{% if forloop.first %}
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
{% render_table table %}
</div>
{% elif forloop.last %}
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
{% render_table table %}
</div>
{% endif %}
{% endfor %}
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
You should just need to add show active classes to the tabs depending on which you want to show, so the focus will show up for that tab.
Problem is figuring out which table you are coming from. As near as I can tell there isn't any way to discern if both tables are being ordered. If only one table is ordered you could check the URL parameters that are passed in.
In your TemplateView, add context:
def get_context_data(self, *args, **kwargs):
context = super(TaskTableView. self).get_context_data(*args, **kwargs)
for key in request.GET.keys():
if key.startswith('2-0'): # 2-0 being the prefix for the second table
context['show_table_1'] = False
context['show_table_2'] = True
# you'll want to get out of the loop if you find this one
continue
else:
# default show table 1
context['show_table_1'] = True
context['show_table_2'] = False
return context
In task_table.html:
<div class="tab-pane fade {% if show_table_1 %}show active{% endif %}" id="home" role="tabpanel" aria-labelledby="home-tab">
...
<div class="tab-pane fade {% if show_table_2 %}show active{% endif %}" id="home" role="tabpanel" aria-labelledby="home-tab">

Trying To Expand on TWIG "if" and "for" test In common/footer.twig of OpenCart 3.0.3.2

I am looking to expand on the "if" and "for" tests ability in OpenCart 3.0.3.2 ... I have never honestly experienced TWIG (I am comfortable in perl) so I will do my best not to annoy or off-put anyone.
In the OpenCart back-end:
Design -> Theme Editor I am working on the TWIG file:
common/footer.twig
Specifically I am working on the first column "informations" exhibited below.
{% if informations %}
<div class="col-sm-3">
<h5>{{ text_information }}</h5>
<ul class="list-unstyled">
{% for information in informations %}
<li> <a style="font-size: 10pt;" href="{{ information.href }}">
<i style="color: #FFCC00; font-size: 9pt;margin-right: 2px;" aria-hidden="true" class="fas fa-info"></i>
{{ information.title }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
The above "if" and "for" tests are returning the site operators defined values from
Catalog -> Information - "informations" [privacy, terms, refund, etc,] to be displayed as anchors in the footer.
To this point I have tried to formulate what I thought would work, however I was only able to produce application errors at worst or absolutely nothing would print from the tests I conjured.
Below I will embarrass myself with my attempt that fails by not printing anything.
{% if informations %}
<div class="col-sm-3">
<h5>{{ text_information }}</h5>
<ul class="list-unstyled">
{% for information in informations == "Privacy Policy" %}
<li> <a style="font-size: 10pt;" href="{{ information.href }}">
<i style="color: #FFCC00; font-size: 10pt;margin-right: 2px;" aria-hidden="true" class="fas fa-user-secret"></i> {{ information.title }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
What I would like to achieve is to expand on the TWIG "if" and "for" tests so that it can be determined if one of those returned values be "Privacy Policy" OR "Delivery Information" in example, the text information would be printed to the footer in addition to an appropriate Font Awesome icon pertinent to the value.
Any input would be greatly appreciated and I thank you in advance for taking the time to read this let alone reply.
Best Regards
The main reason you are not seeing any output is that your syntax is off.
{% for information in informations == "Privacy Policy" %}
Thats not going to do what you expect. What you want to do instead is just check within the loop a particular value and act accordingly:
{% if informations %}
<div class="col-sm-3">
<h5>{{ text_information }}</h5>
<ul class="list-unstyled">
{% for information in informations %}
{% if information.title == "Privacy Policy" %}
<li>
<a style="font-size: 10pt;" href="{{ information.href }}">
<i style="color: #FFCC00; font-size: 10pt;margin-right: 2px;" aria-hidden="true" class="fas fa-user-secret"></i> {{ information.title }}
</a>
</li>
{% else %}
<li>
<a style="font-size: 10pt;" href="{{ information.href }}">
{{ information.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
Notice the nested if check on the information.title.

3 Level Deep Timber menu (Wordpress)

I'm not familiar with timber at all, but am helping a friend finish up a project that was built with it. So any help would go a long way please!
I have only the first two tiers showing up. Is there a way to call on the child of a child?
I'm using the code here, and added to it another tier under child https://timber.github.io/docs/guides/menus/
{% if menu %}
<div class="header-menu-items">
<div class="header-menu-item mod-title">
<a href="{{ site.url }}" class="" rel="home">
<div class="header-item-logo">
<div class="sitelogo">{{ site.name }}</div>
</div>
</a>
</div>
{% for item in menu.get_items() %}
<div class="header-menu-item {{ item.current ? 'is-active' : '' }}">
<div class="header-menu-item-link">
<a target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
</div>
<div class="header-menu-item-triangle"></div>
<div class="header-menu-item-mega {{ item.section_colour ? " mod-#{item.section_colour}" : '' }}">
{% if item.master_object.thumbnail %}
<div class="mega-image mod-image" style="background-image: url( {{item.master_object.thumbnail.src('thumbnail') }} )">
{% else %}
<div class="mega-image">
{% endif %}
{{ item.title }}
</div>
<div class="mega-items">
{% for child in item.children %}
<div class="mega-item">
<a target="{{ child.target }}" href="{{ child.link }}">
<span class="mega-item-title">{{ child.title }}<br /></span>
<span class="mega-item-excerpt">Mega menu description lorem ipsum dolores</span>
</a>
</div>
{% for child in child.children %}
Just testing to see if it'll even show up first before applying style<br />
{{ child.title }}<br />
{% endfor %}
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
You can access menus several layers deep by nesting for loops inside of one another. Here is a code snippet that I have tested and works.
{% for item in menu__main.items %} {# This is the top level #}
<p>{{ item }}</p>
{% if item.children %}
{% for child in item.children %} {# 2nd Level #}
<p><em>{{ child }}</em></p>
{% if child.children %}
{% for third in child.children %} {# 3rd Level #}
<p><strong>{{ third }}</strong></p>
{% endfor %} {# for third in child.children #}
{% endif %} {# if child.children #}
{% endfor %} {# for child in item.children #}
{% endif %} {# if item.children #}
{% endfor %} {# for item in menu__main.items #}
I have added comments to the end of the lines to hopefully make this more clear. So at the top, you are looping through item in menu__main.items
Then to get the children inside of these, you loop through item.children since item is the variable that represents each nav item at the top/main level. You loop through item.children to get to the next level or the children inside of the main/top level.
Then to get inside of the third level, you loop through child.children since child is the variable that represents the 2nd level. We want to loop through the children of this 2nd level. so we do third in child.children. third is the variable that represents the items 3 levels down.
I hope you can see the pattern here and you can continue this even further if you have items at even deeper levels, although at some point it will probably get ridiculous. Like if you have items nested 5 or 6 levels deep.
Let me know if that makes sense and if not I will be more than happy to try and explain it another way if you still have questions.
Cheers

Count the number of items in an array using Twig while in an IF statement

I'm building an help centre for an application and I want to be able to display the number of topics within a specific category. At the moment, this is what I have:
{% for cat in cats %}
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion" data-toggle="collapse" data-parent="#helpcategories" href="#category{{cat.id}}">
{{cat.category}}
{% for top in tops %}
{% if top.category == cat.id %}
<span class="badge pull-right">
{{ tops|length }}
</span>
{% endif %}
{% endfor %}
</a>
</h4>
</div>
<div id="category{{cat.id}}" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
{% for top in tops %}
{% if top.category == cat.id %}
<li>{{top.title}}</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
As you can see, I use Twig to sort out the topics in to their respective categories. As you can also see, in the area that I want to display the number of topics within a category I am using {{tops|length}}. However, this returns the number of topics in total, not per category.
How can I get Twig to count the number of times a topic appears in a category?
I would suggest not using your templating language to build those counts but to do it in your application before you get to the template because that would enable you to display total counts before pagination if you ever decide to paginate.

Resources