Chapter 4. Multi-service signup By the end of this section, you will be familiar with the procedure to create and customize a multiple-service signup page. If you are using the multiple services functionality, you are able to customize the signup procedure to allow customers to subscribe to different services. 4.1. Prequisites You should be familiar with layout and page creation procedures as well as with the basics of Liquid formatting tags. For more details about liquid tags, see Liquid reference . "Multiple Service" functionality must also be enabled on your account (available for Pro plan and up). It is strongly recommend that you read about signup workflows , so you will have the whole setup prepared and know how it works. 4.2. Introduction Start the process by creating a new layout, which will serve as the template for your multi-service signup page. Go into the Layouts section of the CMS system, and create the new layout. You can call it multipleservicesignup to be able to easily distinguish it from the other layouts. In the editor, paste the general structure of your standard layout (such as home or main layout). Now delete everything you do not need - all the containers, sidebars, additional boxes, etc . Having created the backbone of your layout, proceed to customizing the code for signup. 4.3. Multi-service signup 4.3.1. Retrieving information about services In order to retrieve all the information about the services that you need to construct the proper signup link, you have to loop through the service objects. Services are a part of the model object. 4.3.2. Configuring the signup columns You already have your layout and loop accessing the service objects. Now decide how you want to display information about the service and the signup link. For example, divide them into columns with a service description and a signup link at the bottom. Every column will be a div box with a service-column class to contain all the necessary information. The container inside serves as a custom description field. service.name is the service name, which in this case will be the container's name. 4.3.3. Configuring the subscription Now the main part of your custom service signup - to create the signup link, extract the signup URL and the service ID. Take the signup URL from URL's object and the service ID from your service object on which you iterate in the loop. The final link code will look like this: You also have to take into account that the user may already have signed up for some of your services. Create a conditional block to check. With this, you can generate the final code: 4.3.4. Styling Add some final touches to the generated markup, depending on the number of services you have. In the case of this example it is two, so the CSS code for the service-column div will be: In the example, we have used the percentage-based layout to dynamically assign the width of the column basic on the containing div's dimensions. Now you should have a properly working and good-looking multiple services subscription page. Congratulations! If you would like to display the columns in a specific order, try using conditional expressions (if/else/case) conditioning the service name or another value you know.

Commands:
{% for service in provider.services %} . . . {% endfor %}
{% for service in provider.services %} <div class="service-column"> <p>{{ service.name }}</p> <p>{{ service.description }}</p> . . . </div> {% endfor %}
<a href="{{ urls.signup }}?{{ service | toparam }}">Signup to {{ service.name }}</a>
{% unless service.subscribed? %} <a href="{{ urls.signup }}?{{ service | toparam }}">Signup to {{ service.name }}</a> {% endunless %}
{% for service in provider.services %} <div class="service-column"> <p>{{ service.name }}</p> <p>{{ service.description }}</p> {% unless service.subscribed? %} <a href="{{ urls.signup }}?{{ service | to_param }}">Signup to {{ service.name }}</a> {% endunless %} </div> {% endfor %}
.service-column { float: left; margin-left: 10%; width: 45%; } .service-column:first-child { margin-left: 0; }