vidi_frontend

Vidi für TYPO3 CMS

Generische Listenkomponente, in der Inhalte in erweiterter Weise gefiltert werden können..... Veni, vidi, vidi, vici! Diese Erweiterung basiert auf Vidi, das mehr oder weniger viele Möglichkeiten bietet weniger den gleichen Funktionsumfang, sondern im Backend.

Nach der Installation kann konfiguriert werden, welcher Inhaltstyp mit einer anpassbaren Vorlage im Plugin-Eintrag im Backend verknüpft werden soll. Auf der Frontend-Seite verwenden wir die exzellenten DataTables, ein leistungsfähiges jQuery-Plugin, das intelligent und schnell zum Sortieren und Filtern von Daten ist. Die Filterleiste wird durch das Visual Search jQuery Plugin bereitgestellt, das schöne Facettenfunktionen und eine intuitive Suche bietet.

Live-Beispiel http://www.washinhcf.org/resources/publications/

Projektinformationen und Freigaben

Stabile Version: http://typo3.org/extensions/repository/view/vidi_frontend

Entwicklungsversion: https://github.com/fabarea/vidi_frontend

git clone https://github.com/fabarea/vidi_frontend.git

Neuigkeiten über die neuesten Entwicklungen werden auch auf http://twitter.com/fudriot bekannt gegeben

Installation und Anforderung

Die Erweiterung erfordert TYPO3 7.6 oder höher. Installieren Sie die Erweiterung wie gewohnt im Extension Manager vom TER aus oder laden Sie die Git-Version herunter:

# lokale Installation
cd typo3conf/ext

# Download des Quellcodes
git clone https://github.com/fabarea/vidi_frontend.git

# -> nächster Schritt, ist das Öffnen des Extension Managers im BE.

Du bist fast da! Erstellen Sie ein Inhaltselement vom Typ "Vidi Frontend" im General Plugin > Generic List Component und konfigurieren Sie es nach Ihren Wünschen.

Konfiguration

Das Plugin kann an verschiedenen Stellen wie TypoScript, PHP oder im Plugin-Datensatz selbst konfiguriert werden.

Wichtig ist standardmäßig, dass die CSS + JS-Dateien für Bootstrap geladen werden. Für einen besseren Vanillegeschmack bearbeiten Sie den Pfad in den Einstellungen in TypoScript und die richtigen Assets für Sie zu laden. Siehe unten die Kommentare::

#############################
# plugin.tx_vidifrontend
#############################
plugin.tx_vidifrontend {

    einstellungen {

        asset {

            vidiCss {
                # Für keinen Bootstrap ersetzen Sie "vidi_frontend.bootstrap.min.css" durch "vidi_frontend.min.css"
                pfad = EXT:vidi_frontend/Ressourcen/Public/Build/StyleSheets/vidi_frontend.bootstrap.min.css
                typ = css
            }

            vidiJs {
                # Für keinen Bootstrap ersetzen Sie "vidi_frontend.bootstrap.min.js" durch "vidi_frontend.min.js"
                pfad = EXT:vidi_frontend/Ressourcen/Public/Build/JavaScript/vidi_frontend.bootstrap.min.js
                typ = js
            }
        }
    }
}

Benutzerdefinierter Raster-Renderer

Angenommen, wir wollen eine komplette kundenspezifische Ausgabe für eine Spalte, können wir dies durch die Implementierung eines Grid-Renderings erreichen. Hier ist ein Beispiel für die Tabelle fe_users. Wir müssen zuerst die neue Spalte im TCA in einer Configuration/TCA/Override/fe_users.php registrieren.

$tca = [
    grid_frontend' => [ [
        Spalten' => [ [

            # Der Schlüssel ist hier völlig kostenlos. Wir setzen jedoch ein Präfix mit "__", um zwischen einer "normalen" Spalte zu unterscheiden, die einem Feld zugeordnet ist.
            __my_custom_column' => [ [
                Renderer' => array((
                    Vendor\MyExt\Grid\MyColumnRenderer',
                ),
                Sortierung' => FALSCH,
                sortierbar' => FALSCH,
                label' => '',
            ],
        ],
    ],
];

\TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA']['fe_users'], $tca);

Die entsprechende Klasse wird in EXT:MyExt/Classes/Grid/MyColumnRenderer platziert:

namensraum Anbieter\MyExt\Grid;

/**
 * Klasse, um eine benutzerdefinierte Ausgabe zu erstellen.
 */
klasse MyColumnRenderer erweitert Fab\Vidi\Grid\ColumnRendererAbstract {

    /**
     * Rendern Sie eine Veröffentlichung.
     *
     * @return Zeichenkette
     */
    öffentliche Funktion render() {) {
        gibt $output zurück;
}

Spaltenkonfiguration anpassen

Die Konfiguration der Spalten wird aus dem TCA übernommen. Manchmal müssen wir seine Konfiguration für das Frontend anpassen und können es einfach erweitern. Am besten lernst du am Beispiel und lässt dich von EXT:vidi_frontend/Configuration/TCA/fe_users.php inspirieren:

$tca = array(
    grid_frontend' => array(
        Spalten' => array(

            # Benutzerdefinierte Felder für die FE gehen hierhin
            'title' => [],
        ),
    ),
);

Benutzerdefinierte Facetten

Facetten sind in der visuellen Suche sichtbar und ermöglichen die Suche nach Kriterien. Facetten werden in der Regel auf ein Feld abgebildet, sind aber nicht zwingend erforderlich; es können beliebige Werte sein. Um eine benutzerdefinierte Facette bereitzustellen, muss die Schnittstelle \Fab\Vidi\Facet\Facet\FacetInterface implementiert werden. Am besten ist es, sich von der \Fab\Vidi\Facet\StandardFacet\ inspirieren zu lassen und eine eigene Implementierung anzubieten.

$tca = [
    grid_frontend' => [ [
        Facetten' => [ [
            new \Vendor\MyExt\Facets\MyCustomFacet(),
        ],
    ],
];

\TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA']['fe_users'], $tca);

Die assoziierte Klasse:

<?php
namensraum Vendor\MyExt\Facets;

verwenden Sie Fab\Vidi\Facet\Facet\FacetInterface;
verwenden Sie Fab\Vidi\Facet\StandardFacet;
benutzen Sie Fab\Vidi\Persistence\Matcher;

/**
 * Klasse für die Konfiguration eines benutzerdefinierten Facettenelements.
 */
