Sortierung im Frontend

[ph!L]

Hallo Gemeinde,

ich bin auf der Suche nach einer Lösung im Frontend eine Sortierung anzubieten.
Dabei bin ich auf diesen Thread bei GitHub gestoßen, der wunderbar erklärt, wie die URL Struktur dafür aussehen muss: https://github.com/MetaModels/core/issues/167

Zitat:

siehe http://metamodels.readthedocs.org/de...telements.html
/orderBy/<Spaltenname d. Attributs>/orderDir/<DESC || ASC>.html

Nun stehe ich nur vor der Problematik, das in ein anständiges <select> Dropdown zu überführen.

Ich hätte es jetzt so versucht, aber das hängt ja einfach Parameter an die URL an, was nicht funktioniert:

<select name="sort">
    <option value="name">Name</option>
    <option value="date">VÖ Datum</option>
    <option value="website_likes_de">Website Likes DE</option>
    <option value="website_likes_en">Website Likes EN</option>
    <option value="fb_likes">FB Likes</option>
    <option value="fb_shares">FB Shares</option>
</select>

Gleichzeitig muss das ganze ja auch noch mit den Filtern kooperieren, das heißt diese URL Strukturen kann ich nicht einfach ausfiltern und nur die der Sortierung übrig lassen.

Hat dazu vielleicht schon jemand einen BestPractice Case, den er mit uns teilen mag?

Viele Grüße,

Philipp

[zonky]

als Select habe ich das noch nicht probiert - immer nur als Link in einer Tabellenüberschrift... aber wie in http://metamodels.readthedocs.io/de/...ionen-ce-liste zu lesen, sind die Keys "orderBy" und "orderDir" - inkl. Binnenmajuskel, d.h. das sollte dann wohl eher so aussehen

<input type="hidden" name="orderDir" value="ASC">
<select name="orderBy">
    <option value="name">Name</option>
    <option value="date">VÖ Datum</option>
    <option value="website_likes_de">Website Likes DE</option>
    <option value="website_likes_en">Website Likes EN</option>
    <option value="fb_likes">FB Likes</option>
    <option value="fb_shares">FB Shares</option>
</select> 

[tognit]

Hallo zusammen,

habe das mit Select auch gerade versucht und eigentlich funktioniert es auch fast!

Hier mein Code

<select name="addressName1" id="ctrl_addressName1" class="">
	<option value="">Nicht filtern</option>
	<option value="orderBy=addressName1&orderDir=ASC">A-Z</option>
	<option value="orderBy=addressName1&orderDir=DESC">Z-A</option>
</select>

Nur leider werden die Sonderzeichen in der URL maskiert und leider finde ich zur Zeit keine Idee das zu lösen.

http://dev.domain.ch/portal/address/list/addressName1/orderBy%25E2%2589%25A1addressName1%2526orderDir%2526%252361%253BASC.html

aber ich möchte natürlich die nachfolgende URL

http://dev.domain.ch/portal/address/list/addressName1/orderBy/addressName1/orderDir/ASC.html

Besten Dank

Gruss
Steven

[zonky]

hmm... gibt es einen Link um sich das mal anzusehen? Ich habe noch nicht verstanden, an welcher Stelle die Umwandlung erfolgt - die sollte hierbei eigentlich nicht greifen (btw: das doppelte rawurlencode ist notwendig für die Filter, um z.B. nach "Maschine 08/15" suchen zu können)

[tognit]

Ist nur Lokal...

Ich habe es als Test in ein eigenes Filter-Template platziert...

<?php $this->block('error'); ?>
<?php if ($this->errors): ?>
<?php foreach ($this->errors as $error): ?>
<p class="error"><?= $error ?></p>
<?php endforeach; ?>
<?php endif; ?>
<?php $this->endblock(); ?>

<?php $this->block('formfield'); ?>
<? //= $this->formfield ?>
 
<select name="addressName1" id="ctrl_addressName1" class="">
    <option value="">Nicht filtern</option>
    <option value="orderBy=addressName1&orderDir=ASC">A-Z</option>
    <option value="orderBy=addressName1&orderDir=DESC">Z-A</option>
</select>

<?php $this->endblock(); ?>

Und als "MeteModels-Filter" im Frontend ausgegeben.

[zonky]

Sortieren hat ja eigentlich nichts mit dem Filtern zu tun - es ändert nicht die Menge an angezeigten Items sondern stellt diese nur anders dar...

Ich generiere mir die entsprechenden Links als href im Template per

\Frontend::addToUrl(...) 

und aus die Maus

[ph!L]

Ich hatte das damals tatsächlich nur gelöst, in dem ich es an zonky abgegeben habe

Darf ich das Template hier posten?

[zonky]

schöner wäre ein Artikel für das MM-Handbuch-"Kochbuch"...

[ph!L]

Das könnte man auch so machen. Musst Du aber ein bisschen helfen, da ich nicht jede Zeile Code wirklich verstehe.

[tognit]

Hallo zusammen,

besten Dank für die Hilfe.

Habe es jetzt so gelöst...

