Regresar

Plantillas

Si estás buscando cómo crear, personalizar o extender una plantilla, has llegado al lugar correcto. Seas un programador que está empezando o un experto, tenemos todo lo que necesitas para empezar a construir excelentes plantillas utilizando todas nuestras herramientas.

Empezando

Cualquier plantilla de Kometia consiste de varias páginas construidas con HTML, CSS y Javascript y una combinación de filtros y objetos. Por el momento, todos los cambios que se realizan a la plantilla de una tienda, deben de ser hechos en la sección de Editar HTML y CSS de las plantillas.

¿No eres programador? Si estás buscando cómo instalar y personalizar plantillas, consulta nuestra sección de personalización de plantillas

Nuestos plantillas cumplen con la siguiente estructura:

├── assets
│   └── // Javascripts, CSS, e imágenes del plantilla
│
├── config
│   ├── data.json
│   └── schema.json
│
├── layouts
│   └── layout.twig
│
├── pages
│   ├── customers (requerido si las cuentas de clientes están habilitadas)
│   │   ├── account.twig
│   │   ├── activate.twig
│   │   ├── login.twig
│   │   ├── order.twig
│   │   ├── recover.twig
│   │   ├── register.twig
│   │   └── reset.twig
│   │
│   ├── blog.twig
│   ├── cart.twig
│   ├── category.twig
│   ├── collection.twig
│   ├── collections.twig
│   ├── error404.twig
│   ├── home.twig
│   ├── maintenance.twig
│   ├── page.twig
│   ├── password.twig
│   ├── post.twig
│   ├── product.twig
│   ├── products.twig
│   └── search.twig
│
├── partials
│   └── // Templates reutilizables por layouts y/o páginas
│
├── screenshot.png
│
└── settings.json

Assets

En este directorio podrás guardar cualquier archivo que deba ser publicable, por ejemplo: imágenes, javascript y css. Y puedes usar el filtro de asset_url para acceder a la ruta del archivo.

Config

En el directorio de config encontrarás las variables necesarias para poder personalizar la plantilla utilizando nuestro personalizar. Incluye un archivo schema.json el cual contiene la estructura de las variables y data.json que guarda las variables para su uso.

Layouts

En este directorio puedes crear diferentes diseños, los cuales puedes extender. Incluye un archivo llamado layout.twig.

Partials

Para poder reusar tu código, puedes armar pequeños fragmentos e incluirlos en varios espacios y así aprovechar su reusabilidad.

Pages

Aquí encontrarás cada una de las secciones con las cuales puedes modificar el contenido específico de una página.

Página	Descripción
blog.twig	La forma en la que se despliega el listado de artículos del blog de una tienda.
cart.twig	La forma en la que ves el carrito de compras de la tienda.
category.twig	En esta vista podrás ver los productos ordenados por categoría.
collection.twig	En esta vista podrás ver los productos que contiene una colección.
collections.twig	En esta vista podrás ver todas las colecciones de una tienda.
customers/account.twig	Despliega la forma en la que un cliente de la tienda ve los datos de su cuenta.
customers/activate.twig	Despliega la forma en la que un cliente activa su cuenta.
customers/login.twig	Despliega la forma en la que un cliente inicia sesión en la tienda.
customers/order.twig	En esta vista el usuario puede ver el detalle de una orden en especifico.
customers/recover.twig	Despliega la forma en la que un cliente puede recuperar su contraseña.
customers/register.twig	Despliega la forma en la que un cliente puede registrar su cuenta.
customers/reset.twig	Despliega la forma en la que un cliente puede cambiar su contraseña.
error404.twig	Esta vista se despliega cuando lo que se está buscando en la tienda no existe.
home.twig	Vista principal cuando se abre la tienda.
maintenance.twig	Cuando la tienda está en mantenimiento se despliega esta vista.
page.twig	En esta vista podrás ver el contenido de una página.
password.twig	Cuando la tienda tiene contraseña se despliega esta vista.
post.twig	En está vista podrás ver el contenido de una artículo.
product.twig	En está vista podrás ver la información de un producto y sus variantes.
products.twig	La forma en la que se despliega el listado de productos de una tienda.
search.twig	Despliega la forma en la que se muestran los resultados de cualquier búsqueda.

Páginas Alternas

Al crear páginas con un nombre alterno, puedes tener diferentes versiones del contenido. Un ejemplo es:

