Example 3: Extending the product page

Like the Master template, the product page can be configured in a multitude of ways using the Rapido website settings (Figure 1.1), where the default Blocks can be moved around or hidden completely, depending on your needs.

Figure 1.1 The Rapido website settings

The process for extending the product page is exactly the same as it was for the Master template above. The only difference is that the custom template is located under Rapido/eCom/Products/Blocks/Custom__blocks.cshtml instead.

In this example, we will create a custom Insurance block and add it to the product page:

  • Open Rapido/eCom/Products/Blocks/Custom__blocks.cshtml in VS or equivalent
  • Add @using Dynamicweb.Rapido.Blocks.Extensibility to get a list of imported resources
  • Define an Insurance block and add it to the product page:
C%23
@{ BlocksPage customProductBlocks = BlocksPage.GetBlockPage("Product"); Block insuranceBlock = new Block { Id = "Insurance", Name = Translate("Insurance"), SortId = 101, Template = RenderInsurance(), Design = new Design { Size = "12", RenderType = RenderType.Column, HidePadding = true } }; customProductBlocks.Add(ProductBlockId.MainInformation, insuranceBlock); }

Note that we are adding a Design to the definition. This instructs Rapido to use a small grid builder – /Components/GridBuilder.cshtml – to render the Template content in a particular way. Of course, the RenderType selected must match the surroundings; the Tab type, for example, will only render when placed in a block using tabs.

Speaking of the Template content, create a helper with some appropriate markup:

C%23
@helper RenderInsurance() { <div class="product__section dw-mod"> <div class="u-border"> <div class="card-header u-color-light--bg dw-mod"> <h3><i class="far fa-shield"></i> @Translate("Insurance")</h3> </div> <div class="card u-color-light--bg dw-mod"> <p>@Translate("Get 4 years of great insurance against technical errors")</p> <p>@Translate("The insurance covers"):</p> <p> <ul> <li>@Translate("No risk")</li> <li>@Translate("4 years service at your home address")</li> <li>@Translate("All technical errors")</li> <li>@Translate("Water leaks")</li> </ul> </p> <a href="#">@Translate("Read more about the insurance policy here")</a> </div> </div> </div> }

After adding this helper, your product page should include the custom Insurance section (Figure 2.1).

Figure 2.1 The Insurance section in frontend

You can, of course, add the Block somewhere else – see the available extensibility points by adding @productsPage.GetBlocksStructure() at the bottom of the Products.cshtml template – or move it up and down inside a Block by changing the SortId. Tens – 10, 20, 30, etc. – are used by Rapido.