Building Home page Components – “Why Choose Us?”

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

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)
    321
  2. Inherit the CTA and Summary templates in the current template.
  3. Click on Content tab, double click on CTA and Summary to select.
    322
  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.
    323
  7. Add an icon to the template.
  8. In the Builder options >> Click on Standard Values.
  9. Presentation tab >> Details.
    324
  10. Click Edit >> Set the layout.
    325
  11. Click OK >> OK.
  12. Create an About folder in Media Library (/sitecore/media library/Sitecore Demo/About) an upload the picture.
    326
  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.
    327
  17. Copy the html in the Summary field.
    328
  18. Publish the site.
  19. Go to Visual Studio. Create a View – About.cshtml and copy the html markup from the index.html.
    329
  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 –>330

  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”.
    331
  24. Publish this rendering and Go to the Home Item (/sitecore/content/Home).
  25. Click on Presentation tab >> Details >> Edit >> Controls >> Add button.
    332
  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.
    333
  27. Click Select >> OK >> OK. Publish the Home item.
  28. Browse the front end site (http://sitecoredemo.dev.local/).
    334
  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.
    335
  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.
    336
  34. Click OK >> OK. Publish Home item and browse the front end site.
    337
  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.
    338
  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.
    339
  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.
    340
  42. Add About section component with main as placeholder key.
    341
  43. Add the Facts Section component with main as placeholder and Facts and Figures Folder from Global as a data source.
    342
  44. Add the Safe Secure Tagline component with main as placeholder & Safe and Secure Tagline from Home item as a data source.
    343
  45. Add the Featured Services component with main as placeholder & Features from Global as a data source.
    344
  46. Add the Testimonials component with main as placeholder & Testimonials from Global as a data source.
    345
  47. The total rendering components will be as below:
    346
  48. Click OK >> OK.
  49. Publish the site. Browse the Front site for About page. (http://sitecoredemo.dev.local/en/About)
    347
  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 –>
    348

  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.
    349
  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.
    350
  56. Move the Inner Banner rendering component to the top.
    351
  57. Click OK >> OK. Publish the About item.
  58. Browse the About page on Front end.
    352

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.. 🙂

2 thoughts on “Building Home page Components – “Why Choose Us?”

  1. Pingback: Building Home page components – Facts & Figures | 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