Typo3 Fluid, sf_event_mgt extension - how to display only the currently used categories - typo3

By default, the extension shows all in the plugin selected categories even if not used by the event. I would like to display only the currently used categories. Any ideas?
<f:for each="{categories}" as="category">
<f:if condition="{overwriteDemand.category} == {category.item.uid}">
<f:then>
<f:link.action class="button active tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:then>
<f:else>
<f:link.action class="button tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:else>
</f:if>
</f:for>

first you need a list of categories belonging to the event. this is probably not the Fluid-Variable {categories} (where you hold all your categories as it seems)
probably you need something based on the categoriefield of your event record.
this could be done with a dataProcessor (espec. DatabaseQueryProcessor)

You can just disable the display of inactive categories like in the following code:
<f:for each="{categories}" as="category">
<f:if condition="{overwriteDemand.category} == {category.item.uid}">
<f:then>
<f:link.action class="button active tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:then>
<f:comment><![CDATA[
<f:else>
<f:link.action class="button tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:else>]]></f:comment>
</f:if>
</f:for>
or remove the codee for the unused categories completely:
<f:for each="{categories}" as="category">
<f:if condition="{overwriteDemand.category} == {category.item.uid}">
<f:link.action class="button active tiny" action="list" controller="Event" arguments="{overwriteDemand:{category: category}}">{category.title}</f:link.action>
</f:if>
</f:for>
The code seems to be from this template: Templates/Event/List.html
IMPORTANT:
Don't alter the original fluid templates but make a copy first into your own sitepackage (or a different extension).
You can adjust the template path for sf_event_mgt then by typoscript to your own templates. At best you do it in the constant editor in the backend.
Like this the changes are kept even if you update the extension, and you always have the original templates available if you need to look at them. It would also be possible to use the original templates on some pages and on other pages your own ones.
The TypoScript template snippet with the constants for the fluid files looks like this, so you know the options you've to search for in the constant editor:
plugin.tx_sfeventmgt {
view {
# cat=plugin.tx_sfeventmgt/file; type=string; label=Path to template root (FE)
templateRootPath = EXT:sf_event_mgt/Resources/Private/Templates/
# cat=plugin.tx_sfeventmgt/file; type=string; label=Path to template partials (FE)
partialRootPath = EXT:sf_event_mgt/Resources/Private/Partials/
# cat=plugin.tx_sfeventmgt/file; type=string; label=Path to template layouts (FE)
layoutRootPath = EXT:sf_event_mgt/Resources/Private/Layouts/
}
...
}

Since version 6.1.0 of the extension, there is the e:category.count() viewHelper available which returns the amount of events assigned to a category. This viewHelper can be used to filter out categories which do not have any events assigned as shown below:
<f:for each="{categories}" as="category">
<f:if condition="{e:category.count(categoryUid: category.uid)} > 0">
<f:if condition="{overwriteDemand.category} == {category.uid}">
<f:then>
<f:link.action action="list" controller="Event" arguments="{overwriteDemand:{category: category}}" class="active button">{category.title}</f:link.action>
</f:then>
<f:else>
<f:link.action action="list" controller="Event" arguments="{overwriteDemand:{category: category}}" class="button button-outline">{category.title}</f:link.action>
</f:else>
</f:if>
</f:if>
</f:for>
Please make sure, that you add the viewHelper namespace xmlns:e="http://typo3.org/ns/DERHANSEN/SfEventMgt/ViewHelpers" to the opening HTML tag of the Fluid template.

Related

TYPO3 9.5 languageNavigation doesn't take query parameters when switching language (e.g. News Detail) using route-enhancer

I have a fluid template language navigation in which i use bootstrap which looks like follows:
<f:for each="{config.lang.uid}" as="lang" iteration="iterator">
<f:if condition="{languageNavigation.{iterator.index}.available}">
<f:then>
<a
href="{languageNavigation.{iterator.index}.link}"
class="dropdown-item{f:if(condition: '{languageNavigation.{iterator.index}.active}', then: ' active')}"
hreflang="{config.lang.hreflang.{lang}}"
title="{config.lang.title.{lang}}"
>
<span>
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{lang}}" size="small" />
</f:if>
{config.lang.title.{lang}}
</span>
</a>
</f:then>
<f:else>
<span class="dropdown-item text-muted">
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{lang}}" size="small" />
</f:if>
{config.lang.title.{lang}}
</span>
</f:else>
</f:if>
</f:for>
when I'm in the detail view of a news article and I switch the language, the parameters of the query are not translated, so it basically sends me to an empty detail page
I've been trying for hours to fix this problem but I don't seem to find a solution……
I use route enhancer to translate the detail view URLs query into the news title
the nearest i've found is to add following to the link:
addQueryString="TRUE" addQueryStringMethod="GET"
but this only seems to work in < f:link.page > and I can't use
href="{languageNavigation.{iterator.index}.link}"
in <f:link.page>
i've tried with < link.typolink > as well but in both methods i lose the language-switching-goal, even if i use
lang={config.lang.hreflang.{lang}} which would translate to en-US or de-DE in the site configuration……… it just renders the link to the detail page in the current language for all links in menu
any help? I think i've reached my capabilities to solve this
I'd be grateful for any solution
-----------------Example------------------
lets say i have the following URL which is a page with the news plugin detail view of an article:
https://my.domain/news/detail/news-title
When I go to my language navigation of this page the domains rendered are:
EN: https://my.domain/news/detail/
DE: https://my.domain/de/news/detailansicht/
so, the /news-title at the end basically gets lost
If I'm navigating only in german site and I'm standing in the news list page:
https://my.domain/de/news/
from there, all links are rendered correctly, so if i go to the list item of article in question it would send me to:
DE: https://my.domain/de/news/detailansicht/news-title
So, that's what I mean with the question, the problem only appears when I'm already in the detail view page, and I want to switch the language with the navbarmenu.
instead of rendering
https://my.domain/LANG/news/detail/news-title it renders
https://my.domain/LANG/news/detail/
Did you tried the LanguageMenuDataProcessor? With it, the links are
all correct. See:
https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Fluidtemplate/Index.html?highlight=languagemenuprocessor#dataprocessing
In older TYPO3 versions DataProcessing of menu was
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
special = languages
as = languageNavigation
}
Now it uses
10 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
10 {
languages = auto
as = languageNavigation
}
This solved my Problem, thanx for the hint #Thomas Löffler
I've also updated my template to make the code more simple by getting rid of the iterator and its index:
<f:section name="Language">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="language" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<f:for each="{languageNavigation}" as="item">
<f:if condition="{item.active}">
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{item.languageId}}" size="small" />
</f:if>
<span class="nav-label">{item.title}</span>
</f:if>
</f:for>
</a>
<div class="dropdown-menu dropdown-menu-right mt-0 language-menu">
<f:for each="{languageNavigation}" as="item">
<f:if condition="{item.available}">
<f:then>
<a
href="{item.link}" hreflang="{item.hreflang}" title="{item.title}"
class="dropdown-item{f:if(condition: '{item.active}', then: ' active')}"
>
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{item.languageId}}" size="small" />
</f:if>
{item.title}
</a>
</f:then>
<f:else>
<span class="dropdown-item text-muted">
<f:if condition="{settings.navbar.langFlags}">
<core:icon identifier="{config.lang.flag.{item.languageId}}" size="small" />
</f:if>
{item.title}
</span>
</f:else>
</f:if>
</f:for>
</div>
</li>
</f:section>
Did you tried the LanguageMenuDataProcessor? With it, the links are all correct. See: https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/ContentObjects/Fluidtemplate/Index.html?highlight=languagemenuprocessor#dataprocessing

