Función de resaltado de pulsar para editar en el archivo StoreCommonUtilities.js

El archivo StoreCommonUtilities.js contiene una función JavaScript que controla la visualización de enlaces pulsar para editar y resalta elementos de la página que contiene enlaces. Si está personalizando pulsar para editar, no olvide el objetivo y la implementación de esta función.

Finalidad de la función de resaltado

La función de resaltado muestra usuarios de empresa donde los enlaces de pulsar para editar están en la vista previa de la tienda y a qué objetos de negocio se aplican. Cuando utiliza una lista previa de la tienda, el usuario de empresa activa la función de resaltado pulsando el botón Mostrar información de página en la parte superior de la ventana de lista previa de la tienda. Este botón:
  • Muestra enlaces de pulsar para editar que están incluidos directamente en las páginas de la tienda.
  • Muestra enlaces Mostrar información que abren las ventanas emergentes de lista previa de la tienda que contiene enlaces de pulsar para editar.

La función de resaltado también añade un contorno azul al elemento de la página HTML que contiene el enlace. A continuación, cuando el usuario de empresa pasa el ratón sobre el elemento de la página, un resaltado gris recubre el elemento de la página.

Fragmento de código para la función de resaltado

El fragmento de código siguiente es de la función de resaltado del archivo StoreCommonUtilities.js. Puede revisar este archivo en la vía de acceso siguiente:

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");

...

La línea de código marcada 1 muestra los nombres de clase CSS a los que se hace referencia desde los enlaces pulsar para editar y desde otros elementos de página HTML. Los nombres de clase CSS se utilizan para indicar los elementos de página HTML a los que se aplica la función de resaltado. Las clases CSS son las siguientes:

producto
Indica el área en la que se muestra una zona de e-Marketing que muestra un enlace Editar para una entrada de catálogo o una categoría. Esta clase se utiliza para una zona de e-Marketing que contiene una cuadrícula de cuatro columnas.
productDetail
Indica el área en la página detalles del producto que muestra un enlace Editar para una entrada de catálogo.
categorySpot
Indica el área en una página de categoría que muestra un enlace Editar para una categoría.
genericESpot
Indica una zona de e-Marketing. El usuario de empresa debe pulsar el enlace Mostrar información en la zona de e-Marketing para visualizar la página Información de zona de e-Marketing. Esta página contiene los enlaces Crear y Editar.
searchResultSpot
Indica el área de resultados de la búsqueda en la página de resultados de la búsqueda. El usuario de empresa debe pulsar el enlace Mostrar información para visualizar la página Información de regla de búsqueda. Esta página contiene los enlaces Crear y Editar.

Cómo hacer referencia a los nombres de clase CSS de enlaces pulsar para editar y otros elementos de la página HTML

Para aplicar la función de resaltado de pulsar para editar a un elemento de página, debe hacer referencia a una de las clases CSS que aparece listada en el archivo StoreCommonUtilities.js (consulte 1 en el fragmento de código anterior). Por ejemplo, la página de la tienda de detalles del producto (archivo ProductDisplay.jsp) muestra un enlace Editar. En dicho archivo JSP, el elemento de la página HTML específica que contiene el enlace es el contenedor para la imagen del producto:
 <div class="container_product_details_image_information container_margin_5px productDetail">

Al final de esta línea de código, observe la referencia a la clase CSS de productDetail. Esta clase CSS está listada en la función de resaltado en el archivo StoreCommonUtilities.js.

Como resultado, cuando el usuario de empresa pulsa el botón Mostrar información de página en la página de detalles del producto en la vista previa de la tienda, la función de resaltado de pulsar para editar muestra el enlace Editar y aplica el resaltado al contenedor para la imagen del producto.