Thursday, November 9, 2017

Sitecore Dynamic Placeholder

I prefer

  • TDS
  • TDS with glass mapper template[Auto code generation for sitecore template model]
  • Fortis Dynamic Placeholder Nuget
  • Sitecore 8.2.1
  • MVC 5
  • .Net framework 4.5.2

The difficult part of sitecore is setup stage to start your development.

Install MVC Sitecore 8.2.1
Sitecore solution base nuget package can be found in above documentation. Follow step by step instruction.

Install Glass mapper

Install Dynamic Placeholder Nuget




Install TDS

Use wizard to create master content tree sync solution

Sitecore .Net Solution

 

Glass mapper TDS - Template










































Sitecore Rocks

Dynamic Placeholder

Glass Mapper @editable View Rendering


To create this sample. I have created two component in MVC and then corresponding renderings in sitecore.

View  as Component
Placeholder
Sitecore Renderings
1
MainLayoutPage.cshtml

<html>
<body>
      
<div class="container">
        
@Html.Sitecore().DynamicPlaceholder("dynamic-row")
    
</div>
</body>
</html>

dynamic-row

2
OneRowThreeColumn.cshtml

<div class="row">
    
<div class="col-sm-4">
        
<div class="tile--bordered">
            
@Html.Sitecore().DynamicPlaceholder("dynamic-content")
        
</div>
    
</div>
    
<div class="col-sm-4">
        
<div class="tile--bordered">
            
@Html.Sitecore().DynamicPlaceholder("dynamic-content")
        
</div>
    
</div>
    
<div class="col-sm-4">
        
<div class="tile--bordered">
            
@Html.Sitecore().DynamicPlaceholder("dynamic-content")
        
</div>
    
</div>
</div>

dynamic-row
One Row Three Column

3
RichText.cshtml

@inherits Glass.Mapper.Sc.Web.Mvc.GlassViewISingleRichText>

<p class="tile__title">@Editable(Model, y=>y.Title)</p>
<p class="tile__sub-title">
    
@if (Model != null)
    {
        
@Editable(Model, y => y.Detail)
    }
</p>

 

dynamic-content
***Rich Text with Model(Template- Data Template SingleRichText)

Create following items in sitecore:

  1. Layout
  2. Data Template
  3. Renderings
  4. Placeholder setting
  5. Page item in content tree

 

  1. Layout: MainLayout



2.0 Placeholder Settings: dynamic-row



2.1 Placeholder Settings: dynamic-content


 

3.0 Renderings: One Row Three Column



 

3.1 Renderings: Rich Text



 

 

3.2 Data Template





  1. Content Tree


  1.  Presentation: Shared Layout


 

  1.  Experience Editor







 

  1. Presentation: Post Publish- Final Rendering




Post a Comment