Name: SmartEdit Overview
Uploaded: 2022-9-16
Duration: 109 s
Description: This video is included in the eLearning for Developers: C4H34Ie

<p>about your learning experience to help us improve.</p>

You've completed

cleanFiles/bookmap_Expand_Upon_SAP_Commerce_Cloud_Technical_E_en-US_learning-sap-com_lsc-prod.zip (MMCP-DROPZONE) - 2024-11-21T07:41:12.000Z

Creating and Managing Web Content with SmartEdit 

<div id="content"><p tabindex="0">SmartEdit is the standard WCMS tool in SAP Commerce Cloud. It’s an intuitive, user-friendly UI for creating, laying out, and managing highly-personalized website content on-the-fly in different inflection points.</p><p tabindex="0">In general, SmartEdit:​</p><ul style="list-style-type:disc"><li tabindex="0">Is a JavaScript overlay atop the customer view that facilitates editing page content in context​</li><li tabindex="0">Supports intuitive drag-and-drop actions on CMS pages ​</li><li tabindex="0">Enables defining and previewing responsive design breakpoints​</li><li tabindex="0">Manages personalization in context​</li><li tabindex="0">Supports SAML Single Sign-On</li><li tabindex="0">Can be extended based on the underlying Angular architecture to support needs of business users​</li></ul><p tabindex="0">Let’s look at the following video to get an overview of the SmartEdit UI.​</p><div class="kalturaVideoLessonWrapper"><div aria-label="This video gives an overview of the SmartEdit UI." class="kalturaVideoLessonContainer" data-testid="video" id="1_7q2r495t"></div></div></div>

Overview

<div id="content"><p tabindex="0">As seen in the previous demo video, SmartEdit provides three views for managing CMS content of a certain catalog version. They are <strong>Pages</strong>, <strong>Navigation</strong>, and <strong>Homepage</strong>(also known as Live Edit).​</p><p tabindex="0">Let’s look at the following video to learn about the <strong>Pages</strong> view first.​</p><div class="kalturaVideoLessonWrapper"><div aria-label="In this video, you can learn about the Pages view." class="kalturaVideoLessonContainer" data-testid="video" id="1_kjpndiof"></div></div></div>

Pages View

<div id="content"><p tabindex="0"><strong>Navigation View</strong> allows us to set up the menu items and links used in the navigation components when they are displayed on the storefront.​</p><p tabindex="0">Proceed to the video below for an understanding of how navigation management operates in this view.</p><div class="kalturaVideoLessonWrapper"><div aria-label="This video gives an understanding of how navigation management operates in this view." class="kalturaVideoLessonContainer" data-testid="video" id="1_5grebg6z"></div></div></div>

Navigation View

<div id="content"><p tabindex="0">The last view is the <strong>Homepage</strong>, also known as <strong>Live Edit</strong>.​ After selecting <strong>Homepage/Live Edit</strong>, we usually enter the <strong>Preview</strong> mode.​</p><p tabindex="0">Proceed to the following video to check out what you can do in the Preview mode.</p><div class="kalturaVideoLessonWrapper"><div aria-label="This video demonstrates Preview mode." class="kalturaVideoLessonContainer" data-testid="video" id="1_46j3vbf5"></div></div></div>

Preview​ Mode

<div id="content"><p tabindex="0">Having grasped the functions of Preview Mode, you may want to make some simple edits to the CMS content. Let's discover what we can do in the subsequent function known as <strong>Basic Edit​</strong>.</p><div class="kalturaVideoLessonWrapper"><div aria-label="Video demonstrating Basic Edit." class="kalturaVideoLessonContainer" data-testid="video" id="1_6cqtdu3f"></div></div></div>

Basic Edit ​Mode

<div id="content"><p tabindex="0">We've just learned how to preview and perform simple edits on CMS content. Are there any advanced edit possibilities? Sure, there are. Indeed, there's an <strong>Advanced Edit</strong> mode we can explore next.​​</p><div class="kalturaVideoLessonWrapper"><div aria-label="Video exploring Advanced Edit mode." class="kalturaVideoLessonContainer" data-testid="video" id="1_4ddoo6w6"></div></div></div>

Advanced Edit Mode

