Lagom WHMCS Client Theme Documentation
Docs v2.x
/ /website-builder/ /extensions/ /module-integration/ /order-form/

# Configurable Options Manager

Lagom WHMCS One Step Order Form introduces an advanced tool, which allows to easily manage and customize configuration options for every WHMCS product. You can now set up different product configuration layouts for every WHMCS product.

In the below article you will find information on how to use its functions. Every function will be described based on the exemplary use cases from our demo page (opens new window) in order to better understand all the features.

# Configurable Option Groups

This page lists product configurable option groups available in the WHMCS system. Learn more how to create a configurable option group by reading WHMCS documentation (opens new window).

# Group Settings

Since 1.1.0 version, every configurable option assigned to a specific product will be shown as a new section in the order process.

By clicking the "Edit" button next to a single configurable option group, you will be able to change that behaviour by activating the "Configurable Options Displayed In Single Section" option. When activated, every configurable option in this specific group will be shown under a single section, where configurable options will be shown as sub-sections. See examples:

  1. Configurable options shown as new sections - When "Configurable Options Displayed In Single Section" option is disbaled.
  2. Configurable options shown as sub-sections - When "Configurable Options Displayed In Single Section" is enabled.

Once "Configurable Options Dispalyed In Single Section" option is activated, the below settings will be shown.

# Title

Set up the "Title" which will be used for your new order section. This field is required.

# Description

If needed, enter additional description, so your customers would be able to better understand settings available in this section. This field is optional, you can leave it empty, so no description will be shown.

# Description Type

This option allows you to decide how the above description should be shown in the ordering process.

# 1. Default
# 2. Tooltip

# Configurable Options

This page lists all configurable options assigned to specific groups. Learn more how to create configurable fields, by reading WHMCS documentation (opens new window).

# Option Settings

By clicking the "Edit" button next to a specific configurable option, you can define how it should be displayed in your order process. The below modal displays different fields, based on selected values in "Option Type" select.

# Title

There is no "title" field, because configurable options use names created in the WHMCS configurable option settings. Learn more how to change the option title by reading WHMCS documentation (opens new window).

# Description

This option works the same way as the "Description" field in the configurable option group - learn more.

# Description Type

This option works the same way as the "Description Type" field in the configurable option group - learn more.

# Option Type

Option type allows to choose how configurable options will be shown in your order. There are multiple options, however, not all of them will be visible. These options are dependent on the "option type" which you selected in your WHMCS system, learn how to change configurable option in WHMCS documentation (opens new window).

  1. System Default - option which is selected by default, if this option is selected, specific configurable option will be shown as configured in WHMCS settings (opens new window).
  2. Radio Box - options available for the below types:
    • Radio
    • Dropdown
  3. Check Box - options available for the below type:
    • Yes/No
  4. Slider/Quantity - options available for below type:
    • Quantity
  5. Group Box - options available for the below types:
    • Radio
    • Dropdown
  6. Product Box - options available for the below types:
    • Radio
    • Dropdown
  7. Addon Box - options available for the below types:
    • Radio
    • Dropdown
# Hide Zero Prices

When this option is selected, the order form will not display any 0.00 prices.

# Option Management

Option Management is ONLY available for the below "option types":

  1. Radio Box
  2. Group Box
  3. Product Box
  4. Addon Box

# Suboptions

This page lists the available suboptions created for specific configurable options. Configuration of these suboptions is available in WHMCS system (opens new window).

Take a look below at an exemplary "suboptions" management page.

# Manage Suboption

Click "Edit" button, to perform further management of specific suboption.

  1. Description - Add further explanation for managed suboption, when left empty no description will be shown
  2. Image - Assign an image to the suboption. This filed lists graphics added to the addon in Media Library.
  3. Color

# Groups

This tab allows to create new groups and assign suboptions. Below you will find an exemplary list of groups for "Server Location" section.

# Add/Manage Group

Click the "Edit" button to perform management of a specific group. To create a new group you have to click the "Add Group" button in the top right corner.

  1. Name - Main group name.
  2. Description - Provide further explanation for the created group, when left empty no description will be shown.
  3. Enable - Allows you to hide a specific group by switching the selector.
  4. Image - Assign an image to the group. This filed lists graphics added to the addon in Media Library.
  5. Suboptions - Choose suboptions which should be shown under a specific group. You have to assign at least one suboption, otherwise the group will not be shown during the order.

# Group Types

