Cómo crear un escaparate de PWA usando Magento 2 PWA Studio

Hoy hablaremos sobre cómo trabajar con Magento PWA Studio y cómo crear un tema personalizado basado en el tema Venia de Magento.

Enlaces útiles: por qué usar PWA y qué ventajas trae PWA Studio →

Resumen del artículo [ ocultar ]

  • Cómo crear un tema personalizado en PWA Studio
    • Estudio alternativo
    • Proyecto Andamios
  • Cómo crear un tema PWA con Scaffolding
    • Preparativos
    • ¿Cómo actualizar el componente principal?
    • ¿Cómo crear un componente TopBar?

 

Cómo crear un tema personalizado en PWA Studio

Tiene al menos 2 formas de desarrollar un tema personalizado usando:

  1. Estudio alternativo de Jordan Eisenburger ;
  2. el proyecto Scaffolding apoyado por Magento Core Team.

Consideremos estos estudios temáticos de Magento en detalle.

Estudio alternativo

Este método crea un envoltorio alrededor de PWA Studio, es decir, copia la estructura de archivos del proyecto de origen y puede cambiarlos sin ningún riesgo. De esta manera, le permite desarrollar un tema de tienda personalizado que depende de los conceptos de Venia, donde puede cambiar o ampliar los componentes según sus necesidades. La idea principal es la misma que en el Magento predeterminado.

Sin embargo, Fallback Studio fue desarrollado por una sola persona y aún no se ha actualizado, por lo que está un poco desactualizado en este momento. Ahora no está claro si admite nuevas versiones de PWA Studio y cómo se desarrollará más.

Obtenga más información sobre Fallback Studio aquí →

Proyecto Andamios

Al mismo tiempo, Scaffolding es un proyecto exitoso que el Magento Core Team actualiza constantemente y va junto con PWA Studio. Este es un método de creación automática de archivos que admite una estructura de proyecto específica. PWA Studio proporciona herramientas para simplificar la creación de proyectos y le permite diseñar su propio tema PWA en Magento 2.

Además, Scaffolding es más fácil de entender y tiene más herramientas de automatización que Fallback Studio. Es por eso que hemos decidido considerar la creación de temas de PWA basados ​​en Scaffolding.

Más información sobre andamios aquí →

Cómo crear un tema PWA con Scaffolding

Si bien el tema es comparativamente nuevo y pocos expertos han escrito recomendaciones extensas sobre Magento PWA Studio, consideramos que esta publicación de blog de Lars Roettig es la mejor referencia. A continuación, proporcionamos los pasos principales de la guía.

Hoy ampliaremos el componente principal y crearemos el componente TopBar como los primeros elementos de nuestro sitio web.

Preparativos

Antes de comenzar, asegúrese de tener suficiente experiencia laboral con React, HTML, CSS y Webpack. Además, debe preinstalar las siguientes herramientas:

  • NodoJS >=10.14.1 LTS
  • Hilo >=1.13.0
  • Python 2.7, consulte las instrucciones de instalación en node-gyp
  • Una instancia en ejecución de Magento 2.3.1 o superior

¿Cómo actualizar el componente principal?

Cree un nuevo proyecto con el siguiente comando:

hilo crear @magento/pwa

 

Paso #1 . Una vez que comience la instalación, ingrese el nombre del directorio donde se debe instalar el proyecto, el nombre del proyecto, el nombre del autor , la URL del backend de Magento (de lo contrario, el sistema le ofrecerá instalar una nueva instancia de Magento) y token .

Debe tener un aspecto como este:

