Building Home page Components – Testimonials

In this blog, we will be working on the Testimonials component which looks like below screen:
283

One background image, that can be managed from CSS, and a carousal with the fields like – Testimonial Text, Image, Customer Name, Designation. So we will create a template for the Testimonial item and will also create one container that will have all the testimonial items.

  1. So lets start by uploading the images in Media Library – there are 3 images in this component, namely Quote, Testimonial writer and the background image.
  2. Create a Testimonial Folder under the Sitecore Demo media folder.
  3. And upload these all 3 images.
    284
  4. Lets create a template under Testimonials folder (/sitecore/templates/Sitecore Demo/Testimonials)
    285
  5. Add an icon to the template.
  6. Create a new template under Containers & name it as “Testimonials Folder”.
    286
  7. Add Standard Values under Builder Options and set insert Options as Testimonial Item.
    287
  8. Lets create a content in Global folder based on these templates.
  9. Create a Testimonials folder under Global based on Testimonials Folder template.
    288
  10. Create a item with name Testimonial 1 under it.
  11. Right Click on Testimonials >> Insert >> Testimonial Item.
    289
  12. Fill in the required fields as per your inputs or the index.html file.
    290
  13. Similarly create 2 more testimonial items.
    291
  14. Publish the site in Sitecore.
  15. Open visual studio, create a View & name it as TestimonialSection.cshtml.
  16. Copy the HTML markup for Testimonial section from the index.html to this view.
    292
  17. Copy & Paste Banner_Templates.tt file and rename as Testimonial_Templates.tt.
    293
  18. Change model from “Banners” to “Testimonials”. And Save it
    294
  19. Lets assume that the Testimonials 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);
    }

    <!– testimonial_area –>
    <div class=”testimonial_area”>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-xl-7″>
    <div class=”testmonial_active owl-carousel”>
    @foreach (Item item in datasourceItem.GetChildren())
    {
    <div class=”single_carousel”>
    <div class=”single_testmonial text-center”>
    <div class=”quote”>
    <img src=”-/media/3089ADEE27EF4A129F96B4B535E95EA9.ashx” alt=””>
    </div>
    <p>
    @Html.Sitecore().Field(Templates.TestimonialItem.Fields.TestimonialText_FieldName, item)
    </p>
    <div class=”testmonial_author”>
    <div class=”thumb”>
    @Html.Sitecore().Field(Templates.TestimonialItem.Fields.CustomerImage_FieldName, item)
    </div>
    <h3>@Html.Sitecore().Field(Templates.TestimonialItem.Fields.CustomerName_FieldName, item)</h3>
    <span>@Html.Sitecore().Field(Templates.TestimonialItem.Fields.Designation_FieldName, item)</span>
    </div>
    </div>
    </div>
    }
    </div>
    </div>
    </div>
    </div>
    </div>
    <!– /testimonial_area –>
    295

  20. The highlighted is the Quote image that is called in the View by using it’s id from Sitecore item (/sitecore/media library/Sitecore Demo/Testimonials/quote).
  21. Publish the Visual studio solution.
  22. Go to Sitecore Rendering item (/sitecore/layout/Renderings/Sitecore Demo) and create a View Rendering with a name – “Testimonial Section”.
    296
  23. Publish this rendering and Go to the Home Item (/sitecore/content/Home).
  24. Click on Presentation tab >> Details >> Edit >> Controls >> Add button.
    297
  25. Select the Testimonial 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.
    298
  26. Check the Open the properties checkbox and click Select.
  27. In the Data Source field, select the Testimonials folder which we created under Global folder.
    299
  28. Click OK >> OK >> OK. Publish the Home item.
  29. Browse the front end site.
    300
  30. The background image is coming through css so we will need to add the style in cshtml file.
    <style>
    .testimonial_area {
    background-image: url(/-/media/8B736F28878A4E9295574899F8304719.ashx);
    }
    </style>
    301
  31. Publish the View and browse the front end site.
    302

This completes our testimonial component, in the next blog we will work on the Facts and Figures section.

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

One thought on “Building Home page Components – Testimonials

  1. Pingback: Building Home page Components – Safe & Secure tagline section | 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