Benutzerdefiniertes Liquid

[Aesir1]

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. 

<div class="stockt spacer-bottom"><span class="outlineddiv"></span> Auf Lager - <span class="textg">Sofort verfügbar.</span></div>

<style>
.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.

[Gabe]

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:

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:

<div class="stockt spacer-bottom">
    <span class="outlineddiv"></span> Auf Lager - <span class="textg">Sofort verfügbar.</span>
</div>

<style>
.stockt.spacer-bottom {
    padding-top: 10px;
    text-align: center;
    font-size: 14px;
    margin-bottom: 0; /* Änderung von -10px auf 0 */
}

.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;
}
</style>

Meiner Meinung sieht er aber linksgerichtet am besten aus:

<div class="stockt spacer-bottom">
    <span class="outlineddiv"></span> Auf Lager - <span class="textg">Sofort verfügbar.</span>
</div>

<style>
.stockt.spacer-bottom {
    padding-top: 10px;
    text-align: left; /* Änderung von center auf left */
    font-size: 14px;
    margin-bottom: 0; /* Änderung von -10px auf 0 */
}

.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;
}
</style>

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

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:

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! 😉

---
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.