Skip to main content

Ticketing widget

Redeem tickets

This use case shows how to provide the option to redeem earlier purchased tickets at the time of purchasing new tickets.

Example case

The example case is of redeeming previously purchased tickets at the time of purchasing new tickets.

Demo

redeem-tickets.gif

Step-by-step guide

In order to implement the option to redeem tickets, follow these steps:

  1. In order to load the widget with the redeem functionality, you have to do the following:

    Loading elements

    • Load the loader script in the document header (<head>):

      <script src="https://widget.staging-enviso.io/loader.js"></script>

      This script will load some polyfills and the module loader for our elements.

    • Load the Ticketing Widget element by defining it in the document header:

      <script>enviso.load(['https://widget.staging-enviso.io/build-ts/components/tickets/enviso-ticket-widget-element.js']);</script>

      This loads the logic for the Ticketing Widget and all its dependencies.

    • Load the Enviso Redeem element by defining it in the document header:

      <script>enviso.load(['https://widget.staging-enviso.io/build-ts/components/basket/enviso-redeem-element.js']);</script>

    • Add the widget tag with the redeem element in a slot:

      <enviso-ticket-widget>
    <enviso-redeem slot="above-basket-items"></enviso-redeem>
</enviso-ticket-widget>

  2. Enter text for the end-user. Text can be provided as desired by overriding the translations.

    <script>
    enviso.settings.translations = {
        en: {
            'Plan your visit': 'Redeem tickets',
            'Select your tickets below.': 'Select tickets & redeem your previously purchased tickets in the basket.',
            'Please select the date and time of your visit.': 'Choose the timeslot you want to rebook on.',
            'Reduction': 'Redeemed tickets'
        },
        nl: {
            'Plan your visit': 'Tickets inwisselen',
            'Select your tickets below.': 'Selecteer tickets en wissel uw eerder gekochte tickets in de winkelmand in.',
            'Please select the date and time of your visit.': 'Kies het tijdslot waarop u wilt herboeken.',
            'Reduction': 'Ingewisselde tickets'
        },
        fr: {
            ...
        },
        de: {
            ...
        },
        es: {
            ...
        }
    };
</script>
    <script>
  enviso.settings.translations = { 
    en: { 
        'Plan your visit': 'Redeem tickets', 
        'Select your tickets below.': 'Select tickets & redeem your previously purchased tickets in the basket.', 
        'Please select the date and time of your visit.': 'Choose the timeslot you want to rebook on.', 
        'Reduction': 'Redeemed tickets' 
        }, 
    nl: { 
        'Plan your visit': 'Tickets inwisselen', 
        'Select your tickets below.': 'Selecteer tickets en wissel uw eerder gekochte tickets in de winkelmand in.', 
        'Please select the date and time of your visit.': 
        'Kies het tijdslot waarop u wilt herboeken.', 'Reduction': 'Ingewisselde tickets' 
        }, 
      es: { 
        'Plan your visit': 'Canjee boletos', 
        'Select your tickets below.': 'Seleccione boletos y canjee sus boletos comprados previamente en la cesta.', 
        'Please select the date and time of your visit.': 'Elija el intervalo de tiempo en el que desea volver a reservar.', 
        'Reduction': 'Boletos canjeados' 
        }, 
     fr: { 
        'Plan your visit': 'Échangez vos billets', 
        'Select your tickets below.': 'Sélectionnez les billets et échangez vos billets précédemment achetés dans le panier.', 
        'Please select the date and time of your visit.': 'Choisissez la plage horaire sur laquelle vous souhaitez réserver à nouveau.', 
        'Reduction': 'Billets échangés' 
        }, 
    de: { 
        'Plan your visit': 'Tickets einlösen', 
        'Select your tickets below.': 'Wählen Sie Tickets aus und lösen Sie Ihre zuvor gekauften Tickets im Warenkorb ein.', 
        'Please select the date and time of your visit.': 'Wählen Sie das Zeitfenster aus, für das Sie umbuchen möchten.', 
        'Reduction': 'Eingelöste Tickets' 
        } 
    };
</script>
<enviso-style for="enviso-basket-discount" hidden>
  :host { display: none; }
</enviso-style>
<enviso-ticket-widget>
  <enviso-redeem slot="above-basket-items">
  </enviso-redeem>
</enviso-ticket-widget>
In this section: