In this blog, we will be working on the Why Choose Us? component which looks like below screen:

The section contains the fields like – Image, Title, Summary & CTA. So we will create a template for the About item and inherit the CTA template in it. Also we will set presentation details to this template as it creates an About page.

1. Lets create a template under Common folder (/sitecore/templates/Sitecore Demo/Common)
   
2. Inherit the CTA and Summary templates in the current template.
3. Click on Content tab, double click on CTA and Summary to select.
   
4. Add an icon to the template.
5. Create another template under Pages (/sitecore/templates/Sitecore Demo/Pages) & name it About page.
6. Click on Content tab and Select About item from the Common folder that we recently created.
   
7. Add an icon to the template.
8. In the Builder options >> Click on Standard Values.
9. Presentation tab >> Details.
   
10. Click Edit >> Set the layout.
    
11. Click OK >> OK.
12. Create an About folder in Media Library (/sitecore/media library/Sitecore Demo/About) an upload the picture.
    
13. Go to the Home item (/sitecore/content/Home).
14. Right Click >> Insert >> Insert from template.
15. Select the About page template and Name the item as “About”.
16. Fill in the necessary data.
    
17. Copy the html in the Summary field.
    
18. Publish the site.
19. Go to Visual Studio. Create a View – About.cshtml and copy the html markup from the index.html.
    
20. Open the Common_Templates.tt file and Save it.
21. The code that will replace the HTML to create the About section is as below:
    @using Sitecore
    @using Sitecore.Mvc
    @using Sitecore.Data
    @using Sitecore.Data.Items
    @using DummyWebsite@{
    //Extract the current Db
    Database currentDb = Sitecore.Context.Database;

    //Get the item /sitecore/content/Home/About
    Item aboutItem = currentDb.GetItem(“{3F7AD0A7-6836-499C-95F9-E553FFD0BB45}”);
    }

    <!– chose_area –>
    <div class=”chose_area “>
    <div class=”container”>
    <div class=”features_main_wrap”>
    <div class=”row align-items-center”>
    <div class=”col-xl-5 col-lg-5 col-md-6″>
    <div class=”about_image”>
    @Html.Sitecore().Field(Templates.AboutItem.Fields.Image_FieldName, aboutItem)
    </div>
    </div>
    <div class=”col-xl-6 col-lg-6 col-md-6″>
    <div class=”features_info”>
    <h3>@Html.Sitecore().Field(Templates.AboutItem.Fields.Title_FieldName, aboutItem)</h3>
    @Html.Sitecore().Field(Templates.Summary.Fields.Summary_FieldName, aboutItem)
    <div class=”about_btn”>
    @Html.Sitecore().Field(Templates.CTA.Fields.Link_FieldName, aboutItem, new {
    text = @Html.Sitecore().Field(Templates.CTA.Fields.Text_FieldName
    , aboutItem),
    @class = “boxed-btn3-line”
    })
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!–/ chose_area –>

22. Publish the Visual Studio solution.
23. Go to Sitecore Rendering item (/sitecore/layout/Renderings/Sitecore Demo) and create a View Rendering with a name – “About Section”.
    
24. Publish this rendering and Go to the Home Item (/sitecore/content/Home).
25. Click on Presentation tab >> Details >> Edit >> Controls >> Add button.
    
26. Select the About 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.
    
27. Click Select >> OK >> OK. Publish the Home item.
28. Browse the front end site (http://sitecoredemo.dev.local/).
    
29. Now the component is bound on the Home page. But technically, the About and Facts section should be above Testimonials section.
30. So to do that, we will go to Home item (/sitecore/content/Home).
31. Click on Presentation tab >> Details >> Edit >> Controls.
    
32. Click on About Section rendering and click Move Up button twice so that it will move above Testimonial Section rendering.
33. Similarly, click on Facts Scetion and click on Move Up button once.
    
34. Click OK >> OK. Publish Home item and browse the front end site.
    
35. Since we had created About page, try to access (http://sitecoredemo.dev.local/en/About) by click the About us button in the About Us button.
36. Now we can see the Header and Footer on the About page.
    
37. So we need to add the Following Components to the About page:
    a. Banner
    b. About Section
    c. Facts Section
    d. Tagline component
    e. Featured Services Component
    f. Testimonial Section.
38. Go to Banners item under Global (/sitecore/content/Global/Banners).
39. Right Click >> Insert >> Banner. Name it About Banner.
40. Update the Title to “About Us”. Upload the Image in the About folder of Media Library and Add it to this item.
    
41. Go to the About item (/sitecore/content/Home/About). And add the Main Banner Rendering with placeholder key as “main” & data source as “About Banner” to it.
    
42. Add About section component with main as placeholder key.
    
43. Add the Facts Section component with main as placeholder and Facts and Figures Folder from Global as a data source.
    
44. Add the Safe Secure Tagline component with main as placeholder & Safe and Secure Tagline from Home item as a data source.
    
45. Add the Featured Services component with main as placeholder & Features from Global as a data source.
    
46. Add the Testimonials component with main as placeholder & Testimonials from Global as a data source.
    
47. The total rendering components will be as below:
    
48. Click OK >> OK.
49. Publish the site. Browse the Front site for About page. (http://sitecoredemo.dev.local/en/About)
    
50. If we compare this page with About.html from the extracted folder then the Banner is totally different.
51. So create a View in Visual Studio. Copy the HTML markup from About.html.
    @using Sitecore
    @using Sitecore.Mvc
    @using Sitecore.Mvc.Presentation
    @using Sitecore.Data
    @using Sitecore.Data.Items
    @using Sitecore.Data.Fields
    @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 item = currentDb.GetItem(datasource);

    ImageField imgField = item.Fields[Templates.Banner.Fields.Image_FieldName];
    string ImagPath = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imgField.MediaItem);

    }

    <style>
    .bradcam_bg_1 {
    background-image: url(@ImagPath);
    }
    </style>

    <!– bradcam_area –>
    <div class=”bradcam_area bradcam_bg_1″>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-xl-12″>
    <div class=”bradcam_text text-center”>
    <h3>@Html.Sitecore().Field(Templates.Banner.Fields.Title_FieldName, item)</h3>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!–/ bradcam_area –>
    

52. Publish the View.
53. Go to Rendering items. Duplicate the Main Banner rendering item and rename it to Inner Banner. And the change path field for it.
    
54. Go to About Item >> Presentation tab >> Details >> Edit >> Controls.
55. Remove the Main Banner rendering. Add the Inner Banner rendering with placeholder key as “main” and Data source as “About Banner” item.
    
56. Move the Inner Banner rendering component to the top.
    
57. Click OK >> OK. Publish the About item.
58. Browse the About page on Front end.
    

This completes our “Why Choose Us?” component, so we saw that with minimal efforts we created a new page that is About page. We could create it with ease because we had already created the components rendered on this page. In the next blog, we will work on last but not lease, the ‘Services’ section for Home page.

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