How to make a drop-down menu in Timber WordPress, the following is my code but is not showing as drop-down, also I am inserting an image how it looks now, the menu is horizontal menu
enter image description here
<nav class="collapse navbar-collapse order-lg-2" id="mainNavigation">
<ul class="navbar-nav ms-auto">
{% for item in topmenu.items %}
<li class="nav-item">
<a class="nav-link {{ item.classes|join(' ') }} mx-2" href="{{ item.link }}">{{ item.title }}</a>
{% if item.children %}
<ul class="nav-drop">
{% for child in item.children %}
<li class="nav-drop-item">
{{ child.title }}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
use menu.twig file with the following code:
{% if menu %}
<ul>
{% for item in items %}
<li class="{{ item.classes | join(' ')}}">
<a target="{{ item.target}}" href="{{ item.link}}">{{ item.title}}</a>
{% include "menu.twig" with{'items':item.children} %}
</li>
{% endfor %}
</ul>
{% endif %}
and then inside the base.twig or inside the other file where you want to display the menu add the following code:
{% include "menu.twig" with{'items':menu.get_items} %}
Related
I'm looking to customize a KnpPaginator paging template to look like this:
It is a simple template normally, I just want to display the range in which I am located, with the max and a previous and next button.
I saw that it was possible to make our own templates. So I wanted to draw inspiration from those already existing, but I don't understand at all how they work, they seem so different from each other, I find it hard to find my way and find what I have to use
Can someone help me please ?
I have this base template but I don't know how edit it to have my own customization template :
{#
/**
* #file
* Twitter Bootstrap v4-beta.2 Sliding pagination control implementation.
*
* View that can be used with the pagination module
* from the Twitter Bootstrap CSS Toolkit
* https://getbootstrap.com/docs/4.0/components/pagination/
*
*/
#}
{% if pageCount > 1 %}
<nav>
{% set classAlign = (align is not defined) ? '' : align=='center' ? ' justify-content-center' : (align=='right' ? ' justify-content-end' : '') %}
{% set classSize = (size is not defined) ? '' : size=='large' ? ' pagination-lg' : (size=='small' ? ' pagination-sm' : '') %}
<ul class="pagination{{ classAlign }}{{ classSize }}">
{% if previous is defined %}
<li class="page-item">
<a class="page-link" rel="prev" href="{{ path(route, query|merge({(pageParameterName): previous})) }}">« {{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">« {{ 'label_previous'|trans({}, 'KnpPaginatorBundle') }}</span>
</li>
{% endif %}
{% if startPage > 1 %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 1})) }}">1</a>
</li>
{% if startPage == 3 %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): 2})) }}">2</a>
</li>
{% elseif startPage != 2 %}
<li class="page-item disabled">
<span class="page-link">…</span>
</li>
{% endif %}
{% endif %}
{% for page in pagesInRange %}
{% if page != current %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): page})) }}">{{ page }}</a>
</li>
{% else %}
<li class="page-item active">
<span class="page-link">{{ page }}</span>
</li>
{% endif %}
{% endfor %}
{% if pageCount > endPage %}
{% if pageCount > (endPage + 1) %}
{% if pageCount > (endPage + 2) %}
<li class="page-item disabled">
<span class="page-link">…</span>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): (pageCount - 1)})) }}">{{ pageCount -1 }}</a>
</li>
{% endif %}
{% endif %}
<li class="page-item">
<a class="page-link" href="{{ path(route, query|merge({(pageParameterName): pageCount})) }}">{{ pageCount }}</a>
</li>
{% endif %}
{% if next is defined %}
<li class="page-item">
<a class="page-link" rel="next" href="{{ path(route, query|merge({(pageParameterName): next})) }}">{{ 'label_next'|trans({}, 'KnpPaginatorBundle') }} »</a>
</li>
{% else %}
<li class="page-item disabled">
<span class="page-link">{{ 'label_next'|trans({}, 'KnpPaginatorBundle') }} »</span>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
I believe you are looking for something like the code below. You need to adjust buttons formatting to your needs.
With standard Bootstrap CSS my example should render something alike to this:
Also make sure you adjusted the pagination template path in config/packages/knp_paginator.yaml to your's
IE: pagination: "your/path/inside/templates/directory/your_template.yaml"
{% if pageCount > 1 %}
items {{ firstItemNumber }} to {{ lastItemNumber }} of {{totalCount}}
{% if previous is defined %}
<a type="button" class="btn btn-secondary" rel="prev" href="{{ path(route, query|merge({(pageParameterName): previous})) }}">{{'<'}}</a>
{% else %}
<button type="button" class="btn btn-secondary" disabled><</button>
{% endif %}
{% if next is defined %}
<a type="button" class="btn btn-secondary" rel="next" href="{{ path(route, query|merge({(pageParameterName): next})) }}"> > </a>
{% else %}
<button type="button" class="btn btn-secondary" disabled> > </button>
{% endif %}
{% endif %}
Can anyone tell me that how can i make a custom tab in Customer Account section.
I have try using replace default myaccount.twig file. I don't know this is right way or not.
Thanks in advance....!
{{ header }}
<div id="account-account" class="container">
<ul class="breadcrumb">
{% for breadcrumb in breadcrumbs %}
<li>{{ breadcrumb.text }}</li>
{% endfor %}
</ul>
{% if success %}
<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}</div>
{% endif %}
<div class="row">{{ column_left }}
{% if column_left and column_right %}
{% set class = 'col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-sm-9' %}
{% else %}
{% set class = 'col-sm-12' %}
{% endif %}
<div id="content" class="{{ class }}">{{ content_top }}
<h2>{{ text_my_account }}</h2>
<ul class="list-unstyled">
<li>{{ text_edit }}</li>
<li>{{ text_password }}</li>
<li>{{ text_address }}</li>
<li>{{ text_wishlist }}</li>
</ul>
{% if credit_cards %}
<h2>{{ text_credit_card }}</h2>
<ul class="list-unstyled">
{% for credit_card in credit_cards %}
<li>{{ credit_card.name }}</li>
{% endfor %}
</ul>
{% endif %}
<h2>{{ text_my_orders }}</h2>
<ul class="list-unstyled">
<li>{{ text_order }}</li>
<li>{{ text_download }}</li>
{% if reward %}
<li>{{ text_reward }}</li>
{% endif %}
<li>{{ text_return }}</li>
<li>{{ text_transaction }}</li>
<li>{{ text_recurring }}</li>
</ul>
<h2>{{ text_my_affiliate }}</h2>
<ul class="list-unstyled">
{% if not tracking %}
<li>{{ text_affiliate_add }}</li>
{% else %}
<li>{{ text_affiliate_edit }}</li>
<li>{{ text_tracking }}</li>
{% endif %}
</ul>
<h2>{{ text_my_newsletter }}</h2>
<ul class="list-unstyled">
<li>{{ text_newsletter }}</li>
</ul>
<h2>{{ text_my_title }}</h2>
<ul class="list-unstyled">
<li>{{ text_url }}</li>
</ul>
{{ content_bottom }}</div>
{{ column_right }}</div>
</div>
{{ footer }}
Above code is default account.twig file in which i have add just my code
<h2>{{ text_my_title }}</h2>
<ul class="list-unstyled">
<li>{{ text_url }}</li>
</ul>
So this is Right way or not? This code is works but when i am uninstll this module it will remove default account.twig file.
Please guide me in this sinario. Thanks in advance...!
I created a custom view in Sonata Admin following recipe from official doc (here).
Everything is working good, but breadcrumb is empty (the same in last screenshot of recipe).
I googled a lot without success... Isn't it possible to display breadcrumbs with custom views in Sonata Admin?
I achieved this by extending sonata_breadcrumb block:
{% block sonata_breadcrumb %}
<div class="hidden-xs">
<ol class="nav navbar-top-links breadcrumb">
<li>
<a href="/admin">
<i class="fa fa-home"></i>
</a>
</li>
<li class="active">
<span>My Custom View</span>
</li>
</ol>
</div>
{% endblock sonata_breadcrumb %}
Can someone confirm it's the right way to do it?
Another option to show a custom breadcrumb is to define a block for it, like this:
{% extends '#SonataAdmin/standard_layout.html.twig' %}
{% block breadcrumb %}
<li>
<a href="/admin/dashboard">
<i class="fa fa-home"></i>
</a>
</li>
<li class="active">
<span>My Profile</span>
</li>
{% endblock %}
{#
More HTML/Twig code
#}
i installed knp paginator bundle in symfony project and i got this warning appears to me
i have this error message after installing this bundle
is it due to this bundle or i have mess with something that cause this message
i find a solution for this problem i opened the view of my pagination /path/to/project/vendor/knplabs/knp-paginator-bundle/Resources/views/pagination and i changed the english message with french and it works fine
{% if pageCount > 1 %}
<ul class="pagination">
{% if previous is defined %}
<li class="arrow">
« {{ 'Précédant' }}
</li>
{% else %}
<li class="arrow unavailable">
<a>
« {{ 'Précédant' }}
</a>
</li>
{% endif %}
{% if startPage > 1 %}
<li>
1
</li>
{% if startPage == 3 %}
<li>
2
</li>
{% elseif startPage != 2 %}
<li class="unavailable">
<a>…</a>
</li>
{% endif %}
{% endif %}
{% for page in pagesInRange %}
{% if page != current %}
<li>
<a href="{{ path(route, query|merge({(pageParameterName): page})) }}">
{{ page }}
</a>
</li>
{% else %}
<li class="current">
<a>{{ page }}</a>
</li>
{% endif %}
{% endfor %}
{% if pageCount > endPage %}
{% if pageCount > (endPage + 1) %}
{% if pageCount > (endPage + 2) %}
<li class="unavailable">
<a>…</a>
</li>
{% else %}
<li>
<a href="{{ path(route, query|merge({(pageParameterName): (pageCount - 1)})) }}">
{{ pageCount -1 }}
</a>
</li>
{% endif %}
{% endif %}
<li>
{{ pageCount }}
</li>
{% endif %}
{% if next is defined %}
<li class="arrow">
<a href="{{ path(route, query|merge({(pageParameterName): next})) }}">
{{ 'Suivant'}} »
</a>
</li>
{% else %}
<li class="arrow unavailable">
<a>
{{ 'Suivant'}} »
</a>
</li>
{% endif %}
</ul>
{% endif %}
If you are using Symfony 4.x add the following to framework.yaml under config/packages:
translator: { fallbacks: ['%locale%'] }
Are there any tutorials or templates created with wordpress+timber+bootstrap?
I'm having problem with the menu...
menu-head.twig:
<nav class="navbar navbar-custom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
{% include "menu.twig" with {'menu': menu.get_items} %}
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
menu.twig:
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#} {% for item in menu %}
<li class="{{item.classes | join(' ')}}">
{{item.title}} {% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
and the unfortunate result is this one:
I don't know how to implement it with the child menus being shown as dropdown menus... please help...
EDIT: I will be moving to foundation... :)
#manson-mamaril you're just missing a small bit in menu.twig. Instead of {% for item in menu %} it should be {% for item in menu.get_items %}:
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#}
{% for item in menu.get_items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}}
{% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
I came across a blog post from about a year ago while searching for WP-Timber-Foundtion 6 info.
http://kmturley.blogspot.com/2015/01/wordpress-timber-twitter-bootstrap.html
Something like this should work
<div class="collapse navbar-collapse" id="navbarmain">
<ul class="nav navbar-nav main-menu">
{% for item in menu.get_items %}
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="{{item.get_link}}">{{item.title}}<b class="caret"></b></a>
{% if item.get_children %}
<ul class="dropdown-menu" role="menu">
{% for child in item.get_children %}
<li>{{child.title}}</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
In your menu-head.twig, replace {% include "menu.twig" with {'menu': menu.get_items} %} by {% include "menu.twig" with {'menu': menu} %}
Then, in your menu.twig
{% if menu %}
<ul class="nav navbar-nav navbar-right">
{#
<li>Link</li>#} {% for item in menu.items %}
<li class="{{item.classes | join(' ')}}">
{{item.title}} {% include "menu.twig" with {'menu': item.get_children} %}
</li>
{% endfor %}
</ul>
{% endif %}
You should iterate trough menu.items which is an array containing all your menu items.
By the way, make sure, you pass your menu to the context :
$context['menu'] = new \Timber\Menu(ID);
Finally, if you easily want to see what happens in you menu object, you can display this object with menu|print_r