Rental Product Widgets

The Rental Product Widgets grouping includes the widgets referring to an item or service that is offered for temporary use or lease. The grouping includes a collection of widgets designed to facilitate the temporary lease of items.

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

Adding Rental Product Widgets

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

To add the Rental Product Widgets:

Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
Open Pages > Ecommerce > Rental Product page.
Navigate to the Ecommerce > Rental Product Widgets grouping 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 Rental 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).

To get more widgets in the widget list of the Visual Editor, you need to add the product-related fields from the Dashboard > Products > Fields.
To drop the product-related widgets within the Product List, hold down the CTRL while doing so.

Rent Now

The Rent Now 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 Rent Now widget, you can modify its Styles, Content (see Global Styles), and Settings (see Visibility Settings). The product-related information is generated from the Dashboard > Products > Rental, 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. These customized styles will be visible to the public when the product is out of stock.

2. Go to Content to modify:

Icon of the widget. Icon allows you to add or change the icon next to the item that best suits your website design. To do so:
- Click Change Icon.
- Go to General Icons and select the corresponding icon from the list.
- Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
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 mode 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.

In the case of out-of-stock, the public mode displays the out-of-stock disabled button, which is based on the Button (see Button Widget) widget customizations. You can style each mode with different colors or symbols to signify their status.

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

Access Reset Styles to discard the changes made to the Rent Now and restore its default style.
Access Override Styles to apply the changes made to the Rent Now 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.

Renting Options

The Renting Option widget refers to a choice that is available when renting a particular product or service.

Once you have added the Renting Option widget, you can modify its Styles, Content (see Global Styles), and Settings (see Visibility Settings). The product-related information is generated from the Dashboard > Products > Rental, where you set up the relevant details.

You can customize widget-specific modes. The following modes are available:

Hourly Rental - the option enables your customers to rent the product for a specific number of hours.
Daily Rental - the option enables your customers to rent the product for a full day.

In the Dashboard > Products, you can set Daily, Hourly, and Both (Daily and Hourly basis) options, and business hours from the Settings section within Dashboard.

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 the Dashboard > Products, where you set up all the relevant details. You can also add or change the location from Dashboard > Settings > Locations.

Once you have added the Location Link widget, you can modify its Styles, Content (see Global Styles), and Settings (see Visibility Settings).

Availability

The Availability widget refers to the time periods or dates during which a renting item is open for scheduling. It specifies the times when products can be rented based on your configured date and time availability. Public users can view the available time slots and choose a suitable one for their time.

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

Once you have added the Availability widget, you can modify its Styles (see Global Styles) and Settings (see Visibility Settings).