Developing on Rapido with Blocks and Components in the most efficient way, requires you to have some background knowledge. This section will briefly explain some of the useful concepts, that will ease your experience with Block and Component development. If you feel like you still lack some ability and know-how, this section will provide you with the tools needed to become a successful Rapido developer.
Replacing a block with a component
In this example we will replace the Everything is on sale block you created during example 1 with a Button component instead of the Template parameter and a helper method (Figure 1.3).
- Open the /MasterBlocks/Custom__Blocks.cshml template
- Open the /components documentation for your solution – www.yoursolution.url/components
- Define a new block and use a component instead of a template to create a button, e.g.:
In this example, I use a Button component with a number of properties; a title, a link to the products page, and a Base css class to make it full width, emulating the look of the previous SalesHeader block. I then add it to the MasterHeader extensibility point.
The result is almost identical to the original header (Figure 2.2) – to make it completely identical, with font size and button height, you could create a custom CSS class in the Ignite CSS project and use that on the component in addition to the Base class.
Using component helpers directly
If you want to use a component outside of a block you can call the Razor helper methods directly – this can be useful if you want to avoid adding complexity to the Blocks tree:
All components are designed the same way; helper methods all have the Render prefix, all have only one property set on the method, and that property is always an object with the same name as the component.
While there are many simple components available – e.g. Checkbox, TextField, and Number – the Field component allows you to quickly switch between field types using the FieldType property:
While the Field component is a little more restricted than the specialized components, it is a great alternative when switching between field types in an easy manner, is a priority.
All fields that contain a list of options – Radio buttons, Checkbox list and Select fields – are designed the same way and use the same FieldListOption object, which means that it is easy to switch between list types.
List options can be defined both outside and inside a block, as in the following examples:
In addition to using the components delivered by us you can also create your own custom components. Before embarking on this, though, ask yourself whether you’re trying to solve a local problem or a global problem? If the answer is local – which means you will only need this component in one or two places – we advise you to instead use the standard Template property & a helper method way of rendering a block.
Let’s say you’ve been asked to create a Magical3DImageViewer component – this is a two-step process, since all components consist of a definition and a helper:
- Open Templates/Designs/Rapido/Components/Custom/Custom__Components.cshtml
- Write a simple definition like this:
- Only one method parameter should be allowed
- Create the components consistently – always name the method property settings, etc.)
- If you create a property for a Component that is a type, like “Align”, it should not be of the type string but of type Enum. This makes it much easier to use the component.
- Consider what should be done to secure that it is easy to shift between similar components.
- Never render empty attributes – see TextField.cshtml “optionalAttributes” to get an example of how this can be avoided.
- Ensure that your component can be used without setting optional properties
- Make proper null-checks – it’s better to do this once too often than to never do it
- Keep things that relate to the particular component inside the helper. Do not make weird dependencies.
- Re-use General components inside other components, whenever it makes sense – like the Image component for all images and the Button component for all buttons.
Please note that the component MUST have a unique name – we recommend a name which will not collide with future standard components, e.g. YOURCOMPANYNAME_Magical3DImageViewer
Good to know
This section will provide you with knowledge regarding different aspects of Blocks and Components development. Below, you will find different tips and tricks, that improves your skills as a developer and eases the process of finding specific codes and Blocks. Please read the different sections below, to increase your comfortability with development in Rapido.
Find the code without knowing the location
Instead of being frustrated because you can’t find the code you are looking for, just do a simple search.
We have put a lot of work into naming things properly in Rapido.
Find the code by knowing the location
For some, this is the classic approach. It simply requires you to learn the file structure of Rapido. Firstly, you will find everything in the “Files/Templates/Designs/Rapido” folder.
From this folder, the repeated folder design looks like this: Area -> Subarea -> Blocks folder This, for example, translates to: eCom7/CartV2/Step/Blocks. You can always find the “Custom__blocks.cshtml” file in the Blocks folder, and the root Blocks structure are always defined in files in the folder containing the Blocks folder.
Knowing where a specific block starts and ends
On your page you can add “?debug=true” to the URL. One of the debugging benefits while debug is on, is that you can inspect the page and then get a little more help. On the elements tab in the inspector, you can now see comments on where the Blocks start and ends.
Locate a lost block
If you are missing a Block that should have been on the site, or it is at a different location than you thought, you can always print out the Blocks structure. The easiest way to do this, is to locate the file containing the root Blocks structure.
In the top locate the BlocksPage variable. In Cart.cshtml it is “checkoutPage”. Then, in the bottom of the file, write: checkoutPage.GetBlocksByStructure() Then refresh the page in the browser and look though the structure. This should provide you with the information you need.