Groups will be displayed on the order form as tabs or group boxes, depending on the selected option type.

# Tabs
# Boxes

When "Group Box" option type is selected, groups will be displayed as boxes, where suboptions will be shown as dropdown items:

# Option Types

This section presents and provides further explanation for all available "option types". These types can be assigned to every configurable option.

# Radio Box

When "Radio Box" type is selected, all suboptions will be shown as separate "radio boxes". This type can be selected only for the below option types assigned in WHMCS system (opens new window):

  • Radio
  • Dropdown

In our demo page (opens new window), this option is used to display:

# Available Elements

  1. Name - The above example presents "name", which is divided into two lines. This can be achieved by adding comma , sign to the configurable option name - see example.
  2. Image - It is suggested to use an image with at least 42px width.
  3. Description - Display the suboption description.
  4. Price - Display the suboption price.

# Group Box

"Group Box" type requires at least one group to be created. This type can be selected only for the below option types assigned in WHMCS system (opens new window):

  • Radio
  • Dropdown

In our demo page (opens new window), this option type is used to display:

# Available Elements

  1. Image - It is suggested to use an image with at least 72px width.
  2. Name - Display the suboption name.
  3. Description - Display the suboption description.
  4. Selected Suboption - This field displays the selected suboption and its price, when selected from the suboptions list.
  5. Suboptions List - Displays the list of suboptions assigned to a specific group. This list does NOT support "image" and "description" for suboptions, so even if selected, it will not be displayed on this list.

# Product Box

When the "Product Box" option type is selected, it will display configurable options as product boxes. This type can be selected only for the below option types assigned in WHMCS system (opens new window):

  • Radio
  • Dropdown

In our demo page (opens new window), this option type is used to display:

# Available Elements

  1. Image - It is suggested to use an image with at least 64px width.
  2. Name - Display the suboption name.
  3. Price - Display the suboption price.
  4. Description - You are allowed to use HTML code in this field, in the above example the below code has been used:
<ul class="package-features"><li><b>1</b> vCPU</li><li><b>10 GB</b> Memory</li><li><b>4 TB</b> Bandwidth</li></ul>

# Addon Box

When the "Addon Box" type is selected, new fields will be shown. This type can be selected only for below option types assigned in WHMCS system (opens new window):

  • Radio
  • Dropdown

In our demo page (opens new window), this option is used to display:

# Management

# Illustration Type

Choose from 4 different types for the graphic container.

# 1. Default

This type uses a container with 198px width, all graphics placed in this container will be shown with maximum width of 198px:

# 2. Icon

This type uses container with 64px width, its been designed to be used with Lagom WHMCS Client Theme (opens new window) icons:

# 3. Illustration

This option is designed to work with illustrations available in Lagom WHMCS Client Theme (opens new window).

# 4. Small Illustration

This option works the same way as the above type, with the difference that the illustration is smaller.

# Available Elements

  1. Image - Displays the image assigned to this configurable option.
  2. Name - Displays the name asssigned to this configurable option.
  3. Description - Displays the description asssigned to this configurable option.
  4. Suboptions List - Displys the list of suboptions assigned to this configurable option.

# Checkbox

Currently this option type does not have any management options.

# Slider/Quantity

Currently this option type does not have any management options.

# Exemplary Configuration

In this section we will provide detailed insctruction on how to prepare product configuration, for every product group available in our demo page (opens new window).

# Web Hosting

Web Hosting product group in our demo page, does not contain any configurable options.

# VPS Hosting

VPS Hosting product group in our demo page, uses multiple option types, described below.

# Server Location

Learn how to create "Server Location" section, similar to the example below.

# WHMCS Configuration
  1. Create new configurable option group (opens new window) and name it, for example "Server Location - Boxes".
  1. Assign a newly created group to appropriate products in the "Assigned Products" section.
  2. Create a new configurable option and name it for example "Server Location".
  3. Create each location as a new configurable suboption. Use "commas" between city and country name, so the title will be divided in two parts - learn more
# Order Configuration
  1. Go to the "Lagom One Step Order" → "Miscellaneous" → "Configurable Options".
  2. Find the previously created group and click on the "Options" button.
  1. Click the "Edit" button, next to the "Server Location" configurable option.
  1. Choose "Group Box" in "Option Type" field.
  1. Save changes and click "Options" button next to the "Server Location" row. You will be redirected to the page with all the suboptions assigned to "Server Location".
  1. Open the "Groups" tab and create the correct groups. Remember to assign correct suboptions in the "Suboptions" field.
  1. Once done, you will see the list of created groups.

