{"id":21081,"date":"2022-07-13T13:49:08","date_gmt":"2022-07-13T11:49:08","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=21081"},"modified":"2024-01-25T10:33:13","modified_gmt":"2024-01-25T09:33:13","slug":"spartacus-sap-commerce","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/spartacus-sap-commerce\/","title":{"rendered":"Buenas pr\u00e1cticas con Spartacus de SAP Commerce"},"content":{"rendered":"

Las \u00faltimas versiones de SAP Commerce<\/a> plantean una soluci\u00f3n basada en un frontal desacoplado desarrollado en Angular, utilizando una librer\u00eda que nos provee el producto denominada Spartacus<\/strong><\/a>. Por defecto nos provee de un storefront<\/em> que nos permite realizar personalizaciones para conseguir cumplir los objetivos de los proyectos. En este proceso de customizaci\u00f3n debemos tener en cuenta que Spartacus<\/em> cuenta con muchos m\u00f3dulos, componentes, servicios, etc. El objetivo de este art\u00edculo es identificar algunas buenas pr\u00e1cticas a tener en cuenta cuando se afronta el desarrollo de un ecommerce basado en Spartacus<\/em>.<\/p>\n

Un buen resumen de las capacidades y las ventajas de utilizar el framework Spartacus se puede consultar en el art\u00edculo \u00abSAP Commerce Cloud y Spartacus: el frontal de tu e-commerce SEO-Friendly con Angular<\/a><\/strong>\u00ab.<\/p>\n

2.\u00a0\u00a0 Buenas pr\u00e1cticas<\/h2>\n

A continuaci\u00f3n, se recogen algunas buenas pr\u00e1cticas a tener en cuenta si afrontamos un proyecto SAP Commerce cuya capa de presentaci\u00f3n est\u00e9 basada en Spartacus<\/em>.<\/p>\n

P\u00e1ginas est\u00e1ticas vs CMS<\/h3>\n

En aplicaciones basada en Angular<\/a>, cuando queremos a\u00f1adir una nueva p\u00e1gina, a\u00f1adimos una nueva ruta en el componente que queremos que se muestre:<\/p>\n

\"\"<\/p>\n

A pesar de que en Spartacus tambi\u00e9n se podr\u00eda hacer lo mismo, la recomendaci\u00f3n es no hacerlo. Spartacus trabaja con el CMS de SAP, por lo que se recomienda crear la p\u00e1gina en el CMS<\/a> junto con los componentes que queramos que contenga.<\/p>\n

Si necesitamos generar nuevos componentes se deber\u00e1 realizar tanto en el CMS<\/em> como en Spartacus<\/em> y posteriormente relacionar los dos componentes generados para que se puedan visualizar.<\/p>\n

\"Spartacus<\/p>\n

Templates, slots y componentes<\/h2>\n

En el CMS se puede crear y configurar cada una de las p\u00e1ginas que formar\u00e1n el ecommerce. Cada p\u00e1gina tiene asociado una template que define la estructura de la misma. Cada template contiene una serie de slots, y es dentro de estos \u00faltimos donde elegimos que componentes se deben mostrar. Spartacus tiene definidos por defecto algunos templates, pero podemos definir todos los que necesitemos a\u00f1adi\u00e9ndolos a la configuraci\u00f3n:<\/p>\n

\"Spartacus<\/p>\n

Rutas<\/h2>\n

Al crear una p\u00e1gina en el CMS se le define un atributo llamado pageLabel. Esa ser\u00e1 la ruta en la cual se mostrar\u00e1 la nueva p\u00e1gina.<\/p>\n

En algunos casos vamos a querer que la ruta contenga alg\u00fan par\u00e1metro, por ejemplo un c\u00f3digo \u2018\/miRuta\/:code\u2019. El CMS esto no lo permite, pero Spartacus s\u00ed. Para ello tendremos que a\u00f1adir la ruta como lo har\u00edamos en una aplicaci\u00f3n de Angular normalmente:<\/p>\n

\"Spartacus\"<\/p>\n

Se debe definir la propiedad path <\/em>con la nueva ruta, en la propiedad pageLabel la ruta origina definida en el CMS. De esta manera Spartacus ser\u00e1 capaz de relacionar que cuando se solicite la nueva ruta debe resolver la p\u00e1gina cuyo patr\u00f3n est\u00e1 definida en el CMS con la ruta antigua. Es necesario tambi\u00e9n indicar el componente y la guarda que nos proporciona Spartacus para mostrar p\u00e1ginas del CMS.<\/p>\n

 <\/p>\n

Modificar rutas por defecto<\/h2>\n

Es posible modificar la ruta que Spartacus define para alguna de las p\u00e1ginas, por ejemplo, por requerimientos relacionados con el SEO. Estas rutas se pueden modificar a trav\u00e9s del m\u00f3dulo de configuraci\u00f3n. Por ejemplo, la p\u00e1gina de detalle de producto est\u00e1 bajo la ruta \u2018\/producto\/:code\/:name\u2019, se podr\u00eda modificar para suprimir el c\u00f3digo.<\/p>\n

\"Spartacus<\/p>\n

Rutas privadas<\/h2>\n

En un ecommerce no todas las p\u00e1ginas son p\u00fablicas, algunas requieren de autenticaci\u00f3n. Por defecto, cuando creamos una p\u00e1gina, es p\u00fablica. Si queremos cambiar este comportamiento podemos hacerlo indic\u00e1ndolo en la definici\u00f3n de la ruta.<\/p>\n

\"Spartacus\"<\/p>\n

Global Messages<\/h2>\n

En cualquier aplicaci\u00f3n es muy \u00fatil poder mostrar mensajes para informar al usuario sobre si una acci\u00f3n ha finalizada de forma exitosa o con un error. Para este cometido, Spartacus<\/em> nos provee el m\u00f3dulo \u2018GlobalMessageModule\u2019<\/em>. Nos permitir\u00e1 configurar par\u00e1metros como el tipo de mensaje que queremos mostrar o el tiempo que tiene que pasar hasta que el mensaje desaparezca.<\/p>\n

Gestionar errores de comunicaci\u00f3n con el backend<\/h2>\n

Spartacus<\/em> nos provee un mecanismo sencillo para gestionar los errores de comunicaci\u00f3n que pueda surgir en una petici\u00f3n http.<\/p>\n

Podemos definir un inyectable que extienda la funcionalidad de \u2018HttpErrorHandler\u2019<\/em> donde definamos el c\u00f3digo http de error y que acciones se deben realizar.<\/p>\n

\"Spartacus\"<\/p>\n

En el ejemplo se define que aquellas peticiones que devuelvan un error 403 (Forbidden<\/em>) se va a mostrar un mensaje para informar al usuario. Una vez tenemos el inyectable debemos registrarlo para que sea manejado por Spartacus<\/em>.<\/p>\n

 <\/p>\n

Extender componentes<\/h2>\n

Los componentes que nos provee Spartacus<\/em> tiene un comportamiento que en muchas ocasiones necesitamos modificar para adaptarlos a los requerimientos. Spartacus<\/em> nos permite extender y sobreescribir cada uno de sus componentes de forma individual para modificar su comportamiento est\u00e1ndar. A trav\u00e9s del m\u00f3dulo de configuraci\u00f3n se definir\u00e1 el nuevo componente.<\/p>\n

\"Spartacus\"<\/p>\n

Redux<\/h2>\n

Spartacus<\/em> utiliza el patr\u00f3n redux<\/em> para manejar la persistencia de algunos datos de la aplicaci\u00f3n como el usuario activo o los detalles del carrito actual. Es importante utilizar los servicios que nos provee para manejar esta informaci\u00f3n, ya que conseguiremos una consistencia a la hora de tratar estos datos y ahorrar peticiones innecesarias al backend<\/em> del aplicativo.<\/p>\n

 <\/p>\n

Reutilizaci\u00f3n de componentes<\/h2>\n

Spartacus<\/em> provee componentes con muchas funcionalidades que podemos aprovechar en nuestras p\u00e1ginas como pesta\u00f1as, carrusel de im\u00e1genes, generar enlaces, mostrar im\u00e1genes en funci\u00f3n del tama\u00f1o (thumbnail, zoom, \u2026), tablas, paginadores de elementos, etc. Siempre que se quiera llevar a cabo una nueva funcionalidad se debe evaluar si Spartacus<\/em> ya la tiene en alguno de sus componentes.<\/p>\n

 <\/p>\n

Conclusiones<\/h2>\n

Spartacus<\/em> nos permite crear de forma \u00e1gil frontales desacomplados con SAP Commerce. Nos provee m\u00faltiples m\u00f3dulos, componentes, funcionalidades, servicios, etc que si somos capaces de reutilizarlos de forma adecuado nos simplificar\u00e1n y acelerar\u00e1n la consecuci\u00f3n de los objetivos del cliente. Utilizar estas buenas pr\u00e1cticas y otras muchas recomendadas por el framework<\/em> se hace fundamental para realizar un trabajo m\u00e1s eficiente, que nos permita en el futuro poder mantener, evolucionar y escalar la soluci\u00f3n.<\/p>\n

En Hiberus Digital<\/strong><\/a> hacemos realidad la transformaci\u00f3n digital de tu compa\u00f1\u00eda. Disponemos de un equipo multidisciplinar, expertos en todos los \u00e1mbitos de acci\u00f3n de los negocios digitales. Si est\u00e1s pensando en implantar esta soluci\u00f3n o migrar tu soluci\u00f3n SAP Hybris a la nube<\/strong>, no dudes en contactar con nosotros y te mostraremos todas nuestras tecnolog\u00edas para e-commerce<\/strong><\/a>.<\/p>\n

\n
\n
\n
\n

\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de SAP CX?<\/p>\n

Contacta con nuestro equipo de SAP CX<\/p>\n <\/div>\n

\n \n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n\t
    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t