Creating Service Details and Listing page

So in the previous blogs, we completed Home & About page and now we will be working on Service Details and Listing pages. So lets see what all components are there on the Service Details page except the layout.
So if we list these components then it is – Banner, Left Navigation Bar & the details section. Out of these components Banner is already present so lets add it.

  1. Go to Sitecore >> Content Editor >> Templates >> Sitecore Demo >> Services >> Service Item >> __Standard Values.
  2. Presentation tab >> Details >> Edit >> Controls >> Add.
    377
  3. Select the Main Banner rendering & add “main” as placeholder key. Click Select.
    378
  4. Click OK >> OK. Publish the item.
  5. Go to the Global >> Banners folder (/sitecore/content/Global/Banners).
  6. Right Click >> Insert >> Banner. Name it as “Ocean Freight Banner”.
    379
  7. Similarly create for: Road Transport, Air Freight & Copy of Ocean Freight. Let the image be same. Only update the title.
    380
  8. Publish the Banner item and Go to the Air Freight item (/sitecore/content/Home/Services/Air Freight).
  9. Presentation tab >> Details >> Edit >> Controls.
  10. Click on Main Banner rendering and click Edit. And select the Air Freight Banner item which we created just now as a Data source.
    381
  11. Click OK >> OK >> OK.
  12. Publish the item. And browse it in the front end (http://sitecoredemo.dev.local/Services/Air-Freight)
    382
  13. Similarly, add the data source for rest of the 3 services and publish those items.
  14. Lets create one View Rendering with HTML markup of the Service Details from service_details.html from the logistico extracted folder.
    383
  15. Lets remove the right side code and enter the placeholder in that particular place. So the below code will be the updated one.
    <!– service_details_start –>
    <div class=”service_details_area”>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-lg-4 col-md-4″>
    <div class=”service_details_left”>
    <h3>Services</h3>
    <div class=”nav nav-pills” id=”v-pills-tab” role=”tablist”
    aria-orientation=”vertical”>
    <a class=” active” id=”v-pills-home-tab” data-toggle=”pill” href=”#v-pills-home”
    role=”tab” aria-controls=”v-pills-home” aria-selected=”true”>Ocean Freight</a>
    <a class=”” id=”v-pills-profile-tab” data-toggle=”pill” href=”#v-pills-profile”
    role=”tab” aria-controls=”v-pills-profile” aria-selected=”false”>Land Transport</a>
    <a class=”” id=”v-pills-messages-tab” data-toggle=”pill” href=”#v-pills-messages”
    role=”tab” aria-controls=”v-pills-messages” aria-selected=”false”>Air Freight</a>
    </div>
    </div>
    </div>
    <div class=”col-lg-8 col-md-8″>
    @Html.Sitecore().Placeholder(“ServiceDescription”)
    </div>
    </div>
    </div>
    </div>
    <!– service_details_start –>
    384
  16. Create one more View and copy the deleted markup above into the new View.
    385
  17. Update the code for ServicesDetails.cshtml. Considering that we will pass the list of Services as Data source from Sitecore.
    @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);
    }
    <!– service_details_start –>
    <div class=”service_details_area”>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-lg-4 col-md-4″>
    <div class=”service_details_left”>
    <h3>@item.Name</h3>
    <div class=”nav nav-pills” id=”v-pills-tab” role=”tablist”
    aria-orientation=”vertical”>
    @foreach (Item childItem in item.GetChildren())
    {
    var URL = Sitecore.Links.LinkManager.GetItemUrl(childItem);
    <a class=” active” id=”v-pills-home-tab” href=”@URL”
    role=”tab” aria-controls=”v-pills-home”>
    @Html.Sitecore().Field(Templates.ServiceItem.Fields.ServiceTitle_FieldName, childItem)</a>}
    </div>
    </div>
    </div>
    <div class=”col-lg-8 col-md-8″>
    @Html.Sitecore().Placeholder(“ServiceDescription”)
    </div>
    </div>
    </div>
    </div>
    <!– service_details_start –>
    386
  18. Now if we see in ServicesDescription.cshtml then it has the main description of the service and File details.
  19. So the markup besides file details, lets cut and paste it in the Description field of the Service item (/sitecore/content/Home/Services/Air Freight).
    387
  20. Click Accept & then save the changes.
  21. Similarly copy this html for other Service items as well.
  22. Now update the ServicesDecription.cshtml code as below:
    @using Sitecore
    @using Sitecore.Mvc
    @using Sitecore.Mvc.Presentation
    @using Sitecore.Data
    @using Sitecore.Data.Items
    @using DummyWebsite@{
    Item item = Sitecore.Context.Item;
    }<div class=”tab-content” id=”v-pills-tabContent”>
    @Html.Sitecore().Field(Templates.ServiceItem.Fields.Description_FieldName, item)
    <div class=”download_brochure d-flex align-items-center justify-content-between”>
    <div class=”download_left d-flex align-items-center”>
    <div class=”icon”>
    <img src=”img/svg_icon/download.svg” alt=””>
    </div>
    <div class=”download_text”>
    <h3>Download Our Brochure</h3>
    <p>Esteem spirit temper too say adieus who direct.</p>
    </div>
    </div>
    <div class=”download_right”>
    <a class=”boxed-btn3-line” href=”#”>Download Now</a>
    </div>
    </div>
    </div>
    388
  23. Publish the Visual studio solution.
  24. Go to Sitecore >> Renderings >> Sitecore Demo.
  25. Create 2 view renderings – one for ServicesDetails.cshtml & other for ServicesDescription.cshtml
    389
  26. Go to the __Standard Values of the Service Item Template (/sitecore/templates/Sitecore Demo/Services/Service item/__Standard Values).
  27. Presentation tab >> Details >> Edit >> Controls >> Add.
  28. Add the Services Details rendering with Placeholder key as “main” and check the box to immediately open the properties.
    390
  29. Click Select
  30. In the Data source field, select the Services item created under Home.
    391
  31. Click OK. Again click on Add button.
  32. Select the Service Description rendering and give “ServiceDescription” as placeholder key because we have given “ServiceDescription” as a key in ServicesDetails.cshtml.
    392
  33. Click Select >> OK >> OK. Publish the item.
  34. Publish the Services folder (/sitecore/content/Home/Services) because we have added value in Description field in all the Service items.
  35. Browse the Front end site for Service Details page (http://sitecoredemo.dev.local/Services/Air-Freight)
    393
  36. Now lets fill in some data for File section in Air Freight item. Use below link in File Link, add it as External link.
    https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
    394
  37. Publish the item.
  38. Go to Visual Studio, and make changes in ServicesDescription.cshtml.
    @using Sitecore
    @using Sitecore.Mvc
    @using Sitecore.Mvc.Presentation
    @using Sitecore.Data
    @using Sitecore.Data.Items
    @using DummyWebsite@{
    Item item = Sitecore.Context.Item;
    }<div class=”tab-content” id=”v-pills-tabContent”>
    @Html.Sitecore().Field(Templates.ServiceItem.Fields.Description_FieldName, item)
    <div class=”download_brochure d-flex align-items-center justify-content-between”>
    <div class=”download_left d-flex align-items-center”>
    <div class=”icon”>
    @Html.Sitecore().Field(Templates.Files.Fields.FileIcon_FieldName, item)
    </div>
    <div class=”download_text”>
    <h3>@Html.Sitecore().Field(Templates.Files.Fields.FileTitle_FieldName, item)</h3>
    <p>@Html.Sitecore().Field(Templates.Files.Fields.FileSummary_FieldName, item)</p>
    </div>
    </div>
    <div class=”download_right”>
    @Html.Sitecore().Field(Templates.Files.Fields.FileLink_FieldName, item,
    new { @class= “boxed-btn3-line”, text = @Sitecore.Globalization.Translate.Text(“Download Now”) })
    </div>
    </div>
    </div>
    395
  39. Publish the View.
  40. In the Sitecore, create a Dictionary item for “Download Now”.
    396
  41. Publish the item. Browse the front end site.
    397
  42. Similarly add the details for File section in other Service item.
  43. Now only the image we need to add in the Description Field, which is part of the Services Details page.
  44. Download the image and upload it in the Media Library >> Sitecore Demo >> Services.
    398
  45. Publish the image.
  46. Go to the Air Freight item (/sitecore/content/Home/Services/Air Freight), Description field.
  47. Click Show Editor, you will see one broken Image, remove that and add the new image from Media Library.
    399
  48. Publish the item and check the Front end site.

So here we are done with Service Details page. Similarly it will load the page for other Services as well. Lets check the Services Listing page now. Your can refer to “service.html” file from the Logistico zip folder. It will look like below:
400
The listing page has following components other then Layout:
Banner Component – Already present
Listing Component
Tagline Component – Already present
Why Choose Us section – Already present
Facts & Figures section. – Already present

  1. First lets assign the components which we have.
  2. Go to the Banners folder under Global (/sitecore/content/Global/Banners).
  3. Add new Banner item with the name “Services Listing” and add the content.
    401
  4. Go to the __Standard Values item of the Services Folder template (/sitecore/templates/Sitecore Demo/Containers/Services Folder/__Standard Values).
  5. Presentation tab >> Details >> Edit.
  6. Select the Layout.
    402
  7. Click on Controls. Click Add.
  8. Select Inner Banner rendering with main as the placeholder key. Check the box to open properties immediately.
    403
  9. Select the “Services Listing” item under the Banner folder as the Data source and Click OK.
    404
  10. Click Add. Select Safe Secure Tagline rendering and add main as the placeholder Key, Check the box. Click Select.
    405
  11. Select the Safe and Secure tagline item under Home as Data source and click OK.
    406
  12. Click Add. Select the About section rendering and give main as placeholder key. Click Select.
    407
  13. Click Add. Select Facts section rendering & main as a placeholder key. Check the box.
    408
  14. Browse the Facts and Figures folder under Global as a Data source.
    409
  15. Click OK >> OK >> OK. Publish the item.
  16. Hit the Services url in the browser (http://sitecoredemo.dev.local/Services)
    410
  17. So now we need to create the Listing component only.
  18. Go to Visual Studio. Create ServicesListing.cshtml.
  19. Copy the listing html markup from service.html file and paste it in the new View.
    411
  20. Update the code for this View as below, considering the services will be passed as a Data source from sitecore.
    @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);
    }

    <!– service_area –>
    <div class=”service_area”>
    <div class=”container”>
    <div class=”row”>
    @foreach (Item childitem in item.GetChildren())
    {
    string itemURL = Sitecore.Links.LinkManager.GetItemUrl(childitem);
    <div class=”col-md-6 col-lg-4″>
    <div class=”single_service”>
    <div class=”thumb”>
    @Html.Sitecore().Field(Templates.ServiceItem.Fields.ThumbnailImage_FieldName, childitem)
    </div>
    <div class=”service_info”>
    <h3><a href=”@itemURL”>@Html.Sitecore().Field(Templates.ServiceItem.Fields.ServiceTitle_FieldName, childitem)</a></h3>
    <p>@Html.Sitecore().Field(Templates.ServiceItem.Fields.ServiceSummary_FieldName, childitem)</p>
    </div>
    </div>
    </div>
    }
    </div>
    </div>
    </div>
    <!–/ service_area –>

  21. Publish the View.
  22. Go to Sitecore Rendering item (/sitecore/layout/Renderings/Sitecore Demo), create a View rendering with the name – Service Listing.
    412
  23. Publish the rendering.
  24. Go to the Services item (/sitecore/content/Home/Services) >> Presentation tab >> Details >> Edit >> Controls >> Add.
  25. Select the Service Listing rendering and give “main” as a placeholder key & check the checkbox for opening the properties.
    413
  26. Click Select and browse Services item as a data source.
    414
  27. Click OK. Move the Service Listing to the 2nd position.
    415
  28. Click OK >> OK. Publish the item.
  29. Browse the front end site (http://sitecoredemo.dev.local/Services)
    416

With this blog, we completed the Services Details and Services Listing page. In the next blog, we will create the Contact page and the Contact form using Sitecore Forms without any coding involved. Stay tuned…

Thank you.. Keep Learning.. Keep Sitecoring.. šŸ™‚

One thought on “Creating Service Details and Listing page

  1. Pingback: Building Home page Components – Services 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