Designs

Code Designs

Controla la representación visual de los elementos de Clerk.

Code Designs
Clerk.io utiliza Liquid para gestionar 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 describiendo lo que quieres a una IA que escriba el código por ti.

Los diseños de Clerk.io admiten el lenguaje de plantillas Liquid completo. Los ejemplos a continuación ofrecen una visión general sobre cómo utilizar Liquid en los Code Designs.

Para la referencia completa de la sintaxis, etiquetas y filtros de Liquid, consulta la documentación de Liquid.

AI Designer #

Beta: El AI Designer está disponible solo para usuarios HQ.

El AI Designer es un asistente integrado que te permite crear y editar diseños describiendo cambios en lenguaje natural. Se encarga del código y tú 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, “hacer las tarjetas de producto más grandes” o “agregar una insignia de oferta en la esquina superior derecha”. La IA actualiza el código en consecuencia.

Puedes previsualizar el resultado antes de guardar, así que nada se publicará hasta que estés conforme. También puedes seguir editando el código manualmente en cualquier momento junto con las sugerencias de la IA.

Objetos #

Puntos de datos que se muestran cuando el diseño se renderiza. Se envuelven con {{ y }}. Ejemplo:

{{ product.price }}

En este ejemplo, Liquid está accediendo al objeto product y muestra el atributo price que contiene.

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 se pueden mostrar con expresiones, como utilizar math para calcular un porcentaje de descuento:

{{ ((product.list_price/product.price) / product.list_price) * 100 }}

Variables #

Usando la sintaxis {{ VARIABLE_NAME }} puedes crear variables configurables para cada Content que utilice el diseño. Por ejemplo, si quieres agregar un titular único a todos los banners que usan 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 agregado aquí se mostrará para ese Content. Las variables pueden tener el nombre que prefieras.

Dynamic values

Lógicas #

Se utilizan para crear funcionalidad en el diseño, como mostrar un bloque HTML bajo cierta condición, o iterar sobre listas. Se envuelven con {% y %}.

Sentencias If #

Se utilizan para mostrar 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 contenido si la condición inicial es falsa:

{% if product.price < 100 %}
	<div class="price-desc">¡Un producto barato!</div>
{% else %}
	<div class="price-desc">¡Un producto de gama alta!</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 utilizan para iterar sobre listas. Los diseños generalmente incluyen al menos un bucle for para iterar sobre 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 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 agregan nueva funcionalidad a tus diseños. Clerk.js ya incluye varios diferentes que puedes usar.

También puedes crear tus propios formateadores de dos maneras:

  • En my.clerk.io bajo Developers > Formatters.
  • Como una configuration 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 del pipe, y los atributos adicionales se escriben después del nombre del formateador:

<div class="discount">{{ product.list_price | calculate_discount product.price  }}</div>

Hosting #

Los diseños pueden alojarse en my.clerk.io o en el código fuente de tus sitios. El mejor enfoque depende de la configuración de tu tienda 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 cargar la página.

Esta es una buena opción si quieres tener toda la funcionalidad disponible desde un solo lugar, ya que también te permite actualizar tus elementos 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 fragmentos de Clerk o como bloques que pueden ser referenciados.

Alojar los diseños por tu cuenta es una buena idea si deseas reutilizar los mismos diseños en varios sitios diferentes, ya que probablemente compartirás el código fuente entre ellos.

Con este enfoque, no usarás la funcionalidad de Content, lo que significa que también tendrás que configurar el endpoint de API, el limit y las labels en tus fragmentos.

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 que puedas referenciar 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 tienes un diseño de Recommendations que combina todos los conceptos anteriores. Puedes utilizar esto 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 }}');">&nbsp;</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.