page.contact.twig

Esto habilitará en el adminsitrador una sección especial para que se pueda elegir la alternativa y así crear más dinamismo.

Sintaxis

Nuestras plantillas están basados en el motor de plantillas llamado Twig el cual consiste de objetos, filtros y tags. Los objetos son pedazos de datos relevantes a tu tienda, como por ejemplo productos e información de carritos. Los filtros, son métodos simples que dan formato a los datos, como el capitalizar textos o dar formato a la moneda. Las tags, permiten agregar lógica específica sobre algún dato, como por ejemplo saber si el producto cuenta con inventario disponible o no. En esta sección podrás encontrar la documentación de cada uno de ellos.

Objetos

Los objetos son pedazos de datos relevantes a tu tienda. Puedes usar estos objetos en tu código para mostrar información especifica sobre los datos de tu tienda. Para usar objetos envuélvelos en dos corchetes de cada lado.

Bienvenido a la tienda {{ store.name }}
La imagen del producto es {{ product.image_url }}
<a href="{{ page.permalink }}">{{ page.title }}</a>

Filtros

Los filtros son métodos simples que dan formato a los datos. El primer parámetro es el valor inicial y utilizando una barra, puedes agregar varios filtros de izquierda a derecha.

{{ product.price | money }}
{{ page.title | capitalize }}
{{ products | json }}

If, Else y Elseif

Estas tags muestran contenido dependiendo de diferentes condiciones.

{% if product.in_stock %}
    Producto disponible
{% endif %}

{% if product.description is empty %}
    Nada que ver aquí
{% endif %}

{% if product.compare_price > 0 %}
    ¡Producto en descuento!
{% else %}
    Producto a precio normal
{% endif %}

{% if cart.items.count == 0 %}
    No hay artículos en el carrito.
{% endif %}

# templates = ['blog', 'pages', 'products']
{% if 'blog' in templates %}
    Estás viendo el blog.
{% endif %}

Ciclos usando For

{% for post in blog.posts %}
  Post: {{ post.title }}
{% endfor %}

{% for item in cart.items %}
  Artículo: {{ item.name }}
{% endfor %}

Los ciclos tienen variables de apoyo que pueden ayudar a definir comportamiento de cada uno de ellos.

loop.index     => La iteración actual empezando en 1
loop.index0    => La iteración actual empezando en 0
loop.revindex  => El número de iteraciones desde el final del ciclo empezando en 1
loop.revindex0 => El número de iteraciones desde el final del ciclo empezando en 0
loop.first     => Cierto en la primera iteración
loop.last      => Cierto en la última iteración
loop.length    => La cantidad de artículos a iterar

Limitar ciclo con una condición.

{% for product in products if product.in_stock %}
    Producto: {{ product.name }}
{% endfor %}

Usar else en caso que el ciclo esté vacio.

{% for items in cart.items %}
    Producto: {{ items.name }}
{% else %}
    No hay productos.
{% endfor %}

Iterando sobre rangos específicos.

{% for i in 1..product.images.count %}
  Imagen {{ i }}
{% endfor %}

Objetos

Los objetos imprimen atributos que son dinámicos en el contenido de las páginas. Por ejemplo, el objeto product tiene un atributo llamado name que puede usarse para desplegar el nombre de un producto.

{{ product.name }} # => "Collar de perlas"

Objetos globales

Los objetos globales son objetos a los cuales se puede acceder en cualquier archivo de tu plantilla.

all_products

Contiene todos los productos de la tienda. Puedes usar este objeto ingresando mediante el permalink del producto.

{{ all_products['collar-de-perlas'].name }} # => "Collar de perlas"

blogs

Contiene todos los productos de la tienda. Puedes usar este objeto ingresando mediante el permalink del producto.

{{ blogs['noticias'].name }} # => "Noticias"
{% for post in blog.noticias.posts %}
    {{ post.title }}
{% endfor %}

canonical_url

El objeto canonical_url contiene la URL canónica completa de la sección actual que estás visitando.

{{ canonical_url }} # => "http://ejemplo.com/productos/collar-de-perlas"

cart

El objeto cart contiene todos los productos que el cliente ha agregado a su carrito de compras, así como un resumen de sus totales.

