Javier Eguiluz ha realizado una excelente presentación sobre el uso avanzado de Twig. Como sabéis, nuestras plantillas usan Twig. Os recomendamos que les echéis un vistazo:

Gracias a Javier Eguiluz por su excelente trabajo.

Dejar un comentario…

¿Te estás preguntando si se puede añadir un formulario a tu tiendy? Pues te respondemos rápido: Sí :)

La siguiente pregunta es ¿cómo? Pues vamos a intentar explicarlo lo mejor posible.

Por regla general, no solemos incluir el formulario de contacto en las plantillas que ofrecemos por defecto. Esto lo hacemos por un motivo muy simple: el spam.
Pero como tiendy es flexible y nos permite modificar el código de nuestra web, el poder está en nuestras manos :)

Para empezar con este ejemplo, vamos a crear una página en nuestra tienda que se llame "Contacto":

En tiendy, cómo aparecen las páginas lo determina la plantilla "page.tpl" que podéis encontrar en el editor de plantilla. La abrimos, y en el sitio donde queramos mostrar nuestro formulario ponemos:

{% if 'contacto' == page.handle %}
  <!-- aquí el código del formulario -->
  <h2>Formulario de contacto</h2>
  {% form %}
  	{% if form.sent_successfully %}
  		<p><strong>Formulario enviado correctamente</strong></p>
  	{% elseif form %}
  		<p><strong>Ha ocurrido un error al intentar enviar el formulario. Por favor compruebe que ha rellenado correctamente los campos.</strong></p>
  	{% endif %}
  <table>
    <tr>
      <td><label for="nombre">Nombre:</label></td>
      <td><input type="text" name="nombre" /></td>
    </tr>
    <tr>
      <td><label for="nombre">Email:</label></td>
      <td><input type="text" name="email" /></td>
    </tr>
    <tr>
      <td><label for="mensaje">Mensaje:</label></td>
      <td><textarea name="mensaje" cols="40" rows="7"></textarea></td>
    </tr>
    <tr>
    	<td colspan="2">
    		<input type="submit" value="Enviar" />
    	</td>
    </tr>
  </table>
  {% endform %}
  <!-- fin código formulario -->
  {% endif %}

Vamos a ir desgranando un poco este código.

Para empezar, hemos metido todo el bloque dentro de una condicion if: "sólo mostraremos ese bloque, si el atributo handle de la página que estamos viendo ahora mismo, es 'contacto'". Esto hará que nuestro formulario sólo aparezca cuando entremos en la página de contacto que hemos creado y no en el resto de páginas que hayamos creado para nuestra tienda.

Tenemos una etiqueta que marca el inicio y el fin del formulario {% form %} y {% endform %}. Estas etiquetas se encargan de generar todo el código necesario para que el formulario pueda ser enviado por tiendy.

Cuando ya se ha enviado el formulario, tiendy pone a disposición de la plantilla el objeto "form". Este objeto tiene la propiedad "sent_successfully" que indica si el formulario se ha enviado correctamente o no. Este objeto además, contiene como propiedades a todas las variables que hemos enviado con el fomulario, por lo que en caso de error, podemos dejar esos valores en el formulario, evitando que el usuario tenga que volver a rellenarlos:

<input type="text" name="nombre" value="{{ form.nombre|escape }}" />

Además, en caso de haber errores, también nos indica qué campo ha fallado en la propiedad "errors":

<input type="text" name="nombre" value="{{ form.nombre|escape }}" {% if 'nombre' in form.errors %} class="error"{% endif %} />

De esta forma, podríamos aplicar un estilo diferente al input para mostrar al usuario dónde está el error de forma visual (por ejemplo poniéndole un borde rojo).

Y llegado a este punto, nos podemos preguntar ¿y cuándo falla un formulario de contacto? Buena pregunta :). Normalmente el envío de un email es un proceso sencillo que no suele fallar, pero como habíamos dicho al principio, tenemos el poder :)

Tiendy te ofrece la posibilidad de especificar qué campos del formulario son obligatorios y por lo tanto si el usuario no los rellena, el envío fallará. Para especificar estos campos, debemos crear un input de tipo hidden que se llame "mandatory_fields" con la lista de campos que queremos que sean obligatorios:

<input type="hidden" name="mandatory_fields" value="nombre,email,mensaje" />

De esta forma, cuando se envíe el formulario tiendy comprobará que los valores "nombre", "email" y "mensaje" no estén vacíos y en caso contrario, nos pondrá en la propiedad "errors" del objeto "form", la lista de campos que están vacíos. 

