Nel commercio Direct-to-Consumer (DTC), la logica è semplice: “Ecco una maglietta. Costa € 50”. Nel commercio Business-to-Business (B2B), la risposta alla domanda “Quanto costa?” è sempre: “Dipende.”

*Chi sei? (Partner Gold vs Rivenditore Bronze). *Quanti ne stai acquistando? (1 unità contro 1.000 unità). *Dove spedisci? (IVA UE vs imposta sulle vendite statunitense). *Quando paghi? (Carta di credito vs fattura netta 30).

Per i portali B2B legacy esistenti, questa logica è sepolta nello spaghetti code SAP vecchio di 20 anni. I moderni acquirenti B2B si aspettano “l’esperienza Amazon” (interfaccia utente intuitiva, ricerca istantanea, compatibilità mobile), ma con la complessa logica di prezzo di un ERP.

Presso Maison Code Paris, creiamo portali B2B headless che uniscono UX di livello consumer con logica di livello aziendale.

Perché Maison Code ne parla

In Maison Code Paris, agiamo come la coscienza architettonica dei nostri clienti. Spesso ereditiamo stack “moderni” costruiti senza una comprensione fondamentale della scala.

Discutiamo di questo argomento perché rappresenta un punto di svolta critico nella maturità ingegneristica. Implementarlo correttamente differenzia un MVP fragile da una piattaforma resiliente di livello aziendale.

Perché Maison Code parla di B2B

Il commercio B2B è 5 volte più grande di DTC. Tuttavia, i siti Web B2B sono spesso 5 volte peggiori. Crediamo che anche gli acquirenti B2B siano umani. Odiano le interfacce goffe. Odiano aspettare i PDF. Aiutiamo Produttori e Grossisti a trasformare i loro centri di “Presa Ordini” in macchine di “Ricavo Self-Service”. Progettiamo sistemi che gestiscono migliaia di SKU e milioni di permutazioni di prezzo senza batter ciglio.

1. Il modello dei dati: aziende e luoghi

Nel nuovo B2B Primitive di Shopify, ci allontaniamo dal semplice oggetto “Cliente”.