{{ cart.items }}
{{ cart.total_items }}
{{ cart.total_price }}
{{ cart.total_compared_price }}
{{ cart.customer_note }}

collections

El objeto collections contiene todas las colecciones disponibles en la tienda. Puedes usar este objeto ingresando mediante el permalink de la colección.

{% for product in collections.incio.products %}
  {{ product.title }}
{% endfor %}

current_page

El objeto current_page contiene la página actual que el cliente está navegando cuando el contenido es paginable.

{% if current_page != 1 %}
  Página {{ current_page }}
{% endif %}

current_tags

El objeto current_tags contiene los tags de la sección actual que el cliente está navegando cuando el contenido puede contener tags. Un ejemplo es en la sección de productos y de artículos del blog.

# post.twig
{% if current_tags %}
  <h1>{{ post.title }} &rsaquo; {{ current_tags | join(', ') }}</h1> # => 'Hola Mundo › empezando, nuevo'
{% endif %}

customer

El objeto customer contiene el cliente actual que ha iniciado sesión en la tienda.

{% if customer %}
    <a href="/cuenta/salir">Salir</a>
{% else %}
    <a href="/cuenta/login">Iniciar Sesión</a>
{% endif %}

menus

El objeto menus contiene todos los menús dados de alta en la tienda. Puedes acceder a ellos por medio de su permalink.

<ul>
  {% for link in menus.footer %}
    <li><a href="{{ link.url }}">{{ link.name }}</a></li>
  {% endfor %}
</ul>

pages

El objeto pages contiene una lista de todas las páginas disponibles en la tienda. Puedes acceder a ellas por medio de su permalink.

<h1>{{ pages['inicio'].title }}</h1>

page_description

El objeto page_description contiene la descripción del producto, colección o página que se está visitando.

{% if page_description %}
  <meta name="description" content="{{ page_description }}" />
{% endif %}

page_title

El objeto page_title contiene el título de la página que se está visitando.

<meta name="title" content="{{ page_title }}" />

store

El objeto store contiene toda la información pública sobre la tienda.

<meta name="title" content="{{ store.name }}" />
{{ store.currency }}

settings

El objeto settings contiene las variables configuradas de la plantilla activa para personalización.

{% if settings.use_favicon %}
  <link rel="shortcut icon" href="{{ settings.favicon }}" type="image/png" />
{% endif %}

template

El objeto template contiene el nombre del archivo cargado en la página actual, sin incluir la extesión .twig.

{% if 'product' in template %}
  <meta property="og:type" content="product" />
{% endif %}

Otros Objetos

head_content

Esté objeto sólo se tiene que cargar en la sección <head></head> dentro de cualquier layout que se esté cargando, ya que Kometia carga contenido dinámico en cada página como Google Analytics y más.

Filtros

Arreglos

Cuenta los elementos en el arreglo.

{% set tallas = ['s', 'm', 'l'] %}
{{ tallas | length }} # => 3

Toma el primer elemento de un arreglo.

{% set tallas = ['s', 'm', 'l'] %}
{{ tallas | first }} # => 's'

Junta los elementos de un arreglo por medio de un elemento.

{{ tallas | join(', ') }} # => 's', 'm', 'l'

Toma las llaves del arreglo

{% set opciones = [0 => 's', 1 => 'm', 2 => 'l'] %}
{{ opciones | keys }} # => 0, 1, 2

Divide un arreglo en pedazos.

{{ [1, 2, 3, 4, 5, 6] | batch(2) }} # => [1, 2, 3] [4, 5, 6]

Toma una secuencia definida.

{{ [1, 2, 3, 4, 5] | slice(1, 2) }} # => Itera desde el 2 al 3

Junta dos arreglos.

{% set tallas = ['s', 'm'] %}
{{ set tallas = tallas | merge(['l', 'xl']) }} # => ['s', 'm', 'l', 'xl']

Imprime un arreglo en formato JSON.

{% set tallas = ['s', 'm', 'l'] %}
{{ tallas | json }} => {'s', 'm', 'l'}

Imprime un arreglo en formato JSON de forma legible.

{% set tallas = ['s', 'm', 'l'] %}
{{ tallas | json }} =>
{
    's',
    'm',
    'l'
}

HTML

{{ 'imagen.jpg' | img_tag }} # => <img src="imagen.jpg" alt="" />

{{ 'app.js' | script_tag }} # => <script src="app.js"></script>

