Benutzerdefiniertes Liquid

Deutsch Diskussion Technische Fragen & Antworten
,

Topic summary

Problem: Ein Benutzer fügt benutzerdefinierten Liquid-Code für eine Lagerbestandsanzeige ein, wodurch alle darunter stehenden Felder ausgeblendet werden.

Ursache identifiziert: Der CSS-Wert margin-bottom: -10px in der Klasse .stockt.spacer-bottom verursacht das Problem.

Lösung:

  • Änderung des margin-bottom-Werts von -10px auf 0 oder einen positiven Wert behebt das Ausblenden.
  • Empfehlung: text-align: left statt center für bessere Darstellung.
  • Der korrigierte Code wurde bereitgestellt.

Offene Punkte:

  • Die Logik zur Überprüfung des tatsächlichen Lagerstatus muss noch validiert werden (z.B. ob grün angezeigt wird, wenn kein Bestand vorhanden ist).
  • Für korrekte dynamische Bestandsanzeige wird eine Backend-Implementierung über Shopify Admin API oder JavaScript empfohlen.
  • Zusätzliche Vorschläge: Gamification-Elemente im Shop einbauen, um Kundenerlebnis zu verbessern.

Status: Technisches Problem gelöst, aber Funktionsvalidierung steht noch aus.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hallo :D,

ich komme nicht dahinter vllt. kann mir ja hier einer weiterhelfen sobald ich den folgenden Code in den Benutzerdefinierten Liquid einfüge, werden alle unter ihm stehenden Felder ausgeblendet.

Auf Lager - Sofort verfügbar.
.stockt.spacer-bottom { padding-top: 10px; text-align: center; font-size: 14px; margin-bottom: -10px; } .outlineddiv { background: #008800; width: 11px; height: 11px; border-radius: 18px; display: inline-block; animation: blinker 1.5s cubic-bezier(.5,0,1,1) infinite alternate; } span.textg, .stockt span.material-icons-outlined.text-secondary, .stockt.red span.textg { color: #080; font-weight: 700; } mit dan abständen habe ich schon rumgespielt, hat aber leider nichts geholfen.
2

Hey @Aesir1

Du hast uns nicht gesagt wie und wo genau du diesen Benutzerdefinierte Liquid eingebaut hast im Shop. Ein Shop ist sehr groß, mit vielen Seiten und Sections. Dann wo genau hast du diesen Code her? Wer ist der Entwickler des Custom Liquid (Stockt App?) und hast du mit diesem sprechen können?

Deinen Code habe ich jetzt selber probiert und es handelt sich also um die Inventar Anzeige:

image.png
image.png574×150 12.5 KB

Ich habe jetzt den margin-bottom Wert von -10px auf 0 (oder irgendeinen positiven Wert) geändert und es hat geklappt. Hier der modifizierte Custom Liquid:


     Auf Lager - Sofort verfügbar.

Meiner Meinung sieht er aber linksgerichtet am besten aus:


     Auf Lager - Sofort verfügbar.

Ändere den Wert text-align auf left in der Klasse .stockt.spacer-bottom und dann wird der Text linksbündig ausgerichtet:

image.png
image.png2326×1892 296 KB

Jetzt nur noch testen dass die Anzeige TRUE ist und nicht einen falschen Wert anzeigt, wie beispielsweise Grün wenn kein Bestand vorhanden ist, oder dass sie auch korrekt Rot oder Gelb anzeigt ja nach Bestand Status. Das habe ich jetzt getestet und der Wert war i.d.T. falsch:

image.png
image.png2396×1522 430 KB

Um das zu fixen verlangt es eine Admin API Programmierung um den Lagerstatus im Backend zu überprüfen leider, oder auch über JavaScript, so dass die Bestandsinformationen über eine API oder ähnliches bereitgestellt werden. Die Logik muss halt den Lagerstatus überprüfen, und eine Dynamik implementieren, die den HTML-Code generiert und korrekt implementiert. Mehr dazu hier.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.