Did you ever use Page and Partial Designs? Recently, I worked on a project which was on Sitecore SXA - 9.3, and in that, I used the Page and Partial Designs to create SXA basic layout and also extend them.
Partial Designs are a collection of Renderings such as Header, Footer, etc that is used to create a page on the website. One or more Partial Designs are combined and those will be used to create the Page Designs (by attaching these Partial Designs on a Page Design). Remember Partial Designs can be simple as well as complex and are also reusable.
How To Create A Partial Design
To add a partial design, go to the Partial Design folder and create a partial design and open that in Experience Editor.
Add Some rendering to the placeholder, in this I have attached the Event List Rendering to the main placeholder. While attaching the rendering, you can either create the data-source item from the existing site`s Data folder, or from the partial design`s Data folder. Here I have created the content using the partial design`s data source (Highlighted Data folder with create button).
After creating the data-source item, the tree structure looks like this.
Partial Designs are a collection of Renderings such as Header, Footer, etc that is used to create a page on the website. One or more Partial Designs are combined and those will be used to create the Page Designs (by attaching these Partial Designs on a Page Design). Remember Partial Designs can be simple as well as complex and are also reusable.
How To Create A Partial Design
To add a partial design, go to the Partial Design folder and create a partial design and open that in Experience Editor.
Add Some rendering to the placeholder, in this I have attached the Event List Rendering to the main placeholder. While attaching the rendering, you can either create the data-source item from the existing site`s Data folder, or from the partial design`s Data folder. Here I have created the content using the partial design`s data source (Highlighted Data folder with create button).
After creating the data-source item, the tree structure looks like this.
Your partial design is created, now create the Page Design for further implementation. Go to the Page Design folder and create a new Page Design. And in the Partial Design field select on or more Partial Designs.
After selecting the partial designs, go to your page and select the particular Page Design from the Page Design field. Then open the page in the Experience Editor mode and then you can see in the event list component but you cannot edit the component (adding or removing the events).
To make them editable, you can check the data source of the rendering, while adding the rendering the data-source field will have the local:/Data/TestEvents, change the path to page:/Data/TestEvents, and also copy/create the same tree structure from the Partial Design data folder to the Page-level but remember the name of the Datasource item should be same in both the places.
Now you can open the page and try to edit the content (add or delete the event) you will be able to do that. Now if you click the add or remove button, the items will be added or removed from the Page Level Data Folder which is created under the Page.
Thanks!!
Comments
Post a Comment