Example 4: Extending the Product List

Extending the Rapido product list is a little bit more complex than extending other areas of Rapido due to two things:

  • The product list is Ajax-based, and you will often be extending inside a Handlebars script template.
  • You often want to add custom list views which requires both a button for selecting the view and templates for the view

All in all, you should carefully consider if you can accomplish the same thing using configuration before attempting to extend the product list. All custom code will extend the codebase you have to maintain, and possibly rework when you upgrade to a more recent version of Rapido.

That said, here’s how you extend the product list with a custom list view:

  • Open the Rapido/eCom/ProductList/Blocks/Custom__Blocks.cshtml template
  • Add @using Dynamicweb.Rapido.Blocks.Extensibility to get a list of imported resources
  • Define a custom block:
C%23
@{ BlocksPage customBlocksPage = BlocksPage.GetBlockPage("ProductList"); Block customView = new Block { Id = "ProductCustomItemContainer", Name = "table", SortId = 50 }; customBlocksPage.Add("Views", customView); }

When extending a product list, the Block Id must be identical to the id used in the script template that renders the product item container, and the Name must reference a Font Awesome icon.

Next, add the script template:

C%23
<script id="ProductCustomItemContainer" type="text/x-template"> {{#.}} <div id="Product{{id}}" class="grid__col-md-12 product-list__details-item grid--direction-row grid--justify-space-between u-no-padding-x dw-mod" data-template="ProductTableItem" data-preloader="overlay"> {{#Product}} {{>ProductCustomItem}} {{/Product}} </div> {{/.}} </script> <script id="ProductCustomItem" type="text/x-template"> {{#.}} <div class="grid__cell u-padding"> <div class="u-pull--left"> <a href="{{link}}" onclick="Scroll.SavePosition(event); {{googleImpressionClick}}" title="{{name}}"> {{name}} </a> </div> <div class="u-pull--left u-margin-left">#{{number}}</div> <div class="u-pull--right">{{price}}</div> </div> {{/.}} </script>

After adding the script template the product list now has a new list view (Figure 1.3):

Figure 1.3 A custom List View