En el comercio directo al consumidor (DTC), la lógica es simple: “Aquí hay una camisa. Cuesta 50 dólares”. En el comercio de empresa a empresa (B2B), la respuesta a “¿Cuánto cuesta esto?” siempre es: “Depende.”

*¿Quién eres? (Socio Oro vs Revendedor Bronce).

¿Cuantos estas comprando? (1 unidad frente a 1.000 unidades).
¿A dónde realizas el envío? (IVA de la UE versus impuesto sobre las ventas de EE. UU.).
¿Cuándo pagas? (Tarjeta de Crédito vs Factura Neta 30).

Para los portales B2B heredados existentes, esta lógica está enterrada en el código espagueti de SAP de hace 20 años. Los compradores B2B modernos esperan la “Experiencia Amazon” (interfaz de usuario elegante, búsqueda instantánea, compatibilidad móvil) pero con la compleja lógica de precios de un ERP.

En Maison Code Paris, creamos portales B2B sin cabeza que combinan UX de nivel de consumidor con lógica de nivel empresarial.

Por qué Maison Code habla de esto

En Maison Code Paris, actuamos como la conciencia arquitectónica de nuestros clientes. A menudo heredamos stacks “modernos” construidos sin una comprensión fundamental de la escala.

Discutimos este tema porque representa un punto de inflexión crítico en la madurez de la ingeniería. Implementarlo correctamente diferencia un MVP frágil de una plataforma resistente de nivel empresarial.

Por qué Maison Code habla de B2B

El comercio B2B es cinco veces mayor que el DTC. Sin embargo, los sitios web B2B suelen ser cinco veces peores. Creemos que los compradores B2B también son humanos. Odian las interfaces torpes. Odian esperar archivos PDF. Ayudamos a Fabricantes y Mayoristas a transformar sus centros de “Toma de Pedidos” en máquinas de “Ingresos de Autoservicio”. Diseñamos sistemas que manejan miles de SKU y millones de permutaciones de precios sin pestañear.

1. El modelo de datos: empresas y ubicaciones

En el nuevo B2B Primitive de Shopify, nos alejamos del simple objeto “Cliente”.

