Designs

Code Designs

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

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 describiendo lo que quieres a una IA que escribe el código por ti.

Clerk.io utiliza un subconjunto de Liquid. Solo se soportan las funciones listadas en nuestro Clerk.js Template Language dentro de Code Designs.

Ver la sintaxis soportada y los formateadores.

AI Designer #

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

El AI Designer es un asistente integrado que te permite construir y editar diseños describiendo los cambios en lenguaje natural. Él se encarga del código, 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 petición — por ejemplo, “haz las tarjetas de producto más grandes” o “añade 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í 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 la IA.

Objetos #

Puntos de datos que se muestran cuando el diseño se renderiza. Están envueltos con {{ y }}. Ejemplo:

{{ product.price }}

En este ejemplo, Liquid accede al objeto product y renderiza el atributo price contenido en él.

Los diseños consisten en una estructura HTML combinada con atributos que muestran información sobre tus objetos products, categories y pages.

Aquí tienes un diseño simple utilizando variables de productos:

<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 el uso de 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 configurables para cada Content que use el diseño. Ejemplo: Si quieres añadir un titular único a todos los banners usando 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 el nombre que desees.

Dynamic values

Lógicas #

Se usan 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 %}.

If Statements #

Se usan para renderizar partes del 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">On sale!</div>
{% endif %}

Las sentencias if también pueden incluir bloques else para renderizar si la condición inicial es falsa:

{% if product.price < 100 %}
	<div class="price-desc">A cheap product!</div>
{% else %}
	<div class="price-desc">A high-end product!</div>
{% endif %}

Los atributos booleanos pueden usarse sin escribir explícitamente true o false:

{% if product.in_stock %}
	<div class="product-stock">In Stock</div>
{% endif %}

For Loops #

Se usan para iterar sobre listas. Generalmente, los diseños incluyen al menos un for-loop para iterar sobre la lista de objetos a mostrar.

Constan de 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 for-loops 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 añaden nueva funcionalidad a tus diseños. Clerk.js ya viene incluido con una variedad de funciones diferentes que puedes usar.

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

  • En my.clerk.io bajo Developers > Formatters.
  • Como una configuration agregada 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 tu sitio. 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, permitiéndote crear diseños independientes 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 de Clerk con Content sin volver a insertar snippets.

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 los snippets de Clerk o como bloques que se pueden referenciar.

Alojar los diseños tú mismo es una buena idea si deseas reutilizar los mismos diseños en varios sitios diferentes, ya que probablemente ya compartas 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, limit y labels en tus snippets.

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 al que puedas referenciar desde 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 #

Abajo 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.