Hallo zusammen, wir bieten über unsere Webseite Events an. Gibt es eine Möglichkeit wie in diesem Beispiel siehe Bild. die Darstellung zu ändern? Zur Zeit machen wir es so, dass wir für jedes Event einen eigenen Artikel anlegen. Was besseres ist uns bisher noch nicht eingefallen.
Moin, ich habe mir das Ganze jetzt mal angeschaut und ein bisschen rumprobiert, wie man das ohne eigenes Custom-Modul lösen könnte. Ich bin am Ende bei der Variante gelandet, für die Event-Kategorie einfach ein eigenes Listing anzulegen. So bleiben alle anderen Kategorien unangetastet und verwenden weiterhin das normale ausgewählte Listing. Dafür habe ich mir im Malibu-Theme diese drei Dateien genommen: product_listing_template_product_listing_v1.html product_listing_main.html product_listing_product.html Die habe ich kopiert und einfach passend umbenannt: product_listing_template_product_listing_event.html product_listing_main_event.html product_listing_event_product.html Ganz grob ist die Aufteilung dann so: product_listing_template_product_listing_event.html Das ist quasi das Grundgerüst vom Listing. Also Filter, Grid, Pagination usw. und von dort wird dann die eigentliche Event-Liste eingebunden. product_listing_main_event.html Hier wird durch die Artikel der Kategorie durchgelaufen und ich hole mir die Daten, die Gambio sowieso schon mitbringt. Also Bild, Name, Preis, Kurzbeschreibung, Bestand usw. Diese Daten gehen dann weiter an: product_listing_event_product.html Das ist dann im Grunde meine eigentliche Event-Card. Dort bestimme ich, wie das Event am Ende dargestellt wird. Beim Datum habe ich es erstmal ganz simpel gelöst. Der Artikelname sieht bei mir z. B. so aus: 24.04.2027 Mein Eventname Die ersten 10 Zeichen sind bei mir immer das Veranstaltungsdatum und alles danach ist dann der eigentliche Eventname. Die Uhrzeit nehme ich aktuell einfach aus der Artikel-Kurzbeschreibung. Das Datum lasse ich dann noch per JavaScript auseinandernehmen bzw. ins gewünschte Format bringen. Aus: 08.09.2026 wird dann z. B. Dienstag bzw. DI. Auf der Card sieht das anschließend so aus: DI 08 SEP 2026 Den normalen Artikelbestand verwende ich dabei einfach als Anzahl der verfügbaren Plätze. Aktuell habe ich dafür: HTML: {if $p_stock <= 0} Ausverkauft {elseif $p_stock == 1} Nur noch 1 Platz {elseif $p_stock <= 5} Nur noch {$p_stock} Plätze {else} Noch Plätze verfügbar {/if} Heißt also: Ist der Bestand auf 0, ist das Event ausverkauft. Bei wenigen Plätzen wird die genaue Anzahl angezeigt und ansonsten nur, dass noch Plätze verfügbar sind. Sicherlich kann man das später noch deutlich weiter ausbauen oder sauber über ein Modul lösen. Aber wenn man erstmal nur mit den vorhandenen Möglichkeiten vom Theme arbeiten möchte, funktioniert das so eigentlich ganz gut. So sieht das ganze bei mir aus:
Wow das ist richtig cool geworden und genau das was ich gesucht habe. Aber was wären denn die Schritte die ich nun vornehmen müsste? Ich habe die Theme Dateien kopiert und dementsprechend umbenannt.
Text mit KI Zusammengefasst: Wenn du die drei Dateien schon kopiert und entsprechend umbenannt hast, kannst du die Event-Variante im Prinzip komplett darüber aufbauen. Bei mir sieht die Kette so aus: product_listing_template_product_listing_event.html ↓ product_listing_main_event.html ↓ product_listing_event_product.html Die normalen Malibu-Dateien bleiben dabei unangetastet. Das war mir wichtig, damit alle anderen Kategorien weiterhin ganz normal dargestellt werden. 1. product_listing_template_product_listing_event.html Diese Datei habe ich aus product_listing_template_product_listing_v1.html kopiert. Als Erstes habe ich die Blocknamen angepasst. Aus: HTML: {block name="product_listing_template_product_listing_v1"} wird z. B.: HTML: {block name="product_listing_template_product_listing_event"} Das habe ich auch bei den darunterliegenden Blöcken entsprechend gemacht. Wichtiger ist aber der Bereich, in dem das eigentliche Produktlisting eingebunden wird. Im Original steht dort: HTML: {block name="product_listing_template_product_listing_v1_main"} {include file="get_usermod:{$tpl_path}product_listing_main.html"} {/block} Daraus habe ich gemacht: HTML: {block name="product_listing_template_product_listing_event_main"} {* Statt dem normalen Produktlisting laden wir unser Event-Listing *} {include file="get_usermod:{$tpl_path}product_listing_main_event.html"} {/block} Damit benutzt diese Vorlage nicht mehr die normale product_listing_main.html, sondern unsere eigene Event-Version. Zusätzlich habe ich dem Produktcontainer noch eine eigene Klasse gegeben. Original: HTML: <div class="row product-filter-target productlist productlist-viewmode Bei mir: HTML: <div class="row product-filter-target productlist productlist-viewmode event-product-listing Die zusätzliche Klasse event-product-listing ist wichtig, weil man damit das CSS nur auf dieses Event-Listing begrenzen kann. Die normalen Produktlisten werden dadurch nicht verändert. 2. Eigenes Layout für die Eventkarten Am Ende der product_listing_template_product_listing_event.html habe ich einen eigenen Block für CSS und JavaScript ergänzt. Für das Grid z. B.: HTML: .event-product-listing { display: flex; flex-wrap: wrap; align-items: stretch; } .event-product-listing .event-product-container { float: none; display: flex; padding: 10px; /* Desktop = 3 Karten nebeneinander */ width: 33.333333%; } Damit stehen auf dem Desktop drei Events nebeneinander. Für Tablet: HTML: @media (max-width: 991px) { .event-product-listing .event-product-container { /* Tablet = 2 Karten */ width: 50%; } } Und mobil: HTML: @media (max-width: 575px) { .event-product-listing .event-product-container { /* Smartphone = eine Karte pro Zeile */ width: 100%; padding-left: 0; padding-right: 0; } } Das restliche CSS baut dann nur noch das Aussehen der Eventkarte auf: Bild im 16:9-Format, Datumsschild, Uhrzeit auf dem Bild, Preis, Verfügbarkeit usw. 3. product_listing_main_event.html Die zweite Datei habe ich aus product_listing_main.html kopiert. Hier habe ich tatsächlich relativ wenig geändert. Die Schleife über die Artikel bleibt erhalten: {foreach name=aussen item=module_data from=$module_content} Auch die vorhandenen Daten von Gambio lasse ich weiterhin aufbereiten, also z. B.: PRODUCTS_NAME PRODUCTS_IMAGE PRODUCTS_PRICE PRODUCTS_SHORT_DESCRIPTION GM_PRODUCTS_STOCK Der entscheidende Unterschied ist wieder die eingebundene Datei. Im Original: {include file="get_usermod:{$tpl_path}product_listing_product.html" Bei mir: {include file="get_usermod:{$tpl_path}product_listing_event_product.html" Damit bekommt jeder Artikel nicht mehr die normale Malibu-Produktkarte, sondern unsere Eventkarte. Die benötigten Daten übergebe ich dabei einfach weiter: p_image=$module_data.PRODUCTS_IMAGE p_url=$module_data.PRODUCTS_LINK p_name_full=$module_data.PRODUCTS_NAME p_short_desc=$p_short_desc p_price=$module_data.PRODUCTS_PRICE p_stock=$module_data.GM_PRODUCTS_STOCK Besonders wichtig ist: p_stock=$module_data.GM_PRODUCTS_STOCK Denn den normalen Lagerbestand benutze ich bei den Events als Anzahl der noch verfügbaren Plätze. Den Rest der Übergabe habe ich größtenteils aus der Originaldatei übernommen. Das kann man später noch weiter aufräumen, nötig ist das aber erstmal nicht. 4. product_listing_event_product.html Hier passiert eigentlich die größte Änderung. Die originale product_listing_product.html ist ziemlich umfangreich, weil sie alles abdecken muss, was ein normaler Shopartikel braucht. Darin befinden sich unter anderem: Bewertungen Hersteller Ribbons Kurzbeschreibung Attribute Staffelpreise Versandzeit Gewicht Artikelnummer Preis Steuerhinweise Mengenauswahl Warenkorbbutton Bildergalerie Das meiste davon brauche ich für eine einfache Eventübersicht nicht. Beispielsweise enthält das Original einen kompletten Bereich für Lieferzeit, Lagerbestand und Gewicht. Auch der komplette Bereich mit Mengenauswahl und Warenkorbbutton ist vorhanden. Diesen ganzen Aufbau habe ich für die Event-Version entfernt. Die Eventdatei ist dadurch statt über 400 Zeilen nur noch sehr klein. Übrig geblieben ist im Wesentlichen: Bild Datum Uhrzeit Titel Preis freie Plätze 5. Datum aus dem Artikelnamen auslesen Das ist bei mir momentan noch eine recht einfache Lösung. Der Artikelname sieht z. B. so aus: 12.09.2026 Whisky Tasting Ganz oben in der Eventkarte zerlege ich diesen Namen: HTML: {* Die ersten 10 Zeichen sind das Datum: 12.09.2026 *} {assign var="event_date" value=$p_name_full|substr:0:10} {* Tag aus dem Datum holen *} {assign var="event_day" value=$event_date|substr:0:2} {* Monat holen *} {assign var="event_month_number" value=$event_date|substr:3:2} {* Jahr holen *} {assign var="event_year" value=$event_date|substr:6:4} {* Alles ab Zeichen 11 ist der eigentliche Eventname *} {assign var="event_title" value=$p_name_full|substr:11} Aus: 12.09.2026 Whisky Tasting wird also intern: Datum: 12.09.2026 Tag: 12 Monat: 09 Jahr: 2026 Titel: Whisky Tasting Wichtig ist deshalb momentan, dass der Artikelname immer nach diesem Schema aufgebaut ist: TT.MM.JJJJ Eventname 6. Kurzbeschreibung als Uhrzeit verwenden Die normale Kurzbeschreibung benutze ich momentan einfach für die Uhrzeit: HTML: {* HTML aus der Kurzbeschreibung entfernen und als Uhrzeit verwenden *} {assign var="event_time" value=$p_short_desc|strip_tags} In Gambio würde ich dort also z. B. eintragen: 18:00 Uhr Im Bild wird die Uhrzeit dann so ausgegeben: {if $event_time} {* Uhrzeit unten auf dem Eventbild anzeigen *} <div class="event-card-time"> {$event_time} </div> {/if} 7. Die eigentliche Eventkarte Den kompletten normalen Produktkarten-Aufbau habe ich durch etwas deutlich Einfacheres ersetzt: HTML: <div class="product-container event-product-container"> {* Die komplette Karte führt zur Artikeldetailseite *} <a href="{$p_url}" class="event-card"> <div class="event-card-image"> {* Artikelbild anzeigen *} {if $p_image && $p_image|substr:-1 !== '/'} <img src="{$p_image}" alt="{$p_img_alt|escape:'html'}" loading="lazy" > {else} {* Platzhalter, falls kein Bild vorhanden ist *} <div class="event-card-no-image"> <span class="fa fa-picture-o"></span> </div> {/if} {* Uhrzeit aus der Kurzbeschreibung *} {if $event_time} <div class="event-card-time"> {$event_time} </div> {/if} </div> Der komplette Kartenbereich ist dadurch anklickbar und führt direkt zur Artikeldetailseite. 8. Datumsschild Danach kommt das Datum: HTML: <div class="event-date-badge" data-event-date="{$event_date|escape:'html'}" > {* Wird per JavaScript später z. B. zu SA *} <span class="event-date-weekday"> </span> {* Tag, z. B. 12 *} <strong class="event-date-day"> {$event_day|escape:'html'} </strong> {* Wird per JavaScript von 09 zu SEP geändert *} <span class="event-date-month"> {$event_month_number|escape:'html'} </span> {* Jahr *} <span class="event-date-year"> {$event_year|escape:'html'} </span> </div> Das JavaScript berechnet später aus 12.09.2026 noch den passenden Wochentag. Dafür habe ich: HTML: var weekdays = [ 'SO', 'MO', 'DI', 'MI', 'DO', 'FR', 'SA' ]; var months = [ 'JAN', 'FEB', 'MÄR', 'APR', 'MAI', 'JUN', 'JUL', 'AUG', 'SEP', 'OKT', 'NOV', 'DEZ' ]; Das Datum aus data-event-date wird zerlegt und geprüft: HTML: var parts = ( badge.getAttribute('data-event-date') || '' ).split('.'); var day = parseInt(parts[0], 10); var month = parseInt(parts[1], 10); var year = parseInt(parts[2], 10); var date = new Date( year, month - 1, day ); Danach wird beispielsweise aus 12.09.2026 automatisch: SA 12 SEP 2026 9. Eventtitel und Preis Der eigentliche Titel ist dann nur noch: HTML: <div class="event-card-title"> {* Datum wurde vorher aus dem Namen entfernt *} {$event_title|escape:'html'} </div> Und der Preis kommt weiterhin direkt von Gambio: HTML: <div class="event-card-price"> {* Der normale von Gambio formatierte Produktpreis *} {$p_price} </div> An der eigentlichen Preisberechnung habe ich also nichts geändert. 10. Lagerbestand als freie Plätze Der normale Gambio-Bestand wird bei mir zur Platzanzahl. Das habe ich so gelöst: HTML: {if $p_stock <= 0} {* Kein Bestand mehr = Event ausverkauft *} <div class="event-card-availability is-sold-out"> Ausverkauft </div> {elseif $p_stock == 1} {* Genau ein Platz übrig *} <div class="event-card-availability is-low"> Nur noch 1 Platz </div> {elseif $p_stock <= 5} {* Zwischen 2 und 5 Plätze übrig *} <div class="event-card-availability is-low"> Nur noch {$p_stock} Plätze </div> {else} {* Bei mehr als 5 brauche ich die genaue Zahl in der Übersicht nicht unbedingt anzeigen *} <div class="event-card-availability is-available"> Noch Plätze verfügbar </div> {/if} Damit ergibt sich z. B.: Bestand 0 → Ausverkauft Bestand 1 → Nur noch 1 Platz Bestand 3 → Nur noch 3 Plätze Bestand 10 → Noch Plätze verfügbar Kurz gesagt: Was habe ich aus der normalen Produktkarte entfernt? Wenn du die product_listing_product.html kopiert hast, kannst du dir für diese Variante sehr viel davon sparen. Raus können für meine Eventdarstellung unter anderem: Bewertungssterne Herstelleranzeige Produktribbons normale Kurzbeschreibungsausgabe Attribute Staffelpreise Versandinformationen Lieferzeit Gewicht Artikelnummer Mengeneingabe Warenkorbbutton Galerie / zusätzliche Produktbilder Ich habe also nicht versucht, die normale Produktkarte irgendwie zurechtzubiegen, sondern im Grunde nur die Daten behalten, die ich wirklich benötige. Die Eventkarte braucht letztlich nur: $p_image $p_url $p_img_alt $p_name_full $p_short_desc $p_price $p_stock Für den ersten Versuch würde ich es genau so machen und nicht gleich versuchen, die komplette Malibu-Datei Stück für Stück umzubauen. Der Aufbau ist dann wesentlich übersichtlicher. Zum Testen kannst du danach einen Artikel z. B. so anlegen: Artikelname: 12.09.2026 Whisky Tasting Kurzbeschreibung: 18:00 Uhr Preis: 49,00 € Bestand: 4 Das Listing macht daraus dann ungefähr: SA 12 SEP 2026 Whisky Tasting 18:00 Uhr 49,00 € Nur noch 4 Plätze Danach weist du der Event-Kategorie die neue product_listing_template_product_listing_event.html als Listing-Vorlage zu und leerst einmal den Theme-/Template-Cache. Ganz wichtig: Ich würde die originalen Malibu-Dateien nicht bearbeiten, sondern wirklich nur mit den Kopien arbeiten. Wenn irgendwas nicht funktioniert, kann man dadurch jederzeit wieder das normale Listing auswählen und hat sich das eigentliche Theme nicht zerschossen.
Vielen Dank für die ganzen Informationen. Ich habe mir nun deine drei angehangenen Dateien heruntergeladen. Wenn ich es nun richtig verstanden habe sollen diese unter /themes/Malibu/html/system hinterlegt werden. Danach soll ich der Event Kategorie product_listing_template_product_listing_event.html zuweisen. Also ich bin schon weiter gekommen aber so richtig cool ist es noch nicht. Ich muss mal schauen ob ich das mit css selbst bisschen hinbekomme. Gibt es auch die Möglichkeit das die Events auf der Startseite das gleiche Design bekommen?
Die Suche wurde beinflusst. Dort erscheint nun immer die Event Anzeige statt der normalen. Bisher habe ich noch nicht rausgefunden wo man dort die Vorlage anpassen kann.
Moin, das mit der Suche hatte ich tatsächlich übersehen. Lässt sich aber recht einfach beheben. Anscheinend sucht die Shopsuche nach `product_listing_template_product_listing*` und verwendet dann das erste gefundene Template. In unserem Fall war das leider das Event-Listing. Damit wieder das normale `v1`-Listing zuerst gefunden wird, kopierst du deine vorhandene Datei `product_listing_template_product_listing_event.html` und benennst die Kopie anschließend um in: `product_listing_template_product_listing_z_event.html` Danach einmal den Cache leeren und bei der entsprechenden Kategorie das Listing mit dem `z` im Namen auswählen. Anschließend den Cache erneut leeren. Danach musst du die alte Datei `product_listing_template_product_listing_event.html` vom Server löschen und sicherheitshalber noch einmal den Cache leeren. Die Event-Cards kannst du theoretisch auch auf der Startseite im Slider anzeigen, du musst nur sicherstellen das der slider auch den bestand von dem Event-Artikel kennt. Möglich ist auch dass in der suche die Event-Cards angezeigt werden und Standard Produkte wie gewohnt.
Das funktioniert leider nicht Die Suche zeigt immer noch die neue Kachelform an. Funktioniert doch. Cache Problem
Kannst du mir das nochmal genauer erklären? Also ich würde gerne auf der Startseite die gleiche Kachel beim Event Slider einstellen. Aber ich kann dort ja keine Artikelvorlage mit laden?
Klar, ich habe das nochmal erweitert und mit einer KI zusammengefasst: Ich habe für Events ein eigenes Produktlisting angelegt, ohne das normale Malibu-Listing zu verändern. Der Aufbau sieht so aus: product_listing_template_product_listing_z_event.html → product_listing_main_event.html → product_listing_event_product.html Die erste Datei baut das Listing der Event-Kategorie auf, die zweite geht durch die vorhandenen Artikel und übergibt die Produktdaten, und die dritte Datei ist die eigentliche Event-Card. Woher kommen die Daten? Es werden ganz normale Gambio-Artikeldaten verwendet: Artikelbild = Eventbild Artikelname = Datum + Eventname Kurzbeschreibung = Uhrzeit Preis = normaler Artikelpreis Artikelbestand = noch verfügbare Plätze Der Artikelname wird z. B. so gepflegt: HTML: 08.09.2026 Heart of the Mountain Commander Event Daraus wird automatisch das Datum für die Card erzeugt: HTML: DI 08 SEP 2026 Der sichtbare Titel lautet dann nur noch: HTML: Heart of the Mountain Commander Event Die Uhrzeit kommt aktuell aus der Kurzbeschreibung. Freie Plätze Der normale Gambio-Bestand wird als Anzahl der Plätze verwendet. Die Anzeige ist aktuell: mehr als 5 → „Noch Plätze verfügbar“ 2 bis 5 → „Nur noch X Plätze“ 1 → „Nur noch 1 Platz“ 0 → „Ausverkauft“ Damit muss keine zweite Bestandsverwaltung aufgebaut werden. Suche Anfangs wurde durch die zusätzliche Event-Vorlage auch die normale Suche beeinflusst. Der Grund war der Dateiname. Die Event-Vorlage wurde deshalb in HTML: product_listing_template_product_listing_z_event.html umbenannt, sodass sie alphabetisch hinter der normalen product_listing_v1 liegt. Zusätzlich gibt es eine product_listing_main_search.html. Dort wird jeder Suchtreffer einzeln geprüft: Event → Event-Card normaler Artikel → normale Malibu-Card Startseite / Slider Auch im Startseiten-Slider wird geprüft, ob der Artikelname mit einem Datum im Format DD.MM.YYYY beginnt. Events verwenden dann die Event-Card, normale Artikel weiterhin die normale Malibu-Card. Das Problem dabei war, dass Gambio im Swiper standardmäßig keinen Artikelbestand mitliefert. Dafür gibt es einen kleinen Overload für ProductsSwiperThemeContentView. Dieser liest nur für die im Slider vorhandenen Events den Bestand aus und übergibt ihn als GM_PRODUCTS_STOCK. Damit funktioniert auch auf der Startseite: HTML: Noch Plätze verfügbar Nur noch 3 Plätze Ausverkauft Normale Artikel werden dadurch nicht verändert und wenn sich gar kein Event im Slider befindet, wird auch keine zusätzliche Bestandsabfrage ausgeführt. Benötigte Dateien Im Malibu-Theme: HTML: product_listing_template_product_listing_z_event.html product_listing_main_event.html product_listing_event_product.html product_listing_main_search.html product_listing_template_product_listing_v1.html product_listing_swiper.html product_listing.html Zusätzlich der Overload unter GXModules. Nach Änderungen wie üblich den Gambio-Cache leeren.
Hallo, ich habe das ganze mal hinzugefügt. Es scheint auch zu funktionieren. Aber nun hat sich die Anzeige wieder zurückgestellt. Was muss ich ändern damit wieder das ganze Bild dargestellt wird? Auf der Startseite sind die Kacheln auch ein Tick zu eng nebeneinander. Vielen Dank auf jeden Fall schon mal für die ganze Unterstützung.
Im Reiter Events habe ich das mit den Bilder hinbekommen. Ich habe dafür folgenden Part angepasst: Code: .event-product-listing .event-card-image { position: relative; aspect-ratio: none; overflow: hidden; background: #d7d7d7; } Der Product Swiper auf der Frontseite sieht aber nicht so super aus
Aber nun hat sich die Anzeige wieder zurückgestellt. Was muss ich ändern damit wieder das ganze Bild dargestellt wird? Was meinst du genau damit? Auf der Startseite sind die Kacheln auch ein Tick zu eng nebeneinander. product_listing_swiper.html jetzt mit 20 px Abstand zwischen den Event-Cards auf der Startseite. HTML: {load_language_text section="swiper" name="swiper"} {block name="product_listing_swiper_event_assets"} <style> /* Event-Cards in Malibu Startseiten-Listings/Swipern */ .productlist-swiper .event-product-container, .productlist-viewmode-grid .event-product-container { display: flex; height: auto; } /* Abstand zwischen Event-Cards im Startseiten-Swiper */ .productlist-swiper .event-product-container { padding-left: 10px; padding-right: 10px; } .productlist-swiper .event-card, .productlist-viewmode-grid .event-card { position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 10px; background: #eeeeee; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; } .productlist-swiper .event-card:hover, .productlist-swiper .event-card:focus, .productlist-viewmode-grid .event-card:hover, .productlist-viewmode-grid .event-card:focus { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16); text-decoration: none; color: inherit; } .productlist-swiper .event-card-image, .productlist-viewmode-grid .event-card-image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #d7d7d7; } .productlist-swiper .event-card-image img, .productlist-viewmode-grid .event-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .productlist-swiper .event-card-no-image, .productlist-viewmode-grid .event-card-no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 42px; opacity: .35; } .productlist-swiper .event-card-time, .productlist-viewmode-grid .event-card-time { position: absolute; right: 0; bottom: 0; padding: 7px 11px; background: rgba(45, 45, 45, .9); color: #fff; font-size: 15px; font-weight: 600; line-height: 1; } /* * Das Badge sitzt im unteren Bereich des Bildes. * So bleibt es im Swiper stabil, unabhängig von der Kartenbreite. */ .productlist-swiper .event-date-badge, .productlist-viewmode-grid .event-date-badge { position: absolute; left: 16px; top: 12px; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 66px; min-height: 94px; padding: 6px 5px; background: #111; color: #fff; border-radius: 3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); text-align: center; text-transform: uppercase; } .productlist-swiper .event-date-weekday, .productlist-swiper .event-date-month, .productlist-viewmode-grid .event-date-weekday, .productlist-viewmode-grid .event-date-month { font-size: 12px; font-weight: 700; line-height: 1.15; letter-spacing: .04em; } .productlist-swiper .event-date-day, .productlist-viewmode-grid .event-date-day { margin: 2px 0; font-size: 30px; font-weight: 800; line-height: 1; } .productlist-swiper .event-date-year, .productlist-viewmode-grid .event-date-year { margin-top: 3px; font-size: 10px; font-weight: 600; line-height: 1; opacity: .8; letter-spacing: .08em; } .productlist-swiper .event-card-content, .productlist-viewmode-grid .event-card-content { display: flex; flex: 1; flex-direction: column; min-height: 126px; padding: 16px; } .productlist-swiper .event-card-title, .productlist-viewmode-grid .event-card-title { margin: 0 0 18px; font-size: 18px; font-weight: 700; line-height: 1.25; } .productlist-swiper .event-card-footer, .productlist-viewmode-grid .event-card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; } .productlist-swiper .event-card-price, .productlist-viewmode-grid .event-card-price { font-size: 20px; font-weight: 800; white-space: nowrap; } .productlist-swiper .event-card-availability, .productlist-viewmode-grid .event-card-availability { font-size: 14px; font-weight: 700; line-height: 1.15; text-align: right; } .productlist-swiper .event-card-availability.is-available, .productlist-viewmode-grid .event-card-availability.is-available { color: #218739; } .productlist-swiper .event-card-availability.is-low, .productlist-viewmode-grid .event-card-availability.is-low { color: #a66400; } .productlist-swiper .event-card-availability.is-sold-out, .productlist-viewmode-grid .event-card-availability.is-sold-out { color: #b00020; } </style> <script> (function () { 'use strict'; var weekdays = ['SO', 'MO', 'DI', 'MI', 'DO', 'FR', 'SA']; var months = ['JAN', 'FEB', 'MÄR', 'APR', 'MAI', 'JUN', 'JUL', 'AUG', 'SEP', 'OKT', 'NOV', 'DEZ']; function initializeEventDates(root) { var scope = root || document; var badges = scope.querySelectorAll('.event-date-badge[data-event-date]:not([data-event-date-ready])'); for (var i = 0; i < badges.length; i++) { var badge = badges[i]; var parts = (badge.getAttribute('data-event-date') || '').split('.'); if (parts.length !== 3) { continue; } var day = parseInt(parts[0], 10); var month = parseInt(parts[1], 10); var year = parseInt(parts[2], 10); var date = new Date(year, month - 1, day); if ( isNaN(date.getTime()) || date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day ) { continue; } var weekdayNode = badge.querySelector('.event-date-weekday'); var monthNode = badge.querySelector('.event-date-month'); if (weekdayNode) { weekdayNode.textContent = weekdays[date.getDay()]; } if (monthNode) { monthNode.textContent = months[date.getMonth()]; } badge.setAttribute('data-event-date-ready', '1'); } } function bootEventCards() { initializeEventDates(document); if ('MutationObserver' in window) { new MutationObserver(function (mutations) { for (var i = 0; i < mutations.length; i++) { for (var j = 0; j < mutations[i].addedNodes.length; j++) { var node = mutations[i].addedNodes[j]; if (node.nodeType === 1) { initializeEventDates(node); } } } }).observe(document.body, { childList: true, subtree: true }); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', bootEventCards); } else { bootEventCards(); } })(); </script> {/block} {block name="product_listing_swiper"} <div class="productlist productlist-swiper row"> <div {$content_data.SWIPER_DATA.widgets}> <div id="{$content_data.SWIPER_DATA.id}" class="swiper" {$content_data.SWIPER_DATA.engineAttr}="swiper" {$content_data.SWIPER_DATA.configuration} > <div class="swiper-wrapper" {$maxHeight} > {foreach item=PRODUCT from=$content_data.SWIPER_DATA.products} {block name="product_listing_swiper_product"} {product_images product_id=$PRODUCT.PRODUCTS_ID p_name=$PRODUCT.PRODUCTS_NAME p_image=$PRODUCT.PRODUCTS_IMAGE out=p_imgs } {product_ribbons showManufacturerImages=$PRODUCT.showManufacturerImages showProductRibbons=$PRODUCT.showProductRibbons product_id=$PRODUCT.PRODUCTS_ID out=ribbons} {assign var="event_name_prefix" value=$PRODUCT.PRODUCTS_NAME|substr:0:10} {assign var="is_event_product" value=false} {if $event_name_prefix|substr:2:1 == '.' && $event_name_prefix|substr:5:1 == '.'} {assign var="is_event_product" value=true} {/if} {* Den Pfad des von Gambio gelieferten Produkt-Templates wiederverwenden. Damit liegt unsere Event-Datei garantiert im selben Template-Pfad. *} {assign var="event_product_template" value=$content_data.SWIPER_DATA.productTemplate|replace:'product_listing_product.html':'product_listing_event_product.html'} {if $is_event_product} {include file="get_usermod:{$event_product_template}" is_swiper="true" p_image=$PRODUCT.PRODUCTS_IMAGE p_imgs=$p_imgs p_url=$PRODUCT.PRODUCTS_LINK p_img_title=$PRODUCT.PRODUCTS_IMAGE_ALT p_img_alt=$PRODUCT.PRODUCTS_IMAGE_ALT p_meta=$PRODUCT.SHORTENED_META_DESCRIPTION p_name_full=$PRODUCT.PRODUCTS_NAME p_headline=$PRODUCT.HEADLINE p_short_desc=$PRODUCT.SHORTENED_PRODUCTS_DESCRIPTION p_price=$PRODUCT.PRODUCTS_PRICE p_stock=$PRODUCT.GM_PRODUCTS_STOCK|default:"" data_index=$PRODUCT.INDEX p_id=$PRODUCT.PRODUCTS_ID } {else} {include file="get_usermod:{$content_data.SWIPER_DATA.productTemplate}" is_swiper="true" showRating=$content_data.SWIPER_DATA.showRating ribbons=$ribbons p_image=$PRODUCT.PRODUCTS_IMAGE p_imgs=$p_imgs p_url=$PRODUCT.PRODUCTS_LINK p_img_title=$PRODUCT.PRODUCTS_IMAGE_ALT p_img_alt=$PRODUCT.PRODUCTS_IMAGE_ALT p_meta=$PRODUCT.SHORTENED_META_DESCRIPTION p_name_full=$PRODUCT.PRODUCTS_NAME p_headline=$PRODUCT.HEADLINE p_short_desc=$PRODUCT.SHORTENED_PRODUCTS_DESCRIPTION p_price=$PRODUCT.PRODUCTS_PRICE p_vpe=$PRODUCT.PRODUCTS_VPE p_shipping_name=$PRODUCT.DELIVERY p_shipping_range=$PRODUCT.SHIPPING_RANGE data_index=$PRODUCT.INDEX p_id=$PRODUCT.PRODUCTS_ID p_model=$PRODUCT.PRODUCTS_MODEL SHOW_PRODUCTS_MODEL=$content_data.SWIPER_DATA.SHOW_PRODUCTS_MODEL } {/if} {/block} {/foreach} {block name="product_listing_swiper_pagination"} <div class="{$content_data.SWIPER_DATA.pagination} swiper-pagination"></div> {/block} </div> {block name="product_listing_swiper_mustache"} <script type="text/mustache"> <template> {* MUSTACHE TEMPLATE START *} {literal} {{#.}} <div class="swiper-slide {{className}}"> <div class="swiper-slide-inside"> <img class="img-responsive" {{{srcattr}}} alt="{{title}}" title="{{title}}" data-magnifier-src="{{src}}" /> </div> </div> {{/.}} {/literal} {* MUSTACHE TEMPLATE END *} </template> </script> {/block} </div> <button class="{$content_data.SWIPER_DATA.prev} swiper-button-prev" role="button" tabindex="0" aria-label="{$swiper.previous_product_button}"></button> <button class="{$content_data.SWIPER_DATA.next} swiper-button-next" role="button" tabindex="0" aria-label="{$swiper.next_product_button}"></button> </div> </div> {/block}
Wow einfach nur wow und vielen Dank. Kann man dich irgendwie bei Fragen bzw. kleineren Änderungen buchen? Natürlich gegen Bezahlung.
Bitte. Ja kann man, schreib mir eine PN und wir klären dann alles weitere. Dort können wir dann ggf. Kontaktdaten austauschen.
Eine letzte Sache noch. Die Anzeige der Kachel (Datumsanzeige) sowie Text und Preis ist beim Swiper und unter Events unterschiedlich. Kannst du mir sagen welche Inhalt ich kopieren muss damit es genau wie im Swiper aussieht? Dort ist der Text schön zentriert ausgerichtet. Ich würde das gerne Identisch haben wollen.
Klar, für die Event-Kategorie muss nur das CSS in HTML: /themes/Malibu/html/system/product_listing_template_product_listing_z_event.html an das Swiper-Design angepasst werden. 1. Datumsblock verschieben Suche diesen Teil: HTML: .event-product-listing .event-date-badge { position: absolute; left: 16px; top: calc((100% * 9 / 16) - 50px); und ändere ihn zu: HTML: .event-product-listing .event-date-badge { position: absolute; left: 16px; top: 12px; Damit sitzt der Datumsblock genauso wie im Swiper oben im Bild. 2. Inhalt der Card angleichen Suche: HTML: .event-product-listing .event-card-content { display: flex; flex: 1; flex-direction: column; min-height: 132px; padding: 18px 16px 14px 98px; } und ersetze es durch: HTML: .event-product-listing .event-card-content { display: flex; flex: 1; flex-direction: column; min-height: 126px; padding: 16px; text-align: center; } Der wichtigste Unterschied ist dabei der linke Abstand von 98px. Dadurch war der Text in der Kategorie seitlich verschoben. Mit padding: 16px sitzt der Inhalt wie im Swiper sauber mittig. 3. Preis und freie Plätze zentrieren Suche: HTML: .event-product-listing .event-card-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; } und ersetze es durch: HTML: .event-product-listing .event-card-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: auto; text-align: center; } Danach noch: HTML: .event-product-listing .event-card-availability { font-size: 14px; font-weight: 700; line-height: 1.15; text-align: right; } ändern zu: HTML: .event-product-listing .event-card-availability { font-size: 14px; font-weight: 700; line-height: 1.15; text-align: center; } Danach wie immer den Gambio-Cache leeren.