Paso #2 . A continuación, cree un complemento de Webpack anulado . Ayudará al coleccionista a reemplazar los componentes predeterminados por otros avanzados.

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. // webpack.config.js
  2.  
  3. const ruta = require ( ‘ruta’ ) ;
  4. const glob = require ( ‘glob’ ) ;
  5.  
  6. módulo. exportaciones = clase NormalModuleOverridePlugin {
  7.   constructor ( moduleOverrideMap ) {
  8.   esto _ nombre = ‘NormalModuleOverridePlugin’ ;
  9.         esto _ móduloOverrideMap = móduloOverrideMap ;
  10.     }
  11.  
  12.   requireResolveIfCan ( id , opciones = indefinido ) {
  13.   prueba {
  14.   Requiere devolución . resolver ( id , opciones ) ;
  15.         } atrapar ( e ) {
  16.   volver indefinido ;
  17.         }
  18.  }
  19.   resolveModulePath ( contexto , solicitud ) {
  20.   const filePathWithoutExtension = ruta. resolver ( contexto , solicitud ) ;
  21.         archivos const = globo. sincronizar ( `$ { ruta del archivo sin extensión } @ ( | . * ) ` ) ;
  22.         if ( archivos. longitud === 0 ) {
  23.   throw new Error ( `No hay archivo ‘${filePathWithoutExtension}’ ` ) ;
  24.         }
  25.   if ( archivos. longitud > 1 ) {
  26.   lanzar un nuevo error (
  27.   `Hay más de un archivo ‘${filePathWithoutExtension}’ `
  28.  ) ;
  29.         }
  30.  
  31.   Requiere devolución . resolver ( archivos [ 0 ] ) ;
  32.     }
  33.  
  34.   resolveModuleOverrideMap ( contexto , mapa ) {
  35.   devolver Objeto . claves ( mapa ) . reducir (
  36.  ( resultado , x ) => ( {
  37.   … resultado ,
  38.                 [ requerir. resolver ( x ) ] :
  39.                 esto _ requireResolveIfCan ( mapa [ x ] ) ||
  40.  esto _ resolveModulePath ( contexto , mapa [ x ] )
  41.  } ) ,
  42.             { }
  43.  ) ;
  44.     }
  45.  
  46.   aplicar ( compilador ) {
  47.   if ( Objeto . claves ( este . moduleOverrideMap ) . longitud === 0 ) {
  48.   volver ;
  49.         }
  50.  
  51.   const moduleMap = esto . resolverModuleOverrideMap (
  52.   compilador. contexto ,
  53.             esto _ móduloOverrideMap
  54.   ) ;
  55.  
  56.         compilador. ganchos _ fábrica de módulos normales . toque ( este . nombre , nmf => {
  57.   nmf. ganchos _ antes de resolver . toque ( este . nombre , resolver => {
  58.   si ( ! resolver ) {
  59.   volver ;
  60.                 }
  61.  
  62.   const moduleToReplace = esto . RequerirResolverSiPuede (
  63.   resolver. solicitud ,
  64.                     { rutas : [ resolver. contexto ] }
  65.  ) ;
  66.                 if ( móduloParaReemplazar && moduleMap [ móduloParaReemplazar ] ) {
  67.   resolver. solicitud = moduleMap [ moduleToReplace ] ;
  68.                 }
  69.  
  70.   volver resolver ;
  71.             } ) ;
  72.         } ) ;
  73.     }
  74. } ;

Paso #3 . Reescribamos o ampliemos los componentes predeterminados de PWA Studio agregando un bloque div con texto: Static Block for TopBar .

Para ello, cree la carpeta lib y copie el componente principal :
div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. cd mi proyecto
  2. mkdir – p src / lib / componentes /
  3. cp – R node_modules /@ magento / venia – ui / lib / components / Main src / lib / components /

