Display widget es una función que le permite mostrar bloques de datos, texto e imágenes en diferentes partes de la ficha de producto, el componente que muestra un producto en los listados de productos, páginas de categorías, páginas de marca, motor de búsqueda, feeds en la página de inicio y en la vista de producto, la página de producto.
Display widget
Mostrar la tasa de descuento basada en el precio de venta en las fichas de producto (páginas de inicio, de búsqueda, de categoría y de marca), y en las páginas de detalles del producto.
Introducción
Qué es Display Widget?
Scaffolding incorpora un feature escencial para los ecommerce soportados por BigCommerce: Display widget.
Display widget es una funcionalidad que permite desplegar bloques de texto e imagen en diferentes partes del Product card, el componente que muestra un producto en los listados de productos, páginas de categorías, de marcas, buscador, feeds en la home y en página de productos, y en Product view, la página del producto.
Estos bloques pueden desplegar precios, porcentaje y montos de descuento, texto e imágenes arbitrarias, valores de atributos de producto, como custom fields, inventario, entre otros. A su vez, la visibilidad o no depende de los valores del producto, por ejemplo, un bloque puede mostrarse si tiene Sale price o si el stock es menor a 5 unidades.
Display widgets ofrece un sistema dinámico que sin requerir conocimientos técnicos, permite controlar dónde, cómo y hasta cuándo desplegar no solo los valores habituales de BigCommerce: price, sale price, msrp, sino también, otros como por ejemplo precios y descuentos asociados a promociones, inventario, comprabilidad entre otros.
Seguramente te hayas topado con la necesidad de anunciar el porcentaje de descuento aplicado a un producto en oferta, el precio resultante de un producto que interviene en una promoción automática de BigCommerce activa durante un período, mostrar el código de un cupón que es aplicable al producto, alertar al comprador de que quedan pocas unidades, o desplegar un sello de determinado cumplimiento normativo en ciertos productos.
Display widget permite esto y mucho más sin necesidad de programación ni aplicación alguna.
ToDo: Captura de ejemplos: un par de reales de Metro, alguna con cupón, otra con un texto, si puede ser una imagen mejor, con Hurry, limited quantities remaining.
Dónde se configura?
Display widget es una funcionalidad del tema Scaffolding por lo que todo se hace desde el Page Builder de BigCommerce.
Existen 3 secciones dedicadas a este feature:
- Display widget - Content
Donde se define el contenido a mostrar y la ubicación de los 10 bloques que dispone Displat widget - Display widget - Styles
Donde se define cómo se mostrarán: tamaño, colores, imagen y estilo en general - Display widget - Discounts
Donde se establece cuándo y cómo calcular precios y descuentos que se aplican a categorías de productos según las reglas de Automatic Promotions de BigCommerce programadas, tanto para descuentos fijos o porcentuales.
Dónde se muestran los bloques?
Display widget despliega sus bloques tanto en Product Card (página de categorías, producto de una marca, buscador entre otros) o Product View (página del producto), por lo que estos widgets acompañan al producto prácticamente en todos lados donde se muestra.
Cualquiera de los 10 bloques que maneja Display Widget pueden posicionarse sobre la imagen del producto, las cuatro esquinas y dos áreas centrales, o en la zona destinada al precio y nombre del producto, al final del nombre y debajo del nombre, y en dos filas debajo del nombre y marca del producto.
Contenidos y visualización
Cómo defino el contenido de un bloque?
El contenido a mostrar en el widget se ingresa en el campo Content del bloque correspondiente. Lo habitual, es que junto con el texto se necesite hacer referencia a datos del producto como ser el precio, para mostrar Now $79.50 por ejemplo.
Para hacer referencia a valores del producto, Display Widget usa tokens, que no es otra cosa que un texto encerrado entre corchetes que refiere al nombre de un atributo o valor del producto.
Por ejemplo, el token correspondiente al precio es {price} y al de precio oferta es {sale_price}.
De esta manera, si el contenido de un widget es "Now {sale_price}" y el precio oferta del producto es $79.50, Display widget mostrará "Now $79.50".
Qué tokens tengo disponibles?
Existen una multiplicidad de token lo que le confiere a Display widget una gran versatilidad a la hora de mostrar estos bloques.
Entre estos tokens, los Price tokens sin duda juegan un rol fundamental. Display widget agrega a los precios de BigCommerce (msrp, price y sale price), dos precios más, dbc1 y dbc2 (discount by category 1 y 2), que complementan a la excelente Automatic promotions de BigCommerce, para descuentos fijos o porcentuales aplicados a productos seleccionados por categorías.
Pero también incorpora los Attribute tokens asociados a atributos del producto , como {stock}, {width}, {length} entre otros.
Por último se tienen los Custom tokens, que permiten hacer referencia a cualquier custom field del producto, a una categoría, marca y hasta un parámetro recibido en una url. Por ejemplo, {band} podría hacer referencia un custom field Band de celulares o {coupon} podría hacer referencia a un cupón aplicable a determinados clientes que accedieron al sitio con determinada url.
Dentro de estos custom fields, se encuentran los image tokens, que son tokens que hacen referencia a una imagen cargada en el Image Manager de BigCommerce. Por ejemplo, {img_iso9001.png} mostraría una imagen de nombre iso9001.png en el widget correspondiente.
NOTA: Los Price tokens tienen precedencia sobre los Custom tokens y estos sobre los Attribute tokens , esto quiere decir que si se tiene un custom field cuyo nombre es Price, no se mostrará sino que en su lugar se mostrará el precio del producto o si un custom field tiene nombre Width, se mostrará este valor y no el valor del atributo Width del producto.
Cuándo se muestra un bloque y cuándo no?
Display Widget utiliza dos maneras para identificar si un bloque debe mostrarse o no: implícita y explícita.
La implícita es bien simple y natural, el contenido "Now {sale_price}" no debe aparecer si el producto no está en sale, y eso es justamente lo que hace Display Widget, si algún token del contenido no tiene valor, el contenido no es mostrado.
Esto se aplica a todos los tokens, por ejemplo, si quisiera destacar los celulares que cumplen con normas de resistencia al agua, alcanzaría con asignarle un custom field de nombre, por ejemplo, IP y el valor de cumplimiento. Luego crear un Display Widget con el contenido "Resistencia IP: {IP}" que se mostraría solamente en los productos en los que {IP} tenga valor y esto será cuando el producto tenga un custom field IP.
La forma explícita es requerida cuando no alcanza con que el token tenga o no valor sino que se necesita hacer comparaciones o establecer otras condiciones. Por ejemplo, para desplegar un mensaje si el stock es menor a un determinado valor. En estos casos el criterio se establece ingresando una expresión de comparación en el propio campo Content. En el ejemplo de stock recién mencionado, el contenido "{stock}<5::Últimas {stock} unidades" se mostraría cuando el stock es 4 o menos.
El doble dos puntos (::) es lo que le indica a Display Widget que se trata de una condición que debe cumplirse para que el bloque se muestre.
Ubicaciones y diseño
Cómo puedo jerarquizar partes del contenido?
Habitualmente parte del contenido tiene más relevancia que el resto, por ejemplo, quiero destacar el precio de oferta y mostrar el precio anterior con menor importancia.
Para esto, los contenidos tienen 3 secciones: anterior, central y posterior y se separan simplemente con los caracteres < y >. La parte del contenido antes de < se muestra con un tamaño de font más chico a la izquierda (o arriba) de la parte central y lo mismo para el contenido que sigue a >, mostrándose más chico a la derecha (o abajo).
Siguiendo con el ejemplo inicial de un producto en oferta, el contenido "{price_was}<Now {sale_price}>Winter sale!" mostraría:
En qué posiciones puedo mostrar un bloque?
Los bloques de Display Widgets se pueden ubicar sobre la imagen del producto o en el área de detalle del producto.
- Imagen del producto
- Top Left
- Top Center
- Top Right
- Bottom Left
- Bottom Center
- Bottom Right
- Área de detalle del producto
- At the end of product name
- Below product name
- Row 1
- Row 2 (only on Product view)
Estas ubicaciones están disponibles tanto en Product card (la ficha de producto que se muestra en los listados) o Product view (la página del producto) a excepción de Row 2 que solo se muestra en la página del producto.
ToDo: Esquema con ubicaciones posibles de Product Card y Product Detail
Dónde configuro cómo se mostrará el bloque?
Se pueden crear hasta 5 estilos diferentes que definen el formato, tamaño, colores y fondo que tendrán los bloques.
A cada bloque se le asigna un estilo lo que facilita la reutilización del mismo diseño en más de un widget.
Qué formas dispongo?
Para cada estilo de Display widgets se puede seleccionar entre los siguientes formas:
- Circle
- Label
- Box
ToDo: ilustrar cada uno
Qué tamaños dispongo?
Los DW pueden tener hasta 5 tamaños diferentes: Small, Medium, Large, Big y Full width.
Estos tamaños incidirán en el área ocupada por el widget pero también en el tamaño del font y serán adaptados automáticamente al tamaño del dispositivo.
El tamaño Full width hace que el widget ocupe el ancho completo de dónde se despliega.
Qué colores y fondos puedo establecer?
En los estilos se puede definir tanto el color del font del texto como el color de fondo del widget.
También dentro del estilo, se puede ingresar el nombre de una imagen que se haya cargado en Image manager de BigCommerce la que se mostrará como fondo.