Creating a Layout – Part IV

As the last part of creating a layout we will create the Estimates Form, we will add the functionality (Either saving the data in a custom database, sending the email to the end user & admin, share the data to CRM, etc) later on. Actually, we can use Sitecore Forms instead of custom coding but will take this concept once we are clearing and friendly with Sitecore dummy site.

  1. Go to Main.cshtml, copy the entire Estimates area to the new View called “EstimatesForm”
    206
  2. Add below piece of code in the Main.cshtml in place of the HTML markup of Estimates form, we will add the GUID of the rendering later once we create it in sitecore.
    207
  3. Lets replace the hard coded values in the form for which we have already created dictionary items such as below:
    Your name => @Sitecore.Globalization.Translate.Text(“YourName”)
    Email => @Sitecore.Globalization.Translate.Text(“Email”)
    Product type => @Sitecore.Globalization.Translate.Text(“ProductType”)
    Product size => @Sitecore.Globalization.Translate.Text(“ProductSize”)
    City of departure => @Sitecore.Globalization.Translate.Text(“DepartureCity”)
    City of delivery => @Sitecore.Globalization.Translate.Text(“DeliveryCity”)
    Message => @Sitecore.Globalization.Translate.Text(“Message”)
    Send Estimate => @Sitecore.Globalization.Translate.Text(“SendEstimates”)
    208
    After replacing the hard coded phrases, the markup will be like below:
    209
  4. Now we will fetch, the values of the drop downs and bind to it. There are in total 4 drop downs for which we need to fetch values from Sitecore namely:
    Product Type
    Product Size
    Departure City
    Delivery City
    210
  5. Use below code to fetch the 4 items from Sitecore:
    @using Sitecore
    @using Sitecore.Mvc
    @using Sitecore.Data
    @using Sitecore.Data.Items
    @using DummyWebsite@{
    Database currentDb = Sitecore.Context.Database; //Extract the current Db
    //Get the item /sitecore/content/Global/Delivery Cities
    Item deliveryCitiesItem = currentDb.GetItem(“{A1F800E0-F31B-48FC-9949-8D6347160386}”);
    //Get the item /sitecore/content/Global/Departure Cities
    Item departureCitiesItem = currentDb.GetItem(“{92ECED7A-AF56-4B9D-A4B0-2662A371AA44}”);
    //Get the item /sitecore/content/Global/Product Sizes
    Item productSizesItem = currentDb.GetItem(“{74DD9F93-C545-4081-832F-11099111CAC0}”);
    //Get the item /sitecore/content/Global/Product Types
    Item productTypesItem = currentDb.GetItem(“{9829A8F5-620B-4A9F-AFF4-78D3593E7B6E}”);
    }
    211
  6. Lets bind the values of these items in the drop down. Use below code to bind the value in Product Type drop down.
    <select class=”wide”>
    <option data-display=”@Sitecore.Globalization.Translate.Text(“ProductType”)”>@Sitecore.Globalization.Translate.Text(“ProductType”)</option>
    @foreach (Item item in productTypesItem.GetChildren())
    {
    <option value=”@item.Fields[“Text”]”>@item.Fields[“Value”]</option>
    }
    </select>
    212
  7. Similarly we will code for other Dropdowns.
    213
  8. Login to Sitecore >> Content Editor.
  9. Create a View rendering under Sitecore Demo (/sitecore/layout/Renderings/Sitecore Demo) and name it Estimates Form.
    214
  10. Publish the rendering and note down the GUID of this rendering.
  11. Paste the GUID of the rendering in the Main.cshtml file.
    215
  12. Publish the visual studio solution and browse the front end (http://sitecoredemo.dev.local/)
    216
  13. We are almost done with the Layout but the only part left is the Summary or Description on the Estimations form.
  14. So lets create one dictionary item for the title (“Get free Estimate”)
    217
  15. Add the below piece of code to fetch it in the EstimatesForm.cshtml
    218
  16. Now we have a Summary template created under Common (/sitecore/templates/Sitecore Demo/Common/Summary) which we will use and copy the html mark up (p and anchor tag) in the Rich text.
  17. Go to Home node (/sitecore/content/Home) >> Insert >> Insert from Template and select the Summary template. Name the new item as Estimation form Summary.
    219
  18. Click on the Edit HTML and copy paste the below content & click Accept:
    <p>
    Esteem spirit temper too say adieus who direct esteem. It look estee luckily or picture
    placing.
    </p>
    <a href=”#” class=”boxed-btn3″>+10 672 457 356</a>
    220
  19. Publish the item and copy it’s GUID. so that we can fetch it in EstimationsForm.cshtml.
    //Get the Summary Item
    Item estimationSummaryItem = currentDb.GetItem(“{FCD9FCBC-7B6C-4425-86D7-6556F452EE8B}”);
    221
  20. Place the below piece of code in place of that p & anchor tag.
    @Html.Sitecore().Field(“Summary”, estimationSummaryItem)
    222
  21. Publish the EstimationsForm.cshtml and reload the Front end.

And with this we have completed building the layout which will be common for the all the pages in the site. From the next blog, we will build the components present on the Home page.

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

One thought on “Creating a Layout – Part IV

  1. Pingback: Creating a Layout – Part III | 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