Skip to main content

The Frontend Setup

As discussed on the Getting Started Page Slerp's structure requires actions to be performed in a certain order to ensure the correct prices and options are available to the user.

In brief these steps are:

  • Choose how to order (eg: delivery or pickup)
  • Select a date and store to order form (eg: today from the London store)
  • Select a time to collect (eg: ASAP or 6.30pm)
  • Select products and any modifiers (eg: a burger with cheese and chips)
  • Enter details and check out / pay.

Why is it like this:​

The short answer is this is the product of years of testing and learning to balance the varied needs of a wide range of partners with the desire to achieve the best conversion for our partners and UX for their customers.

Can I make changes to this flow.​

Yes this is possible and these possibilities are called out below, however please consider this may limit flexibility for your clients in future.

1) Date, Time and Location:​

Choose How to Order​

This has to come first as Slerp allows for different opening times at different stores by delivery type, so a store could be open 9-5pm each day for collection but only Friday and Saturday evening for Delivery.

  • If only one order type is ever going to be needed you can hard-code that type and skip this step
  • It is possible to switch this step with selecting a date.

Select a Date​

This comes next as opening times can vary by day, so once we know it's delivery we need to know the date to be able to show the right stores.

Select a store​

Once we know the Date the user is ordering for we can display the stores open on that day and let the user choose a time slot.

  • If only one store is needed the store step can also be skipped and hard-coded although this limits flexibility to expand later
  • If statements can be used to skip this step and auto select the store if only 1 store is returned.
  • If a user is making a delivery order we will ask for an address to determine what stores are available to the user.

Select a timeslot​

Once the store is selected display the timeslots for that store to allow a user to proceed to adding items.

  • Time slots are returned in an array and can be set in numbered increments (mins / hours) or fixed timeslots eg (arriving 10am-2pm) depending on the user config.
  • If only one timeslot is returned or the store will always only be for ASAP orders this step can be skipped
  • If statements can be used to skip this step if only one timeslot is returned while still informing the user of the available time.

2) Products:​

We must know the above before showing products for a few reasons:

  • Stock and availability can be different by store
  • Prices can be different by store
  • Product availability can be different by time of day or order type
  • It is very frustrating for a user to only find out when they try to checkout that the product they want is either not available or more expensive. This allows us to short-circuit that.

Products​

Products themselves can also have variants (eg: Jam vs Custard in a doughnut).

Modifiers​

Once a product has been chosen we can choose modifiers eg: Extra cheese on a pizza.

3) Checkout:​

Once Products have been added to a cart a user can checkout. The checkout will also need to make an API call to validate the steps taken in stage 1 are still valid. eg: to stop a user ordering at 1pm for 12.30 (which is in the past.)