<? if(stristr($this->replaceInsertTags('{{env::request}}'), 'orderBy/addressName1/orderDir/ASC') === FALSE): ?>
<a href="<?= \Frontend::addToUrl('orderBy=addressName1&orderDir=ASC'); ?>" ddata-toggle="tooltip" data-placement="top" title="A-Z">
     <i class="material-icons md-18">&#xE313;</i>
</a>
<? endif; ?>

<? if(stristr($this->replaceInsertTags('{{env::request}}'), 'orderBy/addressName1/orderDir/DESC') === FALSE): ?>
<a href="<?= \Frontend::addToUrl('orderBy=addressName1&orderDir=DESC'); ?>" ddata-toggle="tooltip" data-placement="top" title="Z-A">
     <i class="material-icons md-18">&#xE316;</i>
</a>
<? endif; ?>

[zonky]

ddata-toggle="tooltip"

[Shania]

Und das hast du in dein Template für die Frontendliste eingefügt oder wo?

Mir fehlt diese Funktion seit dem Wechsel vom Catalog auch immer noch.

[tognit]

Hallo zonky

ddata-toggle="tooltip"

Habe ich nach dem Eintrag auch gesehen

Das habe ich im Template "metamodel_list.html5" eingefügt

    <table class="table">
         <thead>
            <tr>
                <th>Name des Kunden
                    <? if(stristr($this->replaceInsertTags('{{env::request}}'), 'orderBy/addressName1/orderDir/ASC') === FALSE): ?>
                    <a href="<?= \Frontend::addToUrl('orderBy=addressName1&orderDir=ASC'); ?>" data-toggle="tooltip" data-placement="top" title="A-Z">
                        <i class="material-icons md-18">?</i>
                    </a>
                    <? endif; ?>
                    <? if(stristr($this->replaceInsertTags('{{env::request}}'), 'orderBy/addressName1/orderDir/DESC') === FALSE): ?>
                    <a href="<?= \Frontend::addToUrl('orderBy=addressName1&orderDir=DESC'); ?>" data-toggle="tooltip" data-placement="top" title="Z-A">
                        <i class="material-icons md-18">?</i>
                    </a>
                    <? endif; ?>
                </th>
             </tr>
         </thead>
     </table>

[zonky]

das dürfte die gängigste Methode bzw. Ort sein (metamodels_prerendered.html5) - Du kannst das aber auch "irgendwo" hin pappen...

[zonky]

ich würde eher auf den GET-Parameter direkt gucken da auch "orderDir/ASC/orderBy/addressName1" möglich wäre

<?php

// erstelle URL für Sortierung
$orderDir = \Input::get('orderDir') == 'ASC' ? 'ASC' : 'DESC';
$href     = \Frontend::addToUrl('orderBy=addressName1&orderDir=' . $orderDir);
$icon     = $orderDir == 'DESC' ? 'icon^' : 'iconv';
?>
....

<a href="<?= $href ?>" data-toggle="tooltip" data-placement="top" title="A-Z"><i class="material-icons md-18"><?= $icon ?></i></a>

... so i.E. ...

[Shania]

Also, vom Grundsatz her klappt das so wie von tognit gepostet prima, danke!

Was ist der Vorteil an deiner Lösung zonky?

Was mich jetzt etwas stört ist, dass beim Öffnen der Seite das Icon für eine aufsteigende Sortierung beim Titel angezeigt wird, obwohl meine Liste standardmäßig aufsteigend nach dem Titel sortiert ist. Das lässt sich aber wahrscheinlich mit deiner Variante auch nicht lösen oder?

[zonky]

wen von uns beiden spricht Du mit "Deine Lösung" an?

Vorteil von meiner Lösung: du hast nicht so viel PHP Gedöns im HTML sondern "sauber" getrennt... hier könntest Du auch den Defaultwert setzen bzw. auch über "$this->caller->getParent()" aus den Einstellungen abfragen

[Shania]

Ja, ich meinte dich, zonky. Sorry, wenn das nicht deutlich genug war. Aber wenn tognit sich mit einer Lösung gemeldet hätte, wäre ich nun auch nicht böse gewesen ;) .

Ah, o.k., das etwas zu trennen ist natürlich schicker :) . Meine Fähigkeiten in der Programmierung sind ja recht beschränkt. Ich kann solchen Code zwar einigermaßen lesen, einbauen und dran rumbasteln bis es so ist, wie ich es möchte, aber das wars dann leider auch.

Den Status müsste ich ja sicher mit einer if Abfrage abfragen, aber ich kenne leider die ganzen Standardvariablen nicht, von der richtigen Syntax in Contao ganz zu schweigen. Da mache ich eher nur copy und paste. Ab und an hilft mir mal jemand, der das besser kann als ich, aber sie hat gerade leider keine Zeit.

[zonky]

Man muss sicher kein Informatiker sein, aber so´n biss´l PHP/HTML/CSS/JS ist schon recht brauchbar, wenn man "professionelle" Ergebnisse mit MM erhalten möchte... sofern Du in Zukunft mehrere Projekte mit MM hast, wäre es sicher gut, sich die Zeit nehmen und einige Tutorials abzuarbeiten oder dauerhaft eine/n AnsprechpartnerIn für die Projekte ins Boot zu holen