Want to change a logo with an if/then condition

I want to select a logo depending on a check box of a page property I have added via extension. The variable selectcompany is shown correctly when dumping the variables.
I am running Typo3 8 LTS.
obj.logo {
<f:if condition="{field:selectcompany}==1">
<f:then>
file = fileadmin/template/private/images/Logo1.png
</f:then>
<f:else>
file = fileadmin/template/private/images/Logo0.png
</f:else>
</f:if>
}
Although the variable is set correctly, always Logo0.png is displayed. When the variable is set to 1, I expected Logo1.png.
If this is a TypoScript snippet, you can not fill in a Fluid condition there, but have to make use of the TypoScript variant of an if condition.
https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Functions/If.html
On TypoScript, it is possible to use a condition (TYPO3 9.5.x syntax):
[page["selectcompany"] == 1]
obj.logo.file= fileadmin/Images/logo1.png
[GLOBAL]
Else, you could solve with fluid templating; it should be just:
<f:if condition="{data.selectcompany}">
<f:then>
<f:image src="fileadmin/template/private/images/Logo1.png" alt="" />
</f:then>
<f:else>
<f:image src="fileadmin/template/private/images/Logo0.png" alt="" />
</f:else>
</f:if>
I used <f:image> but I guess you could also go with a plain <img> tag, too.

