Designs

Code Designs

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

Code Designs
Clerk 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. Este artículo cubre los conceptos básicos.

Puedes consultar la documentación completa en nuestra documentación para desarrolladores.

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

Ver la sintaxis y formatters soportados.

Objetos #

Puntos de datos que se muestran cuando el diseño es renderizado. Se envuelven 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 simple 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 renderizados con expresiones, como usar 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 que son configurables para cada Content que utiliza el diseño. Por ejemplo, si quieres agregar un encabezado ú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 agregado aquí se mostrará para ese Content. Las variables pueden tener cualquier nombre que elijas.

Dynamic values

Lógicas #

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

Sentencias If #

Se utilizan para renderizar 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 renderizar si la evaluación inicial es 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 %}

Atributos booleanos pueden utilizarse 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 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 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 %}

Formatters #

Estas son funciones personalizadas de Javascript que añaden nueva funcionalidad a tus diseños. Clerk.js ya viene con una variedad de ellas que puedes usar.

También puedes crear las tuyas de dos maneras:

  • En my.clerk.io en Developers > Formatters.
  • Como una configuración añadida a Clerk.js.

Aquí hay un ejemplo de configuración de Clerk.js con 3 formatters 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 formatters requieren varios atributos, el primero se escribe antes del pipe, y cualquier atributo adicional se escribe después del nombre del formatter:

<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 y tus necesidades.

En Clerk #

Los diseños se dividen en HTML y CSS, permitiéndote crear diseños autocontenidos que se inyectan en tu sitio al cargar 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 de código.

Los diseños se gestionan a nivel de Tienda 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 que pueden referenciarse.

Alojar los diseños tú mismo es una buena idea si deseas reutilizar los mismos diseños en varios sitios diferentes, ya que probablemente compartas el código fuente entre ellos.

Con este método, 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 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 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 se muestra un diseño de Recommendations que combina todos los conceptos anteriores. Puedes usar este ejemplo como punto de partida para tus propios 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.