[Shania]

Bis auf JS kann ich alles ein bisschen, aber eben eher so, dass ich was Bestehendes geringfügig anpasse. Beim Catalog hat das alles soweit gut geklappt und man konnte sich aufgrund der Doku tatsächlich vieles selber erarbeiten. Das mache ich dann auch gerne. Bei MM wächst die Doku nun ja auch stetig weiter .

Eine Standardfunktion zur Sortierung wäre schon eine nette Sache in MM, denn das brauchen sicherlich viele. Ich habe viele Merkmale, nach denen der Anwender Filtern kann und lange Listen, die man dann eventuell auch noch sortieren möchte. Man kann die Auswahl nach Merkmalen nicht mit diesem Codeschipsel mit der Sortierung kombinieren. Das ist mir jetzt erst wieder aufgefallen. Im Catalog war das im Standard enthalten. Das war vielleicht optisch nicht so schick, weil die Sortierung über ein Selectfeld erfolgte, aber die Funktion war super.

[zonky]

Eine Standardfunktion zur Sortierung wäre schon eine nette Sache in MM, denn das brauchen sicherlich viele.

kann mich nicht daran erinnern, dass in den letzten zwei Jahren mal jemand danach gefragt hätte... hmm...

Nach verschiedenen Attributen und automatisch auf/ab geht schon... z.B. https://www.vhw-hamburg.de/wohnen/ak...-angebote.html

[Shania]

Ja, sicher, wenn man es ins Template selber einbaut, für das es kein Kochrezept oder Vorlage wie hier gibt . Sieht auf jeden Fall super aus, so . Im Catalog, war das einfach ein Inhaltselement, was man eingebaut hat. Da klickte man den Catalog und die Felder an, nach denen sortiert werden sollte und das wars.

Gebraucht wird es ja scheinbar, aber wahrscheinlich so unterschiedlich, dass niemand für den Standard danach fragt. Die meisten werden einfach mehr Programmierkenntnisse haben als ich. Ich finds nur schade, weil die MM an sich so toll sind und so viel mehr Seiten sie vielleicht auch nutzen würden, wenn man dafür eben nicht zwingend so viele Programmierkenntnnisse bräuchte. Aber vielleicht liege ich mit dieser Einschätzung auch falsch, weil es mit weniger Kenntnissen auch einfach unendlich viel Zeit kostet, die kaum wer aufbringen mag oder kann.

So gesehen würde ich mich zumindest freuen, wenn es ein Kochrezept mit Codeschnipslen wie hier geben würde, wo die ausgewählten Merkmale berücksichtigt blieben.

[zonky]

man könnte die Sortierung in das CE/Modul Filter oder Liste oder noch in was eigenständiges rein setzen - sollte bei Filter-clear die Sortierung auch raus oder eigenständig bleiben? als Select oder Linkliste?

Ich kann mal ein paar Sachen ins "Kochbuch" schreiben als Vorlage... aktuell aber mit MM 2.1 "freizeittechnisch" ausgelastet...

[Shania]

sollte bei Filter-clear die Sortierung auch raus oder eigenständig bleiben? als Select oder Linkliste?

Bei "Alle Filter zurück setzen" sollte zumindest bei mir, die Sortierung auch raus, sonst kommt man gar nicht auf den Ursprungszustand beim Öffnen der Seite zurück, was ich nicht so gut finde.

Mir wäre als Select lieber, weil es dann nicht so viel Platz einnimmt. Aber schicker ist es natürlich im Header über der Liste. Das braucht dann gar keinen extra Platz. Also, wenn das einfacher ist, ist das auch gut, da man es dann ja ohnehin richtig als Code einbauen muss. Wie es für dich einfacher ist, würde ich sagen.

Ich kann mal ein paar Sachen ins "Kochbuch" schreiben als Vorlage... aktuell aber mit MM 2.1 "freizeittechnisch" ausgelastet...

Danke dir . Ich bin geduldig . Sobald die 2.1 für 4.4 öffentlich verfügbar ist, werde ich aber wohl auch das Update planen.

[tognit]

Hallo zonky,

besten Dank für deine Variante.

ich würde eher auf den GET-Parameter direkt gucken da auch "orderDir/ASC/orderBy/addressName1" möglich wäre

<?php

// erstelle URL für Sortierung
$orderDir = \Input::get('orderDir') == 'ASC' ? 'ASC' : 'DESC';
$href     = \Frontend::addToUrl('orderBy=addressName1&orderDir=' . $orderDir);
$icon     = $orderDir == 'DESC' ? 'icon^' : 'iconv';
?>
....

<a href="<?= $href ?>" data-toggle="tooltip" data-placement="top" title="A-Z"><i class="material-icons md-18"><?= $icon ?></i></a>

... so i.E. ...

aber wie würde das aussehen mit zwei und mehr Sortierlinks?

[zonky]

mach Dir ein

$orderBy = ...;
...
$href     = \Frontend::addToUrl('orderBy='. $orderBy . '&orderDir=' . $orderDir);
.. 

und belege das mit einen Standardwert oder mit dem was aus der URL kommt...