Thema: Responsive Template für Modified

Timm · **Antwort #525 am:** 18. September 2020, 09:18:27

Moin

Danke für deinen unbeabsichtigten Denkanstoß an mich.

Ich hatte nämlich "newsletter" und "checkout_success" in meiner Änderung vergessen, meine Bestsellerslider css und js Dateien nur auf den entsprechenden Seiten zu laden, da meine Skripte dazu sehr groß sind. Das bringt auf Kategorieseiten, wo das nicht geladen werden muss, Verbesserungen in PageSpeed Insights.

Hab das über die general_bottom.css.php bzw. general_bottom.js.php gelöst.

Code: PHP [Auswählen]

<?php if((strpos($PHP_SELF, 'index')!==false && !isset($_GET['cPath']) && !isset($_GET['manufacturers_id'])) || (strstr($PHP_SELF, FILENAME_SHOPPING_CART)) || (strstr($PHP_SELF, FILENAME_LOGOFF)) || (strstr($PHP_SELF, FILENAME_NEWSLETTER)) || (strstr($PHP_SELF, FILENAME_CHECKOUT_SUCCESS))) { ?>
<script src="<?php echo DIR_WS_BASE.DIR_TMPL_JS; ?>magicscroll.js"></script>
<?php } ?>

magicscroll.js wäre im Shopnormalzustand durch jquery.bxslider.min.js zu ersetzen.

Würde deine Lösung zusätzlich noch was bringen?

Gruss Timm

noRiddle (revilonetz) · **Antwort #526 am:** 18. September 2020, 09:33:25

Ja, meine Lösung bringt was, denn sie bezieht sich auf die Datenbank-Queries die immer ablaufen, auch wenn sie nicht nötig sind.
*EDIT* Wenn du eine explizite Anleitung brauchst sag' Bescheid. *END_EDIT*

Das konditionale Laden des Javascript scheitert bei aktivierter JS-Komprimierung in ein einziges File genau daran.
Wenn du es aber machst, dann mit:

Code: PHP [Auswählen]

if(strpos($PHP_SELF, FILENAME_BLABLA) !== false)

oder:

Code: PHP [Auswählen]

if(basename($PHP_SELF) == FILENAME_BLABLA)

Beides dürfte schneller sein als strstr.

Gruß,
noRiddle

Timm · **Antwort #527 am:** 18. September 2020, 10:17:57

Danke dir. Ich mach erstmal das Update für meinen Shop fertig. PageSpeed Insights funktioniert zur Zeit eh nicht, um Ergebnisse zu vergleichen. Komme aber drauf zurück, wenn ich es nicht selbst schaffe.

Gruss Timm

Timm · **Antwort #528 am:** 21. September 2020, 08:30:46

Moin Markus

Sollten Bilder in Popups nicht auch responsive eingebunden werden? Nachstellbar im Demoshop, wenn man ein Bild im Versand hinterlegt. Mobil geht das dann über den Rand der colorbox hinaus. Ist mir aufgefallen weil im Oil.js Tool das Impressum als Popup verlinkt ist und ich dort mein Logo drin hab.

Gruss Timm

Markus · **Antwort #529 am:** 21. September 2020, 08:45:15

Hi Timm,

die Bilder sind schon responsive eingebunden. Das Problem an der Stelle ist, dass die Colorbox nach einem "resize" nicht nochmal "zündet". Ganz so einfach scheint das aber wohl nicht zu sein.
Hier gibts auch einen langen Beitrag dazu auf Github .... da müsste man mal die einzelnen Ansätze testen ob die dann auch überall funktionieren, siehe: new feature : make a responsive colorbox · Issue #158 · jackmoore/colorbox
Das einzige Szenario welches aus meiner Sicht Sinn machen würde wäre das wechseln der "orientation".

Markus

karsta.de · **Antwort #530 am:** 21. September 2020, 11:04:48

Da der Popup-Content eine CSS-Klasse im body stehen hat, kann man ganz leicht zumindest für die Bilder einen Style dafür festlegen, dass diese sich im Popup-Fenster responsive verhalten.

Code: CSS [Auswählen]

.popupcontent img{max-width:100%;width:auto;height:auto;}

BG Karsta

Markus · **Antwort #531 am:** 21. September 2020, 11:15:31

