Small Productivity Tips for Sitecore xmCloud and Sitecore Pages Development

Small Productivity Tips for Sitecore xmCloud and Sitecore Pages Development
Speed up using bookmarklets

Today I want to share a few tips with you about:

  • how to use Sitecore pages quickly on your local environment
  • how to work with the partial & page branches in Sitecore pages
  • how quickly access the Sitecore Pages from Content Editor like Experience Explorer

Quick Setup of Sitecore Pages locally

Basically, to use the Sitecore pages locally you need to set the local storage key "Sitecore.Pages.LocalXmCloudUrl" to "https://xmcloudcm.localhost/".

To do it quickly you can add a Bookmarklet to your browser:

var localStorageKey = "Sitecore.Pages.LocalXmCloudUrl"; 
var localXmCloudUrl = "https://xmcloudcm.localhost/"; 
var localStorageEntry = localStorage.getItem(localStorageKey); 
localStorage.setItem(localStorageKey, localXmCloudUrl); 

You need to keep in mind, when you are switching to the other environment, you need to clear your storageLAuwd6inPv

or use this Bookmarklet to clear the local storage:

var localStorageKey = "Sitecore.Pages.LocalXmCloudUrl"; 
var localStorageEntry = localStorage.getItem(localStorageKey); 

If you get an issue with CORS, in your env file, check SITECOREPagesCORSAllowedOrigins.

Work with the partial & page designs inside Sitecore pages

It is much easier to work with partial designs in sitecore pages. Up till now, there is no ribbon/button to open the selected item in sitecore pages.

As a best practice for working with SAS products, I try to write as less code as possible. So, to address that, I created multiple bookmarklet, basically one bookmarklet per organization/tenant/site:

javascript:var organization = "YOUR ORGANIZATION ID";
var tenantName = "Your TENANT NAME";
var site = "YOUR SITE NAME";

var currentItem = window.document.querySelector('#__CurrentItem');
var itemUrl= currentItem ? currentItem.value: window.document.querySelector('iframe').contentDocument.querySelector('#__CurrentItem').value;
var scExItemUrl = new URL(itemUrl);
var language = scExItemUrl.searchParams.get("lang");
var version = scExItemUrl.searchParams.get("ver");
var itemId = scExItemUrl.pathname.split('/').last().replace('{','').replace('}','');
var pageUrl = "" + organization + "&tenantName=" + tenantName + "&sc_itemid="+ itemId+"&sc_lang=" + language +"&sc_site=" + site + "&sc_version=" + version;;

You need to adjust the organization, tenantName and site values.

There you go, now with one click you can open any page branch/ partial design or any normal pages from content editor inside the sitecore pages.

Source code is on Github.