Skip to main content

Ticketing widget

Redeem membership

This use case shows how to provide the option to redeem previously purchased tickets using your membership card.

Example case

The example case is of redeeming previously purchased tickets using your membership card.

Demo

redeem-membership.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': 'Book tickets using your membership card', 
        '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', 
        'Enter ticket number': 'Enter membership number', 
        'The purchased tickets price will be deducted from the price of your current order': 'The purchased tickets will be paid for with your membership card' 
        }, 
    nl: { 
        'Plan your visit': 'Boek tickets met uw lidmaatschapskaart', 
        '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', 
        'Enter ticket number': 'Voer lidmaatschapsnummer in', 
        'The purchased tickets price will be deducted from the price of your current order': 'De gekochte tickets worden betaald met je lidmaatschapskaart' 
        }, 
    es: { 
        'Plan your visit': 'Reserve boletos usando su tarjeta de membresía', 
        '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', 'Enter ticket number': 'Ingrese el número de membresía', 
        'The purchased tickets price will be deducted from the price of your current order': 'Los boletos comprados se pagarán con su tarjeta de membresía' 
        }, 
    fr: { 
        'Plan your visit': 'Réservez vos billets avec votre carte de membre', 
        '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', 'Enter ticket number': 'Entrez le numéro de membre', 
        'The purchased tickets price will be deducted from the price of your current order': 'Les billets achetés seront payés avec votre carte de membre' 
        }, 
    de: { 
        'Plan your visit': 'Tickets Buchen mit Ihrer Mitgliedskarte', 
        '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', 
        'Enter ticket number': 'Mitgliedsnummer eingeben', 
        'The purchased tickets price will be deducted from the price of your current order': 'Die gekauften Tickets werden mit Ihrer Mitgliedskarte bezahlt' 
        } 
    };
</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: