Click-to-edit highlighting function in the StoreCommonUtilities.js file

The StoreCommonUtilities.js file contains a JavaScript function that controls the display of click-to-edit links, and highlights page elements that contain links. If you are customizing click-to-edit, be aware of the purpose and implementation of this function.

Purpose of the highlighting function

The highlighting function shows business users where the click-to-edit links are in store preview and which business objects they apply to. When you are using store preview, the business user turns on the highlighting function by clicking the Show Page Information button at the top of the store preview window. This button:

Displays click-to-edit links that are embedded directly on store pages.
Displays Show Information links that open the store preview pop-up windows that contain click-to-edit links.

The highlighting function also adds a blue outline to the HTML page element that contains the link. Then, when the business user hovers over the page element, a gray highlight overlays the page element.

Code snippet for the highlighting function

The following code snippet is from the highlighting function in the StoreCommonUtilities.js file. You can review this file at the following path:

WCDE_installdir/workspace/Stores/WebContent/Aurora/javascript/StoreCommonUtilities.js

...

/**
* This function highlight all marketing spots and catalog objects in preview mode, 
overwriting the implementation in site level (StorePreviewerHeader.jsp)
*/
function outlineSpots(){
  dojo.addClass(document.body,'editMode');
  dojo.query(".ESpotInfo").style({ display:"block" });
  dojo.query(".searchScore").style({ display:"block" });
1 var all = dojo.query(".genericESpot,.product,.searchResultSpot,.productDetail,.categorySpot");

...

The line of code marked 1 shows the CSS class names that are referenced from click-to-edit links and from other HTML page elements. The CSS class names are used to indicate the HTML page elements to which the highlighting function is applied. The CSS classes are as follows:

product: Indicates the area within an e-Marketing Spot that displays an Edit link for either a catalog entry or a category. This class is used for an e-Marketing Spot that contains a four-column grid.
productDetail: Indicates the area on the product details page that displays an Edit link for a catalog entry.
categorySpot: Indicates the area on a category page that displays an Edit link for a category.
genericESpot: Indicates an e-Marketing Spot. The business user must click the Show Information link on the e-Marketing Spot to display the E-Marketing Spot Information page. This page contains the Create and Edit links.
searchResultSpot: Indicates the search results area on the search results page. The business user must click the Show Information link to display the Search Rule Information page. This page contains the Create and Edit links.

Referencing the CSS class names from click-to-edit links and other HTML page elements

To apply the click-to-edit highlight function to a page element, you must reference one of the CSS classes that is listed in the StoreCommonUtilities.js file (see 1 in the previous code snippet). For example, the product details store page (ProductDisplay.jsp file) displays an Edit link. In that JSP file, the specific HTML page element that contains the link is the container for the product image:

 <div class="container_product_details_image_information container_margin_5px productDetail">

At the end of this line of code, notice the reference to the productDetail CSS class. This CSS class is listed in the highlighting function in the StoreCommonUtilities.js file.

As a result, when the business user clicks the Show Page Information button on the product details page in store preview, the click-to-edit highlighting function displays the Edit link and apply highlighting to the container for the product image.