Designs

Code Designs

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

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

Puedes consultar la documentación completa en nuestros documentos para desarrolladores.

Clerk utiliza un subconjunto de Liquid. Solo las funciones listadas en nuestro Template Language de Clerk.js están soportadas en los Code Designs.

Ver la sintaxis y formateadores soportados.

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 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 representarse con expresiones, como usar matemáticas para calcular un porcentaje de descuento:

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

Variables #

Utilizando la sintaxis {{ VARIABLE_NAME }} puedes crear variables que sean configurables para cada Content que use el diseño. Por ejemplo, si deseas agregar un titular único a todos los banners que utilizan el mismo diseño, podrías 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.

Dynamic values

Lógicas #

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

Sentencias If #

Se usan para mostrar partes de un diseño basadas en una o más condiciones. Consisten en una abertura {% 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 declaración inicial evalúa como 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 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 en Javascript que añaden nueva funcionalidad a tus diseños. Clerk.js ya viene incluido con varios diferentes que puedes usar.

También puedes crear los tuyos propios 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 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 cualquier atributo adicional se escribe 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 online y tus necesidades.

En Clerk #

Los diseños se dividen en HTML y CSS, permitiéndote crear diseños autónomos 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 los fragmentos.

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 fragmentos de Clerk o como bloques que pueden ser referenciados.

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 utilizarás la funcionalidad de Content, lo que significa que también tendrás que configurar el endpoint API, el limit y las labels en tus fragmentos.

Dentro de un fragmento #

Simplemente agrega el diseño entre las etiquetas de apertura y cierre del fragmento.

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

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