Tarife, die dein Kunde ohne dich ändert
Preise und Leistungen der Tarife ändern sich regelmäßig. Hier ist jede Tarifkarte ein Eintrag einer Liste, und ihre Leistungen sind ein einziges Feld mit einem normalen Editor, in dem dein Kunde die Punkte wie in einem Textdokument bearbeitet.
Das Ergebnis
<section class="plans">
<h2 fld-text="Plans title">Coffee subscription</h2>
<div class="plans__grid" fld-loop="Plans">
<article class="plan">
<h3 fld-text="Plan name">Weekly</h3>
<p class="plan__price" fld-text="Plan price">$18</p>
<div class="plan__list w-richtext" fld-editor="Plan features">
<ul><li>250 g of fresh beans</li><li>Free delivery</li></ul>
</div>
<a class="button" href="/contacts" fld-link="Plan button">
<span fld-text="Plan button text">Subscribe</span></a>
</article>
<article class="plan">
<h3 fld-text="Plan name">Monthly</h3>
<p class="plan__price" fld-text="Plan price">$60</p>
<div class="plan__list w-richtext" fld-editor="Plan features">
<ul><li>1 kg of fresh beans</li><li>A tasting set</li></ul>
</div>
<a class="button" href="/contacts" fld-link="Plan button">
<span fld-text="Plan button text">Subscribe</span></a>
</article>
</div>
</section>250 g of fresh beans · Free delivery
1 kg of fresh beans · A tasting set
SubscribeDie Leistungen eines Tarifs bearbeitet der Kunde im Editor: Fettdruck, ein neuer Punkt, ein Link.
Schritt für Schritt
Die Liste kommt an das Tarifraster
fld-loop an den Block, in dem die Karten nebeneinander stehen. Jede Karte ist ein Eintrag im Adminbereich.
<div class="plans__grid" fld-loop="Plans">
Name und Preis
Beides ist fld-text. Schreib den Preis mit Währung: So sieht dein Kunde im Feld genau das, was auf der Website steht.
<h3 fld-text="Plan name">Weekly</h3> <p class="plan__price" fld-text="Plan price">$18</p>
Die Leistungen sind ein Editorfeld
fld-editor an einer Hülle um die
<ul>. Dein Kunde fügt Punkte im gewohnten Editor hinzu und entfernt sie dort.<div class="plan__list w-richtext" fld-editor="Plan features"> <ul><li>250 g of fresh beans</li><li>Free delivery</li></ul> </div>
Der Button: Adresse und Beschriftung
fld-link am Link und fld-text an der Beschriftung, mit verschiedenen Namen. Jeder Tarif hat seinen eigenen Link.
<a class="button" href="/contacts" fld-link="Plan button"> <span fld-text="Plan button text">Subscribe</span></a>
Worauf es ankommt
- Warum die Leistungen keine eigene Liste im Eintrag sind: Ein Editorfeld ist für deinen Kunden einfacher als eine Liste in einer Liste.
- Das Aussehen der Punkte legst du im Markup für
.plan__list lifest: Der Editor gibt einfache<ul>und<li>aus.
Typische Fehler
Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.
<ul class="plan__list" fld-editor="Plan features">
<li>250 g of fresh beans</li>
<li>Free delivery</li>
</ul>Das Editorfeld direkt an der <ul>: Der Editor gibt seine eigene Liste aus, und auf der Website steht eine Liste in einer Liste. Das Protokoll meldet nichts.
<div class="plan__list w-richtext" fld-editor="Plan features">
<ul><li>250 g of fresh beans</li><li>Free delivery</li></ul>
</div>Ein <div> um die Liste, das Feld daran.