<div id="content"><p tabindex="0">SmartEdit also provides content versioning for pages.​ We can create, preview, search for, and delete a page version. We can also roll back to a page version and continue to edit the content.​</p><p tabindex="0">Let’s watch this video to know how.​</p><div class="kalturaVideoLessonWrapper"><div aria-label="In this video, you can learn about content versioning for pages in SmartEdit." class="kalturaVideoLessonContainer" data-testid="video" id="1_m7marsr7"></div></div></div>

Versioning​ Mode

Expanding upon Technical Essentials of SAP Commerce Cloud

<div><div><div><div><div>This video is included in the eLearning for Developers:  C4H34Ie</div><div></div></div></div></div></div>

SmartEdit Overview

Hello. When you log into SmartEdit, you’ll be presented with its overview. Before we move on into its many powerful features,  let’s first look at what we can do here. In the top-right corner you will find some control buttons. Let’s look at them starting from left to  right. With the first button, you can access your collaboration inbox. The second button gives access to some property configurations  relevant to SmartEdit. The next button will allow you to change the interface language. You can use the fourth button to provide  feedback. Finally, the last button will show you your current role, and allow you to log off from SmartEdit. If you have more than one Site, you  can use the selector, on the left, to select the Site that you’ll be working with. As you can see, if you click on another site, it is loaded  with context, along with its content catalogs. As we move on to the Content Catalogs, you can see that the Catalog of the selected Site is  with context, along with its Online and Staged versions. In each of them, you can find three links: A link to the list of pages in this site,  A link to its Navigation management and a direct link to its Home Page. Finally, to the right of the catalogs, you will notice some  synchronization-related elements. To the right of the Online Catalog Version, you will see the time of its last synchronization, as well as the  originating version. And just below that, to the right of the Staged Catalog Version, you can once again find the last time the  synchronization took place, as well as the Sync button. If you click on the Sync button from this initial page, the entire Content  Catalog, along with all its items, will be synchronized. Thank you! That ends our demonstration.

<div><div><div>This video is included in the eLearning for Developers:  C4H34Ie</div></div></div>

SmartEdit Pages View

When you click on the Pages link in a given Content Catalog in the SmartEdit Overview, you are taken to the Pages View, where you can find a list of all the pages in that Catalog. In the top-left corner, you will find the SmartEdit navigation bar. Besides the confirmation that you are in the Pages View, you can find a quick link to the Navigation Management, to the Storefront view and back to the Overview. Just below that, in the area that contains the Pages Section title, you can also see a hint of the Content Catalog and Version that you are currently accessing. Below that, you will find the total number of pages in this catalog. To the right, there is the Search Box. You can use it to search for pages by their name, ID or Content Page Label. To the right of the Search Box, you can find the Create Page button. This button will launch the Page Creation Wizard, which will guide you through the process of creating a new page. In the main area, there is a list of all Pages in this Content Catalog, along with some predefined columns: The Page Name, also containing a link to open the selected Page on the Storefront View. There’s also the Page ID, the Page Type, the Page Label, the Page Template, the number of restrictions in a given page, and their Synchronization Status. In the last column, if you click on the three dots, a popup will show you some additional functions to operate on a given page: you can Edit a page, Synchronize it, Clone it and move it to the Trash area. Speaking of which, in the top-right corner resides a Trash link, also showing the number of pages currently in the Trash area. If you click on this link, you will be led to a list of all the pages that were moved to the Trash. At the bottom of the Pages View, you will find a navigation component that allows you to move back and forth through the list of pages. To its right, you will once again find the total number of pages in this Catalog. That concludes our demonstration.

<div><div>Learn how to create custom navigation menus in SAP Commerce by adding featured products using CMS components and navigation nodes. Step-by-step guide for optimizing storefront navigation.<br><br># This description was auto-generated #</div></div>

Utilizing SmartEdit Navigation Nodes

In SAP Commerce, the Appearance and the Structure of navigation links are kept separate. The menus that you see in  the Accelerator Storefront  are backed by CMS Components  that account for their look and feel. However, the menu entries and their links  are kept in a different place,  as Navigation Nodes. To demonstrate how it works let us add a new Menu at the end of the navigation bar,  to show Featured Products. First, get into the Backoffice Product Cockpit. Under the Open Catalogue we added  a new Category called Featured Products. Under this category, we also added  two other categories, Featured Cameras and Featured Accessories, each already populated with some products. We already have everything we need to create our new navigation nodes. Let us log into SmartEdit and go into the Navigation Management, in the staged version of the Content Catalog. We will expand the navigation tree until  we see the Categories node and the current menu entries below it. In the Categories node,  click on the three dots to the right. Note that we can use the Add Child function to add new nodes below this one. We can also use the Add Sibling function to add  new nodes at the same level of this one.  Let’s click on Add Child.   As we create the new Featured  Products Menu Node, we will also  need to create a new node entry. Let’s name it Featured Products Navigation Node Entry. This entry will hold the actual component that  will be shown at this location. As we also create this component,  you can see that it can be a Link, a Simple Banner or a Simple Responsive Banner. Let’s use a Link.  This link can point to some different locations. A category in our case. Now select the featured_products category.  And then save the link,  the entry and the menu node.  Now, we will repeat the same steps and add a new child under the Featured products node.  First for the Featured Cameras category.   And then once again for the Featured Accessories category.   As a side note, if our elements were already defined, we wouldn’t need to recreate them, but just point at the existing ones.  After our new menu is created,  do not forget to synchronize it, so that we can see our additions  in the storefront.   Finally, we will check the result in the  storefront. We just need to refresh the page and our new entry is there working as expected.  This concludes our demonstration.

<div><div><div>SmartEdit's preview mode in-depth explanation on its usefulness and features for efficient editing and rendering in storefronts. Learn how to navigate and control data for effective editing.<br><br># This description was auto-generated #</div></div></div>

Demonstrating SmartEdit Preview Mode

At first glance, SmartEdit's Preview mode doesn't seem to do much. But, it's quite useful when switching back and forth between the other modes. It's most obvious purpose is to render all components exactly how they'd be rendered in the storefront without overlays, and so forth. But a less obvious feature is that all the components' navigation features work, allowing you to navigate  to the page you want to edit, with the data you want displayed. For example, if I simply selected  a search-result page,  or a product-detail page,  I don't have much control over  which products I'm using for my layout.  But, if I navigate  or SEARCH, I can control which  search result or which product's details  I want to use with the other  the other edit modes.  Once you have navigated to  a page with your desired data, you can switch to one of the other  modes and do your work.

<div><div><div>This video is included in the eLearning for Developers: C4H34Ie</div></div></div>

Demonstrating the SmartEdit-Basic Edit Mode

Most of the time, editing CMS pages consists of adding, copying, moving, and removing CMS components within a page's content slots. And that's what BASIC Edit mode is all about. You can ADD a component like this and drag the desired component into a GREEN allowed content slot.  Once a CMS Component is ON a page, IN a slot, you can EDIT its Instance variables for example, change its component ID.  Provide images to display, perhaps for the responsive breakpoints defined for the component, like for this Banner component.  You can view Template-Scoped Content Slots but Template-scoped content slots are not editable in BASIC Edit mode.

<div><div><div><div>Explore the functionalities of SmartEdit's Advanced Edit Mode, including synchronization capabilities, slot management, and CMS component synchronization. Learn how to avoid accidental synchronization and manage shared slots effectively.<br><br># This description was auto-generated #</div></div></div></div>

Demonstrating SmartEdit Advanced Edit Mode

