Neues Standard-Template "tpl_modified_nova" zur Vorschau

[noRiddle (revilonetz)]

@radolu
Wie wär's denn damit ?
Template Responsive - 8
Unten in der Beschreibung gibt's 'nen Link zur Demo.
Wenn das hier vorgestellte Template dir so gefälllt, dürfte das verlinkte das ebenso.

Gruß,
noRiddle

[radolu]

@noRiddle (revilonetz)

Das Template Responsive - 8 sieht schon gut aus ... was mir in der Artikel Ansicht fehlt ist der Maus-over Zoom des Artikel-Bildes

Gruss, Ralph

[Markus]

Hi Ralph,

bin ich jetzt blind? Was genau meinst du?
In der Artikel-Detailansicht ist sowohl im tpl_modified_responsive_8 als auch im tpl_modified_nova das gleiche Script eingebaut.

Markus

[radolu]

@Markus

Nein, Du bist nicht blind ... mir fehlt das in beiden Versionen
Ich habe im Moment Bootstrap4 (Karl) und der Mouse-Over Zoom ist das Beste bei meinen Artikeln.

Die 8er Version ist die teuerste von allen  ... da sollte es schon ohne grosse Anpassungen passen.

[Markus]

Hi Ralph,

da wird dir nichts anderes übrig bleiben als sowas selbst zu integrieren oder aber das Bootstrap4 Template optisch anzupassen. Du wirst nie ein Template finden welches zu 100% passt. Dafür sind einfach die Geschmäcker zu verschieden.

Ich hoffe mal für dich und deine Kunden, dass der Zoom nicht das Beste bei deinen Artikeln ist.

Markus

[radolu]

Hallo Markus,

Ja, schon klar.
Was mir nicht klar ist, warum ich 19% MwSt. zahlen soll wenn ich das Template kaufe.
Ich bin in der Schweiz, d.h. Export in nicht EU Land.

Gruss, Ralph

[Markus]

Hi Ralph,

musst du ja nicht ... die Preise im Shop sind generell netto Preise.
Wenn es da ein Problem geben sollte bitte einfach über das Kontaktformular schreiben.

Markus

[noRiddle (revilonetz)]

Kurz zur "Zoom"-Funktion:
Ich weiß, daß das viele nervt, z.B. auch meine Wenigkeit.
Wenn ständig irgend etwas passiert, nur weil ich meine Maus beim Bewegen zufällig über das Bild geführt habe wird alles unruhig.
Auch möchte ich vielleicht eine größere Ansicht des Bildes und bei dem Versuch das Bild dazu anzuklicken passiert etwas Unvorhergesehenes.
Ich denke, daß du, radolu  das sehr subjektiv siehst.
Was gibt es besseres als die Zoom-Funktion im Popup-Bild ?, und die ist ja gegeben, da kann man es dann nach Wunsch machen und nicht unwillkürlich; und außerdem sieht man dann auch das ganze Bild größer und nicht lediglich Ausschnitte..

Gruß,
noRiddle

[swolfram [templatix]]

Ich finde das Verhalten der Kategoriebox sehr verwirrend und inkonsistent.

Wenn ich zuerst im Shop lande und oben direkt auf "Testkategorie 3" klicke, sehe ich an der Seite die Kategoriebox mit allen Hauptkategorien.
Klicke ich danach auf "Testkategorie 2", sehe ich in der Box nur noch Unterkategorien 2.X. Jetzt muss ich mich gedanklich umsortieren und erst oben wieder die Hauptkategorie auswählen. Klicke ich dort nun auf "Testkategorie 1" sehe ich in der Box wieder die Hauptkategorien. Will ich dort "Hauptkategorie 2" ausklappen (am Down-Arrow - nur um zu sehen ob mich das interessiert als Kunde) sind plötzlich die anderen Kategorien wieder weg. Klicke ich auf 2.2 passiert das erneut, dann sind die übergeordneten aus 2 weg...
Ich finde es unvorteilhaft, das ein Klick auf den Pfeil die Unterkategorien in die Box lädt, statt einfach nur die Box aufzuklappen. Ich möchte als Kunde nicht ünnötig die Kategorieseite laden, wenn mich der Inhalt doch vielleicht nicht interessiert. Dieses ständige ändern der Inhalte wird bei vielen Kategorien schnell sehr verwirrend.

Und zum Zoom:
Da bin ich bei norRddle!
Dieses unruhige Gezitter bei einem Mouseover finde ich ebenfalls immer wieder störend, gar nervig, wenn ich doch einfach nur eine großes Bild sehen möchte.

[Markus]

Hi,