# Server Image

Learn how to create "Server Image" section, similar to the example below.

# WHMCS Configuration
  1. Create a new configurable option group (opens new window) and name it, for example "Server Image - OS & Apps".
  1. Assign newly created groups to appropriate products in the "Assigned Products" section.
  2. Create a new configurable option and call it for example "Server Image".
  3. Create operating systems as new suboptions. Use "dividers" between name and version, so the title will be divided in two parts - learn more
  1. This list should also include applications. These options will be grouped in the next steps.
# Order Configuration
  1. Go to "Lagom One Step Order" → "Miscellaneous" → "Configurable Options".
  2. Find the previously created group and click on the "Options" button.
  3. Click the "Edit" button, next to the "Server Image" config option.
  4. Configure the configurable option group based on the below example.
  1. Save changes and click the "Options" button next to the "Server Image" row. You will be redirected to the page with all suboptions assigned to "Server Image" option.
  1. Click on "Edit" button next to each suboption to assign a correct image.
  1. Open the "Groups" tab and create the correct groups. Remember to assign correct suboptions in the "Suboptions" field.
  1. Once ready, you will see the list of created groups.

# Configure Server

Learn how to create "Configure Server" section, similar to the example below.

# WHMCS Configuration
  1. Create a new configurable option group (opens new window), each VPS product will use different config groups, so call it for example "VPS - Configure Server (VPS-1)".
  1. Assign a newly created group to the first product in the "VPS Hosting" group.
  2. Create new configurable option and name it for example:
    • "CPU Cores"
    • "RAM"
    • "Storage"
  3. Create suboptions for each of the above configurable options. The first suboption needs to contain a value which is assigned to a specific package. For example, if your first VPS package contains "1 vCPU", then the same value needs to be added to the first suboption. The first value should be set as "free", because it is already included in the package price.
  1. Repeat the above steps for every VPS package.
# Order Configuration
  1. Go to "Lagom One Step Order" → "Miscellaneous" → "Configurable Options".
  2. Click the "Edit" button, next to the "VPS - Configure Server (VPS-1)" config option.
  3. Configure configurable option group based on the below example.

  1. Save changes and click the "Options" button next to the "VPS - Configure Server (VPS-1)" row.

  2. Click on "Edit" button next to each option, to perform correct configuration, based on the below example.

  1. Repeat the above steps for every VPS config group.

# Available Addons

Learn how to create "Available Addons" section, basing on the below example.

# WHMCS Configuration
  1. Create a new product addon (opens new window) and assign it to VPS products.
# Order Configuration
  1. Go to "Lagom One Step Order" → "Miscellaneous" → "Product Addons".
  1. Click on the "Edit" button next to the addon which you would like to manage.
  2. Perform configuration based on the below example.

# Dedicated Servers

Dedicated Servers product group in our demo page, use multiple option types, described below.

# Server Location

Learn how to create "Server Location" section, similar to the example below.

# WHMCS Configuration
  1. Create a new configurable option group (opens new window) and name it, for example, "Server Location - Tabs".
  1. Assign the newly created group to appropriate products in "Assigned Products" section.
  2. Create a new configurable option and namae it for example "Server Location".
  3. Create locations as new suboptions. Use "dividers" between city and country, so the title will be divided in two parts - learn more
# Order Configuration
  1. Go to "Lagom One Step Order" → "Miscellaneous" → "Configurable Options".
  2. Find the previously created group and click on the "Options" button.
  3. Click the "Edit" button next to the "Server Location" configurable option.
  1. Configure the option following the below example.
  1. Save changes and click the "Options" button next to the "Server Location" row. You will be redirected to the page with all suboptions assigned to "Server Location".
  1. Configure each location as shown in the below example.
  1. Open the "Groups" tab and create the correct groups. Remember to assign correct suboptions in the "Suboptions" field.
  1. Once done, you will see the list of created groups.

# Operating System & Control Panel

Learn how to create "Operating System" and "Control Panel" sections similar to the example below:

# WHMCS Configuration
  1. Create a new configurable option group (opens new window) and name it, for example "OS & Control Panel".
  1. Assign the newly created group to appropriate products in the "Assigned Products" section.
  2. Create a new configurable option and call it for example "Operating Systems" and "Control Panel".
  3. Create systems and applications as new suboptions.
