In this blog, we will be working on the Facts & Figures component which looks like below screen:

The section contains the fields like – Success Figures & Supporting Text. So we will create a template for the FactsNFigures item and will also create one container that will have all the Facts and Figures items.

1. Lets create a template under Facts and Figures folder (/sitecore/templates/Sitecore Demo/Facts and Figures)
   
2. Add an icon to the template.
3. Create a new template under Containers & name it as “FactsNFigures Folder”.
   
4. Add Standard Values under Builder Options and set insert Options as Testimonial Item.
   
5. Lets create a content in Global folder based on these templates.
6. Create a Facts and Figures folder under Global based on FactsNFigures Folder template.
   
7. Create a item with name ‘Success 1’ under it.
8. Right Click on Facts and Figures Folder >> Insert >> FactsNFigures Item.
   
9. Fill in the required fields as per your inputs or the index.html file.
   
10. Similarly create other facts and figures items.
    
11. Publish the site in Sitecore.
12. Open visual studio, create a View & name it as FactsSection.cshtml.
13. Copy the HTML markup for Counter section from the index.html to this view.
    
14. Copy & Paste Banner_Templates.tt file and rename as Facts_Templates.tt.
    
15. Change model from “Banners” to “Facts and Figures”. And Save it
    
16. Lets assume that the Facts & Figures will be passed to the view as a Data source and code it accordingly.
    @using Sitecore.Mvc
    @using Sitecore.Mvc.Presentation
    @using Sitecore.Data
    @using Sitecore.Data.Items
    @using DummyWebsite
    @{
    //Extract the current Db
    Database currentDb = Sitecore.Context.Database;//Get the value of the Datasource
    string datasource = RenderingContext.Current.Rendering.DataSource;

    //Get the datasource item
    Item datasourceItem = currentDb.GetItem(datasource);
    }

    <!– counter_area –>
    <div class=”counter_area”>
    <div class=”container”>
    <div class=”offcan_bg”>
    <div class=”row”>
    @foreach (Item item in datasourceItem.GetChildren())
    {
    <div class=”col-xl-3 col-md-3″>
    <div class=”single_counter text-center”>
    <h3> <span class=”counter”>@Html.Sitecore().Field(Templates.FactsNFiguresItem.Fields.SuccessFigure_FieldName, item)</span> <span>+</span> </h3>
    <p>@Html.Sitecore().Field(Templates.FactsNFiguresItem.Fields.SupportingText_FieldName, item)</p>
    </div>
    </div>
    }
    </div>
    </div>
    </div>
    </div>
    <!– /counter_area –>
    

17. Publish the Visual studio solution.
18. Go to Sitecore Rendering item (/sitecore/layout/Renderings/Sitecore Demo) and create a View Rendering with a name – “Facts Section”.
    
19. Publish this rendering and Go to the Home Item (/sitecore/content/Home).
20. Click on Presentation tab >> Details >> Edit >> Controls >> Add button.
    
21. Select the Facts Section rendering that we recently created and type main (because in the Main.cshtml we have given placeholder key as “main” for dynamic binding) as a value in placeholder field.
    
22. Check the Open the properties checkbox and click Select.
23. In the Data Source field, select the Facts and Figures folder which we created under Global folder.
    
24. Click OK >> OK >> OK. Publish the Home item.
25. Browse the front end site.
    

This completes our Facts & Figures component, in the next blog we will work on the ‘Why Choose Us?’ section.

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