Plantillas SVG para el diseñador de productos

Con una plantilla SVG, la imagen del producto sigue a la configuración: una etiqueta se dibuja tan ancha y alta como la pide tu cliente, recibe esquinas redondeadas o un agujero, y la zona de diseño del texto propio o de la imagen propia crece con ella. No necesitas una imagen distinta para cada tamaño y cada variante.

Requisitos

• Motor de frontend V3. Legacy no muestra la plantilla. Consulta Motor de frontend: Legacy o V3.
• Imagen de producto combinada. La plantilla es la imagen de un valor en la imagen de producto combinada, p. ej. en la característica Papel. configento.app lee la zona de diseño de la imagen inferior, es decir, del producto base. Consulta Visualización de imágenes y carga de imágenes.
• Características con nombre interno. La plantilla lee los valores a través del Nombre interno (ID) de una característica, p. ej. $largo para el largo en mm.

Cómo se construye una plantilla

Una plantilla SVG es un archivo SVG normal en cuyos atributos hay marcadores entre dobles llaves. El configurador los rellena con cada selección y dibuja el resultado en la imagen del producto.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="-2 -2 {{$largo + 4}} {{$alto + 4}}"
     width="{{($largo + 4) * 4}}" height="{{($alto + 4) * 4}}">
  <rect x="0" y="0" width="{{$largo}}" height="{{$alto}}"
        rx="{{$esquinas == 'redondas' ? 3 : 0}}" fill="#f4efe4" stroke="#cfc6b4" stroke-width="0.4"/>
  <circle cx="{{$largo / 2}}" cy="8" r="{{$agujero == 'sin' ? 0 : 2.5}}"
          fill="#ffffff" stroke="#cfc6b4" stroke-width="0.4"/>
  <rect data-configento-zone="marca" x="5" y="15"
        width="{{$largo - 10}}" height="{{$alto - 20}}" fill="none"/>
</svg>

• viewBox en milímetros. Una unidad de la plantilla es un milímetro en el producto. Aquí la etiqueta mide $largo × $alto mm, con 2 mm de espacio alrededor.
• width y height determinan el tamaño con el que se dibuja la imagen. La raíz necesita width y height o una viewBox; si no, el archivo se rechaza al subirlo.
• Las esquinas redondeadas y el agujero dependen de características de selección: $esquinas == 'redondas' ? 3 : 0 pone el radio de las esquinas en 3 mm cuando está elegido el valor redondas.
• La zona de diseño es el rectángulo con data-configento-zone (véase abajo).

Puedes descargar esta plantilla como punto de partida: hangtag.svg. Sustituye los nombres después de $ por los nombres internos de tus características.

Marcadores

Dentro de {{ … }} va una expresión escrita igual que en una característica de fórmula:

• En características de selección, compara con el Valor de la entrada, no con su etiqueta.
• Los números se redondean a tres decimales. Si una característica está vacía, el configurador usa 0.
• Los marcadores funcionan en atributos, p. ej. en width, rx, fill o viewBox.
• Escribe < y > como < y > en el archivo SVG, p. ej. {{$largo > 80 ? 4 : 2}}. El configurador los convierte antes de calcular.

Definir la zona de diseño

Un rectángulo con data-configento-zone="…" define dónde va un texto o una imagen propios. Indica ahí el Nombre interno (ID) de la característica del tipo Texto propio en el producto o Imagen propia en el producto.

• x, y, width y height del rectángulo son la posición y el tamaño real de la zona en mm. configento.app calcula con ellos los tamaños de letra y la resolución de una imagen.
• La zona de la plantilla tiene prioridad sobre la zona dibujada en el editor y sobre Ancho de y Alto de.
• Con fill="none" el rectángulo queda invisible.
• Para ello la plantilla necesita una viewBox.

Varias características reciben cada una su propio rectángulo. La comprobación de precios en el carrito también lee la plantilla, así que el tamaño y la resolución del pedido coinciden con los del navegador.

Fondo para la comprobación de contraste

Si un texto propio comprueba el contraste, la plantilla puede aportar el fondo. Añade data-configento-bg al rectángulo de la zona de diseño:

<rect data-configento-zone="marca" x="5" y="15"
      width="{{$largo - 10}}" height="{{$alto - 20}}" fill="none"
      data-configento-bg="{{$carton == 'negro' ? '#1a1a1a' : '#f4efe4'}}"/>

El valor debe ser un color hexadecimal de seis dígitos como #1a1a1a; vacío significa sin comprobación. Si en el texto propio hay un Fondo indicado en Comprobación de contraste, se aplica ese.

Margen de seguridad y agujero

Al cortar o troquelar se puede perder algo del borde. Dos atributos mantienen el texto y la imagen alejados:

• data-configento-safe-mm="3" en el rectángulo de la zona de diseño: la distancia en mm que el texto y la imagen deben guardar respecto al borde de la zona.
• data-configento-keepout en un rect, circle o ellipse: una superficie que debe quedar libre, p. ej. el agujero de una etiqueta. Escribe el atributo como data-configento-keepout="", porque SVG exige un valor. Las zonas excluidas valen para todas las zonas de diseño, también desde una capa superior, por ejemplo en la característica Agujero, si su plantilla tiene la misma viewBox.

<circle cx="{{$largo / 2}}" cy="8" r="{{$agujero == 'sin' ? 0 : 2.5}}"
        fill="#ffffff" data-configento-keepout=""/>
<rect data-configento-zone="marca" data-configento-safe-mm="3"
      x="5" y="15" width="{{$largo - 10}}" height="{{$alto - 20}}" fill="none"/>

Si un texto o una imagen se acerca al borde más que el margen o toca el agujero, el campo muestra «Demasiado cerca del borde o del agujero: esta parte puede cortarse o perforarse.» Si el configurador solo avisa o también bloquea el carrito se ajusta en la característica. Más información: Texto propio en el producto e Imagen propia en el producto.

Subir la plantilla

Sube la plantilla como cualquier otra imagen en el valor (SVG de hasta 5 MB). Al subirla, configento.app limpia el archivo:

• Se eliminan los scripts.
• Se eliminan las referencias a archivos de otros servidores, p. ej. imágenes enlazadas. Por eso, incrusta las imágenes directamente o añádelas como capa propia.
• Los marcadores y los atributos data- se conservan.

Las imágenes de 360° no pueden ser archivos SVG.

Solución de problemas

1. El archivo se rechaza al subirlo: la raíz <svg> no tiene ni width y height ni viewBox.
2. Una forma mide 0 o desaparece: el marcador da 0. Comprueba el Nombre interno (ID), incluidas mayúsculas y minúsculas, y si la característica tiene un valor.
3. Una comparación no se cumple nunca: compara con el Valor de la entrada, p. ej. redondas, no con la etiqueta Redondas.
4. El texto se queda en el sitio anterior: data-configento-zone debe llevar exactamente el nombre interno de la característica de texto o de imagen, y la plantilla necesita una viewBox.
5. No se comprueba el contraste: data-configento-bg no da un color hexadecimal de seis dígitos, o el texto no tiene Contraste mín.
6. No se tiene en cuenta el agujero: la forma con data-configento-keepout no es un rect, circle o ellipse, o su capa tiene otra viewBox que la plantilla.

Próximos pasos

• Texto propio en el producto
• Imagen propia en el producto
• Fórmulas y cálculos
• Visualización de imágenes y carga de imágenes