{{ 'styles.css' | style_tag }} # => <link href="style.css" rel="stylesheet" type="text/css" />

Dinero

Los filtros de dinero, utilizan la configuración de la tienda para mostrar su formato.

Da formato a un número en moneda.

{{ 100 | money }} # => '100.00'

Da formato a un número en moneda e incluye el símbolo de la moneda configurada en la tienda.

{{ 100 | money('symbol') }} # => '$100.00'
{{ 100 | money_with_symbol }} # => '$100.00'

Da formato a un número en moneda e incluye el código de la moneda configurada en la tienda.

{{ 100 | money('code') }} # => '100.00 MXN'
{{ 100 | money_with_code }} # => '100.00 MXN'

Da formato a un número en moneda e incluye el símbolo y código de la moneda configurada en la tienda.

{{ 100 | money('symbol', 'code') }} # => '$100.00 MXN'
{{ 100 | money_with_symbol_and_code }} # => '$100.00 MXN'

Cadenas

Capitaliza la primera palabra de una cadena.

{{ "producto ejemplo" | capitalize }} # => "Producto Ejemplo"

Capitaliza la primer letra de cada palabra de una cadena.

{{ "el libro amarillo" | title }} # => "El Libro Amarillo"

Convierte una cadena en minúsiculas.

{{ "PRODUCTO" | lower }} # => "producto"

Convierte una cadena en mayúsculas.

{{ "producto" | upper }} # => "PRODUCTO"

Remueve caracteres especiales de una cadena.

{{ '<p>prueba</p>' | escape }} # => "<p>prueba</p>"

Inserta un <br> en cada salto de línea en una cadena.

