Precios que el cliente cambia sin ti
Los precios y lo que incluye cada plan cambian a menudo. Aquí cada tarjeta de plan es una fila de una lista, y lo que incluye es un solo campo con un editor normal, donde el cliente edita los puntos como en un documento de texto.
Qué obtienes
<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
SubscribeEl cliente edita lo que incluye el plan en el editor: negrita, un punto nuevo, un enlace.
Paso a paso
La lista va en la cuadrícula de planes
fld-loop en el bloque donde las tarjetas están una al lado de otra. Cada tarjeta es una fila en el panel.
<div class="plans__grid" fld-loop="Plans">
Nombre y precio
Los dos son fld-text. Escribe el precio con su moneda: así el cliente ve en el campo exactamente lo que muestra el sitio.
<h3 fld-text="Plan name">Weekly</h3> <p class="plan__price" fld-text="Plan price">$18</p>
Lo que incluye es un campo de editor
fld-editor en un contenedor alrededor del
<ul>. El cliente añade y quita puntos en el editor de siempre.<div class="plan__list w-richtext" fld-editor="Plan features"> <ul><li>250 g of fresh beans</li><li>Free delivery</li></ul> </div>
El botón: dirección y texto
fld-link en el enlace y fld-text en el texto, con nombres distintos. Cada plan tiene su propio enlace.
<a class="button" href="/contacts" fld-link="Plan button"> <span fld-text="Plan button text">Subscribe</span></a>
Lo importante
- Por qué lo que incluye no es una lista aparte dentro de la fila: un solo campo de editor es más sencillo para el cliente que una lista dentro de otra.
- Da estilo a los puntos en tu marcado con
.plan__list li: el editor imprime<ul>y<li>normales.
Errores frecuentes
El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.
<ul class="plan__list" fld-editor="Plan features">
<li>250 g of fresh beans</li>
<li>Free delivery</li>
</ul>El campo de editor directamente en el <ul>: el editor imprime su propia lista, y en el sitio queda una lista dentro de otra. El registro no dice nada.
<div class="plan__list w-richtext" fld-editor="Plan features">
<ul><li>250 g of fresh beans</li><li>Free delivery</li></ul>
</div>Un <div> alrededor de la lista, con el campo en él.