Campi fiscali POP su carrello per store Shopify non-Plus

Obiettivo

Aggiungere i campi fiscali POP (tipo cliente, P.IVA, Codice Fiscale, PEC/SDI) al carrello e/o cart drawer su uno store Shopify non-Plus (Basic/Grow/Advanced), senza Checkout UI Extension.

Prerequisiti

• Account Shopify non-Plus.
• Accesso al codice del tema (theme.liquid o sezione del carrello).

Passi

1. Incolla lo script pop-noplus-embed.js (fornito da POP, caricato da pub.popapi.io) poco prima di </body> in theme.liquid, o nella sezione/template del carrello, preceduto dal blocco window.POP_EMBED_CONFIG con i tuoi parametri.

2. Esempio di configurazione completa per uno store italiano (mode: 'sdi'), con testi personalizzati:

   <script>
     window.POP_EMBED_CONFIG = {
       mode: 'sdi',
       scope: 'b2b+b2c',
       cartContainerSelector: '.cart__blocks',
       drawerContainers: [
         { selector: '.drawer__footer', insertMode: 'prepend' }
       ],
       insertMode: 'prepend',
       customerOptions: ['private', 'company', 'freelance'],
       toggle: { enabled: true, label: 'Aggiungi dati di fatturazione' },
       taxCodeOptOut: {
         enabled: true,
         label: 'Non ho un Codice Fiscale italiano / sono un cliente estero',
         note: 'Se sei un cliente estero, puoi procedere senza Codice Fiscale.'
       },
       labels: {
         title: 'Dati di fatturazione',
         customerType: 'Tipo cliente',
         private: 'Privato',
         company: 'Azienda',
         freelance: 'Libero professionista',
         vat: 'Partita IVA',
         taxCode: 'Codice Fiscale',
         pec: 'PEC o Codice Destinatario',
         vatPlaceholder: 'IT12345678901',
         taxPlaceholder: 'RSSMRA80A01H501Z',
         pecPlaceholder: 'tua@pec.it / Z4G7P1Q'
       },
       prefill: {
         customerType: '{{ cart.attributes.pop_customer_type | default: customer.metafields.app.pop_customer_type | default: "private" | escape }}',
         vat: '{{ cart.attributes.pop_vat | default: customer.metafields.app.pop_vat | default: "" | escape }}'
       }
     };
   </script>
   <script defer src="https://pub.popapi.io/shopify/scripts/pop-noplus-embed.min.js"></script>

3. Salva il tema.

Personalizzare i testi (labels)

Ogni testo visibile è sovrascrivibile tramite labels: {...} — se ometti una chiave, resta il valore di default (in inglese, salvo toggle.label e taxCodeOptOut.label/note che di default sono già in italiano):

Alternativa senza script esterno

Se preferisci un form autonomo (HTML+CSS+JS inline, senza caricare uno script esterno da pub.popapi.io), sono disponibili snippet drop-in pronti per copia-incolla, uno per modalità, nel repository pubblico pop-snippets-library: cart-attributes-for-sdi.liquid, cart-attributes-for-peppol-b2b.liquid e cart-attributes-for-peppol-b2b-b2c.liquid. Coprono meno casi (nessun supporto zugferd/ksef dedicato) ma non richiedono di gestire POP_EMBED_CONFIG.

Verifica

1. Aggiungi un prodotto al carrello.
2. Apri la pagina carrello (o il cart drawer, a seconda di dove hai inserito i container).
3. Compila i campi (es. Partita IVA).
4. Procedi al checkout.
5. Controlla che POP riceva i dati al momento della generazione della fattura (vedi shopify-fiscal-data-management per dove verificarli sull’ordine).

Errori comuni

• I campi non compaiono su una pagina — se il container CSS indicato (cartContainerSelector o drawerContainers) non esiste in quella pagina, lo script semplicemente non mostra nulla: non è un errore, verifica il selettore.
• Passare da “azienda” a “privato” non svuota i campi — è il comportamento atteso solo se il cambio non viene intercettato: in peppol/zugferd il cambio a “privato” svuota la P.IVA, in sdi svuota anche PEC/SDI, sincronizzando subito gli attributi carrello.
• Store Shopify Plus — non serve modificare il tema: usa la Checkout Extension nativa POP invece dello script embed.

Configurazione correlata

Su store non-Plus, obbligatorietà e opzioni dei campi si configurano qui nello script embed (customerOptions, taxCodeOptOut), non nella sezione Settings > Checkout (quella riguarda solo Shopify Plus, vedi shopify-checkout-vat-tax-code-fields).