Input Groups

If Blocks are the building-blocks the template is build on, Inputs are the mortar. This is where your settings and rules are defined and the key part of what separates Alpaco from other email editors.

Only users with role Designer or Admin can access and edit Settings

This is where the magic happens and where Alpaco is really set apart from any ESP or other platform. Both the Base and every Block has their own inputs.

Inputs is per default scoped, but unique to Alpaco they can all be accessed between each other, meaning an Input in Base can affect a Block, but also the other way around.

• Inputs can be grouped into an Input group.

• Input groups can be Repeatable.

• Inputs comes in different types.

Input group

Everything starts with an Input Group as we need to organize which elements needs to be parteded from eachother. In the Right panel you'll see an Input Group with a "Name" and a "Key" To create a name for the Input Group, Insert the "Name" and "Key" in the Right panel. The "Name" Can be with capital letters and spaces as it's used for display only. In this example we will call it My Input Group Name and the "Key" my_input_group_name as it's used for the Liquid rules.

The naming scheme inserted here will be prefixed to anything existing in that Input group. We suggest you name them more or less the same as not to create confusion later on.

It is also wise to consider at this stage what this group should contain - like inputs that are only to be filled out once, or maybe we want these inputs to be repeateable.

In the example we've inserted a simply Input type Text to explain the naming scheme in Input groups

Repeatable

Say you wanted a part of your Inputs to be repeated in an infinite amount. This is a nice feature for when you want something like a button, a list item or a product-tile repeated, all by a click of a button. This can be done for all inputs contained within each Input group and is an immensely powerful feature as this can be configured to not only iterate, but to count, to vary between odd and even and various ways later on, if you for instance wanted to:

"Change the code if there are 3 product-tiles, but not if there are 2"

This is a core-feature of how Alpaco is configurable and it's only the imagination that limits the possibilities for this feature.

The way to enable it, is to switch the checkbox saying "Repeatable" on an Input group.

In our example here we created an Input group, gave it a name like "Button" and checked the "Repeatable". Notice below the platform helps you with the liquid code. The key buttonis the Input group key and the collections.button indicates it's something that is repeated, what we call a "Repeatable" and in Liquid what is known as a for-loop.

Wrap your element in the code it provides you, like so:

{% for button in collections.button %}

{% endfor %}

This is an example of a Input Group with a Repeatable. It contains a Button text and a Button link that can be repeated

Cross reference Inputs

Sometimes you want to have different inputs affect each other in various ways. For instance:

"If Block-1 is inserted into Base, change the background color of the body tag in Base"

or

"For each Repeated product-tile that is repeated in Block-1, insert some new CSS in the head tag of Base"

The rules and combinations could be between Base and Blocks, and vice versa or it could be between Blocks - there's are very few limitations to this feature, so long as your naming convention is kept neat and concise.

In order to access inputs across Blocks and Base, simply pre-fix the input you're trying to target with the Block name/Base name that is visible in the Left panel. + Input group key in Right panel. + input key in the Right Panel. This can be done with any type of rule and any type of Input type Like so:

block-name.input-group-key.input-key 

Or in this instance, we're trying to access a forloop for a Block-1 in the Base, it would be done like so:

{% for button in block-1.collections.button %}
    .button_{{ forloop.index }}{
     left: 10px;
    }
   {% endfor %}

The code above will access the Block-1's button in collections.button to be used in the Base. In this example we're injecting a class called button_ and giving it a number for each iteration that it's clicked on. For each button that is inserted in the Block, it will create a new class with a unique number added to the style tag of Base.

The same principle can be applied the other way around from Base to Block and between Blocks.

Here we're injecting code from Block-1 into the Base. Foreach iteration that is clicked in Block-1, it will create another class in Base

Next up we will look into the different Input types that can be used in Input groups.