Personalizar el diseño (CSS)

El configurador debe parecerse a su tienda: colores, fuente, esquinas, el aspecto de los campos de selección. Todo esto se adapta con CSS, sin nada de JavaScript. Esta página se aplica al motor de frontend V3. Legacy genera otro HTML, por lo que allí no funcionan las variables y clases que se describen a continuación.

Lo que el configurador ya toma de la tienda

En una tienda –a través de un plugin de tienda o del fragmento HTML– el configurador toma de su tema la fuente, el tamaño de fuente y el color del texto. Para ello no tiene que hacer nada. Solo tiene que adaptar lo que el configurador trae consigo: color de acento, bordes, fondos, esquinas.

Si lo integra con data-configento-embed-mode="admin-preview", muestra él mismo el título, el precio y el resumen y también usa sus propios colores para los textos. Incluso entonces hereda la fuente de la página.

Dónde va su CSS

Tiene dos lugares:

• El tema de su tienda: lo adecuado si todos los configuradores deben tener el mismo aspecto.
• CSS personalizado en la Configuración del componente, en Diseño: lo adecuado para un solo componente. Se carga con el configurador, en la tienda y en la vista previa del admin.

Escriba [data-configento] delante de las reglas para elementos individuales, p. ej. [data-configento] .cfg-toggle-item__price. El configurador carga su propio CSS después de su tema; con este prefijo, su regla prevalece de todos modos. Para las variables de abajo no hace falta.

Colores, fuente y esquinas

La adaptación más sencilla: definir variables en :root. Actúan en todo el configurador y también en la vista ampliada de imágenes y en las ventanas de información, que se abren fuera del configurador.

:root {
  --configento-color-accent: #1d3c78;
  --configento-color-border: #c8d0e0;
  --configento-radius-md: 0;
}

Los nombres de estas variables se mantienen iguales en todas las versiones 3.x.

Color activo y color principal: el color de acento de un configurador procede de la primera de estas fuentes que esté definida:

1. el Color activo del componente (configuración del componente → Diseño),
2. --configento-color-accent en su CSS,
3. el Color principal en Ajustes → Marca; también se aplica a los PDF y a los correos electrónicos,
4. el azul predeterminado #2563eb.

Para un mismo color en todos los componentes basta con el color principal de Marca. El Color activo solo lo necesita si un componente debe ser distinto; entonces también se aplica en lugar de su CSS.

Otra fuente: si el configurador debe usar una fuente distinta de la de la página, defínala en el elemento con data-configento. La fuente debe estar cargada en la página, por ejemplo a través de su tema.

[data-configento] { font-family: 'Source Sans 3', sans-serif; }

Diseñar elementos individuales

Para ir más allá de las variables existen clases y atributos que garantizamos: se mantienen iguales en todas las versiones 3.x y solo cambian con una nueva primera cifra de versión. Las demás clases y el resto de la estructura HTML pueden cambiar.

Marco de cada característica

Botones de radio y casillas de verificación

Al estado seleccionado se accede a través del input, p. ej. .cfg-toggle-item__label:has(input:checked). Las etiquetas largas se dividen con guiones y el recargo se queda en una sola línea. El tamaño de las imágenes se ajusta con --cfg-value-image-size.

Campos de entrada y listas de selección

Imagen combinada en la vista 360°

Si el CSS no basta porque una característica debe tener un aspecto y un comportamiento totalmente distintos (por ejemplo, como una matrícula), dibújela en JavaScript con una representación propia.

La forma más sencilla de dirigirse a una característica concreta es una clase propia: introdúzcala en el editor, en el campo Clase CSS de la característica, y aparecerá en el elemento .cfg-char.

Campos uno al lado del otro

Con las clases de columnas coloca las características de un grupo una al lado de la otra, por ejemplo el nombre y los apellidos en una misma fila. Introduzca la clase en el editor, en el campo Clase CSS de la característica. No necesita CSS propio.

• Las características llenan la fila en su orden dentro del grupo. Dos características seguidas con cfg-col-6 comparten una fila.
• Las características sin clase de columna en el mismo grupo ocupan toda la fila.
• Si el grupo mide menos de 480 píxeles de ancho, por ejemplo en un smartphone, todas las características vuelven a apilarse.
• Las clases solo actúan en grupos que usan al menos una de ellas. Los grupos sin clase de columna y los anchos de su tema (p. ej. grid12-6 de Magento) no cambian.
• Solo con el motor frontend V3.

Ejemplos

Botones de radio propios: círculo con CSS en lugar del estándar del navegador y fila elegida resaltada:

[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--configento-color-accent);
  border-radius: 50%;
}
[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input:checked {
  background: radial-gradient(var(--configento-color-accent) 45%, transparent 50%);
}
[data-configento] .cfg-toggle-item__label:has(input:checked) {
  background: var(--configento-color-accent-soft);
}

Para ello, defina --configento-color-accent y --configento-color-accent-soft en :root, como se muestra arriba.

Mostrar los errores con más claridad:

[data-configento] .cfg-char[data-configento-invalid] .cfg-char__title { color: var(--configento-color-error); }
[data-configento] .cfg-char[data-configento-invalid] .cfg-input { border-color: var(--configento-color-error); }

Ocultar los recargos, por ejemplo si su tienda los muestra de otra forma:

[data-configento] .cfg-toggle-item__price { display: none; }

Imágenes más grandes en los valores y valores bloqueados más tenues:

:root { --cfg-value-image-size: 64px; }
[data-configento] .cfg-toggle-item[data-configento-disabled] { opacity: 0.4; }

Solución de problemas

Próximos pasos

• Configuración del componente: Color activo y CSS personalizado
• Integración fragmento HTML
• Interfaz JavaScript (V3): si quiere intervenir más allá del aspecto
• Motor de frontend: Legacy o V3