category Listview

Fragen zum Erstellen von Templates für webEdition.
apollo23
Member
Beiträge: 48
Registriert: Di 6. Mär 2012, 01:26

category Listview

Beitragvon apollo23 » Mo 12. Feb 2018, 00:17

Hallo WebEditioner,
für eine Portfolio-Website gibt es viele Detailseiten mit jeweils vielen Bildern und etwas Text, sowie eine Übersichtsseite auf denen über eine Listview von den vielen Detailseiten jeweils ein Bild angezeigt wird, diese Listview ist zudem über eine li (derzeit ID des webEdition Dokumentes) und javascript sortierbar. Ich möchte anstelle der Dokument-ID die ++ ID der Kategorien ++ verwenden.

NEU:
A) Auf der Detailseite soll der Redakteur Bilder einstellen, einen Text hinzufügen sowie über ein, nur in webEdition sichtbares "select feld" dynamisch ausgelesene Kategorien auswählen können, zum Beispiel .. Category A, Category B, Category C,
B) Auf der Übersichtsseite soll wie gehabt ein Bild der Detailseite in einer Liestview ausgegeben werden. Diese Bilder-Liestview soll zudem über eine li sortierbar sein, welche die ID der Category A oder Category B beinhaltet.

Frage
Wie ist es möglich die Category-ID auszulesen und in einem anderen Dokument innerhalb einer Listview zu verwenden?
Ist es überhaupt grundsätzlich möglich, das ein Redakteur über ein dynamisches "select feld" innerhalb von webEditon vorher erstellte Kategorien speicherbar auswählen kann?

Ich danke Euch für Eure Hilfe schon jetzt!

Derzeit Sortier-Listview ( data-filter ++ ID des webEdition Dokument ++ )

Code: Alles auswählen

<ul class="filtr-btn">
<li data-filter="all" class="active">Alle</li>
<we:listview type="document" name="album" doctype="portfolio" order="random()">
	<we:ifFound>
		<we:repeat>
			<li data-filter="<we:field name="WE_ID" type="text" hyperlink="false" />"><we:field name="Detailtitel" type="text" hyperlink="false" /></li>
		</we:repeat>
	</we:ifFound>
</we:listview>
</ul>
Sortierbare Bilder-Listview ( data-category ++ ID des webEdition Dokument ++ )

Code: Alles auswählen

<div class="filtr-container row">
<we:listview type="document" name="album" doctype="portfolio" order="we_moddate" desc="true" >
	<we:ifFound>
		<we:repeat>
			<div data-category="<we:field name="WE_ID" type="text" hyperlink="false" />">
				<a href="<we:field name="WE_PATH"/>" >
					<div style="background-image: url(<we:field type="img" name="BildDetailFirst" thumbnail="Overview" only="src" />)"></div>
				</a>
			</div>
		</we:repeat>
	</we:ifFound>
</we:listview>
</div>
Javascript Funktion (add und remove CSS-Class über ID des webEdition Dokument)

Code: Alles auswählen

function Sort() {
    if ($.exists('.filtr-container')) {
        $('.filtr-container').filterizr();
        $('.filtr-btn li').on('click', function() {
            $('.filtr-btn li').removeClass('active');
            $(this).addClass('active');
        });
    }
}

Benutzeravatar
blickfang
webEdition Partner
webEdition Partner
Beiträge: 812
Registriert: Mo 15. Dez 2003, 16:00
Kontaktdaten:

Re: category Listview

Beitragvon blickfang » Mo 12. Feb 2018, 09:43

HI,
Du kannst Dir im Editmode ein select bauen und dord die Kategorien anzeigen

Code: Alles auswählen

<we:select name="selectedCategory">
<we:listview type="catageory">
<we:repeat>
<option value="<we:field name="we_id" />"><we:field name="we_category" /></option>
</we:repeat>
</we:listview>

<we:select name="selectedCategory" to="global" nameto="category"></we:select>
und dann die Kategorie in die Listview stopfen

Code: Alles auswählen

<we:listview type="dcument" categoryids="$category">
...
</we:listview>
dachtes Du in etwas so? Wenn Du allerdings mehrere Kategorien wählen lassen möchtest, dann wird das mit dem Select nicht klappen und ein we:multiselect gibt es derzeit nicht. Dann müsstest Du die das ganze evtl. als checkboxen aufbauen und diese wiederum abfragen.

Viele Grüße
Timo
webEdition Partner - https://www.blickfang-media.com
Ehemals im Vorstand des webEdition e.V.

apollo23
Member
Beiträge: 48
Registriert: Di 6. Mär 2012, 01:26