# Order Configuration
  1. Go to "Lagom One Step Order" → "Miscellaneous" → "Configurable Options".
  2. Click the "Options" button next to the "OS & Control Panel" configurable option group.
  3. Configure each configurable option based on the below example.
  1. Save the changes and click the "Options" button next to the "Operating System" row.
  1. Open the "Groups" tab and create a group for each operating system, based on the example below.
  1. Once completed, you will see the results similiar to the presented below.
  1. Repeat the above steps to complete the configuration of "Control Panel" configurable option.

# Configure Hardware

Configuration of this section is similar to the configuration of "Configure Server" in VPS Hosting product.

# Configure Network

Configuration of this section is similar to the configuration of "Configure Server" in VPS Hosting product.

# Services

Configuration of this section is similar to the configuration of "Configure Server" in VPS Hosting product.

# Vultr Reseller

Vultr Reseller product group in our demo page was designed to present how the Vultr (opens new window) product can be presented in the WHMCS system using our product.

Receive $100 free credits to start reselling Vultr services by clicking this url (opens new window).

# Products

Each "Server Type", available in Vultr (opens new window) deploy page, has been created as a separate WHMCS product. Below, there is a screenshot from the Vultr deploy page:

Important: The possibility to assign graphics to the product packages will be introduced in the future product versions.

Products in WHMCS system:

# Server Location

This section uses the same configurable options group as "Server Location" section in the Dedicated Servers product group.

# Server Image

This section use the same configurable options group as "Server Image" section in the VPS Hosting product group.

# Server Size

Learn how to create a "Server Size" section, similar to the below example.

# WHMCS Configuration

Each product in this group uses its own configurable option group.

  1. Create a new configurable options group (opens new window) for the first product in this group, and call it for example "Vultr Products - Cloud Compute".
  1. Assign the newly created group to appropriate products in the "Assigned Products" section.
  2. Create a new configurable option and call it for example "Server Size".
  3. Create suboptions with specific server size. As you can see in the below example, every option starts from the group name. This group name will be automatically removed from the package title, if the groups are created using the same strings.
    • AMD High Performance
    • Intel High Performance
    • Intel High Frequency
    • Intel Regular Frequency
  1. Follow the above configuration for every product in this group.
# Order Configuration
  1. Go to the "Lagom One Step Order" → "Miscellaneous" → "Configurable Options".
  2. Find the "Vultr Products - Cloud Compute" option group and click "Options" button.
  3. Click "Edit" next to the "Server Size" option and perform its configuration based on the below example.
  1. Save changes and click the "Options" button.
  2. Edit each of the suboptions and paste correct description based on the below example:
<ul class="package-features"><li><b>2</b> vCPU</li><li><b>2 GB</b> Memory</li><li><b>5 TB</b> Bandwidth</li></ul>
  1. Go to "Groups" tab and create below categories:
    • AMD High Performance
    • Intel High Performance
    • Intel High Frequency
    • Intel Regular Frequency
  1. Once completed, you should see a tabel like the one below.

# Available Addons

This section uses the same configurable options group as "Available Addons" section in VPS Hosting product group.

# Reseller Hosting

Reseller Hosting product group in our demo page, does not contain any configurable options.

# Additional Fields Translation

All fields related to configurable options, including groups and suboptions, and order fields where you can enter a name or description can be translated to any language using the Smarty Langs method. Take a look below to learn how to do that easily.

  1. Open the option you wish to transalte in the addon, for example edit one of your configurable options ("Lagom One Step Order Form" → "Miscallanous" → "Configurable Options").
  2. Enter the Smarty code into the field that you intend to translate instead of your text, e.g .: {$_LANG.ToBeTranslated}
  1. Next, open your language file, for example italian.php and add a new entry at the very bottom: $_LANG['ToBeTranslated'] = "Titolo Tradotto";. As a reesult, you will receive "Titolo Tradotto" visible in the order form.

Important! It is possible to add translations from both the module level and directly in the WHMCS files. If you wish to add translation from the WHMCS level you will have to use a different variable that the one used in case of module translations, i.e.: $_LANG:

WHMCS:
$LANG - without the "_" sign in the middle

Exemplary entries:

  • field in the addon: {$LANG.Titolo Tradotto}
  • line in the language file: $LANG['Titolo Tradotto'] = "Titolo Tradotto";

← Languages →