As usual, I'll start this demo by logging into SmartEdit as admin/nimda. In addition to the same Create/Move/Edit/Delete capabilities as in Basic Edit Mode, Advanced Edit Mode adds Synchronization capabilities for CMS items in the Content Catalog and Slot names are now visible and have their own action buttons. So, more capabilities, in exchange for more clutter from the additional overlays added to the view. The reason for the slots being so boldly highlighted is because you can synchronize the CMS components of an individual slot. You can also synchronize the whole CMS page but to be more precise, you can synchronize all the Slots on the page with one click. And, therefore, each slot needs to display its own status icons and action buttons. Advanced Edit Mode also keeps track of which components are in need of synchronizing. This means it keeps track of which components have changed since the last synchronization. Allow me to demonstrate. There's an interesting feature of SmartEdit here that helps us avoid accidental synchronization. This is what it looks like when I click on a Synchronization icon when I'm in Draft mode. We make our changes to the Staged Content Catalog Version in Draft, and then when we're done making changes, we switch to Ready To Sync to enable the synchronization icons. I’ll make a very simple change to an existing component -- this first carousel component, for example, labeled "Our Bestselling Products”. Because I'll be making changes to the Staged Content Catalog Version, I won't see the changes in the storefront until I synchronize to the Online Content Catalog. To demonstrate this point, I'll open the storefront in another browser tab or browser window. Make sure to use the correct URL so that you actually see the storefront and not a special preview of SmartEdit. I'll change the title (the display text) slightly, to "Our Best-Selling Products". I'll refresh the online storefront to show that it is not yet affected. Now, back in SmartEdit, notice the sync status icons.  I'll switch to Ready to Sync, then I can synchronize via the whole-page synchronization option, or this one for the slot. Either one will work for this example. Now, when I refresh the storefront, I will see the changes. Another feature, besides CMS-component synchronization, that is only available in Advanced Edit mode, is to break-out a "shared slot" into an unshared one. A "shared slot" is one that your page compositionally "inherited" from the page template, therefore that slot will be shared by all CMS Page instances that are based on that template. This chain-link symbol in the slot header shows the status of the slot and it allows me to modify the status to non-shared.  Every change to a shared slot will affect all pages that share that slot. If you want to make a change to a shared slot such that it only affects the current page, you must first convert that slot into an unshared one, by clicking on the icon. Note the "broken-chain-link" icon now. You can also revert the slot back to shared. Click on the new icon, and notice the message. Whatever CMS components you instantiated during the time that the link was unshared, still exist, but they will be unlinked from all content slots.

<div><div><div><div><div>Learn how versioning mode in SmartEdit allows you to manage page versions, undo changes, and synchronize content catalog versions seamlessly. Watch to discover the benefits of this powerful feature!<br><br># This description was auto-generated #</div></div></div></div></div>

Demonstrating SmartEdit Versioning Mode

Versioning mode allows you to quickly jump back and forth between a number of named "snapshots" of a page, each containing a set of edits. The most obvious use case is that, prior to editing a page, you can save its starting state as a named version, giving you the page's "original state" as something to "rollback" to, which, effectively, gives you a way to "UNDO" a group of changes. Another use case is where an employee whose job it is to modify a CMS page can create multiple versions of a set of changes that a reviewer can quickly switch back and forth between to help in deciding which implementation version is best. Interestingly, these page versions are stored by SmartEdit in a way different from synchronization of CMS Content Catalog versions. Whichever page version you want to work on or synchronize, use Versioning mode to switch to the desired page version, then switch to another Edit mode, to make changes or synchronize changes to the Online content catalog. Versioning mode is really about managing page versions, and not about editing or synchronization. Once page versions exist, you can switch from named version to named version. Conveniently, you can initiate this switch from Advanced Edit mode, saving you a few clicks.  Allow me to demonstrate... I'll login to SmartEdit as admin / password nimda... ...and click my way over to the Staged Homepage. If I immediately switch to Versioning mode and click on "Versions", I see that "No versions of this page exist". Since I know that I plan to make a group of changes that I will UNDO, I'll immediately "add version" that is, click on "+ Version", and name it baseVersion.  From here I'll make some quick edits to the display text of two components. The kinds of changes I'm making can be done in Basic Edit mode or Advanced Edit Mode, but I'll do them in Advanced Edit Mode so that I can synchronize them as well. I'm mainly doing this to show you that the kind of versioning we're talking about is in addition to and separate from the kind of versioning involved with Content CatalogVersions. I'll open a tab to the storefront,  show you that my changes are not yet visible in the Online store, create a named version -- I'll call it "changeSetA",  ...then synchronize the changes to the online content catalog,   and show that the storefront displays the online content.  Now, back in SmartEdit, we see both page versions,  along with their timestamps. I'll logout and even restart the server just to show you that these page versions survive re-login and restart, you'll just have to trust that I actually performed a server restart. This is useful, for example, to allow a person to make several versions of a page for a reviewer to login and look at later.  Note how easy it is to switch to the base version. We just click on "baseVersion", and I'll even synchronize it to prove that this mechanism is useful for restoring an online store. Note, however, that there is a difference between simply clicking on a version to view it versus clicking on the three-button menu and choosing to rollback to it. Here, I'll do the actual rollback,   then I'll synchronize to the online content catalog,   and refresh the storefront, and you can see that I've been able to restore the online store using this approach. ...and to wrap things up, I'll switch to Advanced Edit Mode so I can show you that there's a convenience feature that allows me to simply switch back and forth to view different versions right here. Or switch over to Versioning Mode from this pulldown menu.