Writing a custom frontend

The Shop allows you to write a custom frontend to sell your tickets.

To implement a storefront similar to shop.eventjet.at/[shop-slug], follow these basic steps:

1. Retrieve all events and event groups available in your shop. If your shop sells tickets for a single event, you can skip to Step 2.

   You need the slug of the shop to fetch the events. You can find it in the Eventjet backend under "My Shop". Don't worry if you change the slug later; previous slugs will still work, although the Shop.slug field will always return the current slug.

   query GetEvents($shopSlug: ID!, $locale: String!) {
     shop(slug: $shopSlug) {
       events {
         ... Event
       }
       eventGroups {
         name(locale: $locale) # Name of the event group in the specified locale
         events {
           ... Event
         }
       }
     }
   }
   fragment Event on Event {
     id                     # The ID of the event. You will need this to fetch the event details.
     name(locale: $locale)  # The name of the event in the given locale
     earliestStart          # The start of the event
   }
   query GetEvents($shopSlug: ID!, $locale: String!) {
     shop(slug: $shopSlug) {
       events {
         ... Event
       }
       eventGroups {
         name(locale: $locale) # Name of the event group in the specified locale
         events {
           ... Event
         }
       }
     }
   }
   fragment Event on Event {
     id                     # The ID of the event. You will need this to fetch the event details.
     name(locale: $locale)  # The name of the event in the given locale
     earliestStart          # The start of the event
   }
   

2. Fetch the list of available ticket types for an event.

   query GetEvent($shopSlug: ID!, $eventId: ID!, $locale: Locale!) {
     shop(slug: $shopSlug) {
       event(id: $eventId) {
         items {
           id                     # The ID of the ticket type. You will need this to add tickets to the cart.
           name(locale: $locale)  # The name of the ticket type in the given locale
           price {
             amount
             currency {
               code
             }
           }
         }    
       }
     }
   }
   query GetEvent($shopSlug: ID!, $eventId: ID!, $locale: Locale!) {
     shop(slug: $shopSlug) {
       event(id: $eventId) {
         items {
           id                     # The ID of the ticket type. You will need this to add tickets to the cart.
           name(locale: $locale)  # The name of the ticket type in the given locale
           price {
             amount
             currency {
               code
             }
           }
         }    
       }
     }
   }
   

   Note: Full documentation for seat tickets is not yet available, but you can explore ShopEvent.seatmaps for more details.

3. Use the setCartItemQuantity mutation to add tickets to the cart. You can also use this mutation to increase or decrease the number of tickets in the cart or to remove all tickets of a certain type by setting the quantity to 0.

   To add the first ticket to the cart, just pass the cartId as null. The mutation will create a new cart and return the ID of the cart. You can use this ID to modify the cart later.

   mutation AddToCart($shopSlug: ID!, $itemId: ID!, $quantity: Int!, $cartId: ID!) {
     setCartItemQuantity(
       shopSlug: $shopSlug, # From Shop.slug (See step 1)
       itemId: $itemId,     # From ShopItem.id (See step 2)
       quantity: $quantity, # The number of tickets the user wants to buy
       cartId: $cartId      # The ID of the cart. You will need this to fetch the cart details.
     ) {
       cart {
         id                 # The ID of the cart. Pass this to other cart-related queries and mutations.
         items {
           name
           quantity
         }
       }
     }
   }
   mutation AddToCart($shopSlug: ID!, $itemId: ID!, $quantity: Int!, $cartId: ID!) {
     setCartItemQuantity(
       shopSlug: $shopSlug, # From Shop.slug (See step 1)
       itemId: $itemId,     # From ShopItem.id (See step 2)
       quantity: $quantity, # The number of tickets the user wants to buy
       cartId: $cartId      # The ID of the cart. You will need this to fetch the cart details.
     ) {
       cart {
         id                 # The ID of the cart. Pass this to other cart-related queries and mutations.
         items {
           name
           quantity
         }
       }
     }
   }
   

