Code Designs
Clerk.io utiliza Liquid para gestionar los diseños de código. Es un lenguaje de plantillas seguro y flexible que te permite crear cualquier tipo de diseño que desees para tus elementos de Clerk.io.
Puedes crear diseños escribiendo HTML, CSS y Liquid directamente en el editor de código, o describir lo que deseas a una IA que escribirá el código por ti.
Para tarjetas de producto de Chat, coloca HTML y Liquid en Chat > Configuration > Product card template. Añade las reglas de estilo en Custom styling en la misma página. Este campo CSS aplica estilos tanto a las tarjetas de producto como a la ventana de Chat.
Los diseños de Clerk.io son compatibles con el lenguaje de plantillas Liquid completo. Los ejemplos a continuación ofrecen una visión general sobre cómo usar Liquid en Code Designs.
Para la referencia completa sobre la sintaxis, etiquetas y filtros de Liquid, consulta la documentación de Liquid.
AI Designer #
Beta: El AI Designer está disponible solo para usuarios de HQ.
El AI Designer es un asistente integrado que te permite crear y editar diseños describiendo los cambios en lenguaje natural. La IA se encarga del código; tú te encargas de la visión.
Cómo acceder #
Abre el AI Designer desde Search / Recommendations / Email > Designs. En la parte superior de la página de Designs, selecciona AI designer para abrir un diseño en el editor asistido por IA.
¿Cómo funciona? #
El editor muestra el HTML y CSS de tu diseño a la izquierda. A la derecha está el panel de IA, donde describes lo que quieres cambiar.
Escribe tu solicitud — por ejemplo, “haz las tarjetas de producto más grandes” o “agrega una etiqueta de oferta en la esquina superior derecha”. La IA actualizará el código en consecuencia.
Puedes previsualizar el resultado antes de guardar, por lo que nada se publicará hasta que estés satisfecho con él. También puedes seguir editando el código manualmente en cualquier momento junto con las sugerencias de la IA.
Disposición del editor #
Los diseños de código de Search y Recommendations tienen diferentes controles en el editor:
- Edita el nombre del diseño sobre el editor de código.
- En los diseños de código de Search, utiliza las pestañas HTML, CSS, HTML - Mobile y CSS - Mobile sobre el editor. Desplázate debajo del editor para ver Available Designs and Components.
- En los diseños de código de Recommendations, utiliza las pestañas HTML y CSS. Este editor no muestra Available Designs and Components.
- Abre Preview desde el encabezado de la página o su menú de acciones.
- Encuentra Design ID en el menú de acciones. El encabezado también da acceso a información sobre los Elements que utilizan el diseño.
Objetos #
Puntos de datos que se muestran cuando se representa el diseño. Están envueltos con {{ y }}. Ejemplo:
{{ product.price }}
En este ejemplo, Liquid accede al objeto product y representa el atributo price contenido en él.
Los diseños consisten en un marcado HTML combinado con atributos que muestran información sobre tus objetos products, categories y pages.
Aquí tienes un diseño sencillo utilizando variables de producto:
<div class="product-card">
<img src="{{ product.image }}" />
<div class="product-name">{{ product.name }}</div>
<div class="product-price">{{ product.price }}</div>
</div>
Expresiones #
Los objetos también pueden mostrarse mediante expresiones, como usar matemáticas para calcular un porcentaje de descuento:
{{ ((product.list_price/product.price) / product.list_price) * 100 }}
Variables #
Usando la sintaxis {{ VARIABLE_NAME }} puedes crear variables que se pueden configurar para cada
Content que use el diseño. Por ejemplo, si deseas añadir un titular único a todos los banners usando el mismo diseño, puedes hacerlo así:
<h2>{{ headline }}</h2>
Esto mostrará un campo de texto con el nombre de la variable en la página de configuración de Content. Cualquier texto que se agregue aquí se mostrará para ese Content. Las variables pueden tener cualquier nombre que elijas.
Lógicas #
Se usan para crear funcionalidad en el diseño, como mostrar un bloque HTML bajo cierta condición, o iterar sobre listas. Se agrupan con {% y %}.
Sentencias If #
Se usan para representar partes de un diseño en función de una o más condiciones. Consisten en una apertura {% if %} y un cierre {% endif %}.
{% if product.on_sale == true %}
<div class="product-discount">¡En oferta!</div>
{% endif %}
Las sentencias if también pueden incluir bloques else para mostrar si la sentencia inicial resulta ser falsa:
{% if product.price < 100 %}
<div class="price-desc">¡Un producto barato!</div>
{% else %}
<div class="price-desc">¡Un producto de alta gama!</div>
{% endif %}
Los atributos booleanos pueden usarse sin escribir explícitamente true o false:
{% if product.in_stock %}
<div class="product-stock">En stock</div>
{% endif %}
Bucles For #
Se usan para iterar sobre listas. Los diseños generalmente incluyen al menos un bucle for para recorrer la lista de objetos a mostrar.
Consisten en una apertura {% for %} y un cierre {% endfor %}:
{% for product in products %}
<div class="product-card">
<img src="{{ product.image }}" />
<div class="product-name">{{ product.name }}</div>
<div class="product-price">{{ product.price }}</div>
</div>
{% endfor %}
Los bucles for también pueden anidarse para mostrar atributos de lista dentro de los objetos:
{% for product in products %}
<div class="product-card">
<img src="{{ product.image }}" />
<div class="product-name">{{ product.name }}</div>
<div class="product-price">{{ product.price }}</div>
<ul class="product-tags">
{% for tag in product.tags %}
<li class="single-tag">{{ tag }}</li>
{% endfor %}
</ul>
</div>
{% endfor %}
Formateadores #
Son funciones personalizadas de Javascript que añaden nuevas funcionalidades a tus diseños. Clerk.js ya incluye una variedad de ellas que puedes usar.
También puedes crear tus propias funciones de dos maneras:
- En my.clerk.io en Developers > Formatters.
- Como una configuración añadida a Clerk.js.
Aquí tienes un ejemplo de configuración de Clerk.js con 3 formateadores diferentes:
Clerk('config', {
key: 'O7UITkJIXqXibeQF9ONobiGGKYYKtbvh',
formatters: {
log_price: function(price) {
console.log(price);
},
calculate_discount: function(old_price, new_price) {
return old_price-new_price;
},
substring: function(text) {
var short_string = text.substring(0,20);
return short_string;
}
}
});
Se usan en tus diseños con la sintaxis {{ ATTRIBUTE | FORMATTER }}:
<div class="price">{{ product.price | log_price }}</div>
Si tus formateadores requieren varios atributos, el primero se escribe antes de la barra vertical y cualquier atributo adicional se escribe después del nombre del formateador:
<div class="discount">{{ product.list_price | calculate_discount product.price }}</div>
Hospedaje #
Los diseños pueden hospedarse en my.clerk.io o en el código fuente de tu sitio. La mejor opción depende de la configuración de tu tienda en línea y tus necesidades.
En Clerk #
Los diseños se dividen en HTML y CSS, lo que te permite crear diseños auto-contenidos que se inyectan en tu sitio al cargarse la página.
Esta es una buena opción si deseas tener toda la funcionalidad disponible desde un solo lugar, ya que también te permite actualizar tus elementos de Clerk con Content sin volver a insertar fragmentos.
Los diseños se gestionan a nivel de Store y se crean individualmente para Search, Recommendations y Email.
Se crean aquí: Designs > New Design > Other Designs > Blank > With code.
En el sitio #
Los diseños se alojan directamente en tu código fuente dentro de snippets de Clerk o como bloques a los que puedes hacer referencia.
Hospedar los diseños por ti mismo es una buena idea si deseas reutilizar los mismos diseños en varios sitios diferentes, ya que probablemente ya compartirás el código fuente entre ellos.
Con este enfoque, no utilizarás la funcionalidad de Content, lo que significa que también tendrás que configurar el endpoint API, limit y labels en tus snippets.
Dentro del snippet #
Simplemente agrega el diseño entre las etiquetas de apertura y cierre del snippet.
<span
id="popular"
class="clerk"
data-api="recommendations/popular"
data-labels='["Home Page / Popular"]'
data-limit="10">
<ul class="product-list">
{% for product in products %}
<li class="product">
<h2 class="product-name">{{ product.name }}</h2>
<img src="{{ product.image }}" title="{{ product.name }}" />
<div class="price">${{ product.price | money }}</div>
<a href="{{ product.url }}">Buy Now</a>
</li>
{% endfor %}
</ul>
</span>
Con referencia #
Crea un bloque usando <script type=text/x-template> que tenga un ID al que puedas hacer referencia en el snippet.
<div
id="popular"
class="clerk"
data-api="recommendations/popular"
data-labels='["Home Page / Popular"]'
data-limit="10"
data-template="#clerk-template">
</div>
<script type="text/x-template" id="clerk-template">
<h1>{{ headline }}</h1>
{% for product in products %}
<div class="product">
<h2>{{ product.name }}</h2>
<img src="{{ product.image }}" />
<a href="{{ product.url }}">Buy Now</a>
</div>
{% endfor %}
</script>
Ejemplo completo #
A continuación, se muestra un diseño de Recommendations que combina todos los conceptos anteriores. Puedes usarlo como punto de partida para tus diseños.
HTML #
<div class="clerk-recommendations">
<div class="clerk-recommendations-headline">{{ headline }}</div>
<div class="clerk-slider">
{% for product in products %}
<div>
<a href="{{ product.url }}">
<div class="clerk-slider-product">
{% if product.price < product.list_price %}
<div class="clerk-slider-badge">On Sale</div>
{% endif %}
<div class="clerk-slider-tags">
{% if true %}
<div class="clerk-slider-tag">Hot</div>
{% endif %}
</div>
<div class="clerk-slider-image" style="background-image: url('{{ product.image }}');"> </div>
<div class="clerk-slider-name">{{ product.name }}</div>
<div class="clerk-slider-pricing">
{% if product.price < product.list_price %}
<div class="clerk-slider-list-price">{{ product.list_price | money }}</div>
{% endif %}
<div class="clerk-slider-price">{{ product.price | money }}</div>
</div>
<div class="clerk-slider-button">Buy Now</div>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
CSS #
.clerk-recommendations {
margin: 1em 0;
}
.clerk-recommendations-headline {
font-weight: bold;
font-size: 2em;
text-align: center;
}
.clerk-slider {
}
.clerk-slider-product {
position: relative;
overflow: hidden;
display: inline-block;
width: 10em;
margin: 1em;
padding: 1em;
background-color: white;
border: 1px solid #eee;
border-radius: 1em;
box-shadow: 0 .1em .2em 0 rgba(0,0,0,.08);
text-align: center;
}
.clerk-slider-badge {
position: absolute;
top: 5px;
right: -35px;
display: inline-block;
width: 120px;
margin: 10px auto;
padding: 5px 0;
border-radius: 3px;
background-color: #fbc531;
font-size: 10px;
color: white;
text-align: center;
letter-spacing: 1px;
transform: rotate(45deg);
}
.clerk-slider-tags {
position: absolute;
top: .8em;
left: .8em;
}
.clerk-slider-tag {
display: inline-block;
padding: .2em .8em;
border-radius: .3em;
background-color: gray;
font-size: 10px;
color: white;
letter-spacing: 1px;
}
.clerk-slider-image {
width: 100%;
height: 8em;
margin-bottom: 1em;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.clerk-slider-name {
overflow: hidden;
height: 2.4em;
margin-bottom: 1em;
}
.clerk-slider-pricing {
display: flex;
margin-bottom: 1em;
font-size: 1.4em;
}
.clerk-slider-price {
flex: 1;
font-weight: bold;
}
.clerk-slider-list-price {
flex: 1;
opacity: .8;
font-weight: normal;
text-decoration: line-through;
color: gray;
}
.clerk-slider-button {
display: block;
margin: 0 auto;
padding: .6em 2em;
border: none;
border-radius: .5em;
background-color: gray;
color: white;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
font-weight: bold;
cursor: pointer;
}
Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.