erDiagrama
    Empresa ||--|{ Ubicación de la empresa: tiene
    Empresa ||--|{ EmpresaContacto: emplea
    Ubicación de la empresa ||--|| Catálogo: asignado_a
    Catálogo ||--|{ Lista de precios: contiene
    EmpresaContacto }|--|| Cliente: enlaces_to

Empresa: la entidad jurídica (p. ej., “Sephora”).
Ubicación de la empresa: la tienda física (p. ej., “Sephora Paris Champs Elysees”).
Catálogo: el subconjunto de productos que esta ubicación puede comprar.
Contacto con la empresa: El comprador humano (Gestor de compras).

Esta jerarquía permite que un solo comprador compre para múltiples ubicaciones, con diferentes reglas impositivas para cada una de ellas aplicadas adecuadamente.

2. Lógica de precios: la cascada

La parte rigurosa del B2B es calcular el precio final. El algoritmo sigue una cascada específica:

Precio base: €100 (MSRP).
Precio de catálogo: €80 (Lista mayorista).
Anulación de precio fijo: €75 (tarifa contratada para este SKU).
Porcentaje de descuento: -10 % (descuento del nivel Gold).
Ruptura de cantidad: -5% (Por compras >100 unidades).

Implementación de precios dinámicos (funciones de Shopify)

No sincronizamos 50 variantes para 50 niveles de precios. Usamos Funciones de Shopify (WASM) para calcular la lógica al momento de pagar.

// rust/discount-allocator/src/main.rs (simplificado)

fn ejecutar (entrada: Entrada) -> Salida {
    let empresa = input.cart.buyer_identity.company;
    let tier = company.metafields.get("custom.tier").unwrap_or("BRONCE");
    
    dejar descuento = igualar el nivel {
        "ORO" => 0,25, // 25 % de descuento
        "PLATA" => 0,15, // 15% de descuento
        _ => 0,0,
    };

    // Aplicar descuento a líneas elegibles
    //...
}

Esto garantiza que, sin importar cuán complejo sea el contrato, el cálculo se realiza en <5 ms en el borde.

3. Reglas de cantidad (el problema de los palés)

No puedes enviar 1 ladrillo. Envías un palé de 500 ladrillos. B2B requiere Incrementos de cantidad y Cantidades mínimas de pedido (MOQ).

Aplicamos esto en la PDP (página de detalles del producto) mediante restricciones de la interfaz de usuario, pero también lo validamos en el lado del servidor.

// componentes/QuantitySelector.tsx
función de exportación WhichSelector({ moq, incremento }) {
  const [val, setVal] = useState(moq);
  
  const stepUp = () => setVal(v => v + incremento); // 500 -> 1000
  
  return <tipo de entrada="número" min={moq} paso={incremento} valor={val} />;
}

4. El Pago: Términos Netos vs Tarjeta de Crédito

Las cajas B2B rara vez utilizan tarjetas de crédito para pedidos grandes. Las tarifas (2,9%) son demasiado altas para un pedido de 50.000 dólares. Usamos Borradores de Órdenes y Condiciones de Pago.

Pagar: El usuario selecciona “Pago por factura (Neto 30)”.
Verificación de riesgos: Llamamos a la API del ERP (NetSuite) para verificar el Límite de crédito de la Compañía.
- Si Saldo actual + Total del carrito > Límite de crédito: Rechazar pedido.
- Si está “OK”: continuar.
Envío: el pedido se crea en Shopify con el estado “Pago pendiente”.
Facturación: El middleware sincroniza el pedido con el ERP. ERP envía por correo electrónico la factura en PDF.
Conciliación: Cuando llega la transferencia bancaria, ERP actualiza Shopify Order a “Pagado”.

5. El patrón “guardián”

Una tienda B2B suele ser privada. Implementamos un Gatekeeping Middleware en el borde (Cloudflare / Vercel Edge).

// middleware.ts
exportar middleware de función predeterminada (solicitud: Solicitud) {
  token constante = request.cookies.get('b2b_session');
  
  si (!token) {
    return NextResponse.redirect(nueva URL('/iniciar sesión', request.url));
  }
  
  usuario constante = esperar verificarToken(token);
  si (!user.is_b2b_approved) {
    return NextResponse.rewrite(new URL('/pending-approval', request.url));
  }
}

Esto evita que Google indexe los precios mayoristas (lo que arruina el valor de la marca) y mantiene fuera las competencias.

6. Ordenamiento matricial (alta velocidad)

Un comprador que solicite la colección FW25 debe solicitar 50 SKU en 4 tallas. No quieren visitar 50 páginas de productos. Construimos Matrix Grids (interfaces tipo Excel). (Consulte nuestro artículo específico sobre Pedido de matrices).

Esto requiere una gran optimización del frontend (virtualización) para representar 2000 entradas sin bloquear el navegador.

7. Integración de ERP: la fuente de la verdad

En B2B, Shopify No es el maestro de los datos. El ERP lo es.

Inventario: No confiamos en el inventario de Shopify. Recuperamos ATP (disponible para prometer) en tiempo real del ERP.
Datos del cliente: Cuando un cliente actualiza su dirección en Shopify, debemos enviarla al ERP.

Usamos Arquitectura basada en eventos (consulte Infraestructura de AWS) para manejar estas sincronizaciones de forma asincrónica a través de Webhooks y colas (SQS).

8. Catálogos específicos del cliente

Algunas marcas tienen productos “Exclusivos”. Nike podría vender “Air Jordans” sólo a minoristas de “Nivel 1”. Los minoristas estándar ni siquiera deben ver el producto. Usamos Separación de catálogo.

Etiquetar productos: etiqueta: "exclusivo".
Etiquetar empresas: metafield: "access_level: 1".
Filtrado de búsqueda: Al consultar Algolia, inyectamos el filtro: filters: '(tag:exclusive AND user.access_level >= 1) OR NOT tag:exclusive'. Esto garantiza la seguridad a través de la oscuridad.

9. Arquitectura B2B sin cabeza (hidrógeno)

Desarrollamos B2B en Shopify Hydrogen (React). ¿Por qué no líquido? Porque Liquid no puede manejar la complejidad de los “pedidos de matriz” o las “listas de precios personalizadas” lo suficientemente rápido. Con Remix/Hidrógeno:

Almacenamos en caché los “Datos base del producto” en el Edge (CDN).
Obtenemos “Precio personalizado” a través de diferir (Streaming).
La página se carga instantáneamente. El precio aparece 200 ms después. Parece una aplicación para consumidores, no un portal empresarial.

10. El flujo de trabajo de solicitud de cotización

Para pedidos > €50k, el precio no es fijo. Está negociado.

Agregar a la cotización: el usuario crea un carrito. En lugar de “Pagar”, hacen clic en “Solicitar cotización”.
Agente de ventas: El representante de ventas en Salesforce recibe la cotización.
Negociación: El representante edita los precios (“Te daré un 5% más de descuento si agregas 100 unidades”).
Aprobación: El usuario recibe un correo electrónico: “Cotización lista”.
Conversión: el usuario hace clic en el enlace, ve el precio personalizado y paga a través de Net 30. Esto digitaliza la negociación sin quitar el toque humano.

11. Precios basados en IA (rendimiento dinámico)

Los contratos negociados son estáticos. “Obtienes un 10% de descuento”. Pero ¿qué pasa si el cliente está a punto de abandonar? Usamos IA (Dynamic Yield / Nosto) para inyectar Promociones dinámicas. “Si el Cliente X visita el sitio 3 veces y no compra -> Ofrezca un 5% de descuento adicional durante 24 horas”. Esto está estrictamente controlado por las Reglas de Margen (establecidas en el ERP). La IA es el “representante de ventas digital” que sabe exactamente cuánto jugo exprimir para cerrar el trato.

12. Conclusión

B2B ya no es el “patito feo” del comercio electrónico. Las marcas que ganan en el comercio mayorista son las que ofrecen una experiencia similar a la del DTC. Al abstraer la complejidad de los precios y la logística detrás de una interfaz de usuario limpia y sin cabeza, respetas el tiempo del comprador. Y en B2B, el tiempo es la única moneda que importa.

**[Contrate a nuestros arquitectos](/contact)**.