Managing Conditionality in Subcomponents

As of Release 94 of Limio, you'll see that we now have an exciting new feature that we like to call Conditional Subcomponents. 

With Conditional Subcomponents, you'll be able to configure exactly how you want your Form checkout to appear, depending on certain order conditions.

Want certain address fields to only appear when checking out with the card payment option? Done! With Conditional Subcomponents, we're giving you even more control so you can customise your checkout experience and make it even more flexible for your user's needs.

How to get started

1. Create a new Page using our Pagebuilder v2 experience and add the Form component

2. Open up the Subcomponent Editor by pressing "Edit Subcomponents"

3. Add your first component

4. Create a Condition

This will determine when a subcomponent should be visible based on the specific criteria that you select. Expand the Subcomponent accordion and navigate to the Conditions tab to get started

First, you will need to select an attribute from the dropdown menu. See the table at the bottom for all options.

Once you have selected an attribute, two new fields will appear:

Now you can choose an operator. In this example, I've selected "Payment method selected". This means I will now have the choice of two operators - is one of & is not one of.

Once I've selected an operator, I can now select from the options dropdown to configure how I want this condition to behave.

For example:

If I select:

Payment method selected + is one of + Zuora Card Payment

my First Name Field will now only show if that condition is met by the user. If they select the Card payment option, it will be visible. If they select any other payment method, they will not see the payment field.

If I changed that to:

Payment method selected + is not one of + Zuora Card Payment

the opposite would apply. If they select the Card payment option, it will not be visible. If they select any other payment method, they will see the payment field.

Once you are happy with your choice, you can save, rebuild and republish the page as normal and test it for yourself.

Available Attributes

Attribute	Operator(s)	Value	Details
Payment method selected	is one of / is not one of	Select one or more of your configured payment methods	This condition will change the visibility of a subcomponent depending on which payment method is selected by the user at checkout.
Trial offer in basket	is	True or false	This condition will change the visibility of a subcomponent if the user is purchasing a trial offer.
Student offer in basket	is	True or false	This condition will change the visibility of a subcomponent if the user is purchasing a student offer.
Gift offer in basket	is	True or false	This condition will change the visibility of a subcomponent if the user is purchasing a gift offer.
Product in basket	is one of / is not one of	Select one or more of your configured products	This condition will change the visibility of a subcomponent depending on the product(s) configured on the offer that the customer is purchasing.
Delivery product in basket	is	True or false	This condition will change the visibility of a subcomponent depending on whether the customer is checking out with offers that have product(s) configured with delivery options.
Order price	equals / not equals	user input (number)	This condition will change the visibility of a subcomponent if the order total is equal to a certain value.
Company name provided	is	True or false	This condition will change the visibility of a subcomponent if the user has filled out the company name field (customerDetails.companyName) or not.