Creación de la nueva página de tienda

En esta lección, creará la nueva página de datos estadísticos en el escaparate, para que los clientes puedan especificar su información.

Procedimiento

Lleve a cabo estos pasos en HCL Commerce Developer.

Copie el archivo StoreLab1/MyStoreSAS/UserArea/AccountSection/ExtProfileForm.jsp en el siguiente directorio: crs-web > WebContent > MyStoreSAS > UserArea > AccountSection.

El archivo ExtProfileForm.jsp contiene el código que muestra un formulario al cliente que captura la información de perfil adicional. Cuando el cliente introduce la información y pulsa Enviar, la información se actualiza en la base de datos.
Expanda crs-web > Java Resources > src/main/resources > MyStoreSAS.
Abra el archivo storetext_v2.properties. Este archivo de propiedades contiene texto traducible que se utiliza en el escaparate. Añada las líneas siguientes al final del archivo:
```
# ExtProfileForm.jsp
EXT_PROFILE_TITLE=Additional Profile Information
MARITAL_STATUS=Marital Status
HOUSEHOLD=Number of people in household (including children)
CHILDREN=Number of children in household
```
Estas claves se utilizan en el archivo ExtProfileForm.jsp.
Guarde los cambios y cierre el archivo.
Defina la configuración de controladores de vista Spring para el archivo ExtProfileForm.jsp.

El directorio crs-web > WebContent > WEB-INF > Spring contiene las configuraciones de Spring. Esto incluye configuraciones predeterminadas y personalizadas. Las configuraciones de Spring personalizadas deben incluirse en los archivos -ext. Cada tienda tiene su propia versión de estos archivos. Los archivos fuera de los directorios de la tienda contienen las configuraciones predeterminadas y se aplican a todas las tiendas.
1. Expanda crs-web > WebContent > WEB-INF > spring > MyStoreSAS.
2. Abra el archivo views-ext.xml para editarlo.
3. Inserte el siguiente fragmento de código antes de la etiqueta </beans>:
```
  <bean id="ExtProfileFormView/MyStoreSAS" class="com.ibm.commerce.store.mvc.view.spring.StoreInternalResourceView">
    <property name="url" value="/UserArea/AccountSection/ExtProfileForm.jsp"/>
    <property name="https" value="1"/>
    <property name="viewAccessType" value="RegisteredCustomerView"/>
  </bean>
```
  En este ejemplo, ExtProfileFormView es el nombre de la vista. La tienda alias, MyStoreSAS, indica que esta vista es específica de la tienda personalizada. El valor URL es la vía de acceso del archivo JSP que se correlaciona con la vista. La nueva vista siempre se ejecutará en modalidad de HTTPS y solo la podrán ejecutar los compradores registrados del sitio (es decir, la vista no será accesible para los usuarios invitados). Si desea información detallada sobre estas propiedades, consulte Personalización de MVC Spring y del controlador de tienda.
