Page Browser Menu prev / back (vorherige / nächste) für Typo3 und Bootstrap 5

Ein perfektes Page Browser Menü kannst mit diesem Tutorial aufbauen. Neulich habe ich mal wieder etwas mit Typo3 experimentiert und dabei habe ich mit Typoscript folgendes nahezu perfekte Beispiel für einen page Browser entwickelt. Eigentlich kein Ding , dachte ich mir.

Das TMENU von Typo3 ist ein mächtiges Werkzeug und bietet viele Optionen. Die simpelste Variante für einen Page Browser kann man mit 

special = browse

Jetzt müssen noch die Items festgelegt werden. Für eine einfachen „vorherige / nächste Seite“ Button-Kombination lautet die Zeile

special.items = prev|next

Mit ein wenig Optimierung haben wir den ersten sinnvollen Block geschrieben.

Das Ergebnis ist schlicht und die Struktur unterscheidet nicht zwischen linken und rechtem Button. Um nicht alles dem CSS zu überlassen habe ich ein wenig Markup hinzugefügt.

stdWrap.wrap = <i class="fa fa-arrow-left"></i>| || |<i class="fa fa-arrow-right"></i>

Mit dem Standard-Wrap habe ich zwei Font-Awesome Icons eingefügt und unterscheide zwischen prev und next. Ein Icon zeigt nach links und eines nach rechts. Nach diesem Schritt habt ihr einen funktionalen Page-Browser.

Im nächsten Schritt habe ich das Bootstrap 5-Tooltip enabled. Man muss dafür das Bootstrap Bundle im Seiten-Template einbinden, siehe auch includeJSFooter, mehr dazu auch auf der Bootstrap-Seite.

ATagParams= class="left-link" data-bs-toggle="tooltip" data-bs-placement="top"  |*| class="right-link" data-bs-toggle="tooltip" data-bs-placement="top" 

Das Problem ist ,dass der Title der Navigation durch

prev.fields.title = vorherige Seite

überschrieben wurde, weshalb ich nun keinen korrekten Tooltip mehr habe. Ich kann natürlich andere Felder mittels

ATagTitle = subtitle

einbinden. Aber ein wenig ärgert mich schon, dass ich den Seitentitel nicht mehr habe. Deshalb hole ich ihn mir zurück.

ATagTitle.cObject = TEXT
ATagTitle.cObject {
  dataWrap = DB:pages:{field:uid}:title
  wrap3 = {|}
  insertData = 1
}

Im ganzen sieht das Script nun so aus:

temp.PAGEBROWSER = HMENU
temp.PAGEBROWSER {
	special = browse
	special {
		items = prev|next
		items.prevnextToSection = 1
		index.target = _blank
		index.uid = 1
		prev.fields.title = vorherige Seite
		next.fields.title = nächste Seite
	}
	1 = TMENU
	1.wrap=<nav><div class="page-browser"><p class="tease d-flex justify-content-center">|</p></nav>
	1.NO {
		linkWrap = <span>|</span>
        stdWrap.wrap = <i class="fa fa-arrow-left"></i>| || |<i class="fa fa-arrow-right"></i>
		ATagParams= class="left-link" data-bs-toggle="tooltip" data-bs-placement="top"  |*| class="right-link" data-bs-toggle="tooltip" data-bs-placement="top" 
        ATagTitle.cObject = TEXT
        ATagTitle.cObject {
            dataWrap = DB:pages:{field:uid}:title
            wrap3 = {|}
            insertData = 1
        }
	}
}

Fehlt noch das CSS. Dann sieht das ganze so aus.

/* Page Browser */
.page-browser p {
  line-height: 1rem;
}
.page-browser span:hover {
}
.page-browser span a i.fa {
  margin-right: 0.4rem;
  margin-left: 0rem;
}
.page-browser span a.right-link i.fa {
  margin-right: 0rem;
  margin-left: 0.4rem;
}
.page-browser span {
  display: inline-block;
  margin-right: 1rem;
}
.page-browser a {
  border: 1px solid var(--w-table-odd);
  border-radius: 4rem;
  padding: 1rem 1.22rem;
  text-decoration:none;
  white-space: nowrap;
  min-width: 3rem;
  min-height: 3rem;
  display: inline-block;
}
.page-browser a:hover, .page-browser a:focus {
  background-color: var(--w-table-odd);
  border: 1px solid var(--w-table-odd);
}
.page-browser a.current {
  background-color: var(--w-table-odd);
}

Schreibe mir in den Kommentaren, was du noch verbessern würdest.

Das nächste Tutorial erstelle ich für einen Page-Browser mit special = directory und einer Darstellung als Pagination