Duplicate HTML for responsive views - Placeholders

Duplicate HTML, really?

Last week I got a frontend implementation (HTML/CSS/JS) that wasn't quiet to my liking. It contained duplicate HTML for a component that should be displayed on different locations in the HTML to facilitate correct views on desktop and mobile breakpoints. Time limitations on the project didn't allow for the frontender to find an alternative way of removing this duplication and achieving the same result.
I didn't feel like introducing device views in Sitecore just for this one component.
Luckily the component was in a part of the site that is behind login, so SEO was not a concern.

Not only was the HTML the same for the different views of this component, but also its content needed to be the same, and it needed to have the same personalization.

For a while I wondered on how to support this in the experience editor, without making the 'content editor' change it's browser window to a different responsive view, nor breaking the look of the page while editing by displaying both instances of the HTML while in experience editor mode.

Then I had a thought what would happen if I would just duplicate the placeholder where I put this component in, in two locations of the layout.
It turned out that this works. When you create a second placeholder somewhere else on your layout, with the same name. Your single component is just rendered twice.
This solved all my problems at once:

  • Content editor only needs to maintain the content and personalization in one location
  • I don't have to find work around to make the separate instances content manageable
  • I don't have to worry about content editor forgetting one of the places this component is in, and there fore creating a mismatch in its content over different views



Reacties

Een reactie posten

Populaire posts van deze blog

I Robot - Sitecore JSS visitor identification

While working on a Sitecore JSS solution that interacts with our Sitecore solution that hosts some api endpoints for us and add .net session state to cache some user bound data we noticed some unexpected behavior with respect to the session state on our test environments. Our session was configured to expire after 20 minutes of idleness, but no matter what our behavior was: idle or active our session seem to be reset much faster. After much debugging we couldn't find anything wrong with our own code, so we started considering options where maybe Sitecore could influence this. One of the suspects was Sitecore's robot detection mechanism that had given us trouble around session expiry in the past. We started by disabling robot detection. And this indeed seemed to resolve our session disappearing issue. So it was confirmed, we were identified as a robot. Further information proved that indeed, when classified as a robot visitor, Sitecore analytics settings set the session e
Meer lezen

Sitecore campaigns and UTM tracking unified

Afbeelding
Sitecore and UTM  A lot of blogs have been written about Sitecore vs Google Analytics and how they can be complimentary. In many of the implementations I have seen, marketers use these tools side by side.  As marketers seem so fond of Google Analytics and have a hard time parting with it to only use Sitecore, I figured, why not make them work at the same time. Marketers seem to be more familiar with setting up campaigns using UTM than setting them up with custom parameters for Sitecore campaigns, so why not make Sitecore work with these UTM parameters as well.  So what I did is make it configurable in Sitecore to hookup UTM parameters to Sitecore campaigns. This blog shows how I did that. Setting up your templates I started by defining a template where you can tie these together. Field1: UTM Source key Single-line text to copy your UTM source key into Field2: Linked Campaign A droptree field with a query, something like this: query:/sitecore/system/Marketing C
Meer lezen

Sitecore JSS - Sitecore first

JSS - Sitecore First! Recently I started a project where we are upgrading an existing Sitecore 9 MVC portal with AngularJS to Sitecore JSS with Angular 7. With this portal being already implemented, and content preexisting in the solution we wanted to start this with a Sitecore first approach. In this approach we create the JSS layout service endpoint that return Json containing the same content a component now renders in the MVC controller rendering, reusing existing content, templates etc. First things first To start, obviously as a Sitecore developer you have to install the Sitecore JSS server components into your environment. After that you create a Sitedefinition like entry for your JavaScriptServices where you register your JSS app and set the start item for your app root. You setup your API key as defined in the JSS doc site . To make sure your Sitecore instance is aware of this app and where in the Sitecore tree it 'lives'. You extend your Sitecore SiteDefin
Meer lezen