Expanda crs-web > WebContent > MyStoreSAS > UserArea > AccountSection y abra el archivo ExtProfileForm.jsp. Localice la línea siguiente:
```
<form name="Logon" method="post" action="RESTUserRegistrationUpdate"
id="Logon">
```
En este ejemplo, la acción utilizada es RESTUserRegistrationUpdate. Cuando el cliente introduce la información necesaria en el formulario y pulsa el botón Enviar, se llama a la acción definida. El valor RESTUserRegistrationUpdate es un URL que debe correlacionarse con un controlador de acción de Spring. Esta correlación se puede encontrar en el archivo crs-web\WebContent\WEB-INF\spring\controllers.xml:
```
<prop key="/RESTUserRegistrationUpdate">userRegistrationUpdate</prop>
```
El URL de RESTUserRegistrationUpdate se correlaciona con la controlador de acción userRegistrationUpdate. El bean de controlador de acción userRegistrationUpdate se define en el archivo crs-web\WebContent\WEB-INF\spring\member-controllers.xml:
```
<bean id="userRegistrationUpdate"
class="com.ibm.commerce.store.mvc.controller.spring.RESTActionController
">
<property name="https" value="1"/>
<property name="authenticate" value="0"/>
<property name="parameter" value="personHandler.updatePerson"/>
<property name="generic" value="1"/>
<property name="csrfProtected" value="1"/>
</bean>
```
En la definición de bean controlador anterior, la propiedad de parameter identifica el servicio REST al que se llama cuando se llama a esta acción. Cada servicio de REST tiene una plantilla que define sus formatos de punto final URL, método, solicitud y respuesta. Las plantillas REST predeterminadas se encuentran en el directorio crs-web\WebContent\WEB-INF\xml\config. Las plantillas que están relacionadas con el componente de miembro se encuentran en el directorio com.ibm.commerce.person.
El valor del parámetro está en el formato siguiente: resourceName.methodName. Por lo tanto, personHandler.updatePerson representa el método updatePerson del servicio Rest de personHandler en el archivo rest-template-config.xml, tal como se muestra en negrita:
```
	<resource path="{serverHost}/{contextPath}/store/{storeId}/person" name="personHandler">
	 <serverParam name="serverHost">$WCParam.serverHost</serverParam>
	 <serverParam name="contextPath">$WCParam.contextPath</serverParam>
	 <serverParam name="storeId">$WCParam.storeId</serverParam>
		<method name="updatePerson" httpMethod="PUT" path="@self?action={action}">
		<var name="action">updateUserRegistration</var>
```
La plantilla predeterminada de updatePerson no incluye el estado civil, la unidad familiar y los hijos en la solicitud. Por ello, si denomina updatePerson su formulario actual, estos campos no se guardarán en la base de datos. Personalizará la plantilla REST para incluir estos campos que faltan.
Expanda crs-web > WebContent > WEB-INF > xml y cree la estructura de directorios siguiente: config/com.ibm.commerce.person.
Copie el archivo StoreLab1/WEB-INF/xml/config/com.ibm.commerce.person/rest-template-config-ext.xml de los elementos de la guía de aprendizaje de ejemplo en el directorio recién creado. Este archivo es una copia de la plantilla REST de com.ibm.commerce.person predeterminada, pero contiene los campos que faltan en la definición updatePerson hacia el final de la plantilla.
Renueve el proyecto crs-web. El directorio y su contenido deben parecerse a la siguiente captura de pantalla dentro del proyecto:
Puede abrir el archivo y revisarlo, teniendo en cuenta que existen los siguientes valores:
```
"maritalStatus" : "$maritalStatus",
"household" : "$household",
"children" : "$children"
```
El nombre del parámetro de solicitud JSON debe coincidir con los parámetros admitidos por el servicio REST. El nombre de la variable debe coincidir con la variable de entrada definida en el formulario de archivo JSP donde se captura la entrada de cliente.

Los parámetros de solicitud admitidos de updatePerson se muestran en la siguiente API de REST: Gestión de usuarios y organizaciones.

Vaya a la etiqueta : Sección Persona y pulse PUT /atore/{storeId}/person/@self.

Esta URL coincide con la vía de acceso de recurso y la vía de acceso de método definidas en la plantilla REST, tal como se muestra en negritas:


	<resource path="{serverHost}/{contextPath}/store/{storeId}/person" name="personHandler">
	 <serverParam name="serverHost">$WCParam.serverHost</serverParam>
	 <serverParam name="contextPath">$WCParam.contextPath</serverParam>
	 <serverParam name="storeId">$WCParam.storeId</serverParam>
		<method name="updatePerson" httpMethod="PUT" path="@self?action={action}">
		<var name="action">updateUserRegistration</var>

Haga clic en UserRegistrationUpdateRequest en el cuerpo de la solicitud.

Este enlace muestra la lista de parámetros de solicitud admitidos.
Reinicie el servidor de prueba de la tienda e inicie el servidor de prueba de personalización y el contenedor de servidor de pruebas de búsqueda, si el servidor y el contenedor no están ya en ejecución. Para obtener más información, consulte la vista Servidores:

Resultados

En esta lección, creará la nueva página de tienda y revisará su comportamiento en la API de REST.