{% set cadena = '
Uno
Dos
' %}
{{ cadena | nl2br }}
Uno <br>
Dos <br>

Imprime cadenas con caracteres especiales.

{{ '<p>prueba</p>' | raw }} # => "prueba"

Remplaza una cadena dentro de otra.

{{ "Me gusta la %esto%." | replace({ '%esto%': 'camisa' }) }} # => "Me gusta la camisa."

Remueve una cadena dentro de otra.

{{ "Me gusta la camisa." | remove('la camisa') }} # => "Me gusta."

Separa una cadena en un arreglo.

{{ "uno,dos,tres" | split(',') }} # => ['uno', 'dos', 'tres']

Remueve el espacio muerto al principio y al final de una cadena.

{{ "    hola como estas      " | trim }} # => "hola como estas"

Trunca las letras de una cadena con el número de caracteres que definas.

{{ "Mis productos son los mejores." | truncate(13) }} # => "Mis productos..."

Trunca las palabras de una cadena con el número de palabras que definas.

{{ "Mis productos son los mejores." | truncate_words(3) }} # => "Mis productos son..."

Remueve los tags de HTML de una cadena.

{{ '<p>prueba</p>' | striptags }} # => "prueba"

URL

Imprime el URL a cualquier archivo que exista en la carpeta assets de la plantilla.

{{ 'logo.png' | asset_url }} # => https://cdn.kometia-static.com/demo/jurban/1.0.0/assets/logo.png

Imprime el URL a cualquier archivo que exista los archivos de la tienda.

{{ 'ebook.pdf' | files_url }} # => https://cdn.kometia-static.com/demo/files/ebook.pdf

Imprime el URL de los archivos globales de Kometia.

{{ 'sku-select/v1/sku-select.min.js' | global_asset_url }} # => https://cdn.kometia-static.com/global/libs/sku-select/v1/sku-select.min.js

Imprime el URL de las imágenes globales de Kometia.

{{ 'placeholders/product-11.jpg' | global_img_url }} # => https://cdn.kometia-static.com/global/img/placeholders/product-11.jpg

Imprime el URL de las imágenes de pago globales de Kometia.

{{ 'visa.png' | payment_img_url }} # => https://cdn.kometia-static.com/global/img/payments/visa.png

Extras

Define una valor por defecto.

{{ product.description | default('Sin descripción.') }}

Da formato legible a las fechas.

{{ post.published_at | date }}  # => "2 noviembre 2016"

Da formato legible a las fechas con su hora.

{{ post.published_at | datetime }} # => "2 noviembre 2016 16:42:00"

Convierte diferentes unidades de peso de archivo.

{{ 10000000 | filesize }} # => "9.54MB"
{{ 1000000000 | filesize('gb') }} # => "0.93GB"

Convierte diferentes unidades de peso de archivo sin símbolo.

{{ 10000000 | filesize_without_unit }} # => "9.54"

Convierte diferentes unidades de peso.

{{ 10000 | weight }} # => "10 kg"
{{ 10000 | weight('lb') }} # => "22.05 lb"

Convierte diferentes unidades de peso sin símbolo.

{{ 10000 | weight_without_unit }} # => "10"
{{ 10000 | weight_without_unit('lb') }} # => "22.05"

Calcula un color más obscuro dependiendo de un porcentaje definido.

{{ '#fffff' | darken_color }} # => "#d8d800"

Calcula un color más claro dependiendo de un porcentaje definido.

{{ '#000000' | lighten_color(30) }} # => "#4c4c4c"

Calcula un color opuesto.

{{ '#000000' | contrast_color }} # => "#ffffff"

NOTA Si quieres ver más documentación sobre los filtros puedes visitar Twig Filters

Archivos de configuración

Para hacer que una plantilla sea configurable desde la funcionalidad de Personalizar se deben agregar dos archivos de /config: schema.json y data.json. schema.json contiene la estructura que modela las opciones personalizables y data.json contiene estilos preconfigurados y eventualmente almacenará también las configuraciones que se personalicen desde el editor de la tienda.

Anatomía del archivo schema.json

{
  "info" : {
    "logo" : "nav_logo",
    "header" : "Tenue Theme",
    "content" : [
      "Lineas con información de la plantilla.",
      "Cada línea es un parrafo dentro de la zona de información de la plantilla."
    ]
  },
  "categories": [
    {
      "name" : "Colores",
      "sections" : [
        {
          "header" : "Textos",
          "settings" : [
              // {ajustes}
          ]
        }
      ]
    }
  ]
}

Tipos de ajustes

Parrafo

{
  "type"    : "paragraph",
  "content" : "Este es un párrafo de texto"
}

Texto

{
  "type"    : "text",
  "id"      : "body_font_size",
  "label"   : "General",
  "default" : "18px"
}

Texto (area de texto)

{
  "type"    : "textarea",
  "id"      : "footer_contact_data",
  "label"   : "Información de contacto",
  "default" : "Calle Principal #10\n+52 1 123 456 7890",
  "info"    : "Calle Principal #10"
}

Checkbox

{
  "type"  : "checkbox",
  "id"    : "use_logo",
  "label" : "Usar logo personalizado"
}

Selector de opciones

{
  "type"    : "select",
  "id"      : "base_font",
  "label"   : "Base",
  "options" : [
    {
      "value" : "\"Open Sans\", sans-serif",
      "label" : "Open Sans",
      "group" : "Web Fonts"
    }
  ]
}

Color

{
  "type"    : "color",
  "id"      : "brand_main_color",
  "label"   : "Primario",
  "default" : "#979797"
}

Selector de una colección

{
  "type"    : "collection",
  "id"      : "featured_collection_1",
  "label"   : "Colección Destacada 1",
  "default" : "inicio"
}

Selector de un blog

{
  "type"  : "blog",
  "id"    : "featured_blog",
  "label" : "Elige un Blog"
}

Selector de una imagen

{
  "type"  : "image",
  "id"    : "nav_logo",
  "label" : "Seleccionar Logo"
}

Cómo definir íconos para las categorías de la plantilla

Lista de íconos usables:

presets
colors
typography
header
footer
home page
product page
collection page
blog page
cart page
social media

Plantillas

Empezando

Assets

Config

Layouts

Partials

Pages

Páginas Alternas

Sintaxis

Objetos

Filtros

Tags

If, Else y Elseif

Ciclos usando For

Objetos

Objetos globales

all_products

blogs

canonical_url

cart

collections

current_page

current_tags

customer

menus

pages

page_description

page_title

store

settings

template

Otros Objetos

head_content

Filtros

Arreglos

HTML

Dinero

Cadenas

URL

Extras

Archivos de configuración

Anatomía del archivo schema.json

Tipos de ajustes

Parrafo

Texto

Texto (area de texto)

Checkbox

Selector de opciones

Color

Selector de una colección

Selector de un blog

Selector de una imagen

Cómo definir íconos para las categorías de la plantilla