“sirena”. erDiagramma Azienda ||—|{ Posizione azienda: ha Azienda ||—|{ Contatto azienda: impiega Posizione azienda ||—|| Catalogo: assegnato_a Catalogo ||—|{ Listino prezzi : contiene AziendaContatto }|—|| Cliente: links_to


* **Azienda**: la persona giuridica (ad esempio, "Sephora").
* **Ubicazioneazienda**: il negozio fisico (ad esempio, "Sephora Paris Champs Elysees").
* **Catalogo**: il sottoinsieme di prodotti che questa sede può acquistare.
* **Contattoazienda**: L'acquirente umano (responsabile degli acquisti).

Questa gerarchia consente a un singolo acquirente di acquistare per più località, con norme fiscali diverse per ciascuna di esse opportunamente applicate.

## 2. Logica dei prezzi: La Cascata

La parte rigorosa del B2B è il calcolo del prezzo finale.
L'algoritmo segue una cascata specifica:

1. **Prezzo base**: $ 100 (prezzo consigliato).
2. **Prezzo di catalogo**: $80 (Lista all'ingrosso).
3. **Sostituzione prezzo fisso**: $75 (tariffa contrattata per questo SKU).
4. **Percentuale di sconto**: -10% (sconto livello Gold).
5. **Pausa quantità**: -5% (per l'acquisto di >100 unità).

### Implementazione dei prezzi dinamici (funzioni Shopify)

Non sincronizziamo 50 varianti per 50 fasce di prezzo. Utilizziamo **Shopify Functions** (WASM) per calcolare la logica al momento del pagamento.

"ruggine".
// ruggine/discount-allocator/src/main.rs (semplificato)

fn esegui(input: Ingresso) -> Uscita {
    let company = input.cart.buyer_identity.company;
    let tier = company.metafields.get("custom.tier").unwrap_or("BRONZE");
    
    lascia che lo sconto = corrisponda al livello {
        "ORO" => 0,25, // 25% di sconto
        "ARGENTO" => 0,15, // 15% di sconto
        _ => 0.0,
    };

    // Applica lo sconto alle linee idonee
    // ...
}

Ciò garantisce che, indipendentemente dalla complessità del contratto, il calcolo avviene in <5 ms sul limite.

3. Regole sulla quantità (il problema del pallet)

Non puoi spedire 1 mattone. Spedisci un pallet di 500 mattoni. B2B richiede Incrementi di quantità e Quantità minime di ordine (MOQ).

Lo applichiamo sul PDP (pagina dei dettagli del prodotto) utilizzando i vincoli dell’interfaccia utente, ma lo convalidiamo anche sul lato server.

“tsx // componenti/QuantitySelector.tsx funzione di esportazione QuantitàSelettore({ moq, incremento }) { const [val, setVal] = useState(moq);

const stepUp = () => setVal(v => v + incremento); // 500 -> 1000

return ; }


## 4. Il pagamento: termini netti vs carta di credito

Le casse B2B utilizzano raramente le carte di credito per ordini di grandi dimensioni. Le commissioni (2,9%) sono troppo alte per un ordine da $ 50.000.
Utilizziamo **Ordini preliminari** e **Termini di pagamento**.

1. **Checkout**: l'utente seleziona "Paga tramite fattura (Net 30)".
2. **Verifica del rischio**: chiamiamo l'API ERP (NetSuite) per verificare il **Limite di credito** della Società.
    * Se "Saldo corrente + Totale carrello > Limite credito": Rifiuta ordine.
    * Se "OK": procedere.
3. **Invio**: l'ordine viene creato in Shopify con lo stato "Pagamento in sospeso".
4. **Fatturazione**: il middleware sincronizza l'ordine con l'ERP. L'ERP invia tramite e-mail la fattura PDF.
5. **Riconciliazione**: quando arriva il bonifico bancario, ERP aggiorna Shopify Order su "Pagato".

## 5. Il modello "Portiere".

Un negozio B2B è spesso privato.
Implementiamo un **Gatekeeping Middleware** all'edge (Cloudflare / Vercel Edge).

"dattiloscritto".
// middleware.ts
esporta il middleware della funzione predefinita (richiesta: Richiesta) {
  const token = request.cookies.get('b2b_session');
  
  se (!token) {
    return NextResponse.redirect(nuovo URL('/login', request.url));
  }
  
  const utente = attende verificaToken(token);
  se (!utente.is_b2b_approvato) {
    return NextResponse.rewrite(new URL('/pending-approval', request.url));
  }
}

Ciò impedisce a Google di indicizzare i prezzi all’ingrosso (il che rovina il valore del marchio) e tiene fuori le competenze.

6. Ordinamento della matrice (alta velocità)

Un acquirente che ordina la collezione AI25 deve ordinare 50 SKU in 4 taglie. Non vogliono visitare 50 pagine di prodotti. Costruiamo Matrix Grids (interfacce simili a Excel). (Vedi il nostro articolo specifico su Ordinamento della matrice).

Ciò richiede una pesante ottimizzazione del frontend (virtualizzazione) per eseguire il rendering di 2.000 input senza arrestare in modo anomalo il browser.

7. Integrazione ERP: la fonte della verità

Nel B2B, Shopify Non è il master dei dati. L’ERP lo è.

Inventario: non ci fidiamo dell’inventario Shopify. Recuperiamo l’ATP (Available to Promise) in tempo reale dall’ERP.
Dati cliente: quando un cliente aggiorna il proprio indirizzo su Shopify, dobbiamo inviarlo all’ERP.

Utilizziamo un’architettura basata sugli eventi (vedi Infrastruttura AWS) per gestire queste sincronizzazioni in modo asincrono tramite Webhook e code (SQS).

8. Cataloghi specifici del cliente

Alcuni marchi hanno prodotti “esclusivi”. Nike potrebbe vendere “Air Jordan” solo ai rivenditori “Tier 1”. I rivenditori standard non devono nemmeno vedere il prodotto. Utilizziamo la Separazione del catalogo.

Tagga i prodotti: tag: "exclusive".
Etichetta aziende: metafield: "access_level: 1".
Filtro di ricerca: Quando interroghiamo Algolia, inseriamo il filtro: filters: '(tag:exclusive AND user.access_level >= 1) OR NOT tag:exclusive'. Ciò garantisce la sicurezza attraverso l’oscurità.

9. Architettura B2B headless (idrogeno)

Costruiamo B2B su Shopify Hydrogen (React). Perché non liquido? Perché Liquid non è in grado di gestire la complessità dell‘“ordine a matrice” o dei “listini prezzi personalizzati” abbastanza velocemente. Con Remix/Idrogeno:

Memorizziamo nella cache i “Dati del prodotto di base” sull’Edge (CDN).
Recuperiamo il “Prezzo personalizzato” tramite defer (Streaming).
La pagina si carica istantaneamente. Il prezzo verrà visualizzato 200 ms dopo. Sembra un’app consumer, non un portale aziendale.

10. Il flusso di lavoro della richiesta di preventivo

Per ordini superiori a € 50.000, il prezzo non è fisso. È negoziato.

Aggiungi al preventivo: l’utente crea un carrello. Invece di “Checkout”, fanno clic su “Richiedi preventivo”.
Agente di vendita: il rappresentante di vendita in Salesforce riceve il preventivo.
Negoziazione: il rappresentante modifica i prezzi (“Ti darò uno sconto in più del 5% se aggiungi 100 unità”).
Approvazione: l’utente riceve un’e-mail: “Preventivo pronto”.
Conversione: l’utente fa clic sul collegamento, vede il prezzo personalizzato e paga tramite Net 30. Ciò digitalizza la negoziazione senza rimuovere il tocco umano.

11. Prezzi basati sull’intelligenza artificiale (rendimento dinamico)

I contratti negoziati sono statici. “Hai uno sconto del 10%.” Ma cosa succede se il cliente sta per abbandonare? Utilizziamo l’intelligenza artificiale (Dynamic Yield / Nosto) per iniettare promozioni dinamiche. “Se il cliente X visita il sito 3 volte e non acquista -> Offri uno sconto extra del 5% per 24 ore.” Questo è strettamente controllato dalle Regole sul margine (impostate nell’ERP). L’intelligenza artificiale è il “rappresentante delle vendite digitali” che sa esattamente quanta energia spremere per concludere l’affare.

12. Conclusione

Il B2B non è più il “brutto anatroccolo” dell’e-commerce. I marchi vincenti nella vendita all’ingrosso sono quelli che offrono un’esperienza simile al DTC. Astraendo la complessità dei prezzi e della logistica dietro un’interfaccia utente headless pulita, rispetti il tempo dell’acquirente. E nel B2B, il tempo è l’unica valuta che conta.

Vuoi espandere il tuo canale all’ingrosso?

Il tuo portale B2B è fermo agli anni ’90?

Progetta un moderno negozio B2B. Assumi i nostri architetti.