Hi Karsta,

ich weiss nicht worauf sich deine Antwort bezieht ... aber auf keinen Fall auf das Verhalten der Bilder in der corlorbox bei einem resize des Browsers. Und wo bitte setzt die colorbox eine Klasse in den body-Tag?

Markus

karsta.de · **Antwort #532 am:** 21. September 2020, 11:20:13

Hallo Markus,

shoproot\templates\tpl_modified_responsive\module\popup_content.html
(wird verwendet fürs Popup-Impressum und Popup-Datenschutz)

Code: XML [Auswählen]

<!DOCTYPE html{$doctype}>
<html {$html_params}>
<head>
<meta charset="{$charset}" />
<title>{$title}</title>
<meta name="robots" content="noindex, nofollow, noodp" />
{if $base}<base href="{$base}" />{/if}
<link rel="stylesheet" type="text/css" href="{$tpl_path}stylesheet.css" />
</head>
<body class="popupcontent">
<h1>{$content_heading}</h1>
{$content_text}
</body>
</html>

body class="popupcontent"

Wenn man hier oben genannten Style einfügt, ist das Bild nicht größer als der body der Colorbox. (Ist getestet.)

Allerdings in Timms Fall sollte er entweder !important verwenden oder den Inline-Style im Content-Manager beim Logo-Bild entfernen.

BG Karsta

Markus · **Antwort #533 am:** 21. September 2020, 11:55:08

Hi Karsta,

stimmt ... da habe ich mich jetzt verschaut ... an das Teil habe ich gar nicht gedacht. Ich war da komplett bei der Colorbox und dem "resize" Verhalten.

@Timm
Du kannst das ja mal testen ... das sollte eigentlich auch ohne "important" funktionieren wenn du das ins Stylesheet packst.

Am besten unter:

Code: CSS [Auswählen]

body.popupcontent h1 {
margin-top:0px !important;
}

das hier einfügen:

Code: CSS [Auswählen]

body.popupcontent img {
max-width:100%;
width:auto;
height:auto;
}

Markus

Timm · **Antwort #534 am:** 21. September 2020, 20:51:54

Hallo ihr beiden. Vielen Dank, es funktioniert nun.

Code: CSS [Auswählen]

body.popupcontent img {
max-width:100%;
width:auto;
height:auto;
}

funktioniert ohne !important. Ohne meine inline style Angabe der Größe von 400x150 war das svg Logo, obwohl es dann auf dem Desktop riesengroß ist, mobil automatisch ohne diesen zusätzlichen Code auch responsive. Also muss die Größenangabe im ckeditor das verursachen und was anderes überschreiben.

@Markus

Code: CSS [Auswählen]

body.popupcontent h1 {
margin-top:0px !important;
}

Ist im tpl_modified_responsive_1 noch nicht eingepflegt.

Gruß Timm

JuergenS · **Antwort #535 am:** 03. November 2020, 17:31:08

Hallo Markus,

ich habe mal ein paar Fragen an Dich zum responsive Template 6.

Das Kategorie-Feld links neben dem Suchfeld verschiebt sich immer etwas, wenn man auf die Seite (den Shop aufruft) klickt.

Anbei ein Foto.
Wo kann ich das denn abstellen oder was muss ich ändern?

Eine weitere Frage:

Ich habe diese Lagerampel eingebaut: css_product_attribut_lagerampel_fuer_shopversion_2.x.zip
funktioniert übrigens bestens. Danke schön an die Entwickler.

Das müsste eigentlich dieser Teil sein, der da noch in die Datei müsste.

Code: PHP [Auswählen]

<br />{traffic_light stock=$module_data.PRODUCTS_QUANTITY modul='listing'}

Allerdings finde ich nicht den Bestseller-Slider wo ich das noch eintragen muss. In die Bestseller Box bringt ja nichts.

Vielen Dank schon mal für Deine Unterstützung.
Jürgen

Tomcraft · **Antwort #536 am:** 03. November 2020, 17:33:42

Zitat von: JuergenS am 03. November 2020, 17:31:08

[...]
Das Kategorie-Feld links neben dem Suchfeld verschiebt sich immer etwas, wenn man auf die Seite (den Shop aufruft) klickt.

Anbei ein Foto.
Wo kann ich das denn abstellen oder was muss ich ändern?
[...]