Actualice el componente principal :

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. // src/lib/componentes/Main/main.js
  2. importar reaccionar desde ‘reaccionar’
  3. importar { bool , forma , cadena } de ‘prop-types’
  4. importar { useScrollLock } desde ‘@magento/peregrine’
  5. importar { mergeClasses } desde ‘@magento/venia-ui/lib/classify’
  6. importar pie de página desde ‘@magento/venia-ui/lib/components/Footer’
  7. importar encabezado desde ‘@magento/venia-ui/lib/components/Header’
  8. importar clases predeterminadas desde ‘./main.css’
  9.  
  10. const Principal = apoyos => {
  11.     const { hijos , está enmascarado } = props ;
  12.     const clases = mergeClasses ( clases predeterminadas , props. clases ) ;
  13.  
  14.     const rootClass = isMasked ? clases root_masked : clases. raíz ;
  15.     const pageClass = isMasked ? clases page_masked : clases. página ;
  16.  
  17.     useScrollLock ( isMasked ) ;
  18.  
  19.     volver (
  20.         < nombre de clase principal = { claseraíz } >
  21.             < div > Bloque estático para TopBar </ div >
  22.             < Encabezado / >
  23.             < div className = { pageClass } > { children } </ div >
  24.             < Pie de página />
  25.         </ principal >
  26.     ) ;
  27. } ;
  28.  
  29. exportar principal predeterminado ;
  30.  
  31. Principal. propTypes = {
  32.     clases : forma ( {
  33.         página : cadena ,
  34.         página_enmascarada : cadena ,
  35.         raíz : cadena ,
  36.         root_masked : cadena
  37.     } ) ,
  38.     está enmascarado : bool
  39. } ;

Paso #4 . A continuación, cree y configure el archivo componentOverrideMapping.js . Almacena un mapa de anulación de componentes estándar. Sintaxis:

['ruta al componente predeterminado de Venia']: 'ruta al componente predefinido'
    div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; }    div.embedPastebin {  }    div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; }    div.embedPastebin div.embedFooter a,    div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; }    div.embedPastebin div.embedFooter a:hover { color: red; }    .noLines ol { list-style-type: none; padding-left: 0.5em; }    .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px}    .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,'Bitstream Vera Sans Mono','Courier',monospace; }    ol { margin:0; padding: 0 0 0 55px}    ol li { border:0; margin:0;padding:0; }    li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;}    .embedPastebin ol li.li1 { margin: 0; }    .embedPastebin ol li.li2 { margin: 0; }
    
                    
Datos alojados con ♥ por Pastebin.com - Descargar Raw - Ver original
                
            
                
  1. //componentOverrideMapping.js
  2.  
  3. módulo. exportaciones  = componenteOverride =  {
  4.  [ ` @ magento / venia - ui / lib / components / Main` ] :  'src/lib/components/Main'  } ;

 

