I would like to combine two menu's into one for mobile. So with the foundation top-bar the standaard menu is shown and the below the tip menu into one menu. But i don't get the tip menu wrapped into the main menu just before the first . See code below, any idee?
topnavigation = HMENU
topnavigation.wrap (
<section class="topnavigation">
<div class="row">
<div class="columns large-12">
<nav class="top-bar" data-topbar data-options="back_text: « Vorige">
<ul class="title-area">
<li class="name">
<h1></h1>
</li>
<li class="toggle-catmenu show-for-small menu-icon">Tips</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">|<li class="divider"></li></ul>
</section>
</nav>
</div>
</div>
</section>
)
topnavigation.entryLevel = 0
topnavigation {
1= TMENU
1 {
expAll = 1
maxItems = 4
NO.wrapItemAndSub = <li class="top-but">|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active top-but">|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="has-dropdown top-but">|</li>
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub= <li class="active has-dropdown top-but">|</li>
}
2= TMENU
2 {
wrap = <ul class="dropdown">|</ul>
NO.wrapItemAndSub = <li>|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
}
}
tipmenu = HMENU
tipmenu.special = directory
tipmenu.special.value = 8
tipmenu.allWrap = <ul class="left">|</ul>
tipmenu {
1 = TMENU
1 {
expAll = 1
maxItems = 4
NO.wrapItemAndSub = <li class="top-but">|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active top-but">|</li>
IFSUB = 1
IFSUB.wrapItemAndSub = <li class="has-dropdown top-but">|</li>
ACTIFSUB = 1
ACTIFSUB.wrapItemAndSub= <li class="active has-dropdown top-but">|</li>
}
2= TMENU
2 {
wrap = <ul class="dropdown">|</ul>
NO.wrapItemAndSub = <li>|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="active">|</li>
}
}
You can't combine one HMENU inside the other instead you need to use COA cObject, COA allows for combining many cObjects (even different type):
myCombinedMenu = COA
myCombinedMenu.10 < lib.mainMenu
myCombinedMenu.20 < lib.additionalMenu
myCombinedMenu.30 = TEXT
myCombinedMenu.30.value = ...and that's it...
This should do it. COA is not necessary. This solution has a common parent ul tag and displays both sub tree items (the items of two different sub-trees) at the same ul level:
temp.mainMenuObject = HMENU
temp.mainMenuObject {
# entryLevel = 1
special = directory
special.value = pid1, pid2 # pids of parent pages
1 = TMENU
1 {
expAll = 1
wrap = <ul> | </ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
ATagTitle.field = title
}
}
2 < .1
}
Related
Here is my Template :
{% for pr in productlist %}
<ul>
<li><input type="checkbox" name="mylistch" value="{{ pr.productid }}"></li>
<li><input type="hidden" name="mylist" value="{{ pr.productname }}"></li>
<li><input type="number" name="mylist" id="prqty"/></li>
</ul>
{% endfor %}
and View :
pch = request.POST.getlist('mylistch')
pnch = iter(pch)
pr = request.POST.getlist('mylist')
pri = iter(pr)
for pid, pname, ptotal in zip(pnch , pri , pri):
models.Sellinvoiceitems.objects.create(
productid=pid
productname=pname,
totalnumber=ptotal,
sellinvoice = invoice,
stockid = stock
)
Here i checked 5 checkbox with this ids : 6 , 9 , 10 , 12 , 19, But ids : 1 , 2 , 3 ,4 ,5 inserted to db, what is problem here?
I am making a restaurant application and currently working on takeaway food functionality i.e. user orders food online.
I am displaying food items from my postgresql database onto my takeaway.html template and assigning each food item a class. Each food item will have an 'add to basket' button, JavaScript provides all functionality related to the basket.
I have found some resources that mention using the GET method with a form but I'm still not too sure. I am curious as to how I can access this 'basket' in my views.py and be able to put the values into my database.
I wish to access the food name, quantity and the price from the table if possible. Any resources or help would be greatly appreciated.
takeaway.html
<div class="col-sm-12 my-auto">
<h3>Starters</h3>
{% for starter in starters %}
<div id="{{ starter.id }}">
<span class="food-item-name">{{ starter.name }}</span>
<div class="food-item-details">
<p>{{ starter.description }}</p>
<p class="food-item-price">{{ starter.price }}</p>
<p>{% for a in starter.allergen.all %}{{ a.name }} | {% endfor %}</p>
<button class="add-item-button" onclick="addToBasket(this)">Add to Basket</button>
</div>
{% endfor %}
</div>
<div>
<h3>Mains</h3>
{% for m in mains %}
<div id="{{ m.id }}">
<span class="food-item-name">{{ m.name }}</span>
<div class="food-item-details">
<p>{{ m.description }}</p>
<p class="food-item-price">{{ m.price }}</p>
<p>{% for a in m.allergen.all %}{{ a.name }} | {% endfor %}</p>
<button class="add-item-button" onclick="addToBasket(this)">Add to Basket</button>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div>
<h3>Basket</h3>
<form method="get">
<table id="basket" style="border: 1px solid black">
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Total Price of Item(s)</th>
</tr>
</table>
<h3 id="basket-total-price">0.0</h3>
<button type="submit">submit</button>
</form>
</div>
takeaway.js
function addToBasket(selected)
{
const id = selected.parentElement.parentElement;
const itemName = id.getElementsByClassName("food-item-name")[0].innerText;
const itemPrice = id.getElementsByClassName("food-item-price")[0].innerText;
// check if item already in basket
if (check(itemName))
{
updateQuantity(itemName);
updateItemPrice(itemName);
}
else
{
const basketTable = document.getElementById("basket");
const rowCount = basketTable.rows.length;
const row = basketTable.insertRow(rowCount);
const basketRowName = row.insertCell(0);
const basketRowQuantity = row.insertCell(1);
const basketRowPrice = row.insertCell(2)
const basketRowTotalPrice = row.insertCell(3);
basketRowName.className = "basket-item-name";
basketRowQuantity.className = "basket-item-quantity";
basketRowPrice.className = "basket-item-price";
basketRowTotalPrice.className = "basket-item-total-price";
basketRowName.innerText = itemName;
basketRowPrice.innerText = itemPrice;
basketRowQuantity.innerText = "1";
updateItemPrice(itemName);
}
}
// check if item already in basket
function check(itemName)
{
const basketTable = document.getElementById("basket");
for(let i = 0; i < basketTable.rows.length; i++)
{
if (basketTable.rows[i].cells[0].innerHTML === itemName)
{
return true;
}
}
}
// update quantity field for item
function updateQuantity(itemName)
{
const basketTable = document.getElementById("basket");
for(let i = 0; i < basketTable.rows.length; i++)
{
if (basketTable.rows[i].cells[0].innerHTML === itemName){
const itemQuantity = basketTable.rows[i].getElementsByClassName("basket-item-quantity")[0];
let quantity = Number(itemQuantity.innerText);
quantity += 1;
itemQuantity.innerText = quantity;
}
}
}
// update price for item and total basket
function updateItemPrice(itemName)
{
const basketTable = document.getElementById("basket");
let itemTotal = 0;
let basketTotal = 0;
for (let i = 0; i < basketTable.rows.length; i++)
{
if (basketTable.rows[i].cells[0].innerHTML === itemName)
{
let itemPrice = basketTable.rows[i].getElementsByClassName("basket-item-price")[0];
let itemQuantity = basketTable.rows[i].getElementsByClassName("basket-item-quantity")[0];
let itemPriceTotal = basketTable.rows[i].getElementsByClassName("basket-item-total-price")[0];
let overall = document.getElementById("basket-total-price");
let current_price = parseFloat(overall.innerText);
// update price for items x quantity
itemTotal = parseFloat(itemPrice.innerText) * parseInt(itemQuantity.innerText);
itemPriceTotal.innerText = ""+ itemTotal;
// update basket total price
basketTotal = current_price + itemTotal;
overall.innerHTML = ""+basketTotal
}
}
}
I used Gridelements a while now. I used the following code:
TypoScript (Gridelements (deprecated) (gridelements)):
tt_content.gridelements_pi1.20.10.setup {
2col < lib.gridelements.defaultGridSetup
2col.cObject = FLUIDTEMPLATE
2col.cObject.file = {$resDir}/Private/Partials/Gridelements/2spalten.html
}
FLUID Template:
<div class="row">
<div class="col-md-6">
{data.tx_gridelements_view_column_0}
</div>
<div class="col-md-6">
{data.tx_gridelements_view_column_1}
</div>
</div>
PageTS:
tx_gridelements.setup {
2col {
title = Two Columns
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Links
colPos = 0
}
2 {
name = Rechts
colPos = 1
}
}
}
}
}
}
}
But now I want to use "Gridelements w/DataProcessing (recommended) (gridelements)" because the other one is deprecated. But all I see is the error:
Tried resolving a template file for controller action "Standard->2col"
in format ".html", but none of the paths contained the expected
template file (Standard/2col.html). The following paths were checked:
/var/www/html/typo3/sysext/fluid_styled_content/Resources/Private/Templates/,
/var/www/html/typo3/typo3conf/ext/gridelements/Resources/Private/Templates/,
/var/www/html/typo3/typo3conf/ext/dev_layout/Resources/Private/Templates/
If I write this in my TypoScript code:
lib.gridelements.defaultGridSetup =< lib.contentElement
lib.gridelements.defaultGridSetup {
templateRootPaths {
20 = {$resDir}/Private/Templates/Gridelements/
}
}
tt_content.gridelements_pi1 < lib.gridelements.defaultGridSetup
tt_content.gridelements_view < tt_content.gridelements_pi1
And when I create the named file, the error no longer appears. But there is no output. I see the divs but no content. How can I switch from deprecated gridelements to dataprocessing gridelements?
"The documentation is wrong you need this"
tt_content.gridelements_pi1 =< lib.contentElement
Sure? I could still use the original as it is written in the example for w / DataProcessing:
lib.gridelements.defaultGridSetup =< lib.contentElement
The problem is that this code
tt_content.gridelements_pi1.20.10.setup {
2col < lib.gridelements.defaultGridSetup
2col.cObject = FLUIDTEMPLATE
2col.cObject.file = {$resDir}/Private/Partials/Gridelements/2spalten.html
}
does not match the new static you included.
Take a look at the basic example shown in the documentation:
https://docs.typo3.org/typo3cms/extensions/gridelements/stable/Chapters/DataProcessing/Index.html
lib.gridelements.defaultGridSetup =< lib.contentElement
lib.gridelements.defaultGridSetup {
templateName.field = tx_gridelements_backend_layout
templateName.ifEmpty = GridElement
layoutRootPaths {
1 = EXT:gridelements/Resources/Private/Layouts/
}
partialRootPaths {
1 = EXT:gridelements/Resources/Private/Partials/
}
templateRootPaths {
1 = EXT:gridelements/Resources/Private/Templates/
}
dataProcessing {
10 = GridElementsTeam\Gridelements\DataProcessing\GridChildrenProcessor
10 {
default {
as = children
# Default options of the grid children processor
# Change them according to the needs of your layout
# Read more about it in the TypoScript section of the manual
# options {
# sortingDirection = ASC
# sortingField = sorting
# recursive = 0
# resolveFlexFormData = 1
# resolveBackendLayout = 1
# respectColumns = 1
# respectRows = 1
# }
}
}
}
}
Now if you want to add your own templates and rendering configurations you just need to add something in dataProcessing.10 like
dataProcessing {
10 = GridElementsTeam\Gridelements\DataProcessing\GridChildrenProcessor
10 {
2col {
as = columncontent
options {
resolveFlexFormData = 0
respectRows = 0
}
}
accordion {
as = accordionitems
options {
resolveFlexFormData = 0
respectRows = 0
respectColumns = 0
}
}
}
}
The name of the variables can still be children, but it might be more comfortable to deal with variable names matching then purpose of your template.
I found the solution:
Template:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="row">
<f:if condition="{children}">
<f:for each="{children.1}" as="column" key="columnNumber">
<div id="c{data.uid}-{columnNumber}" class="grid-column grid-column-{columnNumber} col-lg-6">
<f:for each="{column}" as="child">
<f:render partial="Child"
arguments="{data: child.data, children: child.children, options: options, settings: settings}" />
</f:for>
</div>
</f:for>
</f:if>
</div>
</html>
For two different cols
<div id="c{data.uid}-{columnNumber}" class="grid-column grid-column-{columnNumber} {f:if(condition: '{columnNumber} == 0', then: 'col-lg-3', else: 'col-lg-9')}">
My column numbers are left 0 and right 1
TS in dataprocessing.10:
2col {
as = children
options {
resolveChildFlexFormData = 0
}
}
}
The documentation is wrong you need this
tt_content.gridelements_pi1 =< lib.contentElement
TSconfig:
Default gridelements TSConfig
I got same error after i upgrade to latest TYPO3 10 version from Typo3 9 and include Gridelement (Recommended).
Tried resolving a template file for controller action "Standard->1" in format ".html", but none of the paths contained the expected template file (Standard/1.html). The following paths were checked:
Solution:
Rename gridelement template name with 1.html for gridelement uid=1
Change TS like:
tt_content.gridelements_pi1 {
templateRootPaths {
15 = EXT:site_config/Resources/Private/Templates/Extensions/Grid-Templates/
}
dataProcessing {
10 {
default {
options {
resolveFlexFormData = 1
resolveChildFlexFormData = 0
}
}
}
}
}
Inside Grid-Templates add your gridelement templates like 1.html, 2.html etc.
3) change template(HTML) code like this:
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="row">
<f:if condition="{children}">
<f:for each="{children.1}" as="column" key="columnNumber">
<div id="c{data.uid}-{columnNumber}" class="grid-column grid-column-{columnNumber} col-lg-6">
<f:for each="{column}" as="child">
<f:render partial="Child"
arguments="{data: child.data, children: child.children, options: options, settings: settings}" />
</f:for>
</div>
</f:for>
</f:if>
</div>
</html>
I have an HMENU with a submenu and I want to add a third submenu, if the main menu point has the uid xxx.
If I implement this TypoScript Code, all third submenus will be shown:
3 = TMENU
3 {
stdWrap.outerWrap = <div class="submenu-third-level"><ul class='submenu'>|</ul></div>
stdWrap.outerWrap.override = <div class="submenu-third-level show"><ul class='submenu'>|</ul></div>
stdWrap.outerWrap.override.if {
value.data = field:pid
isInList = 588
}
stdWrap.insertData = 1
NO.wrapItemAndSub = <li class="menu-item">|</li>
ACT = 1
ACT{
wrapItemAndSub = <li class="menu-item active">|</li>
}
SPC = 1
SPC {
doNotLinkIt = 1
doNotShowLink = 1
allWrap = </ul><ul class='submenu'>
}
}
Thus, all submenus of submenus will be shown. But I want to only show the submenus of submenus in HMENU PID XXX.
Is there a possibility to do it like:
3 = TMENU
3 {
stdWrap.outerWrap = <div class="submenu-third-level"><ul class='submenu'>|</ul></div>
stdWrap.outerWrap.override = <div class="submenu-third-level show"><ul class='submenu'>|</ul></div>
stdWrap.outerWrap.override.if {
value.data = field:pid
isInList = 588
}
stdWrap.insertData = 1
NO.wrapItemAndSub = <li class="menu-item">|</li>
ACT = 1
ACT{
wrapItemAndSub = <li class="menu-item active">|</li>
}
SPC = 1
SPC {
doNotLinkIt = 1
doNotShowLink = 1
allWrap = </ul><ul class='submenu'>
}
if {
value.data = field:pid
equals = xxx
}
}
Look you better use new HMENU like:
lib.mainmenu = HMENU
...{
1 = TMENU
...
2 = TMENU
} # so just two levels
lib.tempmenu <. lib.mainmenu # just save your menu
[PIDinRootline = xxx]
#or [globalVar = TSFE:id=xxx]
lib.mainmenu <. lib.tempmenu
lib.mainmenu.3 = TMENU # just add 3d submenu. Prev menu haven't it
[global]
If not, please leave comment
thanks for your response. I solved in a different way and it works great.
My solution:
3 = TMENU
3 {
stdWrap.outerWrap = <div class="submenu-third-level"><ul class='submenu'>|</ul></div>
stdWrap.if {
value.data = field:pid
isInList = {$menu.thirdSubmenuList}
}
NO.wrapItemAndSub = <li class="menu-item">|</li>
ACT = 1
ACT{
wrapItemAndSub = <li class="menu-item active">|</li>
}
SPC = 1
SPC {
doNotLinkIt = 1
doNotShowLink = 1
allWrap = </ul><ul class='submenu'>
}
}
The condition decide, if the menu will be displayed or not.
best regards
I'm trying to modify a template in TYPO3 and I can modify some parts of the page, but not some other parts that are 1 level deeper. For example :
HTML
<body>
...
<div class="wrapper">
...
<div id="content-right">
<div id="colRight">
<div id="metaNav"></div>
</div>
</div>
...
</div>
...
</body>
Typoscript
page.10.subparts {
colRight = HMENU
colRight.wrap = <ul>|</ul>
colRight.special.value = 6, 7, 8, 9
colRight.1 = TMENU
colRight.1 {
noBlur = 1
NO = 1
NO {
allWrap = <li>|</li>
}
}
}
But if I change colRight with metaNav (because this is where we want the links so we can place other contents in colRight), nothing happens; no content is displayed. Why?
While you have it mapped to #colRight and have problem with mapping it to its child div you can just add a HTML markup to element's wrap:
page.10.subparts {
colRight = HMENU
colRight.wrap = <div id="metaNav"><ul>|</ul></div>
// etc...
}
With rule #1: In TS every way is the best solution to get immediate results :)
edit
if you need to render many different elements under one HTML tag, you can also use COA element to span them:
page.10.subparts {
colRight = COA
colRight {
10 = HMENU
10 {
wrap = <div id="metaNav"><ul>|</ul></div>
// etc...
}
20 = TEXT
20 {
value = my text in #colRight right after #metaNav
wrap = <div class="containerAfterMetsNav">|</div>
}
}
}