Re: category Listview

Beitragvon apollo23 » So 18. Feb 2018, 14:17

Hallo biwaMedia,
vielen Dank für Deinen Tipp. Ich habe das wie nachfolgend aufgeführt gelöst. Der Redakteur kann nun in WebEdition im Reiter Eigenschaften eine Kategorie anlegen bzw. aussuchen. Auf der Übersichtsseite aller Detailseiten, kann nun die Ansicht, die Darstellung der Lisview, wie gewünscht mit Hilfe dieser Lösung über ein kleine Javascript-Funktion sortiert werden bzw. es werden nur Bilder der Detailseiten angezeigt, die die angeklickte Kategorie besitzen.

Eine Frage hätte ich da noch:
A) Bei einer <we:listview type="category"> und dem Feld <we:field name="we_category" type="text"> wird der eingetragene Name der Kategorie, mit <we:field name="ID" alt="ID"> die ID der Kategorie ausgegeben.
B) In einer <we:listview type="document"> wird bei dem Feld <we:field name="we_category" type="text"> aber die ID der Kategorie ausgegeben. Dagegen ist eine Verwendung von <we:field name="ID" alt="ID"> ohne jede Ausgabe? Ist das ein gewünscht?

Auf jedem Fall schade, ist es, dass der Redakteur nicht über ein select-feld im Reiter Bearbeiten anlegte Kategorien auswählen und mit dem Dokument veröffentlichen kann. Die Lösung wäre charmant, da Redaktuere nur jeweils eine zur Verfügung stehende Kategorie auswählen würden. Oftmals scheitert es bereits am Dateinamen beim Anlegen eines neuen Dokumentes.

Neue Sortier-Listview -> type="category" ( data-filter ++ ID der Kategorie ++ ) / name="we_category" ( h6 ++ Name der Kategorie ++ )

Code: Alles auswählen

<ul class="filtr-btn">
	<li data-filter="all" class="active"><h6>Alle</h6></li>
	<we:listview type="category" name="album" doctype="portfolio" order="random()">
		<we:ifFound>
			<we:repeat>
				<li data-filter="<we:field name="ID" alt="ID" hyperlink="false" />">
					<h6><we:field name="we_category" type="text" hyperlink="false" /></h6>
				</li>
			</we:repeat>
		</we:ifFound>
	</we:listview>
</ul>



Neue sortierbare Bilder-Listview ( data-category ++ ID der Kategorie ++ )

Code: Alles auswählen

				
<we:listview type="document" name="album" doctype="portfolio" order="we_moddate" desc="true" >
	<we:ifFound>
		<we:repeat>
			<div class="album-item col-md-4 filtr-item" data-category="<we:field name="we_category" type="text" hyperlink="false" />">
				<a href="<we:field name="WE_PATH"/>" data-type="page-transition">
					<div class="album-item__overlay">
						<span class="album-item__cover"></span>
						<h5><we:field name="Head" type="text" hyperlink="false" /></h5>
					</div>
					<we:ifFieldNotEmpty match="BildDetailFirst"><div class="album-item__img" style="background-image: url(<we:field type="img" name="BildDetailFirst" thumbnail="Overview" only="src" />)"></div></we:ifFieldNotEmpty>
					<we:ifFieldEmpty match="BildDetailFirst"><div class="album-item__img" style="background-image: url(assets/images/albums/img-md.jpg)"></div></we:ifFieldEmpty>
				</a>
			</div>
		</we:repeat>
	</we:ifFound>
</we:listview>
Unveränderter Javascript Funktion (add und remove CSS-Class über ID des webEdition Dokument)

Code: Alles auswählen

function Sort() {
    if ($.exists('.filtr-container')) {
        $('.filtr-container').filterizr();
        $('.filtr-btn li').on('click', function() {
            $('.filtr-btn li').removeClass('active');
            $(this).addClass('active');
        });
    }
}

apollo23
Member
Beiträge: 48
Registriert: Di 6. Mär 2012, 01:26

Re: category Listview

Beitragvon apollo23 » So 18. Feb 2018, 14:22

Kurze Anmerkung:
Um die Listview <we:listview type="document"> muss das im Javascript erwähnte filtr-container gesetzt sein. Hatte ich im Beispielcode vergessen zu setzen.

Code: Alles auswählen

<div class="filtr-container row">
	<we:listview type="document" name="album" doctype="portfolio" order="we_moddate" desc="true" >
		...
	</we:listview>
</div>


Zurück zu „webEdition Templates erstellen (we:Tags)“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 13 Gäste