WP Plugin: SpreadShop nur etwa 300 px hoch

Deutsch Spreadshop
, ,
#1

Tag beisammen.

Das Wordpress Plugin Spreadshop scheint okay, bis auf eine sehr entscheidende Tücke:
Die Darstellung des Shopbereichs ist höchstens 300 px hoch. (Darüber der Header, darunter der Footer, wie in Wordpress eingerichtet);
und zwar in Safari, Firefox und Chrome.
Auf dem iPad 3 wird gar nichts dargestellt.
Hier zu sehen: http://www.hammann-handlettering.de/t-shirt-shop/

SO ist das nicht eben user-freundlich. 'ne Idee? Vielen Dank schonmal.

#2

Hey Pit!

Es unterscheidet sich die URL http://hammann-handlettering.de/t-shirt-shop/ von der, unter welcher der Shop einwandfrei funktioniert: http://hammann-handlettering.de/shop/#!/ (Die URL, welche von deiner Seitennavigation angesteuert wird)

Du hast wahrscheinlich noch die erstere Umleitungs-URL in den Shopsettings eingetragen.

btw: sehr schöner Shop!

1 Like
#3

… und hallo Thomas,

danke für die rasche Antwort; und das Kompliment für den Shop nehme ich ebenso dankend an :slight_smile:

Ich muss das etwas deutlicher erläutern, denn ich habe sowohl Javascript- als auch Plugin-Version eingerichtet, um einen direkten Vergleich zu haben.

Das unter
http://hammann-handlettering.de/shop/
ist eine Wordpress-Seite mit dem eingebetteten JavaScript. Diese produziert eine Reihe verschiedener Dartsellungsfehler:
• auf den Übersichtsseiten werden die Motive nicht angezeigt (betrifft mehrere Safari-Versionen)
• auf der Produktübersicht werden die Größen untereinander gelistet (dadurch entsteht Weißraum, der die Übersicht vermindert)
• auf der Produktseite werden die Thubnails der verschiedenen Produktansichten, die Thumbs unter dem Größenhinweis und die Designdetails verzerrt dargestellt.

Das unter
http://hammann-handlettering.de/t-shirt-shop/
ist die Plugin-Version mit der geschilderten Macke:
Die Darstellung des Shopbereichs ist in einem Sehschlitz, höchstens 300 px hoch. (Darüber der Header, darunter der Footer, wie in Wordpress eingerichtet); auf der z-Achse liegt der Shop also hinter/unter Header und Footer. Vor/über dem Footer würde es vermutlich schon lösen.
Betrifft Safari, Firefox und Chrome.
Auf dem iPad 3 wird gar nichts dargestellt.

Die Umleitungs-URL hat keinen Einfluss auf diese Darstellung (zumal ich beide URLs in den Shopsettings durchgespielt habe.

Du siehst, beide Varianten haben gewisse User-Unfreundlichkkeiten, die ich gerne eliminieren würde :slight_smile:

Jetzt, mit etwas mehr Kontext, hättest Du einen heißen Tipp?

#4

Das Spreadshop Wordpress Plugin hat keine Visualcomposer Klassen oder Elemente und kann daher nicht korrekt dargestellt werden. Daher wird die Variante, wo du nur das Javascript nutzt, korrekt angezeigt, denn sie enthält die notwendigen divs und Klassen.

Als einen Workaround könntest du das Plugin anpassen und den Bereich mit dem Visualcomposer Elementen umschließen, wärst dann aber bei Aktualisierungen raus oder setzt deinen Footer von `position:fixed auf position:relative oder static, wodurch dieser immer am Ende wäre und nicht am unteren Rand des Sichtfelds.

23
Bildschirmfoto 2018-05-12 um 23.30.23.png2224×1026 398 KB

Das liegt an deinem CSS, welches das CSS von Spreadshirt überschreibt. Füge zum Beispiel folgendes CSS in den “Custom CSS”-Bereich deines Templates oder nutze ein Plugin um Custom CSS einfügen zu können.

.SprdMain .sprd-product-list-item__size {
    margin: 0 .4em;
    white-space: nowrap;
    display: inline;
}

Das kommt daher:
43

Kann so behoben werden:

.SprdMain .sprd-product-list-item__image img {
    width: 100% !important;
}
.SprdMain .sprd-detail-images__view img {
    width: 100% !important;
}

01
Bildschirmfoto 2018-05-13 um 00.12.01.jpg1042×616 119 KB

Beim letzten Punkt, also den Sprite images, müssen wir ein wenig tricksen, denn dein Template CSS überschreibt es :frowning: und dadurch das SPRD hier Sprite-Images und Inline-Styles nutzt…

Problem:
04

Lösung (getrickst… bis update):

.SprdMain .sprd-detail-product-type__model-image img {
    margin-top: -1px !important;
    width: 560px !important;
    height: 150px;
    max-width: none;
}
.SprdMain .sprd-detail-product-type__model-image:nth-of-type(2) img {
    margin-left: -141px !important;
}
.SprdMain .sprd-detail-product-type__model-image:nth-of-type(3) img {
    margin-left: -281px !important;
}
.SprdMain .sprd-detail-product-type__model-image:nth-of-type(4) img {
    margin-left: -421px !important;
}
1 Like
#5

1.000 Dank!
(Fast) alles gelöst, obendrein am Wochenende: Ich bin geplättet.

1 Like
#6

Was fehlt noch?

#7

Nur das:

• auf den Übersichtsseiten werden die Motive nicht angezeigt (betrifft mehrere Safari-Versionen)

z.B. auf einem iPad 3. Okay, nicht mehr das Jüngste, nur betrifft es dann womöglich alle Geräte, die nicht auf iOs 10 updaten können (iOs 10 und jünger scheinen zu laufen).
Allerdings haben auch Leute an neuen iMacs mit aktuellem System das Problem; z.T. lädt ertsmal nur “Pit Hammanns Kunst des Handletterings”, also der Titel; die komplette Übersicht kommt erst nach “manuellem” Reload der Seite.

'ne Idee? So oder so: Danke schonmal.

#8

Keine Idee, vermutlich ist der Code einfach nicht für derart alte Systeme optimiert. Mit dem IE 11 habe ich das selbe Problem.
Content sehe ich im IE 11, wenn ich folgendes mache:

.SprdMain .sprd-listpage__header {
width:inherit
}

Ob dir das mit den älteren Safaris hilft, kann ich aktuell nicht testen.

Gruß
Thimo

#9

Danke für Deine Antwort.
Aber leider ohne die erhoffte Wirkung in Safari. Also weder auf dem alten iOs noch auf dem aktuellen Desktop.

#10

Hm wir könnten sonst kurz Teamviewer machen, dann könnte ich mir das einmal genauer anschauen. Auf meinem Mac wird alles korrekt dargestellt.

#11

Und das miese dabei ist:
Es lässt sich nicht mal sicher sagen, ob oder warum die Darstellung auf Anhieb hergestellt wird.
Safari ist der neue IE.

#12