Sitecore User Group London Sitecore User Group London

Sitecore User Group London

Sitecore User Group London What’s the Problem • Difficult to know what components are on a page • What placeholders are present • Hierarchy of controls • Audit components • Component Name / Display Name may not match filename

Sitecore User Group London Experience Editor

Sitecore User Group London Existing Solutions - Rendering Wrappers • Jason Wilkersen / Kenneth Mc. Andrew / Alexander Smagin • Brain. Jocks SCORE

Sitecore User Group London Pipeline Injection Placeholder Component <div class="component-wrapper"> <span class="wrapper-header">Header Text goes here</span> <div class="component-content clearfix"> -----------| Component | -----------</div>

Sitecore User Group London Proof of Concept • Code. Pen • http: //codepen. io/jammykam/pen/oz. Pg. Zq • http: //codepen. io/jammykam/pen/JRao. Or • HTML / CSS only solution • Worked with (our) existing markup

Sitecore User Group London Sitecore Integration • Extend Sitecore Helper • Add attribute to mark up • Add custom checkbox in Ribbon and inject CSS

Sitecore User Group London I can haz Codez? private static IHtml. String Get. Chrome. Attribute(this Sitecore. Helper helper, string title, string attribute) { if (!Sitecore. Context. Page. Mode. Is. Experience. Editor. Editing) return null; if (string. Is. Null. Or. White. Space(title)) title = helper. Current. Rendering. Item. Display. Name; if (Settings. Get. Bool. Setting(Display. Extended. Info, false)) title += $" ({helper. Current. Rendering. Renderer})"; string html. String = $"data-{attribute}-title="{title}"" + Wrapper. Title(title); return new Html. String(html. String); } private static string Wrapper. Title(string title) { return Settings. Get. Bool. Setting(Display. Extended. Info, false) ? $" title="{title}"" : null; }

Sitecore User Group London Styling html. chrome. Rendering. Highlight *[data-container-title], html. chrome. Rendering. Highlight *[data-widget-title] { border: 3 px solid rgba(169, 0. 7); padding-top: 1. 1 rem; position: relative; } html. chrome. Rendering. Highlight *[data-container-title]: : before, html. chrome. Rendering. Highlight *[data-widget-title]: : before { color: #fff; content: attr(data-container-title); background-color: rgba(169, 0. 7); font-size: 0. 8 rem; . . . } /* -- plus styles for widgets and alternating controls -- */ html. chrome. Rendering. Highlight *[data-container-title]: nth-child(even) {. . . } html. chrome. Rendering. Highlight *[data-widget-title] {. . . }

Sitecore User Group London Usage <div class="row" @Html. Sitecore(). Container. Chrome()> <div class="large-12 columns"> <div class="row"> <div class="large-6 small-12 columns" @Html. Sitecore(). Container. Chrome("This is a custom message")> @Html. Sitecore(). Placeholder("left-column") </div>. . . </div> <div class="row" @Html. Sitecore(). Widget. Chrome()>. . . </div>

Sitecore User Group London Screenshots

Sitecore User Group London Screenshots – Habitat Notice Habitat suffers from the same issue we had. How are you supposed to know “Call to Action” maps to “Jumbotron. cshtml”?

Sitecore User Group London • Blog • http: //wp. me/p 2 Sm. N 4 -es • Github • https: //git. io/v. Muq 6 • Contact me: • @jammykam • Sitecore Slack Chat • We’re Hiring @

Sitecore User Group London Bonus • Environment Styler for Sitecore • Blog: http: //wp. me/p 2 Sm. N 4 -es • Github: https: //git. io/v. Muq 1