Crear un sitio web de comercio electrónico se ha convertido en un pasatiempo tan popular en los últimos años que ahora es difícil imaginar un futuro sin él. El poder de Internet ha facilitado que las empresas y las marcas se conecten con los clientes, y el comercio electrónico, en su mayor parte, es la forma más fácil de entregar productos a su audiencia.
Se estima que más de 2140 millones de personas habrán realizado compras en línea solo en 2021, y para 2025 se cree que el 95 % de todas las compras se realizarán en línea. Desde jabones hechos a mano hasta platos pintados a mano, hay un mercado para cada tipo de negocio en línea.
La biblioteca Building Blocks de Foundation de componentes de interfaz de usuario codificados está diseñada para que sea más fácil llegar a un producto final más rápido. A diferencia de las plantillas, los Building Blocks no dictan el aspecto ni la estructura de su sitio. Simplemente le brindan las herramientas para crear su propia apariencia personalizada mucho más rápido.
En este artículo, aprenderá cómo crear un sitio web de comercio electrónico estático desde cero utilizando el kit de comercio electrónico, una colección seleccionada de componentes básicos diseñada para ayudarlo a crear tipos específicos de sitios web. Aunque este andamiaje es un prototipo, los bloques de construcción que usamos y el diseño con el que terminamos se pueden aplicar a cualquier sistema. Para obtener más información sobre cómo crear su propio sitio web, consulte nuestra lista de los mejores creadores de sitios web.
Nuestra selección de los tres mejores creadores web
01. Creación de sitios web de comercio electrónico: Primeros pasos
Los bloques de construcción no dictan cómo se ve su sitio (se abre en una nueva pestaña)
Lo primero que debemos hacer es configurar un entorno para construir el sitio. Para este tutorial, primero deberá descargar node.js. Una vez instalado, querrá instalar Foundation CLI usando el comando npm install -g fundación-cli.
Ahora que Foundation está instalado en su sistema, comencemos un nuevo proyecto de Foundation usando el comando Foundation new ecommerce-site. En la lista que sigue, seleccione la primera opción, ‘Un sitio web (Foundation for Sites)’, escriba el nombre de nuestro proyecto ‘ecommerce-site’, luego seleccione ‘Plantilla ZURB’. Esto iniciará una plantilla de la Fundación y un servidor de desarrollo para que podamos comenzar a construir fácilmente nuestro sitio web. Correr iniciar npm en la terminal para ejecutar el proyecto.
A continuación, miremos detrás del código de nuestro nuevo proyecto abriéndolo en un editor de texto. Aquí encontrará una página de muestra en ‘src/pages/index.html’ que contiene material de plantilla predeterminado. Eliminaremos todo el código aquí.
02. Sitio de comercio electrónico: instalación de un Kit
Antes de escribir cualquier código, extraeremos el Foundation eCommerce Kit con Foundation CLI. Dirígete a tu terminal y usa los kits de la base de comandos para instalar el comercio electrónico.
Si este comando no funciona, verifique que su Foundation CLI esté actualizado a 2.2.3. Para verificar en qué versión está, ejecute base -v en tu terminal. Si necesita actualizar, simplemente desinstale la CLI con npm desinstalar -g fundación-cli y reinstalarlo con npm install -g fundación-cli.
¡Simplemente descargue todos los componentes básicos dentro de nuestro kit de comercio electrónico! Cada vez que instala un Building Block, aparece en src/parciales/bloques de construcción. Sabrá que su Kit está correctamente instalado si todos los Building Blocks se han importado automáticamente a su app.scss carpetas.
Algunos de estos bloques de construcción incluyen íconos de Font Awesome, por lo que deberá instalarlos manualmente o agregar su CDN al de tu sitio Para hacer esto, vaya a src/layouts/default.html y añadir Entre el Palabras clave.
03. Sitio de comercio electrónico: andamiaje del sitio
Mezcle y combine bloques para obtener su diseño de comercio electrónico ideal (se abre en una nueva pestaña)
¡Vamos a construir! Una vez que nuestro kit esté instalado, estos dos pasos siguientes se parecerán un poco a jugar con LEGO: en sus propios proyectos, puede elegir usarlos todos o puede usar solo una selección. Siéntase libre de mezclar y combinar los componentes básicos para lograr el diseño de comercio electrónico de sus sueños.
Para este tutorial, los primeros dos bloques con los que comenzaremos son el encabezado y el héroe promocional. Para ello, utilizaremos el mecanismo parcial del manillar. En nuestro archivo index.html vacío, insertemos los parciales {{>encabezado de comercio electrónico}} y {{>e-commerce-promo-hero}}. Con solo estos dos componentes básicos, nuestra página de inicio de comercio electrónico ya parece estar a mitad de camino.
A continuación, agregaremos algunas tarjetas de productos en nuestra sección de héroes. Para usar la tarjeta de producto Building Block, usaremos la cuadrícula de bloques de Foundation para que las tarjetas se coloquen uniformemente en una cuadrícula. Esto también hará que sea más fácil cambiar el diseño de estas tarjetas más adelante.
Empecemos con
Queremos brindarles a nuestros clientes una forma de acceder a más de nuestros productos, así que agreguemos un botón de título debajo de nuestras listas de productos. Primero necesitamos crear nuestro
La página parece casi completa ahora, pero también agreguemos un encabezado entre nuestras tarjetas de héroe y producto para dar algo de contexto. Debajo del héroe, agregue un
Los recién llegados
.La mayoría de las páginas de destino de comercio electrónico tienen más contenido promocional debajo de sus productos. Usemos el bloque de construcción {{>ecommerce-hero-slider-pequeño}} aquí. Para evitar que el cursor abarque el ancho de la página, lo envolveremos alrededor de un
Dado que los sitios de comercio electrónico generalmente constan de muchas páginas, la mayoría requerirá un mega pie de página con muchos enlaces para manejar el volumen de páginas. Nuestro kit de comercio electrónico viene con un pie de página para este caso de uso exacto. Para completar este andamiaje, dejemos caer el {{>pie de página de comercio electrónico}} en la parte inferior de nuestro HTML.
04. Sitio de comercio electrónico: verifique la capacidad de respuesta
En estos días, es difícil para un sitio funcionar sin ser compatible con dispositivos móviles. Esto es especialmente cierto para los sitios de comercio electrónico. Ahora que las compras online se han convertido en la norma, no queremos perder ese porcentaje de usuarios que lo hacen a través de su teléfono móvil.
De acuerdo con nuestro lema «móvil primero», Foundation Building Blocks está diseñado para responder de forma natural. Una revisión rápida en una pantalla más pequeña muestra que nuestro sitio aún se ve bastante bien.
Sin embargo, cuando hicimos clic en el menú de hamburguesas, nuestro lienzo no estaba conectado correctamente. Esta parte se vuelve un poco complicada, ¡pero no te preocupes! Desglosaremos lo que sucede en este menú fuera del lienzo y luego explicaremos cómo conectarlo.
Si observa el archivo ecommerce-header.html, notará que este encabezado contiene un lienzo incrustado. Entonces, ¿por qué no funcionó? Cuando hicimos clic en el menú de hamburguesas, lo único que se «empujó» fue el encabezado. El resto de la página permaneció visible, provocando extrañas superposiciones.
De hecho, este encabezado fue diseñado para funcionar por sí solo, pero en realidad debería funcionar con toda la página. En otras palabras, debe enviar todo el contenido de la página cuando se active el menú fuera del lienzo, no solo el menú del encabezado. Este encabezado de comercio electrónico se escribió así porque configurar un lienzo fuera del lienzo requiere sumergirse en su src/layouts/default.html página, que está fuera del alcance del Building Block.
Esto es lo que vemos actualmente, ya que el lienzo fuera del lienzo aún no se ha conectado
Para resolver este problema, todo lo que tenemos que hacer es tomar todo dentro de
Ahora, cuando hacemos clic en nuestra hamburguesa, ¡todo el sitio cambia al menú fuera del lienzo! El cuerpo de nuestro predeterminado.html la página debería verse así:
{{> cuerpo}}
Le mostramos cómo iniciar su sitio de comercio electrónico con el kit de comercio electrónico de Foundation, ¡pero no se detenga ahí! Hay más de 100 bloques de construcción que se pueden usar para mejorar sus páginas. En minutos, armamos un sitio de comercio electrónico estático con Building Blocks. Esto le ahorra mucho tiempo que ahora puede usar para superponer las imágenes y diseñar el sitio para que coincida con su marca.
Incluso si va un paso más allá y utiliza un sistema de back-end diferente, un mecanismo parcial o tiene otra forma de ingresar sus datos en el sitio, el flujo de trabajo dado con Building Blocks realmente le ahorrará tiempo y, por lo tanto, dinero. Los bloques de construcción básicos son una excelente manera de comenzar, ya que están destinados a ampliarse, a adaptarse a sus estilos existentes y a utilizarse en cualquier sistema de aplicación.
Este artículo apareció originalmente en la revista net. (se abre en una nueva pestaña) número 266.
Artículos relacionados:
