Building Home page components – Facts & Figures

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

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)
    304
  2. Add an icon to the template.
  3. Create a new template under Containers & name it as “FactsNFigures Folder”.
    305
  4. Add Standard Values under Builder Options and set insert Options as Testimonial Item.
    306
  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.
    307
  7. Create a item with name ‘Success 1’ under it.
  8. Right Click on Facts and Figures Folder >> Insert >> FactsNFigures Item.
    308
  9. Fill in the required fields as per your inputs or the index.html file.
    309
  10. Similarly create other facts and figures items.
    310
  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.
    311
  14. Copy & Paste Banner_Templates.tt file and rename as Facts_Templates.tt.
    312
  15. Change model from “Banners” to “Facts and Figures”. And Save it
    313
  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 –>
    314

  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”.
    315
  19. Publish this rendering and Go to the Home Item (/sitecore/content/Home).
  20. Click on Presentation tab >> Details >> Edit >> Controls >> Add button.
    316
  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.
    317
  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.
    318
  24. Click OK >> OK >> OK. Publish the Home item.
  25. Browse the front end site.
    319

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.. šŸ™‚

One thought on “Building Home page components – Facts & Figures

  1. Pingback: Building Home page Components ā€“ Testimonials | Sitecore Dairies

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s