Paso #5 . Después de eso, debemos registrar el complemento en webpack.config.js . Para esto, importe los archivos moduleOverrideWebpackPlugin.js y componentOverrideMapping.js y llame al complemento agregándolo a la lista clientConfig.plugins .
div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. // webpack.config.js
  2. constante {
  3.   configurar Webpack ,
  4.     graphQL : { getMediaURL , getUnionAndInterfaceTypes }
  5. } = requerir ( ‘@magento/pwa-buildpack’ ) ;
  6. const { DefinePlugin } = require ( ‘webpack’ ) ;
  7. const HTMLWebpackPlugin = require ( ‘html-webpack-plugin’ ) ;
  8.  
  9. const moduleOverridePlugin = require ( ‘./moduleOverrideWebpackPlugin’ ) ;
  10.  
  11. const componentOverrideMapping = require ( ‘./componentOverrideMapping’ ) ;
  12.  
  13. módulo. exportaciones = entorno asíncrono => {
  14.   const mediaUrl = await getMediaURL ( ) ;
  15.  
  16.     global. MAGENTO_MEDIA_BACKEND_URL = mediaUrl ;
  17.  
  18.     const unionAndInterfaceTypes = await getUnionAndInterfaceTypes ( ) ;
  19.  
  20.     const { clientConfig , serviceWorkerConfig } = esperar configureWebpack ( {
  21.   contexto : __dirname ,
  22.         vendedor : [
  23.   ‘@apollo/reaccionar-ganchos’ ,
  24.             ‘apollo-cache-inmemory’ ,
  25.             ‘apollo-cache-persist’ ,
  26.             ‘polo-cliente’ ,
  27.             ‘apolo-enlace-contexto’ ,
  28.             ‘polo-enlace-http’ ,
  29.             ‘informado’ ,
  30.             ‘reaccionar’ ,
  31.             ‘reaccionar-dom’ ,
  32.             ‘reaccionar-pluma’ ,
  33.             ‘reaccionar-redux’ ,
  34.             ‘reaccionar-router-dom’ ,
  35.             ‘redux’ ,
  36.             ‘redux-acciones’ ,
  37.             ‘redux-thunk’
  38.  ] ,
  39.         especial : {
  40.   ‘reaccionar-pluma’ : {
  41.   esModules : verdadero
  42.  } ,
  43.             ‘@magento/peregrino’ : {
  44.   esModules : verdadero ,
  45.                 módulos css : verdadero
  46.  } ,
  47.             ‘@magento/venia-ui’ : {
  48.   cssModules : verdadero ,
  49.                 esModules : verdadero ,
  50.                 graphqlQueries : verdadero ,
  51.                 componentes raíz : verdadero ,
  52.                 hacia arriba : cierto
  53.  }
  54.  } ,
  55.         env
  56.     } ) ;
  57.  
  58.     /**
  59. * configureWebpack() devuelve un objeto de configuración de Webpack regular. * Puede personalizar la compilación mutando el objeto aquí, como en * este ejemplo. Dado que es una configuración regular de Webpack, el objeto * admite la opción `module.noParse` en Webpack, documentada aquí: * https://webpack.js.org/configuration/module/#modulenoparse */ clientConfig. módulo _ noParse = [ / braintree – web – drop – in / ] ;
  60.     clientConfig. complementos = [
  61.   … clientConfig . complementos ,
  62.         nuevo DefinirPlugin ( {
  63.   /**
  64. * Asegúrese de agregar las mismas constantes al * objeto global en jest.config.js. */ UNION_AND_INTERFACE_TYPES : JSON. stringify ( unión y tipos de interfaz ) ,
  65.             NOMBRE_DE_LA_TIENDA : JSON. cadena ( ‘Venia’ )
  66.  } ) ,
  67.         nuevo HTMLWebpackPlugin ( {
  68.   nombre de archivo : ‘index.html’ ,
  69.             plantilla : ‘./template.html’ ,
  70.             minificar : {
  71.   colapsoEspacio en blanco : verdadero ,
  72.                 eliminarComentarios : verdadero
  73.  }
  74.  } ) ] ;
  75.    clientConfig. complementos _ empujar (
  76.  nuevo moduleOverridePlugin ( componentOverrideMapping )
  77. ) ;
  78.  
  79.     volver [ configuracióncliente , configuraciónTrabajadorservicio ] ;
  80. } ;

Una vez finalizadas las configuraciones, ejecute el comando Watch :

reloj de hilo

 

Como resultado, debería obtener un tema con el componente principal anulado :

¿Cómo crear un componente TopBar?

Ahora vamos a crear un componente de reacción personalizado que reemplazará el bloque estático para la barra superior de nuestro primer ejemplo.

Paso #1 . Para especificar estilos, cree el archivo src/lib/components/TopBar/topbar.css :
div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. // src/lib/components/TopBar/topbar .css
  2. .raíz
  3. {
  4.   color de fondo : rgb ( var ( –venia-teal ) ) ;
  5.   relleno : 0,5 rem ;
  6.   color : #fff ;
  7.   pantalla : flexión ;
  8.   justificar-contenido : centro ;
  9. }

Paso #2 . Luego crea el archivo con nuestro componente de reacción:
div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. // src/lib/components/TopBar/topbar.js
  2. importar reaccionar desde ‘reaccionar’
  3. importar { forma , cadena } de ‘prop-types’
  4. importar { mergeClasses } desde ‘@magento/venia-ui/lib/classify’
  5.  
  6. importar clases predeterminadas desde ‘./topbar.css’
  7.  
  8. const TopBar = props => {
  9.     const clases = mergeClasses ( clases predeterminadas , props. clases ) ;
  10.     volver (
  11.         < div className = { clases. raíz } >
  12.  Su primer componente de reacción personalizado   </ div >
  13.   )
  14. } ;
  15.  
  16. Barra superior. propTypes = {
  17.     clases : forma ( {
  18.         raíz : cadena ,
  19.     } )
  20. } ;
  21.  
  22. exportar la barra superior predeterminada ;

