Werbung / Banner buchen
Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
    Spenden
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:
    Spenden
  • Thema: Responsive Template für Modified

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #600 am: 29. Juli 2021, 17:22:45
    [...]
    @ALL
    Kleiner Hinweis noch am Rande für Mitleser, wenn überhaupt die GROUP zur Verfügung steht, muss der Link so abgefragt werden:

    Code: PHP  [Auswählen]
    <a href="{$content_data.CONTENT_LINK}" title="{$parent_content.CONTENT_TITLE|onlytext}"{if strstr($smarty.server.PHP_SELF, FILENAME_CONTENT) && $smarty.get.coID == $content_data.CONTENT_GROUP} class="Current"{/if}>
    [...]

    Es sollte dann mittels strpos() gemacht werden.
    Diesen Performance-Vorteil empfiehlt auch das strpos_templates.zip im Ticket #1805:

    Code: PHP  [Auswählen]
    <a href="{$content_data.CONTENT_LINK}" title="{$parent_content.CONTENT_TITLE|onlytext}"{if strpos($smarty.server.PHP_SELF, FILENAME_CONTENT) !== false && $smarty.get.coID == $content_data.CONTENT_GROUP} class="Current"{/if}>

    Übrigens:
    Bis das Smarty für $shop_sub_content['group_id'] in den Core aufgenommen wird kann man
    - zugegebenermaßen etwas hacky -
    die coID z.B. auch so holen:

    Code: PHP  [Auswählen]
    {assign var=sub_coid value=$content_data.CONTENT_LINK|replace:'.html':''|regex_replace:'#.*:_:#':''}

    <a href="{$content_data.CONTENT_LINK}"{if strpos($smarty.server.PHP_SELF, FILENAME_CONTENT) !== false && $smarty.get.coID == $sub_coid} class="Current"{/if}>{$content_data.CONTENT_TITLE}</a>

    Gruß,
    noRiddle
    Werbung / Banner buchen

    karsta.de

    • Experte
    • Beiträge: 3.056
    Re: Responsive Template für Modified
    Antwort #601 am: 29. Juli 2021, 17:58:47
    Danke für deine Ideen und Anregungen. Werde ich gleich mal ganz aufgeregt die Performance steigern.

    BG Karsta

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #602 am: 29. Juli 2021, 20:39:58
    Ich muß nochmals auf die Sache mit den Leerzeichen bei der class-Vergabe im Lazyload-Skript zurückkommen.
    Meine in Antwort #563 gemachten Vorschläge zum Eliminieren der Leerzeichen haben wohl doch ein Problem.
    Bei den Kategoriebildern, welche vom Template aus bereits die class cat_image haben wird nun die class lazyload ohne Leerzeichen angehängt.
    An meiner Lösung ist also noch etwas nicht ausgereift, also bitte nicht übernehmen.
    Da bei GitHub auch nach zweimaligem Nachhaken bislang keine Reaktion kam ist das ansonsten nicht weiter tragisch.

    Werde mich damit bei Gelegenheit nochmals beschäftigen.
    Es kann jedoch sein, daß die Sache nicht so einfach zu lösen ist wie ich dachte und man das Skript weitergehend umschreiben müsste.
    Die drei Fälle abzufangen, wenn es bereits eine Default-Klasse gibt, wenn eine vom Skript gesetzte Klasse erweitert wird mit einer weiteren oder wenn eine vom Skript gesetzte Klasse ersetzt wird, scheint nicht so trivial zu sein.

    Gruß,
    noRiddle

    Timm

    • Fördermitglied
    • Beiträge: 6.318
    Re: Responsive Template für Modified
    Antwort #603 am: 29. Juli 2021, 21:03:15
    Moin @Oli @Markus

    Gleiches passiert auch bei Herstellerbildern. Sorry, da hatte ich mich nur auf die Artikelbilder konzentriert.

    Wenn die Klasse noch lazyloading heißt, dann funktioniert es auch bei den Kategoriebildern. Erst wenn es lazyloaded heißt, verschwindet das Leerzeichen zwischen cat_image und lazyloaded.

    Aber selbst da gab es ja eine ungewollte Änderung siehe Antwort #574. Insofern sollte man da vielleicht doch nicht drinnen rumspielen und die Leerzeichen akzeptieren, bis eine Lösung durch den Skriptentwickler oder ein alternatives Skript vorhanden ist.

    Gruss Timm

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #604 am: 29. Juli 2021, 23:19:47
    Ja, nimm wieder das Original-Skript.
    Noch akzeptieren/tolerieren die Browser das mit dem Leerzeichen ja.

    Der Skript-Ersteller reagiert nicht auf GitHub.
    Ich schaue mir das bei Gelegenheit (will sagen, wenn ich die Zeit dafür habe) nochmals an.
    Ich habe ja die nicht-minified-te Version, muß mich da nur reindenken.

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #605 am: 30. Juli 2021, 08:28:10
    Hi,

    um nochmal auf das Thema Banner und CLS zurückzukommen hier mal eine, ich hoffe verständliche Anleitung, wie man das ganze in den Griff bekommt am Beispiel des Standard Banners, der im Demoshop eingebunden ist.

    Wichtig dabei ... nicht einfach kopieren und einfügen ... das kann auch schief gehen je nachdem welche Bildgrößen ihr verwendet.

    Bildgröße
    Bannerbild Desktop: 985px - 400px
    Bannerbild Mobil: 600px - 400px

    Daraus ergibt sich nach einem Dreisatz folgendes Seitenverhältnis:
    Bannerbild Desktop: 40.6091%  (Höhe zu Breite)
    Bannerbild Mobil: 66.6666% (Höhe zu Breite)

    CSS
    Der Banner ist im folgenden DIV-Container eingebunden:

    Code: PHP  [Auswählen]
    <div class="content_banner cf">{$BANNER}</div>

    Im CSS sieht das im Original so aus:

    Code: CSS  [Auswählen]
    .content_banner {
      margin: 20px 0 20px 0;
    }
    .content_banner img {
      float:left;
      width:100%;
      height:auto;
    }

    Das alte CSS brauchen wir nicht mehr. Das kann auskommentiert bzw. gelöscht werden. Das müssen wir entsprechend anpassen.

    Damit wir innerhalb von content_banner irgendwas absolut positionieren können müssen wir erstmal ein "position: relative" einfügen. Sicherheitshalber noch ein "overflow:hidden" damit nichts übersteht.

    Das sieht dann so aus:

    Code: CSS  [Auswählen]
    .content_banner {
      margin: 20px 0 20px 0;
      position:relative;
      overflow:hidden;
    }

    Jetzt haben wir zwar einen Container aber noch keine Höhe im gewünschten Seitenverhältnis.
    Dafür sorgen wir jetzt mit dem Pseudoelement :before

    So sieht das CSS dann aus:

    Code: CSS  [Auswählen]
    .content_banner:before {
      content: "";
      display:block;
      padding-top: 66.6666%;
    }
    @media only screen and (min-width: 600px) {
      .content_banner:before { padding-top: 40.6091%; }
    }

    Da das CSS nach dem Prinzip "mobile first" arbeitet fangen wir mit der Anweisung für Mobil an.
    Das padding-top sorgt dafür dass der Container "content_banner" hier eine Höhe von 66.666% der Containerbreite bekommt. (Das ist das Seitenverhältnis welches wir oben ausgerechnet haben.)

    Ab einer Bildschirmbreite von 600px schalten wir dann um auf den Desktop-Banner und passen hier dann das Seitenverhältnis an.

    Jetzt fehlt nur noch das Bild.
    In einem solchen Konstrukt muss "absolut" positioniert werden.
    Dafür brauchen wir dann das folgende CSS:

    Code: CSS  [Auswählen]
    .content_banner img {
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }

    Damit wird das Bild immer 100% der Breite und 100% der Höhe des Containers haben.
    Abgeschnitten bzw. verzerrt wird ebenfalls nichts sofern das richtige Seitenverhältnis ausgerechnet wurde.

    Das ganze kann auf jeden Container angewendet werden. Wichtig ist immer nur das richtige Seitenverhältnis im Vorfeld auszurechnen.

    Damit sind dann die Layoutverschiebungen auf der Startseite verschwunden.

    Viel Sapß damit :-)

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #606 am: 08. Januar 2022, 01:24:15
    Bevor ich ein Ticket aufmache poste ich das mal hier für dich, Markus, und zur Diskussion:
    Es gibt vier Options-Templates (/templates/tpl_modified_responsive/module/product_options/).
    • Zwei davon sind absolut identisch.
      product_options_dropdown,html
      und
      multi_options_1.html
    • table_listing.html
      und
      product_options_selection.html
      sind fast gleich
      - zumindest verfolgen sie denselben Gedanken -
      wobei zweitgenanntes verunglückt ist.
    • In drei der Templates fehlt oben in der Datei das Laden der Language-Files.
      Ist nur in table_listing.html vorhanden.

    Sollte man die Templates nicht auf 2 reduzieren ?
    Oder, wenn wegen Kompatibilität zu bereits installierten Shops nicht gewünscht, sie nicht zumindest fixen ?

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #607 am: 08. Januar 2022, 08:49:35
    HI noRiddle,

    du liegst da vollkommen richtig. 
    Das ist der Abwärts-Kompatibilität geschuldet.  :-)
    Es gibt marginale Unterscheide wobei "multi" und "dropdown" identisch sind.
    Bei "table" und "selection" ist der Unterschied nur die zusätzliche Artikelnummer und die Ausgabe vom Preis.

    EDIT: Die Language-Files sind jetzt schonmal drin und mit r13909 ins SVN übernommen worden.

    Markus

    /nob

    • Fördermitglied
    • Beiträge: 69
    Re: Responsive Template für Modified
    Antwort #608 am: 19. Januar 2022, 18:42:23
    Hallo Markus,

    ich verwende Dein Template, da zeigt sich das Problem, dass in der Desktop Darstellung bei einer Hauptrubrik Pagespeed 99 Punkte vergibt, in der mobilen Darstellung nur 80 Punkte. Oli / noRiddle hat sich das auch schon angesehen und etwas optimiert, aber mehr Speed finden wir nicht.

    VG, Norbert

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #609 am: 19. Januar 2022, 18:45:18
    Hi Norbert,

    da kann ich so nicht allzuviel sagen .... entweder du postest den Link zum Shop oder schickst mir die URL per Mail an markus [ät] modified-shop [punkt] org :-)

    Markus

    [EDIT Tomcraft 19.01.2022: E-Mail Adresse maskiert.]

    /nob

    • Fördermitglied
    • Beiträge: 69
    Re: Responsive Template für Modified
    Antwort #610 am: 20. Januar 2022, 18:19:36
    Hi Markus,

    danke sehr, habe Dir die URL und Screenshots per mail geschickt.

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #611 am: 23. Februar 2022, 16:27:00
    Bei einem Vergleich von SERPs bzgl. eine Users welcher die modified-Software benutzt habe ich mal Mitbewerber analysiert die in den SERPs vor dem User stehen.
    Dabei fiel mir auf, daß

    Code: XML  [Auswählen]
    <meta itemprop="priceCurrency" content="{$smarty.session.currency}" />

    html-technisch in ziemlich großer räumlicher Entfernung zu

    Code: XML  [Auswählen]
    <meta itemprop="price" content="{$price_data.PRODUCTS_PRICE_PLAIN}" />

    steht.
    • Bei den vor dem User gelisteten Mitbewerbern ist das nicht so.
    • Bei den Mitbewerbern wird auch der Preis mit angezeigt, was bei dem User nicht der Fall ist.

    Ich frage mich, ob man deshalb nicht

    Code: XML  [Auswählen]
    <meta itemprop="priceCurrency" content="{$smarty.session.currency}" />

    aus den Produkt-Templates in die /templates/DAS_TEMPLATE/modules/indlues/price_info.html  in lokale Nähe zu

    Code: XML  [Auswählen]
    <meta itemprop="price" content="{$price_data.PRODUCTS_PRICE_PLAIN}" />

    holen sollte.
    Eigtl. sollte das zwar nicht wichtig sein, aber wer weiß wie der Suchmaschinen-Bot genau arbeitet und gewichtet...

    Was denkt Ihr, vor allem, du, Markus ?

    Gruß,
    noRiddle

    Markus

    • modified Team
    • Beiträge: 1.361
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #612 am: 23. Februar 2022, 16:43:47
    Hi noRiddle,

    meines Wissens nach ist es nur wichtig dass "priceCurrency" innerhalb von itemprop="offers" steht was ja so gegeben ist.

    Der Rest sollte Google eigentlich egal sein. Klar könnte man das jetzt theoretisch in die "price_info.html" packen aber ich kann mir wirklich nicht vorstellen, dass das irgendwelche Auswirkungen hat.

    Wenn dem jetzt tatsächlich so wäre würde ich den Glaube an so ziemlich alles verlieren. :-)
    Anders rum gefragt ... hast du die Möglichkeit es zu testen und dann auch zu beobachten ob sich da evtl. doch was im Ranking verändert?

    schöne Grüße

    Markus

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #613 am: 23. Februar 2022, 16:48:29
    Ja, ich würde das auch für äußerst seltsam halten wenn das wichtig wäre.
    Es ist auch nicht der einzige Unterschied den ich zu den Mitbewerbern festellen konnte. Die haben z.B. Produktbewertungen, der genannte User nicht.
    Mich wunderte jedoch die Anzeige des Preises in den SERPs bei den Mitbewerbern, was beim User nicht der Fall ist.

    Ja, ich habe das mal bei dem User umgebaut und werde es beobachten.
    Wird wahrscheinlich schwer zu beurteilen sein, da SERPs ja auch vom eigenen Suchverhalten abhängen.
    Wenn allerdings plötzlich bei dem User der Preis erscheinen sollte dann wäre es ein starkes Indiz.
    Melde mich ggfls. dazu dann nochmals..

    Gruß,
    noRiddle

    noRiddle (revilonetz)

    • Experte
    • Beiträge: 13.707
    • Geschlecht:
    Re: Responsive Template für Modified
    Antwort #614 am: 26. August 2022, 14:57:56
    Kurzes Feedback zum Thema der Position von
    Code: XML  [Auswählen]
    <meta itemprop="priceCurrency" content="{$smarty.session.currency}" />
    in räumlicher Nähe zu
    Code: XML  [Auswählen]
    <meta itemprop="price" content="{$price_data.PRODUCTS_PRICE_PLAIN}" />

    Ich konnte keine Verbesserung in den SERPs feststellen.



    Anderes Thema: mobile first
    Was bedeutet das in deiner Ansicht, Markus, genau ?
    Sicherlich das, daß die generellen Styles zuerst, dann die Styles für schmale Bildschirme und erst dann die für größere Bildschirme im CSS definiert werden.
    Praktisch hieße das, Styles ohne Media-Queries zuerst und mit Media-Queries unter Verwendung von min-width dann für größere Bildschirme aufsteigend:
    Code: CSS  [Auswählen]
    @media (min-width: XXXpx)

    Soweit so gut.
    Was jedoch macht ein moderner Browser damit, wo also liegt der Vorteil was Ladegeschwindigkeiten und Ressourcen betrifft ?
    Ich habe gehört, daß moderne Browser Styles die nicht greifen
    - also auf kleinen mobile-Bildschirmen dann die für die größeren in den "min-width"-Media-Queries -
    nicht interpretieren und somit Zeit und Ressourcen sparen würden.
    Ich kann mir technisch allerdings nicht vorstellen wie das bewerkstelligt werden soll und habe auch mittels rechechen im I-Net nichts dazu finden können.
    Was ich mir vorstellen kann ist getrennte Stylesheets zu haben, die im Aufruf dann mittels Angaben im media-Attribut dem Browser die nötigen Informationen liefern.
    Z.B.:
    Code: XML  [Auswählen]
    <link href="mobile.css" media="screen and (max-width: 769px)" rel="stylesheet">

    Mir scheint es gäbe einen Widerspruch zu dem Wunsch alles in möglichst wenig Files zu komprimieren (deshalb stylesheet.min.css) und dem Wunsch getrennte Dateien zu haben die dem Browser im media-Attribut des link-Elements die Bestimmung der Styles mitteilen.

    Wie siehst du das, hast du das verstanden ?
    Was sagen andere, die meinen durchgeblickt zu haben ?

    Gruß,
    noRiddle
    48 Antworten
    40442 Aufrufe
    18. Juni 2017, 11:01:06 von Timm
    1 Antworten
    3085 Aufrufe
    24. April 2018, 09:36:44 von lukass
    10 Antworten
    8832 Aufrufe
    28. November 2018, 23:00:26 von cayuco
    3 Antworten
    1906 Aufrufe
    21. Juli 2018, 14:02:31 von Tomcraft