klasse KategoriePublikationFacet implementiert FacetInterface Interface
{

    /**
     * @var Zeichenkette
     */
    geschützter $name ='__categories_publications';

    /**
     * @var Zeichenkette
     */
    geschütztes $label ='Kategorien';

    /**
     * @var-Array
     */
    geschützte $suggestions = [];

    /**
     * @var Zeichenkette
     */
    geschützt $fieldNameAndPath ='metadata.categories';

    /**
     * @var Zeichenkette
     */
    geschützter $dataType;

    /**
     * @var Zeichenkette
     */
    geschützt $canModifyMatcher = true;

    /**
     * Konstrukteur einer generischen Facette in Vidi.
     *
     * @param string $name
     * @param string $label
     * @param array $suggestions
     * @param Zeichenkette $fieldNameAndPath
     */
    öffentliche Funktion __construct($name = ''', $label = '', array $suggestions = [], $fieldNameAndPath = '')
    {
    }

    /**
     * @return Zeichenkette
     */
    öffentliche Funktion getName()
    {
        gibt $this->name zurück;
    }

    /**
     * @return Zeichenkette
     */
    öffentliche Funktion getLabel()
    {
        gibt $this->label zurück;
    }

    /**
     * @return-Array
     */
    öffentliche Funktion getSuggestions()
    {

        return [1 => 'foo', 2 => 'bar', ]...;
    }

    /**
     * @return bool
     */
    public function hasSuggestions()
    {
        gibt true zurück;
    }

    /**
     * @return Zeichenkette
     */
    öffentliche Funktion getFieldNameAndPath()
    {
        gibt $this->fieldNameAndPath zurück;
    }

    /**
     * @param Zeichenkette $dataType
     * @return $this
     */
    öffentliche Funktion setDataType($dataType)
    {
        $this->dataType = $dataType;
        gib mir $das zurück;
    }

    /**
     * @return bool
     */
    öffentliche Funktion canModifyMatcher()
    {
        gibt $this->canModifyMatcher zurück;
    }

    /**
     * @param Matcher $matcher $matcher
     * @param $value
     * @return Matcher
     */
    öffentliche Funktion modifyMatcher(Matcher $matcher, $value)
    {
        if (MathUtility::canBeInterpretedAsInteger($value)) {
            $matcher->equals('metadata.categories', $value);
        } sonst {
            $matcher->like('metadata.categories', $value);
        }
        gibt $matcher zurück;
    }

    /**
     * Implementierung einer magischen Methode zum Abrufen des Zustands.
     *
     * @param array $states
     * @return StandardFacet
     */
    statische öffentliche Funktion __set_state($states)
    {
        gibt neue KategoriePublikationFacet($states['name'], $states['label'], $states['suggestions'], $states['fieldNameAndPath']) zurück;
    }
}

Eine neue Vorlage registrieren

Die Detailansicht des Inhalts kann per Plugin-Datensatz personalisiert werden. Um weitere Vorlagen zu registrieren, definieren Sie diese einfach in Ihrer TypoScript-Konfiguration. Dieses TypoScript wird typischerweise in EXT:foo/Configuration/TypoScript/setup.txt abgelegt:

plugin.tx_vidifrontend {
    einstellungen {
        vorlagen {

            # Die Taste "1", "2" wird von dieser Erweiterung bereits belegt.
            # Verwenden Sie die Tasten "10", "11" und folgende, damit Ihre eigenen Vorlagen sicher sind.
            10 {
                title = Foo Detailansicht
                pfad = EXT:foo/Ressourcen/Private/Templates/VidiFrontend/ShowFoo.html
                dataType = fe_users
            }
        }
    }
}

Hinzufügen von benutzerdefinierten Einschränkungen

Falls erforderlich, um zusätzliche benutzerdefinierte Einschränkungen auf einem "niedrigen" Niveau hinzuzufügen, kann man einen Signal-Slot im Content Repository von Vidi nutzen. Um dies zu tun, registrieren Sie zuerst den Slot in einer Ihrer ext_localconf.php Dateien:

$signalSlotDispatcher = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance('TYPO3\CMS\Extbase\SignalSlot\Dispatcher');

$signalSlotDispatcher->connect(connect()
    Fab\Vidi\Domain\Repository\ContentRepository',
    "postProcessConstraintsObject",
    Anbieter-Erweiterung Produktübersicht,
    Prozessbeschränkungen',
    wahr
);

Der nächste Schritt ist das Schreiben und Anpassen der PHP-Klasse wie unten als Beispiel angegeben. Sie können das $constraints-Objekt frei manipulieren und nach Ihren Wünschen personalisieren:

<?php
namespace Vendor\Extension\Aspects;

verwenden Sie Fab\Vidi\Persistence\Query;
verwenden Sie TYPO3\CMS\Extbase\Persistenz\Generic\Qom\ConstraintInterface;

/**
 * Klasse, die den Signalsteckplatz für den Vidi Content Controller verwaltet
 */
klasse ProdukteAufnahme {Aufnahme {

    /**
     * Nachbearbeiten Sie das Constraints-Objekt, um die Dateitypen zu berücksichtigen.
     *
     * @param Abfrage $query
     * @param ConstraintInterface|null $constraints
     * @param $constraintContainer|null
     * @return-Array
     */
    public function processConstraints(Query $query, $constraints, $constraintContainer)
    {
        if ($this->isFrontendMode() && $query->getType() ===='tt_products') {

            $additionalConstraints = $query->logicalAnd(
                $query->logicalNot($query->equals('title', '')),
                $query->logicalNot($query->equals('image', '')))
            );

            $constraints = null ===== $constraints
                ? $zusätzliche Einschränkungen
                : $query->logicalAnd(
                    $Einschränkungen,
                    $zusätzliche Einschränkungen
                );
        }
        gibt [$query, $constraints, $constraintContainer] zurück;
    }

    /**
     * Gibt zurück, ob der aktuelle Modus Frontend ist
     *
     * @return bool
     */
    geschützte Funktion isFrontendMode()
    {
        gibt TYPO3_MODE ====='FE' zurück;
    }
}

Dynamische Parameter übertragen

Wir können zusätzliche GET / POST-Parameter übertragen, um die Ergebnismenge im Raster dynamisch zu filtern. Ein typischer Anwendungsfall ist das Hinzufügen eines Dropdown-Menüs, um zusätzliche Filter zu erstellen. In diesem Fall, der Parametername muss so aussehen, dass "foo" ein Feldname ist. Der Wert kann ein einfacher Wert (gleich) oder eine CSV-Liste sein, die als Array (in) interpretiert wird.

tx_vididfrontend_pi1[entspricht][foo]=bar
tx_vididfrontend_pi1[passt][foo]=bar,baz

Benutzerdefinierte Aktionen hinzufügen

Standardmäßig beinhaltet Vidi Frontend einige Standard-Massenaktionen wie XML, CSV, XLS-Export. Es ist natürlich möglich, eigene Aktionen hinzuzufügen. Dazu sind zwei Schritte erforderlich. Die erste ist die Deklaration im TCA:

$tca = array(
    grid_frontend' => [ [
        Spalten' => [ [
            ...
        ],
        Aktionen' => [ [
            new \Vendor\MyExt\MassAction\MyAction(),
        ]
    ],
);

\TYPO3\CMS\Core\Utility\ArrayUtility::mergeRecursiveWithOverrule($GLOBALS['TCA']['tx_domain_model_foo'], $tca);

Dann müssen Sie Ihre eigene Klasse deklarieren und das MassActionInterface implementieren, wo wir zwei Hauptmethoden haben:

• render(), wobei das HTML für den Menüpunkt zusammengestellt wird.
• execute(), wo wir die Artikel aus der Anfrage erhalten und wir sie nach unseren Bedürfnissen bearbeiten können. Die execute()-Methode muss ein ResultActionInterface zurückgeben, das die Antwort plus mögliche Header enthält, die an den Client (Browser) gesendet werden sollen.

<?php
namensraum Vendor\MyExt\MassAction;

verwenden Sie Fab\VidiFrontend\Service\ContentService;
verwenden Sie TYPO3\CMS\Extbase\Utility\Lokalisierungs-Utility;

/**
 * Klasse MyAction
 */
klasse MyAction erweitert AbstractMassAction
{

    /**
     * @var Zeichenkette
     */
    geschützter $name ='my_action';

    /**
     * @return Zeichenkette
     */
    öffentliche Funktion render()
    {
        $result = sprintf('<li><a  class="export-csv" data-format="csv"><i class="fa fa-file-text-o"></i> %s</a></li>',
            $this->getMassActionUrl(),
            LocalizationUtility::translate('my_action', 'foo')
        );
        gibt $result zurück;
    }

    /**
     * Liefert den Namen dieser Aktion....
     *
     * @return Zeichenkette
     */
    öffentliche Funktion getName()
    {
        gibt $this->name zurück;
    }

    /**
     * Führen Sie die Aktion aus.
     *
     * @param ContentService $contentService $contentService
     * @return ErgebnisActionInterface Schnittstelle
     */
    public function execute(ContentService $contentService)
    {
        $result = neue JsonResultAction();
        $objects = $contentService->getObjects();

        / / Stellen Sie sicher, dass wir etwas zu verarbeiten haben.....
        if ((bool)$objects) {

            / / / etwas tun
            ...

            $result->setOuptut('foo')
        }

        gibt $result zurück;
    }
}

Darüber hinaus können Sie erwägen, Ihr eigenes JS zu laden, um die Aktion abzufangen und auf der Clientseite jede Aktion auszulösen, die für Ihre Anfrage notwendig ist, wie z.B. eine Ajax-Anfrage.

RealURL-Konfiguration

Die RealURL-Konfiguration könnte wie folgt aussehen, um eine schöne URL zu einer Detailansicht anzuzeigen.

postVarSets' => [ [
    _DEFAULT' => [ [
        Inhalt' => [ [
            ['GETvar' => 'tx_vidifrontend_pi1[contentElement]'],
            ['GETvar' => 'tx_vidifrontend_pi1[Aktion]'],
            ['GETvar' => 'tx_vidifrontend_pi1[Inhalt]'],
        ],
    ]
],

Aufbau von Vermögenswerten in Entwicklung

Die Erweiterung bietet JS / CSS-Bundles, die alle notwendigen Codes enthalten. Wenn Sie einen neuen Build für diese JS / CSS-Dateien erstellen müssen, beachten Sie, dass Bower und Grunt auf Ihrem System als Voraussetzung installiert sein müssen.

Installieren Sie die erforderlichen Web Components:

cd typo3conf/ext/vidi_frontend

# Dadurch wird das Verzeichnis Resources/Private/BowerComponents gefüllt.
laube installieren

# Installieren Sie das notwendige NodeJS-Paket.
npm installieren

Dann kannst du den Grunt der Erweiterung ausführen, um einen Build zu generieren:

cd typo3conf/ext/vidi_frontend
grunzerbau

Während der Entwicklung können Sie die Uhr verwenden, die den Build generiert, während Sie Dateien bearbeiten:

grunzuhr

Patch VisualSearch

Um die Benutzerfreundlichkeit zu verbessern, wurde das Visual Search Plugin gepatcht, so dass das Dropdown-Menü nicht unpassend erscheint. Das bedeutet, dass bei einem neuen Build der Patch (vorerst) manuell hinzugefügt werden muss:

cd Ressourcen/Private/BowerComponents/visualsearch/
grep -lr "app.searchBox.searchEvent(e)" .

-> Es sollte 2 Vorkommnisse geben. Die folgenden Kommentarzeilen beziehen sich auf "_.defer".

# Entfernen Sie angenommene bereits jQuery aus der Abhängigkeit
curl http://documentcloud.github.io/visualsearch/vendor/jquery.ui.core.js > Ressourcen/Private/BowerComponents/visualsearch/build-min/dependencies.js
curl http://documentcloud.github.io/visualsearch/vendor/jquery.ui.position.js >> Ressourcen/Private/BowerComponents/visualsearch/build-min/dependencies.js
curl http://documentcloud.github.io/visualsearch/vendor/jquery.ui.widget.js >> Ressourcen/Private/BowerComponents/visualsearch/build-min/dependencies.js
curl http://documentcloud.github.io/visualsearch/vendor/jquery.ui.menu.js >> Ressourcen/Private/BowerComponents/visualsearch/build-min/dependencies.js
curl http://documentcloud.github.io/visualsearch/vendor/jquery.ui.autocomplete.js >> Ressourcen/Private/BowerComponents/visualsearch/build-min/dependencies.js
curl http://documentcloud.github.io/visualsearch/vendor/underscore-1.5.2.js >> Ressourcen/Private/BowerComponents/visualsearch/build-min/dependencies.js
curl http://documentcloud.github.io/visualsearch/vendor/backbone-1.1.0.js >> Ressourcen/Private/BowerComponents/visualsearch/build-min/dependencies.js