1 of 35

Drupal Commerce:

Como crear flujos de compra complejos y personalizables sin picar código

​

​

Drupal Iberia

​

Manuel Egío

2 of 35

Desarrollador back-end en Cambrico entre otras cosas.

​

https://www.drupal.org/u/facine

https://www.drupal.org/cambrico

Manuel Egío

3 of 35

Drupal Commerce sin dramas

4 of 35

🛍 Productos personalizados

➡️ Venta de camisetas con color, talla y serigrafía.

​

🎟 Flujos mixtos

➡️ Formularios de donación y alta de socios combinados en uno.

​

📂 Flujos de compra guiados

➡️ Árbol de decisiones.

​

📦 Lotes personalizados

➡️ Compra de cajas de productos combinados por el cliente.

Cuando un simple formulario no es suficiente

​

5 of 35

🛠 Múltiples flujos de configuración reutilizables

Sin necesidad de crear múltiples tipos de líneas de pedido.

​

🔄 Condiciones dinámicas

Reglas de visibilidad y ajustes de precio en tiempo real, sin necesidad de múltiples promociones.

​

📦 Gestión de packs y pedidos personalizados

Combinaciones de productos de forma sencilla y flexible.

​

🔗 Integración

Commerce Webform Order permite usar webforms para añadir productos al carrito con total flexibilidad.

​

🖱 Cero código

Todo se gestiona desde la interfaz de Webform, sin necesidad de “programar”.

Drupal Commerce & Webform:

Un matrimonio bien avenido

6 of 35

  • Crea un webform con los campos y flujos que necesites.

​

  • Añade uno más handlers de Commerce Webform Order y configura como deben de crear el pedido y sus líneas de pedido.

​

  • Usalo y reutilizalo dónde y cómo quieras.

Configura, convierte, repite: así de fácil

7 of 35

​

  • Venta de garajes, pérgolas, casetas de jardín...

​

  • Un webform muestra las diferentes opciones de configuración.

​

  • El usuario selecciona atributos como el tamaño, color, tipo de ventas, puertas…

​

  • Al enviar el formulario, los handlers que tiene configurados:

Crean un nuevo pedido en estado de pendiente de valorar.

Envían correos electrónicos, al cliente y al responsable de ventas.

Envían los datos a un CRM remoto.

Caso real: Solicitud de cotización

8 of 35

Ejemplo de uso:�Personaliza tu camiseta, no tu código

9 of 35

Producto:

  • No seleccionable

​

Atributos:

  • Estilo (Modificará el precio)
  • Color
  • Talla
  • Diseño delantero (Modificará el precio)
  • Diseño trasero (Modificará el precio)

​

Propiedades de la línea de pedido:

  • Precio unitario
  • Unidades

​

Propiedades del pedido:

  • Usuario
  • Correo electrónico
  • Forma y método de pago
  • Perfil de facturación

De formulario a pedido:

cómo se estructuran los datos

10 of 35

11 of 35

La camiseta, Product Variation/Purchasable Entity

​

  • Referencia directa en el handler de CWO.
  • Elemento en el webform con valores fijos.
  • Referencia a entidad:

Referencia directa.

Vista con un Entity Reference Display.

El protagonista del carrito

12 of 35

  • Opciones predefinidas para los atributos.
  • Selectores con estados condicionales.
  • Referencias a otras entidades, como en el caso del selector del producto.

Cada artículo con su propia identidad

13 of 35

14 of 35

Cada artículo con su propia identidad

  • Computed Twig: HTML/Texto dinámico con Ajax + Twig
  • Computed Token: Tokens calculados durante el envío de los submissions.

15 of 35

16 of 35

  • Selector de diseño.
  • Campos de fichero, condicionales según el valor del selector de diseño para la imagen del diseño.
  • Computed twig para el resumen y la previsualización.

Cada artículo con su propia identidad

17 of 35

  • Variables {{ data.ELEMENT_KEY }}, para recuperar el color y el tipo de personalización.
  • Tokens para obtener la URL de la imagen subida por el cliente.

18 of 35

19 of 35

20 of 35

Sin comprador no hay venta

21 of 35

