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 lo básico.

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

Objetos #

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

{{ product.price }}

En este ejemplo, Liquid está accediendo al objeto producto y renderiza el atributo precio contenido en él.

Los diseños consisten en un marcado HTML combinado con atributos que muestran información sobre tus objetos de productos, categorías y páginas.

Aquí hay 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 se pueden renderizar con expresiones, como usar 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 son configurables para cada Contenido que utiliza el diseño. Ejemplo. Si deseas agregar un encabezado ú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 Contenido. Cualquier texto agregado aquí se renderizará para ese Contenido. 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 bajo cierta condición, o iterar sobre listas. Están envueltas con {% y %}.

Declaraciones If #

Se utilizan para renderizar partes de un diseño basado 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 venta!</div>
{% endif %}

Las declaraciones 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 alta gama!</div>
{% endif %}

Los atributos booleanos se pueden usar sin escribir explícitamente verdadero o falso:

{% 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 se pueden anidar 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 #

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

También puedes crear las tuyas de dos maneras:

  • En my.clerk.io bajo Settings > Formatters.
  • Como una configuración añadida 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 cualquier atributo adicional se escribe después del nombre del formateador:

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

Alojamiento #

Los diseños pueden ser alojados 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 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 Contenido sin volver a insertar fragmentos.

Los diseños se gestionan a nivel de tienda y se crean individualmente para Búsqueda, Recomendaciones y Correo Electrónico.

Se crean aquí: Designs > New Design > Other Designs > Blank > With code.

Clerk Hosted

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 compartirás el código fuente entre ellos.

Con este enfoque, no utilizarás la funcionalidad de Contenido, lo que significa que también debes configurar el punto final de la API, límite y etiquetas en tus fragmentos.

Dentro del 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='["Página de inicio / 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 }}">Comprar ahora</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='["Página de inicio / 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 }}">Comprar ahora</a>
    </div>
  {% endfor %}
</script>

Ejemplo Completo #

A continuación se muestra un diseño de Recomendaciones 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">En venta</div>
            {% endif %}
            <div class="clerk-slider-tags">
              {% if true %}
                <div class="clerk-slider-tag">Caliente</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">Comprar ahora</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.