Y por si esto fuera poco, si el nombre de uno de los "mandatory_fields" es "email", tiendy también comprobará que se trata de un email válido.

Pero cuidado, los formularios de contacto tienen un peligro latente. Y es que en cuanto son descubiertos por los spammers, podemos sufrir y mucho. Solución: Stop spam, read books :) O dicho de otra forma, "Recaptcha".

Para añadir Recaptcha a nuestro formulario, sólo tenemos que añadir el siguiente código:

...
<tr>
    	<td colspan="2">
    		{% recaptcha %}
    	</td>
    </tr>
...

Esto hará que se muestre un widget Recaptcha y que el usuario que envíe el formulario deba rellenarlo correctamente para poder enviarlo.

La etiqueta {% recaptcha %} tiene dos parámetros que nos pueden ayudar si queremos personalizar su aspecto "lang" y "theme". Las opciones para "theme" son: red, white, blackglass y clean. Y para "lang": en, es, it, fr, de, etc.

{% recaptcha lang "es" theme "clean" %}

Y por hoy, lo dejamos aquí. Por supuesto, estamos encantados de responder a todos las dudas que os puedan surgir.

Dejar un comentario…

Ahora que se acerca la campaña de Navidad, aprovechamos para recomendaros el uso de la función de "Productos relacionados" que tiendy pone a vuestra disposición.

Se ha demostrado que añadir esta información en la ficha del producto y en el carrito de la compra puede ayudar a incrementar el número de compras y el volumen de éstas.

¿Cómo se implementa en vuestra plantilla?

Es muy simple. Por ejemplo, en el archivo product.tpl:

<h2>Clientes que compraron este producto también han comprado</h2>
<ul>
{% for r in product|related_products(4) %}
<li><a href="{{ r.url }}">{{ r.title }}</a></li>
{% endfor %}
</ul>

O en el archivo cart.tpl:

<h2>Clientes que compraron estos productos también compraron</h2>
<ul>
{% for r in cart|related_products(4) %}
<li><a href="{{ r.url }}">{{ r.title }}</a></li>
{% endfor %}
</ul>

Donde 4 es el número de productos que queréis mostrar (con un máximo de 10).

El filtro "related_products" aplicado a un producto o al carrito de la compra os dará una lista de elementos de tipo "product". Podéis tomar de esa lista los elementos que necesitéis para realizar un diseño adecuado para vuestra tienda. Podéis ver un ejemplo de implementación en la web de Santa Elena Ibéricos:

Por supuesto, nos tenéis como siempre a vuestra disposición para resolver todas las dudas que se os plantéen o trasladarnos vuestras sugerencias.

Dejar un comentario…

Una de las ideas base del proyecto tiendy, es la de dar completa libertad al desarrollador / diseñador para adaptar completamente el diseño de la tienda a sus necesidades e imagen corporativa. Para conseguir esto, la forma más sencilla fue la de optar por un lenguaje de plantillas, de forma que diéramos el máximo control sobre qué, cómo y dónde aparece un dato en cada sitio web.

Nuestra primera elección, basándonos sobretodo en que es bastante madura y muy conocida por la comunidad PHP, fue Smarty.

Pero justo por esas fechas, apareció una nueva opción desarrollada por el creador del Framework Symfony llamada Twig que prometía mayor velocidad de ejecución y una gran sencillez en la sintaxis. Así que la probamos y el resultado fue, que nos quedamos ella :)

Para que os hagais una idea, así es como había que recorrer una lista de enlaces con Smarty en tiendy:

<ul>
{foreach from=$linklists.menu_principal.links item=link key=i}
<li><a href="{$link.url}">{$link.title}</a></li>
{/foreach}
</ul>


y así es como se recorre con Twig:

<ul>
{% for link in linklists.menu_principal.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>

Como podéis ver la sintaxis es parecida, pero mucho más simple y elegante en el caso de Twig.

Podéis conocer más sobre cómo modificar plantillas de Twig en su página de documentación.

Dejar un comentario…

Acabamos de activar el soporte para php 5.3 en tiendy. Las primeras pruebas parecen indicar que todo funciona correctamente. En esta nueva versión se han hecho numerosas correcciones de errores y mejoras de rendimiento. Esperamos que esto redunde en una mayor satisfacción en el uso de tiendy ;)

Dejar un comentario…