In this blog, we will build the Banner component end to end i.e. from creating template, creating Media items, content and renderings. So when the individual developers take an responsibility of the components, they create it in similar fashion.

The Main Banner on the Home page is like:

So how we can see it as is:
Image
Title
HeadLine
CTA Text – To be inherited from CTA template
CTA Link – To be inherited from CTA template

1. Go to the Sitecore (http://sitecoredemo.dev.local/sitecore)
2. Go to Content Editor >> Template >> Sitecore Demo >> Banners.
3. Right click on Banners template folder >> Insert >> New template and name it Banner.
4. Add the fields – Title, HeadLine and Image
   
5. Lets inherit the CTA template under Common in this template. Click on Content tab and double click on CTA template.
   
6. Save the changes and configure the icon for the template.
   
7. Click on the Builder Options tab and Standard Values.
   
8. Enter $name in Title field as a default value.
   
9. In the Containers template folder we will create one Container folder for Banner and name it “Banners Folder”. And set an icon to the template.
   
10. Click on the Builder Options tab >> Standard values. Go the Insert options section. In case if you cant see any sections then go to View tab and click on Standard fields check box.
    
11. Now we can create a content in Content under Global folder.
12. Add the Banners folder under Global.
    
13. Right Click on Banners >> Insert >> Banner and Name it as “Main Banner”.
    
14.  Lets save the background image and upload it in the Media Library.
    
15. Go back to Main Banner item and insert the image there. Also add the CTA text as “Our Services”. Link we will add once the Service Listing page is ready.
    
16. We are ready with the Sitecore Content now. Lets move to Visual studio solution.
17. Create a new view MainBanner.cshtml and copy the HTML markup for the Banner from index.html under the Logistico template folder.
    
18. First lets create a rendering in Sitecore, assign it to Home item and see if it is rendering on front end then we will fetch the content from Sitecore.
19. Go to /sitecore/layout/Renderings/Sitecore Demo and create a View Rendering & name it “Main Banner”.
    
20. Lets assign it to the Home item (/sitecore/content/Home). Click on Presentation tab >> Details.
    
21. Click on the Edit click.
    
22. Click on Controls >> Add.
    
23. Expand Rendering and select the Main Banner rendering.
    
24. Add the placeholder key (“main”) in the Add to Placeholder textbox as highlighted in Green in above screenshot. The key “main” is used as we used it for dynamic binding in the Main.cshtml. So this rendering will replace that placeholder in the Main.cshtml file.
25. Click on Select. >> OK >> OK.
26. Publish the site.
    
27. Once the publish is completed. Publish MainBanner.cshtml from Visual Studio and load the front end (http://sitecoredemo.dev.local/)
    
28. So now we have to fetch the content from Sitecore.
29. Go to Home item >> Presentation tab >> Details >> Edit >> Controls.
30. Select the Main Banner rendering and click Edit.
    
31. In the Data source field, click Browse and select the Main Banner item under Global.
    
32. Click OK >> OK >> OK.
33. Publish the Home item.
34. Move to Visual Studio solution.
35. Copy & paste Common_Templates.tt file and rename it to Banner_Templates.tt file. Change the value of models to “Banners”.
    
36. Open the MainBanner.cshtml file and add the below namespaces and code to fetch the data source item.
    @using Sitecore
    @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 item = currentDb.GetItem(datasource);
    }

37. Lets replace the hard coded values by the Sitecore Content.
    The title can be replaced by : @Html.Sitecore().Field(Templates.Banner.Fields.Title_FieldName, item)
    The Headline can be replaced by : @Html.Sitecore().Field(Templates.Banner.Fields.Title_FieldName, item)
    The CTA Text can be replaced by : @Html.Sitecore().Field(Templates.Banner.Fields.Title_FieldName, item)
    The CTA Link can be replaced by : @Html.Sitecore().Field(Templates.Banner.Fields.Title_FieldName, item)
38. Replace the HTML markup by
    <!– slider_area_start –>
    <div class=”slider_area”>
    <div class=”single_slider d-flex align-items-center slider_bg_1″>
    <div class=”container”>
    <div class=”row align-items-center justify-content-center”>
    <div class=”col-xl-8″>
    <div class=”slider_text text-center justify-content-center”>
    <p>@Html.Sitecore().Field(Templates.Banner.Fields.Title_FieldName, item)</p>
    <h3>
    @Html.Sitecore().Field(Templates.Banner.Fields.HeadLine_FieldName, item)
    </h3>
    @Html.Sitecore().Field(Common_Templates.CTA.Fields.Link_FieldName, item,
    new
    {
    @class = “boxed-btn3”,
    text = @Html.Sitecore().Field(Common_Templates.CTA.Fields.Text_FieldName, item)
    })
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <!– slider_area_end –>
    
39. Publish Visual Studio solution and load the front end.
    
40. We are almost done with the component. If you check the background image is not loading and at the same time there is no img tag in HTML markup to enter it.
41. So the background img is coming through CSS.
    
42. So we need to fetch the URL of the image from Sitecore and provide it to a class in MainBanner.cshtml. Code to fetch the image URL:
    ImageField imgField = item.Fields[Templates.Banner.Fields.Image_FieldName];
    string ImagPath = Sitecore.Resources.Media.MediaManager.GetMediaUrl(imgField.MediaItem);
    And we need to add the CSS class:
    <style>
    .slider_bg_1 {
    background-image: url(@ImagPath);
    }
    </style>
    
43. Publish the MainBanner.cshtml and reload the Front end site.
    

This completes our development of Banner component. Hope this detailed blog will help you develop such models. Please get in touch with me if there are any issues while following the above steps.

To summarize, we create a template with the required fields, created the content out of it, created a view rendering and assigned the rendering to the Home item and passed the content as a data source to it.

In the next blog, we will create the Featured Services component.

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