Elemento para recoger los datos del pago:

  • Selector de la pasarela de pago.
  • Integración con los formularios de los métodos de pago.
  • Soporta métodos on-site y off-site.
  • Permite reutilizar los métodos de pago guardados por el usuario.
  • Incluye el formulario del perfil de cliente.

Sin comprador no hay venta

22 of 35

Un handler de webform nos permite

Relacionar varios campo del pedido, o sus entidades relacionadas, con un elemento del webform, un valor fijo o un token.

Definir algunos comportamientos tanto del carrito como del checkout.

De formulario a carrito: Cada valor a su sitio

23 of 35

  • Selector de tienda, por referencia, token o desde un elemento del propio webform.
  • Sin comprobación de permisos de la entidad Store, por si nuestras tiendas no son visibles para todos los usuarios.

De formulario a carrito: Tienda

24 of 35

De formulario a carrito: Línea de pedido

  • Selector para guardar el ID de la línea de pedido, útil para poder actualizar líneas de pedido.

https://www.drupal.org/project/webform_entity_handler

  • Selector del tipo de entidad a vender. Soporta tanto variaciones nativas de commerce, como entidades que implementen la interfaz PurchasableEntityInterface.
  • Selector de la entidad a vender, permite seleccionarlo desde un elemento o referenciando uno.

https://www.drupal.org/project/commerce_purchasable_entity

25 of 35

  • Selectores para los campos principales de la entidad línea de pedido.

​

  • Título.
  • Precio unitario y su moneda.
  • Unidades.

​

Para el título y el precio unitario, también existe la opción de no sobreescribirlos y mantener los valores definidos en el producto.

De formulario a carrito: Línea de pedido

26 of 35

Campos específicos de la línea de pedido.

​

  • Estilo de la camiseta.
  • Talla.
  • Color.
  • Referencias a las dos imágenes del diseño.

​

Para talla tenemos un elemento por cada estilo de camiseta, se podría usar el módulo token_or o encadenar múltiples tokens:

�[webform_submission:values:size_regular_fit:clear]

[webform_submission:values:size_fitted:clear]

[webform_submission:values:size_kid:clear]

De formulario a carrito: Línea de pedido

27 of 35

De formulario a carrito: Carrito

Comportamiento del carrito:

  • Forzar la creación de un nuevo carrito.
  • Vaciar el carrito antes añadir nuestros productos.
  • Combinar los productos con los existentes.

28 of 35

De formulario a carrito: +Carrito

  • Ocultar el mensaje de estado que se muestra al añadir un producto al carrito.
  • Redirigir al usuario directamente al checkout, o mantener la URL de confirmación del propio webform.
  • Seleccionar el estado del pedido.
  • Almacenar otros datos en el campo serializado que tienen los pedidos.

29 of 35

De formulario a carrito: Cliente

  • Correo electrónico.
  • ID de usuario.
  • ID del perfil de cliente y posibilidad de omitir la comprobación de permisos para el perfil.

30 of 35

De formulario a carrito: Pago

  • Pasarela de pago
  • Método de pago, en caso de que la pasarela permita al usuario guardarlas.
  • URL a la que volver en caso de que no se complete el pago.

31 of 35

  • Sincronizar el borrado de la línea de pedido con el envío del formulario que la ha creado.
  • Definir cuando el handler debe de ejecutarse.

De formulario a carrito: Y por último

32 of 35

  • Campos especiales: CIF/NIF, Cuenta bancaria…
  • Generación de ficheros PDFs, validaciones adicionales, envío de correos electrónicos…
  • Integraciones con CRMs, Slack, MailChimp, Google Tag Manager…

​

Receta para enviar correos electrónicos cuando el pago o el estado del pedido cambie: https://www.drupal.org/project/commerce_webform_order/issues/3153554#comment-13964386

Chuches…

33 of 35

Y así es como se consigue vender una camiseta…

34 of 35

​

​

Módulo: drupal.org/project/commerce_webform_order

Demo: drupal.org/project/cwo_demo

​

Diapositivas y ejemplo usado: github.com/facine/drupal_iberia_2025

​

​

Manuel Egío: drupal.org/u/facine

Cambrico: drupal.org/cambrico

¡Tan molona como esta!

35 of 35

¡GRACIAS!