Activity Product List is a widget that shows a list of selected products. The list shows pictures, duration and prices for the selected products.
If the product is selected you are moved to the next step in the booking process and can finalise the booking.
The product widget is an easy solution to set up a simple booking website e.g. for a conference or some other event where limited quantity of products are offered.
Here is an example of the product list widget:
The Activity product list, only works in conjunction with:
- Product List - this is where you select the products that should be available on your website.
- Activity Product Page - this is the widget that is the second step in the booking process. When the customer selects a product from the product list, they are redirected to Activity Product Page.
This is how the widgets are connected together and the widget you need for this setup:
- You need to create one product list widget.
- Then you create one product page widget, that is connected to your product list widget
- Next you need to have time selector widget, and connect that one to the Product page widget
- Lastly you need to have one checkout widget, that is connected to your time selector.
Create the widget
To create new widgets you have to go to the widget page. To go to the widget page select the gear icon in top right corner then you select “Widget” from the side bar:
Select “add” to create the widget.
This page appears and here you choose the widget that you need to create, in this case we select “Activity Product List” from the list.
There are few parameters that need to be set and they will be described step-by-step.
Title: it is good to create a descriptive title to remember which product list is connected to this widget. As an example: "Activity product list - Best seller"
Display type: Here you are selecting where the products on the list are coming from. You are going to select "Preselected product list".
The other option "Shore excursion products" is used in the case you are using a feature called shore excursions. This feature is related to arrivals of cruise ships and allows you to select products and dates depending on cruise ships arrival times.
Product list: Here you are selecting the product list you are going to connect to this widget.
Product columns: here you are selecting how many columns will be visible on your site. In the example at the top of the page there are 4 columns.
When product is selected: Here you are selecting what happens after the product has been selected. You are deciding where you are going to send the customer next, after he selects one of the products from your list.
You have 2 options.
- Go to product page widget: This option is most commonly used and means the customer will go directly to the "product page" that is the next step. In that step the customer selects his date and how many passengers there are. The product page also gives more information on the selected activity.
Here is an example of a product page:
- Redirect to another page: This options is also commonly used. This option allows you to send the customer to another page (URL) after he selects the product from the list. This is used e.g. if you would like to embed the "product page widget" to a separate page, because it is better for the design if your site. When you select the "Redirect to another page you add to the "Redirect URL" field the URL you are going to send your customer to. This could be
- . Note: that you have to embed your Product page widget to the URL you add to the redirect URL field.
Resource References, Custom Head and Custom CSS/LESS: These options allow you to change the lok and feel of your booking engine with CSS or Java Script. Here you can find more information on how to change the look and feel of your booking engines
Remember to save before continuing, so you wont loose your work.