4. To place an order, you need to attach the customer's data to the cart first. To find out which data you need to provide, use the Shop.checkoutForm field.

   query GetCheckoutForm($shopSlug: ID!, $locale: String!) {
     shop(slug: $shopSlug) {
       checkoutForm {
         elements {
           label(locale: $locale)
           ...LeafFormElement
           ...on CompoundFormElement {
             elements {
               ...LeafFormElement
             }
           }    
         }
       }
     }
   }
   fragment LeafFormElement on FormElement {
     name
     required
     ... on ChoiceFormElement {
       multiple
       choices {
         value
         label(locale: $locale)
       }
     }
   } 
   query GetCheckoutForm($shopSlug: ID!, $locale: String!) {
     shop(slug: $shopSlug) {
       checkoutForm {
         elements {
           label(locale: $locale)
           ...LeafFormElement
           ...on CompoundFormElement {
             elements {
               ...LeafFormElement
             }
           }    
         }
       }
     }
   }
   fragment LeafFormElement on FormElement {
     name
     required
     ... on ChoiceFormElement {
       multiple
       choices {
         value
         label(locale: $locale)
       }
     }
   } 
   

5. Use the applyCustomerDataToCart mutation to attach the customer's data to the cart.

   Each FormValueInput must have a key and a value. The key must match the name of a FormElement from the checkoutForm field (see step 4). Elements nested in a CompoundFormElement must be prefixed with the name of the CompoundFormElement and a dot (e.g. address.postalCode). Values for Boolean elements must be bool:1 or bool:0.

   mutation ApplyCustomerDataToCart($cartId: ID!, $data: [FormValueInput!]) {
     applyCustomerDataToCart(input: {cartId: $cartId, data:  $data}) {
       cart {
         id
       }
     }
   }
   mutation ApplyCustomerDataToCart($cartId: ID!, $data: [FormValueInput!]) {
     applyCustomerDataToCart(input: {cartId: $cartId, data:  $data}) {
       cart {
         id
       }
     }
   }
   

6. To query the available payment methods, use the Cart.paymentMethods field.

   query GetPaymentMethods($cartId: ID!) {
     cart(id: $cartId) {
       paymentMethods {
         key
         name
       }
     }
   }
   query GetPaymentMethods($cartId: ID!) {
     cart(id: $cartId) {
       paymentMethods {
         key
         name
       }
     }
   }
   

7. Use the placeOrder mutation to place the order.

   mutation PlaceOrder($cartId: ID!) {
     placeOrder(input: {
       cartId: $cartId,
       paymentMethodKey: $cartId, # One of the keys from the `paymentMethods` field (see step 6)
     }) {
       redirectUrl
     }
   }
   mutation PlaceOrder($cartId: ID!) {
     placeOrder(input: {
       cartId: $cartId,
       paymentMethodKey: $cartId, # One of the keys from the `paymentMethods` field (see step 6)
     }) {
       redirectUrl
     }
   }
   

8. Redirect the user to the URL returned by the placeOrder mutation. This URL will take the user to the payment provider's website where they can complete the payment.

   After the payment is completed, the user will be redirected to a confirmation page on shop.eventjet.at. The is currently no way to customize this page or to redirect the user back to your website.

Here's a list of root fields you can use to interact with the shop:

• Query.cart
• Query.checkEmail
• Query.orderStatus
• Query.seatmap
• Query.shop
• Mutation.addSeatToCart
• Mutation.applyCodeToNewCart
• Mutation.applyCustomerDataToCart
• Mutation.applyDiscountCode
• Mutation.applyTicketHolderDataToCart
• Mutation.attributeCart
• Mutation.consumeCartFlashMessages
• Mutation.extendCartExpiration
• Mutation.placeOrder
• Mutation.removeDiscountCodeFromCart
• Mutation.removeItemFromCart
• Mutation.removeSeatFromCart
• Mutation.setCartItemQuantity
• Mutation.setCartVolumeQuantities