Fragen zum neuen PWA Shop - Einrichtung - User helfen Usern

Hallo wir wagen es den neuen PWA Shop mit einem neuen kleineren Themenshop mal zu testen.

Aktuell sind wir die Handbuchseite durchgegangen und kommen natürlich nicht weiter.

https://knowledge.plentyone.com/de-de/manual/main/webshop/shop.html

Der Shop ist zwar live und es lässt sich auch alles bearbeiten aber es werden noch keine Produkte angezeigt. Wir haben wie bei den anderen Shops Kategorien und Produkte verknüpft. Kennt jemand das Problem und weiß da jemand woran es liegen könnte ?

Wir und andere haben sicherlich noch weitere Fragen zur Einrichtung…

Grüße Alexander

Problem 1 Lösung Produkte nicht im Shop,
wurde jetzt mit dem Telefon Support im zweiten Anlauf gelöst:

Es fehlte für den neuen Shop in: Einrichtung > Artikel > Verkaufspreise
Bei der zugehörigen Preisspalte noch der neue Mandant angehakt.
Nach Cache löschen und erneutem Build erscheinen jetzt die Produkte.

Problem 2 Stil / Design

Wir nehmen erstmal den Default Build, wie bekommen wir da CSS Anpassungen rein.

Wir möchten zum Beispiel keine Sprachauswahl (Weltkugel Icon),

da wir den .de Shop nur für die DE/Dach Region pflegen.

Gibt es da ein Plugin oder kann man da einen Code Editor irgendwie nutzen ?

Hallo Alex,

es gibt für den PWA Shop noch eine zusätzliche (teilweise veraltete) Dokumentation, falls du die noch nicht kennst:

CSS Anpassungen sind meines Wissens nach auch zum aktuellen Zeitpunkt nur über einen Fork des Shops wie hier beschrieben umsetzbar:

1 „Gefällt mir“

Moin,

ich habe das Problem, dass die Varianten alle einzeln in der Übersicht aufgelistet werden. Wie kann ich das ändern?

Hi danke für die Antwort, genau das einen Fork, wollen wir wegen der doch sehr häufigen Updates möglichst erstmal nicht machen. Das ist einfach viel zu viel Zeitaufwand da jedes mal Plenty nach zu arbeiten…

Gibt es denn schon eine Anleitung wie man Erweiterungen/ Plugins für das PWA macht ?

1 „Gefällt mir“

Wir nutzen keine Produkt Variationen, das kann ich leider nicht nachstellen. Wenn ich dich richtig verstehe werden bei dir nicht die Hauptvarianten = Artikel ID, sondern alle Kind Variationen einzeln eingeblendet, das kann ja nur irgend eine für diesen Shop falsche Voreinstellung am Artikel, Ceres oder im PWA sein.

Ja, so geht es uns auch. Wenn man nur “einfache” Anpassungen per CSS machen möchte ist ein Fork zu komplex. Von Erweiterungen oder Plugins weiß ich aktuell nichts. Da ist mir die Infrastruktur aber auch nicht klar. Wenn ich es richtig verstehe ist es nicht geplant, dass über den Marketplace/die Plugin-Sets Plugins für den PWA Shop angeboten werden sollen.

Auf der Roadmap gibt es noch einen Eintrag zu benutzerdefiniertem CSS, der sich aber nach “kommt eventuell irgendwann mal” anhört:

1 „Gefällt mir“

Problem 2 CSS Anpassungen Lösung:

Hallo ich habe gerade mal etwas rum getestet und CSS Overrides funktionieren im PWA ohne weitere Plugins.

Ich habe einfach im Footer ein Description Feld genutzt.

Beispiel:

Es scheint da keinen Filter zu geben der HTML Styles verbietet.

Overrides auf die data-testid funktionieren immer mit dem darüber geordneten Selektor.

Bsp nicht den Tag (span) mit der data-testid sondern das Element davor:

div [data-testid="price“] {
color: red;
}

Mal gucken ob man das JS auch so erweitern kann…

Problem 4 Bestellvorgang

Obwohl alles wie im Handbuch beschrieben gemacht wurde, sind erst einmal keine Versand und Zahlungsarten verfügbar.

Mal schauen woran das jetzt wieder liegen kann. Weiß da jemand Rat ?

das wäre ein sehr seltsames Verhalten für CSS wenn das so arbeitet.
Klingt für mich, als würde da noch was anderes das css anfassen.

um den div zu selektieren müsste das ja

div:has( > [data-testid="price“])
oder
div:has([data-testid="price“])
sein.

1 „Gefällt mir“

Hi da man mit CSS normal nur ID oder Class ansprechen kann und diese data-testid wohl von den JS Frameworks kommt hatte ich rum probiert wie man die Selektieren kann, wie oben beschrieben funktioniert es nur mit den Eltern Elementen.

Getestet habe ich besser her nur Firefox, Edge und Chrome bei denen geht es.

Ich denke :has das ist ein Pseudo Selektor, während ich einen Attribut Selektor verwende, der dann im Kind Element sucht. Ich glaube der Attributs vergleich wird von mehr und älteren Browsern unterstützt.
Attribut-Selektoren - CSS | MDN

Möglicherweise hat aber auch das Framework Einfluss… Ich bin jedenfalls froh das man per ID und nicht ewig langen class Verzweigungen Selektieren muss. Sicher gibt es da mehrere Wege zur Lösung.

Wollte gerade was anderes schreiben, aber du hast es selbst rausgefunden XD

Du kannst auch direkt

[data-testid="price“] {
color: red
}

ist genau so valide. Es ist übrigens egal ob :has oder Attrtibut-Selektor, die sind beide gleich gut verteilt. In Kombination sind das aber kleine CSS-Monster, da du auch ganz extreme abfragen damit gestalten kannst.

Was wichtig ist: Es gibt wohl Elemente die einen Style direkt am Element haben. Da musst du im CSS dann mit !important arbeiten, wenn das ein style ist, den du überschreiben willst

1 „Gefällt mir“