Das lässt sich meiner Meinung nach nicht verhindern, da zum Zeitpunkt des Ladens der Seite noch nicht alle Styles geladen sind.

Grüße

Torsten

Markus · **Antwort #537 am:** 03. November 2020, 18:24:26

Hi Jürgen,

suche in der stylesheet.css

Code: CSS [Auswählen]

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

Füge danach ein:

Code: CSS [Auswählen]

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

Bitte nochmal kurz Feedback geben ob es dann bei dir passt.

Dann wegen dem Lagerampel:

Das ganze muss in die bestseller-Box rein.
öffne die /tpl_modified_responsive_6/boxes/box_best_sellers.html

suche nach:

Code: XML [Auswählen]

und füge davor ein:

Code: XML [Auswählen]

<div class="lb_stock">{traffic_light stock=$module_data.PRODUCTS_QUANTITY modul='listing'}</div>

Danach kannst du "lb_stock" über das CSS wie gewünscht formatieren.

Analog dazu für die ganzen Listings muss die die 3 Dateien ändern:
/tpl_modified_responsive_6/module/includes/
Alle 4 product_xxxxx Dateien.
Die sehen vom Aufbau her genauso aus wie auch die Bestseller-Box.

Markus

noRiddle (revilonetz) · **Antwort #538 am:** 03. November 2020, 18:26:57

Zum Zucken des Dropdown am Suchfeld:
Falls Markus' Vorschlag nicht hilft:
In dem Falle könnte zusätzlich das erst im Footer-Bereich geladene Sumoselect-Skript schuld sein.
Das generiert ja weitere HTML-Elemente die dann per ebenfalls im Footer geladenen CSS gestylt werden.
Wen das stört:
Abhilfe könnte bringen das Sumoselect-Skript und das dazugehörige CSS im head-Bereich zu laden (general.js.php und general.css.php).
Außerdem kann man das Sumoselect-Skript ja auch entfernen.
Wenn man trotzdem schönere als die Browser-Default-Dropdown-Styles möchte kann man das auch mit Pseudo-Elementen und CSS lösen. Inwieweit solche Lösungen dann browser-übergreifend funktionieren habe ich nicht geprüft.

Gruß,
noRiddle

JuergenS · **Antwort #539 am:** 03. November 2020, 21:58:50

Zitat von: Markus am 03. November 2020, 18:24:26

Hi Jürgen,

suche in der stylesheet.css
Code: CSS  [Auswählen]
.search_inner .search_cat {
position:relative;
z-index: 1200;
width:90px;
}

Füge danach ein:
Code: CSS  [Auswählen]
.search_inner .search_cat select {
height:48px !important;
}

Bitte nochmal kurz Feedback geben ob es dann bei dir passt.

Dann wegen dem Lagerampel:

Das ganze muss in die bestseller-Box rein.
öffne die /tpl_modified_responsive_6/boxes/box_best_sellers.html

suche nach:
Code: XML  [Auswählen]
<div class="lb_price cf">

und füge davor ein:
Code: XML  [Auswählen]
<div class="lb_stock">{traffic_light stock=$module_data.PRODUCTS_QUANTITY modul='listing'}</div>

Danach kannst du "lb_stock" über das CSS wie gewünscht formatieren.

Analog dazu für die ganzen Listings muss die 3 Dateien ändern:
/tpl_modified_responsive_6/module/includes/
Alle 4 product_xxxxx Dateien.
Die sehen vom Aufbau her genauso aus wie auch die Bestseller-Box.

Markus

Hallo Markus, hallo noRiddle,

vielen Dank für eure schnelle Hilfe.

Also das Kategorie-Feld links passt jetzt. Behält die gleiche Höhe usw. So wie es soll. - PERFEKT-
Nur das Wort "Alles" in dem Feld rutsch noch nach links beim darauf klicken auf den Shop. Aber das fällt kaum auf.

Die Bestseller werden bei mir gar nicht angezeigt im Moment. Trotz SQL Eintrag im Feld "products_ordered" (Eintrag zum Test)
Der Shop ist noch komplett frisch aufgesetzt.
Bin irgendwie bissl blind heute. Daher kann ich den Einbau nicht checken. Muss ich mich morgen nochmal ran machen.

Danke schön nochmal

Jürgen