so ganz würde ich das nicht unterschreiben. Es ist an der Stelle wirklich abhängig von der Menge an Unterkategorien und der  Kategorietiefe. Bei wirklich wenigen Unterkategorien bin ich ggf. noch bei dir. Wenn du aber einen Shop hast mit vielen Kategorien/Unterkategorien ist die Variante mit Sicherheit übersichtlicher. Vor allem wenn ich mir dann eine Tiefe von 5 Unterkategorien vorstelle wird das auch von der Darstellung her gruselig wenn die alle eingerückt sind.
Wahrscheinlich ist das auch wieder so ein bischen Geschmacksache bzw. wie man es gewohnt ist.
Wir werden da aber nochmal einen Blick drauf werfen.

Markus

[noRiddle (revilonetz)]

Mmh, entweder ich habe es nicht genau verstanden
- was ist wichtig "am Down-Arrow" ? -
oder ich kann nichts verwirrendes entdecken.

• Topmenu:
  
  • Bei Klick auf eine Kat ohne Unterkats werden in der Box links alle Haupt-Kats angezeigt.
  • Bei Klick auf eine Kat mit Unterkats werden in der Box links die Unter-Kats angezeigt.
  Das will mir sehr intuitiv erscheinen.
  Zum "nur um zu sehen ob mich das interessiert als Kunde" reicht doch ein Hover, ein Klick ist unnötig.
  
  
• Box links:
  Hier ist ja eigtl. alles wie immer. Kan man da etwas verbessern ?

Was eher evtl. verbessert werden könnte ist die Mobile-Ansicht.
Hier könnte man einen Klick/Fingetab auf den Kat-Namen die Kat öffnen lassen und bei Klick/Fingetab lediglich auf den Pfeil könnten die Unter-Kats angezeigt werden, was momentan auch bei Klick/Fingetab auf den Kat-Namen geschieht.

Gruß,
noRiddle

*NACHTRAG*
Der Link "Alles anzeigen aus  Testkategorie 2" könnte aus der nicht-mobilen Ansicht herausgenommen werden, da ein Klick auf den Kat-Namen selbst dasselbe bewirkt.

[Markus]

Hi,

wenn ich es richtig verstanden habe geht es nur um die linke Box.
Wie du schon sagst ... beim Klick auf Kat 1 werden alle Hauptkategorien nachwievor angezeigt und Kat 1 wird hervorgehoben.
Beim Klick auf Kat 2 passiert aber was anderes. Die anderen Hauptkategorien sind weg und die Unterkategorien von Kat 2 erscheinen. Das Verhalten ist seiner Meinung nach inkonsistent.

Wir finden es dadurch aber "übersichtlicher". Richtig ersichtlich wird das aber auch erst wenn man mal einige Kategorien und Unterkategorien hat. Der Testshop ist hier nur spärlich gefüllt. Daher kommt das vielleicht so rüber. Wir haben und da aber schon einige Gedanken gemacht wie wir das am besten lösen. Wir werden einfach mal schauen wie es sich in der Praxis dann bewährt.

In der mobilen Ansicht haben wir es bewusst so gemacht ... nur ein Link auf die ganze Zeile. Als ich den Pfeil noch separiert hatte in machen Kundentemplates hatte ich oft gehört dass die Kunden das nicht wirklich kapieren auf den Pfeil zu klicken. Warum auch immer ... eigentlich sollte es intuitiv sein ... ist es aber wohl manchmal nicht. Deshalb nur eine Action auf der Zeile und der "Alles anzeigen"-Link.

Markus

[swolfram [templatix]]

Das zu erklären, ist wirklich etwas blöd. Vielleicht hilft es, sich bei den anderen anzuschauen, wie die Box funktioniert.
https://tinyurl.com/2p8awbnf --> Das finde ich persönlich deutlich verständlicher und intuitiver.

Unübersichtlich wird es meiner Meinung nach auch nicht. Man muss ja nicht ewig einrücken, da lassen sich auch andere Lösungen per CSS finden.
Beispiel: https://tinyurl.com/bdd83bdm

Navigiere ich im Megamenü erwarte ich alle Inhalte im Megamenü.
Navigiere ich mich durch die Seitenleiste, erwarte ich auch in der Seitenleiste meinen Rückweg zu finden, wo ich hergekommen bin.

Wenn ihr das mit den Unterkategorien aber so beibehalten wollt, dann würde ich wenigstens die "zurück zu Hauptkategorie 2" in der Hierarchie ganz oben stehen lassen, damit man auch "einfacher" wieder zurück findet. Dieses dauernd wechseln müssen, zwischen 2 (mit Breadcrumb 3) Navigationstrukturen finde ich für den User zu verwirrend.

