Responsive Template für Modified

[Markus]

Hi Jürgen,

und noch eine Änderung ...

suche in der stylesheet.css den neuen Eintrag....

Code: CSS  [Auswählen]

.search_inner .search_cat select {
  height:48px !important;
}

und ersetze ihn damit:

Code: CSS  [Auswählen]

.search_inner .search_cat select {
  height:48px !important;
  padding-left: 12px !important;
}

Jetzt dürfte nichts mehr "zappeln".
Wenn das so passt würde ich das auch in das Standardtemplate übernhemen.

Markus

[karsta.de]

Hallo Markus,

bei mir klappt das nur mit dieser Änderung:

Code: CSS  [Auswählen]

.search_inner .search_cat select{height:35px !important;width:90px !important;}

Ist dir aufgefallen, dass dieser Style 2x drin steht:

Code: CSS  [Auswählen]

.search_inner .search_cat .SumoSelect:focus > .CaptionCont { border-right:1px solid #eeeeee !important; }
.search_inner .search_cat .SumoSelect:focus > .CaptionCont { border-right:1px solid #659eC9 !important; }

BG Karsta

[Markus]

Hi Karsta,

am Standardtemplate war ich noch nicht. Hier geht es gerade um ein Kauftemplate weshalb die Syntax bei dir nicht stimmen dürfte. Wenn das hier sauber funktioniert werde ich das auch auf das Standartemplate adaptieren mit den entsprechend geänderten Werten und die Änderungen hier posten.

Danke für den Hinweis mit den doppelten Werten ... das werde ich dann in dem Zusammenhang auch gleich korrigieren.

Markus

[karsta.de]

Alles klar, habe mich vom Titel dieses Beitrages leiten lassen, da ich nicht wußte, dass du im Forum den Support für Kauftemplates gibst.
Mein Kommentar bezog sich aufs Standard-Template tpl_modified_responsive.

BG Karsta

[Markus]

Hi,

hier die Änderungen für das "tpl_modified_responsive" Template
In den beiden Templates "tpl_modified" und "xtc5" sind keine Änderungen notwendig da hier auch kein Sumoselect genutzt wird.

suche in der stylesheet.css

Code: CSS  [Auswählen]

.search_inner .search_cat {
  position:relative;
  z-index: 1200;
  width:80px;
}

darunter einfügen:
(Eine width-Angabe ist nicht notwendig da das select weiter unten auf 100% gestellt wird)

Code: CSS  [Auswählen]

.search_inner .search_cat select {
  height:35px !important;
  padding-left:8px !important;
}

Und hier hat sich noch ein Fehler eingeschlichen
suche in der stylesheet.css

Code: CSS  [Auswählen]

.search_inner .search_cat .SumoSelect:focus > .CaptionCont { border-right:1px solid #eeeeee !important; }
.search_inner .search_cat .SumoSelect:focus > .CaptionCont { border-right:1px solid #659eC9 !important; }

ersetze mit:

Code: CSS  [Auswählen]

.search_inner .search_cat .SumoSelect:hover > .CaptionCont { border-right:1px solid #eeeeee !important; }
.search_inner .search_cat .SumoSelect:focus > .CaptionCont { border-right:1px solid #659eC9 !important; }

Mit den Änderungen sollte das Kategorie-Dropdown nicht mehr "zappeln". 
Die Änderungen sind in r12929 ins SVN übernommen worden.

Markus

[JuergenS]

Hi Jürgen,

und noch eine Änderung ...

suche in der stylesheet.css den neuen Eintrag....

Code: CSS  [Auswählen]

.search_inner .search_cat select {
  height:48px !important;
}

und ersetze ihn damit:

Code: CSS  [Auswählen]

.search_inner .search_cat select {
  height:48px !important;
  padding-left: 12px !important;
}

Jetzt dürfte nichts mehr "zappeln".
Wenn das so passt würde ich das auch in das Standardtemplate übernhemen.

Markus

Hallo Markus,

entschuldige das ich erst jetzt schreibe. Ich hatte vorher keine Zeit es kurz zu ändern.
.... ABER es ist so PERFEKT

Danke schön.

Gruß
Jürgen

[noRiddle (revilonetz)]

Folgender Code in der
/templates/tpl_modified_responsive/javascript/extra/default.js.php
scheint nicht (mehr) zu funktionieren:

Code: Javascript  [Auswählen]

      $("html").not('.toggle_cart').bind('click',function(e) {
        $('.toggle_cart').slideUp('slow');
      });

oder auch

Code: Javascript  [Auswählen]

      $("html").not('.toggle_wishlist').bind('click',function(e) {
        $('.toggle_wishlist').slideUp('slow');
      });

Das .not() hat keine Wirkung.
Weiß leider nicht genau, ob das vorher schon so war oder erst in der 2.0.5.1 mit jQuery 3.4.1 so ist (mangels Zeit nicht ausprobiert, denke aber es war auch vorher schon so).
Seltsames Verhalten imo, habe das früher auch oft so benutzt.

Bei mir klappt es nur wenn ich das "event bubbling" verhindere, also mit e.stopPropagation().
Am Beispiel von toggle_cart:

Code: Javascript  [Auswählen]

    $('.toggle_cart').click(function(e) {
        e.stopPropagation();
    });
    /*$("html").not('.toggle_cart').on('click', function() {*/ /*doesn't work with jQuery 3.4.1 ??, so we need the command above with stopPropagation(), 03-2021, noRiddle*/
    $('html').on('click', function() {
        $('.toggle_cart').slideUp('slow');
    });

Kann das mal jemand verifizieren ?
Markus ?

Gruß,
noRiddle

[noRiddle (revilonetz)]

*Nachtrag*

Die bessere Variante:

Code: Javascript  [Auswählen]

    //changed it to use of target, since some analytics software tracking clicks won't work with stopPropagation, 03-2021, noRiddle
    $('html').on('click', function(e) {
        if(!$(e.target).closest('.toggle_cart').length > 0 )
            $('.toggle_cart').slideUp('slow');
    });

Die Verwendung von stopPropagation(), die ich zuerst vorgeschlagen habe, kann Analytics Software die Clicks trackt auf dem Element welches stopPropagation() verwendet blockieren, da der eventListener für Click meist auf document gesetzt ist. stopPropagation() verhindert aber das "bubbling up" des Click Events im DOM zu document und der Click wird von der Analytics-Software nicht registriert.
Hier ist das unter der Überschrift "Don’t stop bubbling without a need!" sehr gut erklärt: Bubbling and capturing

Kurz noch zur Klärung:
Die bisherige Variante mt dem .not() fiel bislang als nicht funktionierend nicht auf weil sowohl auf dem Warenkorb- als auch auf dem Wischlist-Slide-Down ein Klick das aufgeslidete Element ruhig schließen darf.
Schlecht ist es wenn man sich z.B. ein Login-Slide-Down baut, denn dort muß man in die Eingabefelder klicken können, ohne daß sich das Slide-Down schließt.

Gruß,
noRiddle

[Markus]

Hi noRiddle,

danke für den Hinweis.
Wir haben deine Lösung in r13487 ins SVN übernommen.

Markus

[JuergenS]

Hallo Markus,

mal eine Frage zum gekauften Template Responsive - 6.
Kann es sein, dass bei diesem Template die Kategoriebeschreibung in den Unterkategorien nicht angezeigt werden?

Wenn ich es umstelle auf das Standard-Template funktioniert es. Es wird alles angezeigt. Nur nicht bei dem Template Responsive - 6.

Kann man das evtl. ändern?

Vielen Dank für Deine Unterstützung.

Jürgen

[Markus]

Hi Jürgen,

das ist korrekt ... die Beschreibungen werden in den Unterkategorien nicht angezeigt.
Wenn du mir einen Link zu deinem Shop schickst kann ich mir das gerne mal anschauen und dir schreiben wie du die am besten einfügst. Ich denke mal du brauchst dafür auch ein bisschen Platz ... von daher wäre es besser wenn ich mir das mal anschauen kann.

Du kannst mir den Link zum Shop auch gerne an markus @ modified - shop . org schicken.

Markus

[JuergenS]

Hallo Markus,

besten Dank. Habe Dir eine E-Mail gesendet.

Viele Grüße
Jürgen

[noRiddle (revilonetz)]

Hallo Markus.
Man sieht in Google PagespeedInsights oft, daß empfohlen wird wichtige Ressourcen vorzuladen.
Dabei geht es oft um FontAwesome.
Habe das mal testweise mit einem File in /includes/extra/header/header_head/ gemacht mit dem von modernen Browsern meist benutzten File-Format:

Code: PHP  [Auswählen]

<?php
/****************************************************************
* file: preload_ressources.php
* path: /includes/extra/header/header_head/
* use: try to preload ressources (for PagespeedInsights)
*
*  05-2021, noRiddle
****************************************************************/
if(file_exists('templates/'.CURRENT_TEMPLATE.'/css/fonts/fa-solid-900.woff2')) {
?>
<link rel="preload" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/css/fonts/fa-solid-900.woff2'; ?>" as="font" crossorigin="anonymous" />
<?php
}
if(file_exists('templates/'.CURRENT_TEMPLATE.'/css/fonts/fa-regular-400.woff2')) {
?>
<link rel="preload" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/css/fonts/fa-regular-400.woff2'; ?>" as="font" crossorigin="anonymous" />
<?php
}
if(file_exists('templates/'.CURRENT_TEMPLATE.'/css/fonts/fa-brands-400.woff2')) {
?>
<link rel="preload" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/css/fonts/fa-brands-400.woff2'; ?>" as="font" crossorigin="anonymous" />
<?php
}
?>

Was denkst du darüber ? Sinnvoll oder nicht ?

Gruß,
noRiddle

[Markus]

Hi noRiddle,

die Idee hatte ich auch schon weil ich irgendwie diese nervige Meldung wegbekommen wollte.
In der Tat bekommt man die nur so weg indem man die woff2 Dateien direkt im Header mit einem preload vorlädt.
Der Haken an der Sache ist nur, dass sich damit die "Time to interactive" und die "Total blocking time" entsprechend verlängern.
Ich hatte das in verschiedenen Shops ausprobiert und eine wirkliche Verbesserung am Gesamtergebnis konnte man damit nicht wirklich erreichen ... lediglich eine Verschiebung zwischen den einzelnen Punkten.  Daher hatten wir uns entschieden es nicht mit in den Core zu übernehmen. Unter anderem auch darum weil es eben im Head passieren muss und nicht mehr im Template.

Ich hoffe mal, dass sich das mit den "Variablen Fonts" noch ein bisschen schneller durchsetzt damit man dann zumindest nicht mehr für jeden "Schnitt" eine Font-Datei benötigt.

Markus

[noRiddle (revilonetz)]

Ja, die sich teilweise widersprechenden oder konterkarierenden "Optimierungs"-Tipps in PagespeedInsights nerven schon lange. Verstehe eure Entscheidung vollkommen.

Variable Fonts: Deine Hoffnung in der Verantwortlichen Gehörgang.
An eine baldige Umsetzung, ohne daß ein Browser-Hersteller wieder hinterherhinkt oder Umsetzungsfehler einbaut, glaube ich eher nicht; ganz zu schweigen davon, daß ein weiteres Hindernis die Verwendung veralteter Browser-Versionen, insbesondere in größeren Firmen, sein wird.

Gruß,
noRiddle