Integrare la vendita di biglietti nel proprio sito¶

Per la vendita di biglietti DiKAS mette a disposizione una vista ospiti snella e ottimizzata per i dispositivi mobili. Mostra solo biglietti d'ingresso, data, quantità, disponibilità e carrello. Acquisto e pagamento passano poi per lo stesso checkout verificato del normale shop online.

Requisiti¶

La biglietteria eventi è attiva in Admin → Impostazioni → Attività. Lo shop online (ordinazione online) non è necessario.
Almeno un articolo biglietto ha una configurazione del biglietto e un contingente.
Orari della pagina ospiti e fornitore di pagamento sono configurati e testati.
Il sito del cliente funziona in HTTPS.
L'origine esatta del sito del cliente è nota, ad esempio https://www.mio-locale.it. Un percorso come /tickets non fa parte dell'origine.

Abilitare in DiKAS¶

La pagina delle impostazioni è in tedesco su tutti i sistemi.

Aprire Admin → Online-/QR-Einstellungen → Allgemein (impostazioni online/QR → generale) e in alto attivare la modalità Esperto.
Attivare Einbettung als iFrame erlauben (consenti l'integrazione come iFrame).
In Erlaubte Website-Adressen (indirizzi web consentiti) inserire un'origine completa per riga, ad esempio:

https://www.mio-locale.it
https://mio-locale.it

Salvare.

I due indirizzi con e senza www sono tecnicamente diversi e, se necessario, vanno inseriti entrambi. Caratteri jolly e siti di terzi non sono consentiti di proposito. Amministrazione, cassa, ingresso e portale clienti restano per principio bloccati all'integrazione.

Codice per il sito del cliente¶

Sostituire SUO-INDIRIZZO-DIKAS con l'indirizzo pubblico dell'attività:

<iframe
  id="dikas-ticketshop"
  title="Acquista biglietti"
  src="https://SUO-INDIRIZZO-DIKAS/shop/tickets"
  loading="lazy"
  referrerpolicy="no-referrer"
  style="width:100%;min-height:680px;border:0;border-radius:16px"
></iframe>

<script>
  window.addEventListener('message', function (event) {
    if (event.origin !== 'https://SUO-INDIRIZZO-DIKAS') return;
    if (event.data?.type !== 'dikas:ticket-shop:height') return;
    const frame = document.getElementById('dikas-ticketshop');
    frame.style.height = Math.max(480, Number(event.data.height) || 0) + 'px';
  });
</script>

Il controllo di event.origin non deve essere rimosso. Il messaggio sull'altezza non contiene dati dei clienti; evita soltanto una seconda barra di scorrimento. Senza lo script l'integrazione funziona comunque con l'altezza minima fissa.

Uso su dispositivi mobili¶

Sugli schermi piccoli le schede dei biglietti passano automaticamente a una sola colonna. Data, quantità, acquisto e carrello hanno ampie aree touch. Il sito che integra non dovrebbe costringere l'iframe in un contenitore con larghezza fissa in pixel o con overflow:hidden. Nell'intestazione della pagina deve essere presente la seguente voce viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Collaudo¶

Aprire il sito del cliente in larghezza iPhone/Android e su desktop.
Verificare che non compaia alcun avviso del browser «connessione rifiutata».
Scegliere una data (se c'è una sola data, è già fissata); deve comparire «Ancora N disponibili» oppure «Esaurito».
Mettere più biglietti nel carrello e aprire il checkout.
Pagare per intero un acquisto di prova e controllare PDF/QR.
Far entrare una volta lo stesso biglietto con la schermata d'ingresso mobile; la doppia scansione deve fallire.
In Admin → Tickets confrontare numero di vendite, biglietti aperti e contingente.

Alternativa all'integrazione¶

Un normale link o pulsante verso la biglietteria online è tecnicamente più robusto se il sito ha regole molto rigide su cookie, frame o consenso.