Alles just my 2 Cents

Die mobile Ansicht habe ich noch nichtmal genauer angeschaut bislang.

*NACHTRAG*
Der "Down-Arrow" suggeriert für mich, dass ich etwas nach unten aufklappen kann.
Wenn das nicht gewollt ist, würde ich einen Pfeil nach rechts setzen um zu sagen, da geht es weiter...

**NACHTRAG 2**
Man könnte die Box statt "Kategorien" natürlich auch einfach mit dem eigentlichen Name der übergeordneten Kategorie.
benennen. Dann erkenne ich sofort, ich bin in "Kat 2.2."

[EDIT Tomcraft 14.09.2023: Links mit tinyurl gekürzt.]

[noRiddle (revilonetz)]

Noch zwei DInge:

• CLS:
  Das Seiten-Verhältnis der großen Banner/Slider-Bilder ist mit 20:7 festgelegt. Das ist ja unflexibel.
  Klar, kann man im CSS ändern, aber wäre es nicht nice die Bildgröße mittels getimagesize()
  - bei Verwendung eines Sliders, lediglich für das erste Bild -
  und somit das Seitenverhältnis ermitteln und die Werte für das Verhindern von CLS somit dynamisch und "on the fly" generieren ?
  (nicht meine Idee, aber finde ich gut)
• Altes Thema AdBlocker:
  Aus dem Pfad der Bilder, und auch aus Klassen und Bezeichnungen, sollte unbedingt das Wort "banner" verschwinden.
  Unabhängig von der modified-Domain werden alle Bilder im Dev-Shop von einigen AdBlockern vollständig geblockt.
  

Gruß,
noRiddle

[Markus]

Hi noRiddle,

spinnen wir das doch mal mit getimagesize() weiter.
Wir bekommen also für das erste oder auch für alle Sliderbilder die Werte von Breite und Höhe.
Ins CSS können wir die nicht schreiben. Also wäre doch die einzige Möglichkeit das ins Template in den entsprechenden image-Tag zu schreiben. Soweit so gut. Jetzt habe ich da im Slider eine Breite von 1400px und eine Höhe von 490px stehen.

Da du nicht bei jedem Browser-Resize die Größe abfragen willst muss ich also der festen Höhe und festen Breite im CSS entgegenwirken mit einer max-width von 100% und einer height von auto. Soweit denke ich auch klar. Da ich die Werte im image-Tag überschreiben muss auch mit einem important.

Nächstes Problem ... die Bilder werden geladen ... wie wir alle wissen kommt das Javascript zum Schluss. Da der übergeordnete Container aber kein festes Seitenverhältnis hat werden erstmal für den Bruchteil von Sekunden alle Bilder untereinander geladen und auch angezeigt. Ich kann ja nicht absolut positionieren da ich im CSS kein Seitenverhältnis für den übergeordneten Container habe. Und relativ positionierte Bilder werden mir demnach untereinander angezeigt bis zu dem Zeitpunkt wo das Javascript zündet.
Das gibt ein dickes CLS.

Ergo ... ich brauche auch das Seitenverhältnis um das dem übergeordneten Container mitgeben zu könne. Ich habe Höhe und Breite ... damit kann ich das berechnen. Da ich aber nicht ins CSS schreiben kann muss ich das als inline-CSS schreiben.
Soweit auch noch machbar.
Mit aspect-ratio wollte ich hier noch nicht arbeiten da es doch in einigen Browsern noch nicht sauber funktioniert. Wäre aber an der Stelle auch egal. Ob mit dem Padding-Hack oder aspect-ratio macht im Endeffekt keinen Unterschied.

Jetzt kommen wir zum Breakpoint wo sich das Seitenverhältnis ändert ... in unserem Fall die 600px. Ich brauche also eine neue Breite, eine neue Höhe und ein neues Seitenverhältnis. Ich kann das aber nicht als inline-CSS schreiben da hier media-queries nicht funktionieren.

Alles in allem ... wenn überhaupt machbar wird das alles andere als einfach und ich weiss jetzt nicht welche Auswirkungen getimagesize() auf die Performance hat. Du siehst also schon ... das waren auch schonmal unsere Gedanken.

Mit der aktuellen Lösung gehst du ins CSS und änderst das Seitenverhältnis ... fertig.

Markus

Nachtrag weil es mir gerade noch einfällt ...
Wir haben hier jetzt noch nicht die Spezialisten mit ins Kalkül gezogen, die es nicht schaffen 4 Slider-Bilder in der gleichen Größe hochzuladen.