Layout Placement Feature in Orchard CMS

Layout Placement Feature in Orchard CMS

If you develop Orchard Themes, you will appreciate a new featured, called Layout Placement, introduced in Orchard 1.5. Layout Placement allows you to place a shape in a different zone with a quick change to your Orchard Module's or Orchard Theme's Placement.info file. In this example, I will show you how I used Layout Placement in my Orchard E-Commerce and Online Store Example to place the title of products, categories, and other content types into a zone different than the default Content Zone as specified by Orchard CMS. If you enjoy this tutorial, don't forget to check out my other Orchard CMS Tutorials as well!

Orchard E-Commerce Website

As mentioned earlier, I put together a really nice example of using Orchard CMS for an online store and e-commerce website. It comes with numerous bells and whistles, including:

  • Responsive Orchard Theme
  • Products and Product Categories
  • Product Ratings and Reviews
  • Product Carousels to display various new, featured, and popular products
  • Custom Slider
  • Full support for blogs and tags
  • Lucene Search with custom search layouts for better product marketing
  • Shopping Cart
  • Interactive minicart with animation that displays newly added products and subtotals
  • Google Checkout
  • Portfolio
  • FAQ
  • etc...

Orchard E-Commerce Website and Online Store

The responsive HTML for the online store places the title of the page ( i.e. title of the content item ) above the main content area ( Content Zone ). This is different than Orchard, which places the title of the content item in the Header Region of the Content Zone. In order to alleviate this problem, I will use the new Layout Placement Feature in Orchard CMS 1.5.1.

Layout Placement, TitlePart, and Placement.info in Orchard CMS

All the products, product categories, pages, FAQs, portfolio projects, blog posts, etc. in my Orchard Online Store use the TitlePart for the name of the content item. You don't have to do this, but this is a pretty standard procedure for your Orchard Website. I recommend you try this first and only use a custom part that supports ITitleAspect when necessary.

By default, the TitlePart will display in the Header Region of the Content Zone as specified in its Placement.info file:

<Place Parts_Title="Header:5"/>

This isn't ideal, however, because the E-Commerce Orchard Theme wants the TitlePart in a zone above the Content Zone, separate from the rest of the parts that make up the actual content item. Based on the Orchard theme I created, I want the TitlePart in the BeforeMain Zone. Here is an example using a Product Detail page for the online store. I need the actual name of the product, Lego Storage Bricks, to appear in the BeforeMain Zone, and I want the rest of the product detail to sit in the usual Content Zone.

Layout Placement in Orchard CMS

The answer to this problem is really simple using the new Layout Placement Feature in Orchard. I just open up the Placement.info file for my custom Orchard E-Commerce Module and override Parts_Title to display in the BeforeMain Zone. What used to take a bit of jedi coding in previous versions of Orchard now becomes a simple 15 second change in Orchard 1.5+. I can specify that the TitlePart goes in the new zone as follows.

<Place Parts_Title="/BeforeMain:1"/>

You need to include the "/" before the name of the new zone. That's it. Trust me - it used to be a lot harder and new Orchard Web Developers and Designers will appreciate the simplicity.

You will need to make sure you play well in Placement.info and pinpoint exactly which Content Types and Display Types for when you want the TitlePart to display in the new zone. You obviously only want this to happen in Detail Views and you may only want to focus on particular content types. I like to be pretty specific in my Placement.info files because being broad/vague can often create some interesting results as the client adds other content types, etc. later :)

Conclusion

That's it. Quite a lot of words for two lines of code, but I wanted to put the new feature in a real-world context. Often the HTML, CSS, and JS you purchase as an HTML Template or is built by a web designer does not care about Orchard ( nor should it ) and places various parts and information in zones that don't match with Orchard's defaults. In times like these, the new Layout Placement Feature in Orchard 1.5.1+ is a real life saver.

Checkout my other Orchard Tutorials, new features introduced in Orchard 1.5.1, and hire me as an Orchard Developer for your next Orchard Website/Project!