Paso #3 . Exporte su componente personalizado:

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1. // src/lib/components/TopBar/index.js
  2. exportar { predeterminado } desde ‘./topbar’ ;

Paso 4. Luego actualice el componente principal :

div.embedPastebin { text-align:left; padding: 0; color: #000; margin: 0; font-family: monospace; background: #F7F7F7; border: 1px solid ddd; border-radius:3px; } div.embedPastebin { } div.embedPastebin div.embedFooter { background: #F7F7F7; color: #333; font-size: 100%; padding: 6px 12px; border-bottom: 1px solid #ddd; text-transform:uppercase; } div.embedPastebin div.embedFooter a, div.embedPastebin div.embedFooter a:visited { color: #336699; text-decoration:none; } div.embedPastebin div.embedFooter a:hover { color: red; } .noLines ol { list-style-type: none; padding-left: 0.5em; } .embedPastebin{background-color:#F8F8F8;border:1px solid #ddd;font-size:12px;overflow:auto;margin: 0 0 0 0;padding:0 0 0 0;line-height:21px} .embedPastebin div { line-height:21px; font-family:Consolas, Menlo, Monaco, Lucida Console,’Bitstream Vera Sans Mono’,’Courier’,monospace; } ol { margin:0; padding: 0 0 0 55px} ol li { border:0; margin:0;padding:0; } li.ln-xtra .de1, li.ln-xtra .de2 {background:#F8F8CE;} .embedPastebin ol li.li1 { margin: 0; } .embedPastebin ol li.li2 { margin: 0; }

Datos alojados con ♥ por Pastebin.com – Descargar Raw – Ver original
  1.  
  2. // src/lib/componentes/Main/main.js
  3. importar reaccionar desde ‘reaccionar’
  4. importar { bool , forma , cadena } de ‘prop-types’
  5. importar { useScrollLock } desde ‘@magento/peregrine’
  6.  
  7. importar { mergeClasses } desde ‘@magento/venia-ui/lib/classify’
  8. importar pie de página desde ‘@magento/venia-ui/lib/components/Footer’
  9. importar encabezado desde ‘@magento/venia-ui/lib/components/Header’
  10. importar clases predeterminadas desde ‘./main.css’
  11.  
  12. importar TopBar desde «../TopBar» ;
  13.  
  14. const Principal = apoyos => {
  15.     const { hijos , está enmascarado } = props ;
  16.     const clases = mergeClasses ( clases predeterminadas , props. clases ) ;
  17.  
  18.     const rootClass = isMasked ? clases root_masked : clases. raíz ;
  19.     const pageClass = isMasked ? clases page_masked : clases. página ;
  20.  
  21.     useScrollLock ( isMasked ) ;
  22.  
  23.     volver (
  24.         < nombre de clase principal = { claseraíz } >
  25.           < Barra superior />
  26.           < Encabezado / >
  27.           < div className = { pageClass } > { children } </ div >
  28.           < Pie de página />
  29.         </ principal >
  30.   ) ;
  31. } ;
  32.  
  33. exportar principal predeterminado ;
  34.  
  35. Principal. propTypes = {
  36.     clases : forma ( {
  37.         página : cadena ,
  38.         página_enmascarada : cadena ,
  39.         raíz : cadena ,
  40.         root_masked : cadena
  41.     } ) ,
  42.     está enmascarado : bool
  43. } ;

El resultado debería verse así:

Es todo por hoy.

Si tiene alguna pregunta, no dude en plantearla a continuación.

¡Estaremos encantados de ayudarte!

Publicaciones relacionadas:

  1. PWA en Magento 2: ¿Cómo usarlo?
  2. Cómo configurar correos electrónicos de seguimiento en Magento usando segmentos de clientes
  3. Magento PWA: los porqués y las razones [actualizado]
  4. Extensiones de Amasty compatibles con PWA y GraphQL para Magento 2