Designs

Code Designs

Controla la representación visual de los elementos de Clerk.
Backend en el Clerk.io backend

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 escribe el código por ti.

Los diseños de Clerk.io son compatibles con el lenguaje completo de plantillas Liquid. Los ejemplos a continuación ofrecen una visión general del uso de Liquid en Code Designs.

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

AI Designer #

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

AI Designer es un asistente integrado que te permite crear y editar diseños describiendo los cambios en lenguaje natural. 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: “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 publica hasta que estés satisfecho. También puedes seguir editando el código manualmente en cualquier momento junto con las sugerencias de IA.

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 está accediendo al objeto product y muestra 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 usando 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 ser mostrados con expresiones, como usar operaciones 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 sean configurables para cada Content que utilice el diseño. Por ejemplo, si quieres agregar un encabezado único a todos los banners que usan el mismo diseño, puedes hacerlo con:

<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 añadido aquí se mostrará para ese Content. Las variables pueden tener cualquier nombre que elijas.

Lógicas #

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

Sentencias If #

Se utilizan para mostrar partes de un diseño basadas en 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 en caso de que la condición inicial sea 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 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 listas 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 viene incluido con una variedad de ellas que puedes usar.

También puedes crear las tuyas propias de dos maneras:

  • En my.clerk.io bajo Developers > Formatters.
  • Como una configuración agregada a Clerk.js.

Aquí hay 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 utilizan 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 tu sitio. La mejor opción depende de la configuración de tu tienda online y tus necesidades.

En Clerk #

Los diseños se dividen en HTML y CSS, lo que te permite crear diseños autoincluidos 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 de forma individual 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 Clerk o como bloques que se pueden referenciar.

Alojar tus propios diseños es una buena idea si quieres reutilizar los mismos diseños en varios sitios diferentes, ya que probablemente 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 de API, limit y labels en tus fragmentos.

Dentro del snippet #

Simplemente añade 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 usar 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.