iOS 18 - Safari oder Chrome / Detailseite Buttons ohne Funktion

Shopware 5
61

Mach es mal über die \frontend\detail\content\buy_container.tpl. Dort wird die genannte actions.tpl eingebunden:

{* Product actions *}
{block name="frontend_detail_index_actions"}
    <nav class="product--actions">
        {include file="frontend/detail/actions.tpl"}
    </nav>
{/block}
1 „Gefällt mir“
62

Hallo Steffffi

Bei mir hat das iOS Update leider nichts gebracht :frowning:

64

Ich lass’ das ganze jetzt: der Warenkorb läuft, der Rest ist mir jetzt ehrlich gesagt egal. Wird dann wirklich ein Flickwerk.

65

Ich wundere mich schon wenn ich sowas von Shopware lese:

Ich vermute mal Apple anzuschreiben wird nicht unbedingt den gewünschten Erfolg bringen. Daher sehe ich eher Shopware in der Pflicht das zu fixen.

Natürlich kann gesagt werden: Ist nicht unser Problem, Supportende SW5, Fehler wird von Apple verursacht…

Aber das alles hilft den Nutzern von Shopware 5 nicht weiter.

66

Shopware 5 wurde im Frühjahr 2015 vorgestellt.
Das CSS und HTML ist also 9 Jahre alt.
Nach 9 Jahren hat der angebissene Apfel nun ein Problem, welches 9 Jahre kein Thema war. Wo liegt da also das Problem? Beim faulen Apfel!

Und warum soll Shopware den Fehler nun beheben? Shopware 5 ist EOL - also findet eine saubere Lösung und macht bei Git einen Pullrequest. Wenn er denn taugt - und der bisherige scheint keine Problemlösung zu sein - wird Michael eine Release rausbringen.

4 „Gefällt mir“
67

Hi zusammen,

ihr könnt im Theme-Manager bei der Konfiguration eigene CSS Angaben einbauen. Falls ihr da noch nichts drin habt, könnt ihr mal folgendes testen:

<style>
.product--buybox {
    z-index: 5000;
    position: relative;
}
</style>

Theme-Manager > eigenes Theme wählen > Theme konfigurieren > Tab „Konfiguration“ > Fenster „Eigene CSS Dateien“

Dann Theme erstellen/kompilieren und ggf. Cache leeren.

Bei mir hat das gerade bei einem Quick/Dirty Test direkt funktioniert. (Kann man sicher genauer prüfen und sauber einbinden. So habt ihr aber die Möglichkeit, dass evtl. ganz schnell zu lösen ohne dabei in die Dateien zu müssen)

2 „Gefällt mir“
68

@SebastianKloepper :

… haben wir eben ausprobiert, das hat dazu geführt dass sie varianten und der warenkorb wieder funktionieren, beim runterscrollen erscheint aber trotzdem noch „viel weisse seite“ da die beschreibung etc. nach unten wandern, evtl hast du hier eine lösung damit dies auch noch funktioniert?

dankeschön

69

Ich hatte vorhin Zugriff auf ein iPhone 16. Der Warenkorb-Button und die Mengenauswahl funktionieren. Die anderen Elemente der BuyBox wie z.B. Texte oder Links z.B. auf die Hersteller-Seite sind weiterhin verdeckt. Merken und Bewerten sind bei mir im Shop ausgeschaltet. Das konnte ich nicht testen.
Die neue mögliche Lösung IOS - Safari oder Chrome / Detailseite Buttons ohne Funktion - #67 von SebastianKloepper konnte ich bisher nicht testen.

70

Hallo,

bei uns hat es geholfen dem „product–image-container“ eine Höhe von 100% zu geben. Damit wird sowohl das Überlagern der „product–buybox“ (Warenkorb-Button, etc.), als auch der weiße Platz zwischen Bild-Container und der Produkt-Buybox, der bei manchen hier - wie bei uns - auch aufgetreten ist, behoben. Eine Änderung des „z-index“ war damit nicht mehr notwendig.

Wir haben unsere less-Datei wie nachfolgend ergänzt. Falls ihr noch keine eigene less-Datei habt, einfach unter „themes/Frontend/EUER_THEMENAME/frontend/_public/src/less“ eine Datei mit dem Namen „all.less“ anlegen und folgenden Ihnalt einfügen. Danach Cache löschen und Themes neu kompillieren. Im Pfad einfach „EUER_THEMENAME“ durch den Namen eures Themes ersetzen.

.product--details {
	.product--image-container {
		height: 100%;
	}
}

Alternativ kann man auch wie oben von @SebastianKloepper beschrieben im Theme selbst unter
Theme-Manager > eigenes Theme wählen > Theme konfigurieren > Tab „Konfiguration“ > Fenster „Weitere CSS Dateien“
den Code wie folgt reinkopieren:

<style>
.product--details {
	.product--image-container {
		height: 100%;
	}
}
</style>

Vielleicht hilft das bei euch auch. Ihr könnt gerne eine kurze Rückmeldung geben, ob es bei euch geklappt hat. LG

2 „Gefällt mir“
71

… wir haben nun den vorschlag von NilsT zusätzlich zu dem vorschlag von sebastiankloepper noch in das feld " Weitere CSS-Dateien" reinkopiert und alles funktioniert nun einwandfrei …

1 „Gefällt mir“
72

Sobald man mit dem „z-index: 5000;“ die Buy-Box ganz in den Vordergrund holt, wird in der Desktop-Ansicht die Zoom-Box von der Buy-Box überlagert, d.h. wenn man mit der Maus auf das Bild geht offnet sich rechts die Zoom-Box und diese liegt dann natürlich unter der in den Vordrgrund geholten Buy-Box, sodass über dem vergrößerten Bild der Text (etc.) liegt.
Ich würde deshalb den „z-index: 5000;“ komplett weglassen, damit die Zoom-Box in der Desktop-Ansicht korrekt funktioniert. Es ist völlig ausreichend die Höhe des Image-Containers auf 100% zu sezten. Damit kann der Image-Container nicht mehr die Buy-Box inkl. allen Buttons überlagern.

73

Danke Sebastian und Nils. Habe beides eingesetzt, jedoch den Z-index auf 1000 gesetzt. So geht jetzt alles bei mir wieder. Desktop wie Mobile.

74

hallo nils,
wir haben nun festgestellt das wenn wir deinen vorschlag in die CSS-dateien zusätzlich zu dem von sebastian kloepper reinkopieren zwar in der mobilen ansicht alles einwandfrei funktioniert, jedoch in der desktop ansicht das aufklappmenue für die kategorien von der „Buy-Box“ überlagert werden. hättest du hierfür noch eine lösung? dankeschön für eine info.

75

Hallo,
also bei uns war es ausreichend nur die Höhe auf 100% zu setzen. Den z-index würde ich komplett weglassen, da es dann an verschiedenen Stellen in der Desktop-Ansicht zu Problemen kommt, wenn die Buy-Box immer im Vordergrund ist. Der Bild-Zoom wird dann überdeckt und das Aufklappmenü ebenfalls. Einfach nur meinen Vorschlag einzeln probieren und nicht zusammen mit dem z-index. Das Setzen der Höhe auf 100% verhindert, dass der Image-Container größer wird als er soll und somit kann er keine Buttons mehr überdecken oder die Buy-Box runterschieben, sodass leerer Platz entsgeht.
Das mit dem z-index war zwar kein schlechter Ansatz, aber die Höhe begrenzen ist besser und macht an keiner anderer Stelle Probleme. Eine Kombination beider Lösungsansätze bringt keinen Vorteil.
Teste mal ob das bei dir funktioniert.
LG

76

Hallo zusammen

Ich habe die Anpassung mit der Height bei der Klasse .product–details . product–image-container sowohl direkt unter Konfiguration beim Theme wie auch direkt in der all.less gemacht. Leider funktioniert es bei mir noch immer nicht, siehe z.B. diesen Artikel. Mache ich was falsch?

Liebe Grüsse

Sijandi

77

hallo nils,

ohne dass wir den z-index setzen (vorschlag sebastion kloepper) und nur deinen vorschlag in die CSS-Dateien einsetzen sind bei uns in der mobilen ansicht die auswahlbox etc. ohne funktion.

leider überlagert in der desktopansicht dann (wenn beide vorschläge eingesetzt sind, was notwendig ist damit die buybox in der mobilen ansicht einwandfrei funktioniert) die buy-box in der desktopansicht das auswahlmenue.

hast du hierzu evtl. eine lösung?

dankeschön vorab für eine info.

78

Hallo,

das Aufklappmenü der Kategorien in der Desktop-Ansicht hat einen z-index von 3000. Damit das Menü nicht von der Buy-Box überdekt wird, müsste man also bei dem Vorschlag von Sebastian einen z-index kleiner als 3000 nehmen. Oben hatte es bei @MelMa mit einem z-index von 1000 geklappt.

Der Code müsste dann so aussehen:

.product--details {
	.product--image-container {
		height: 100%;
	}
}

.product--buybox {
	z-index: 1000;
	position: relative;
}

Noch ein Hinweis an @sijandi: Es macht keinen Sinn die Änderung doppelt anzuwenden. Also entweder in der Theme-Konfiguration unter „Weitere CSS-Dateien“ oder in der „all.less“, aber nicht in beiden.

79

… danke nils, wir haben nun den z-index wert auf 2500 gesetzt und auf den ersten blick funktioniert nun alles (desktop/mobil), der wert 1000 hat bei uns nicht funktioniert, wir werden es im auge behalten ob nicht noch an irgendeiner stelle etwas anderes in diesem zusammenhang auftritt… nochmals dankeschön!

80

Hallo @NilsT

Vielen Dank für die Rückmeldung. Ich habe deinen Code nun beim Theme rausgenommen und in die All.less eingebunden. Leider überlagert in der Desktop Ansicht die Buybox das Zoom Lens Fenster, wenn man mit der Maus über das Artikelbild fährt :frowning: Ich habe sowohl z-index 2500 wie auch 1000 getestet.

Hast du mir noch einen Tipp?

Liebe Grüsse

Sijandi

81

Ev. wäre es doch sinnvoller, auf das ganze zu verzichten. Zieht ja nun einen Rattenschwanz nach sich nur wegen IOS 18.

Der Fix mit unset hat gereicht um den Warenkorb benutzbar zu machen, mehr sollte man wohl lassen.