TYPO3 - How to check if a news article has a certain category with fluid

How can I check that a news article has a certain category? And when a news article is allocated to a certain category I want to add some additional information to the article (Detail). I tried this in Template/News/Detail.html e.g.:
//<f:for each="{categories}" as="category">
<f:if condition="{category.title} == 'Category01'">
<f:then>
<h4>It worked!</h4>
</f:then>
<f:else>
<h4>Didn't work!</h4>
</f:else>
</f:if>
//</f:for>
What works is e.g. this:
<!-- check category -->
<f:if condition="{newsItem.categories}">
<f:for each="{newsItem.categories}" as="category">
<f:if condition="{category.title} == 'Category01'">
<f:then>
<h4>It worked!</h4>
</f:then>
</f:if>
</f:for>
</f:if>

Get next news record in Fluid Template?

I am creating a custom news template for tx_news which uses a Fluid Template.
I need to get the uid of the next news record in the loop.
<f:for each="{news}" as="newsItem" iteration="iterator">
<div id="{newsItem.uid}">
Go to next
</div>
</f:for>
You could use the extension vhs, it provides a ton of useful ViewHelpers - among them the ViewHelper v:iterator.next. I've never used it, but from reading the documentation I'd use it like this (using the ViewHelper v:variable.set from the same extension for a creating a local variable):
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:for each="{news}" as="newsItem" iteration="iterator">
<div id="{newsItem.uid}">
<v:variable.set name="nextNews" value="{news -> v:iterator.next(needle: newsItem)}"/>
Go to next
</div>
</f:for>

Clean way to switch between typo3 fluid page and action link

Is there a more clean way to switch between a page or a action link in fluid based on a var?
Now i used the if then statement but this increases a lot of double code lines. See example:
<f:if condition="{var}">
<f:then>
<f:link.page pageUid="{PageId}">
// a lot of code lines
</f:link.page>
</f:then>
<f:else>
<f:link.action pluginName="Name" controller="Cont">
// the same a lot of code lines again
</f:link.action>
</f:else>
</f:if>
You can extract the code within the links into a partial.
For this, first create a partial template. Inside an Extbase extension, they are placed in Resources/Private/Partials by convention (you can change this by using the setPartialsRootPath() method on the template object, but usually that shouldn't be necessary).
# Resources/Private/Partials/LinkContent.html
<!-- Insert your shared code lines here -->
Then reference the partial in your template:
<f:if condition="{var}">
<f:then>
<f:link.page pageUid="{PageId}">
<f:render partial="LinkContent" />
</f:link.page>
</f:then>
<f:else>
<f:link.action pluginName="Name" controller="Cont">
<f:render partial="LinkContent" />
</f:link.action>
</f:else>
</f:if>
Note that you will have to pass variables explicitly into the partial from the parent template:
<!-- Assuming there's a variable "foo" in your template -->
<f:render partial="LinkContent" arguments="{foo: foo}" />
Alternatively, you can import the entire scope into the partial:
<f:render partial="LinkContent" arguments="{_all}" />