Event Product Widgets

The Event Product Widgets include the widgets referring to the event type of product. The widgets are specifically designed to facilitate the management, display, and interaction with the event-related product within the website. They are essential components for handling event-specific merchandise.

To use the Event Product Widgets, make sure to drop the Product List widget onto the Layout Canvas and drop your required widget from the grouping inside the Product List.
You can access a single event product page from Pages > Ecommerce > Event Products.

Adding Event Product Widgets

After creating the product, you can add its associated widgets.

To add the Event Product Widgets:

Go to the Visual Editor from Channels on the Dashboard Left Panel.
Open Pages > Ecommerce > Event Product page.
Navigate to the Ecommerce > Event Product Widgets on the Visual Editor Left Panel.
Type the widget name in the search bar or find it in the widget grouping.
Drag the widget from the list and drop it into the Product List widget.

Configuring the Event Product Widgets

You can configure and edit all the widgets under this grouping using the widget Styles and Settings on the Property Panel.

Go to Styles to modify the necessary configuration of general styling features (see Global Styles). Global Styles are a set of predefined style settings that can be applied to widgets across the website. They provide a constant appearance by defining default styles for all the widget types.
Go to Settings to modify the Visibility of the widget on your website. Specifically, select who can view the widget according to the customer's location, session status, used device type, browser, language preference, etc. (see Visibility Settings).

Note: To get more widgets in the widget list of the Visual Editor, you need to add the product-related attributes from the Dashboard > Products > Fields.

To drop the product-related widgets within the Product List, hold down the CTRL while doing so.

Add to Cart

The Add to Cart widget encourages your customers to start the purchase process. The label text area can be customized to suit your product requirements.

Once you have added the Add to Cart widget, you can modify its Styles, Content (see Global Styles), and Settings (see Visibility Settings) from the Property Panel.

All the product-related information is generated from Dashboard > Events, where you set up the relevant details.

Go to Styles to modify:

States - you can customize the styles for different states, such as Active, Disabled, or Selected. For instance, when an item is out of stock and in a disabled state, you can apply specific styles to convey this to your customers.
Mode - you can customize the styles for different modes, such as Normal, Loading, Out of Stock, and Success. These customized style modes are visible to the public when interacting with the appropriate action.
You can also set the type of the button, whether it is a label, icon, or both of them.

2. Go to Content to modify:

Icon - you can change and customize the widget Icon. The supported Icon Styles are Outlined, Filled, Two Tone, and Animated.
Label - you can edit the button text/label.

3. Go to Settings to modify:

Added to Cart Action - when your customer adds a product to the cart, you have the option to choose the desired action:
- No Action
- Open on Cart Page
- Redirect to Cart Page

Added to Cart Action allows you to customize the behavior after adding a product to the cart. You can also customize the widget-specific modes from the Property Panel.

The following modes are available:

Normal - indicates the static state of the widget, referring to the state of the widget when it is not affected by any interaction.
Loading - indicates that it is currently processing or loading data. This often includes animations or indicators to show the loading state.
Out of Stock - alerts customers that the product is unavailable and cannot be purchased until it is restocked or becomes available again, either temporarily or permanently.
Success - indicates that a particular action or operation has been completed successfully. It is often used to provide positive feedback to the customer after they have taken a desired action.

Once you have customized each mode specifically, you can use the Dotted Menu to either Reset or Override the widget styles (see Button Widget).

Access Reset Styles to discard the changes made to the Add to Cart and restore its default style.
Access Override Styles to apply the changes made to the Add to Cart widget (font, size, alignment, etc.) to change its default style.

You can access the UI Elements available in the Design System from the upper-right corner of the Property Panel and select one as a base for the widget or create a new UI Element and style it according to your preferences.

Location Link

The Location Link widget refers to a URL or link that provides the location details. It includes information on the address and directions. The product-related information is generated from Dashboard > Events, where you set up all the relevant details.

Once you have added the Location Link widget:

Go to Styles and modify the widget styling features (see Global Styles) to customize the styles for different states, such as Normal and Hover.
Go to Content and modify its label text to be visible for the public mode.
Go to Settings and modify its Visibility Settings.

Ticket Chooser

The Ticket Chooser widget allows customers to select the type and quantity of tickets they want to purchase for an event. It provides a user-friendly interface for attendees to customize their ticket selection based on available options.

Once you have added the Ticket Chooser widget:

Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.

Customize the styles for different states, such as Normal and Hover.
Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.
2. Go to Settings and modify its Visibility Settings.

Schema

The Schema widget displays the layout and seating arrangement of the event. Attendees can view the seating plan and select their preferred seats or sections, providing them with a clear understanding of the event venue. The schema-related information is generated from the event creation flow of Dashboard > Events.

Once you have added the Schema widget:

Go to Styles and modify the widget styling features (see Global Styles) to customize the styles for different states, such as Normal and Hover.
Go to Settings and modify its Visibility Settings.

Selected Ticket

This Selected Ticket widget shows a summary of the ticket(s) the customer has chosen, including the ticket type, quantity, and total cost. It offers a quick reference for customers to review their selections before proceeding with the purchase. The ticket-related information is generated from the event creation flow of Dashboard > Events.

Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.

Customize the styles for different states, such as Normal and Hover.
Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.
2. Go to Settings and modify its Visibility Settings.

Event Date Info

The Event Date Info widget displays essential information about the event date and time. It helps attendees quickly identify when the event will take place and ensures they have accurate scheduling details. The date-related information is generated from the event creation flow of Dashboard > Events.

Once you have added the Event Date Info widget:

Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.

Customize the styles for different states, such as Normal and Hover.
Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs, based on the product type.
2. Go to Settings and modify its Visibility Settings.

Event Date Selector

The Event Date Selector widget allows customers to pick their preferred date from a list of available event dates. This is particularly useful for events with multiple dates, ensuring attendees can choose a schedule that suits them. The date-related information is generated from the event creation flow of Dashboard > Events, where you set up the relevant details.

Once you have added the Event Date Selector widget:

Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.

Customize the styles for different states, such as Normal and Hover.
Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.
2. Go to Settings and modify its Visibility Settings.

Once you are done with the Styles and Settings, you can create the UI Element of the widget or choose from the existing options.

Event Organizer

The Event Organizer widget showcases information about the team or company responsible for organizing the event. It provides attendees with insights into the event background and the organizers' credentials.

The organizer-related information is generated from Dashboard > Events, where you set up the relevant details.

Once you have added the Event Organizer widget:

Go to Styles and modify the widget styling features (see Global Styles) and layout of the widget.

Customize the styles for different states, such as Normal, Hover, and Active.
Customize the layout to match your product requirements by modifying the number of columns and rows, as well as adjusting the gap between them. This allows you to suit your specific needs based on the product type.
2. Go to Settings and modify its Visibility Settings.

Event Type

The Event Type widget specifies the category or genre of the event. This helps attendees understand the nature of the event, whether it's a concert, conference, sports event, or any other type of gathering.

The product-related information is generated from Dashboard > Events, where you set up the relevant details.

Once you have added the Event Type widget:

Go to Styles and modify the widget styling features (see Global Styles) to customize the styles for different states, such as Normal, Hover, and Active.
Go to Content and modify its label text to be visible for the public mode.
Go to Settings and modify its Visibility Settings.

Organizer Name

The Organizer Name widget displays the name of the entity organizing the event. It gives attendees a clear idea of who is responsible for the event management and coordination.