Construye un sitio de comercio electrónico desde cero

Sep 11, 2025

Cómo

[dieciséis]

El comercio electrónico se ha vuelto tan popular en los últimos años, ahora es difícil imaginar un futuro sin él. El poder de Internet se ha hecho conectar con los clientes una brisa para las empresas y las marcas, y el comercio electrónico, en su mayor parte, es la forma más fácil de entregar productos a su audiencia.

La biblioteca de bloques de construcción de la Fundación de los componentes de UI codificados está diseñada para facilitar el alcance de un producto final más rápido. A diferencia de las plantillas, los bloques de construcción no dictan cómo debe verse su sitio o estar estructurado. Simplemente le proporcionan las herramientas para construir su propio aspecto personalizado y sentirse mucho más rápido.

En este tutorial, aprenderá cómo construir un sitio web de comercio electrónico estático desde cero utilizando el kit de comercio electrónico, una colección curada de bloques de construcción que están diseñados para ayudarlo a crear tipos específicos de sitios web. Aunque este andamio es un prototipo, los bloques de construcción que estamos usando y el diseño que terminamos con se pueden aplicar a cualquier sistema.

Empezando

Building Blocks don’t dictate how your site should look

Lo primero que debemos hacer es configurar un entorno para construir el sitio. Para este tutorial, deberá descargar primero node.js. Una vez que está instalado, querrá instalar la CLI de la Fundación usando el comando NPM install -g FOUNDATION-CLI .

Ahora que tiene la Fundación instalada en su sistema, inicie un nuevo proyecto de Foundation usando el nuevo sitio de Ecommerce-Ecommerce. En la lista que sigue, seleccione la primera opción, 'un sitio web (Fundación para sitios)', escriba en nuestro nombre del proyecto 'Ecommerce-Site', y luego seleccione 'Zurb Plantilla'. Esto iniciará una plantilla de fundación y un servidor de desarrollo para que podamos comenzar fácilmente a construir nuestro sitio web. Correr Inicio de NPM En el terminal para ejecutar el proyecto.

A continuación, echemos un vistazo al código de nuestro nuevo proyecto abriéndolo en un editor de texto. Aquí, encontrará una página de muestra en 'src / páginas / index.html' que contiene algún material de plantilla predeterminado. Vamos a eliminar todo el código aquí.

Nota del editor: ¿Busca un diseño de sitio web de comercio electrónico para su negocio? Si está buscando información para ayudarlo a elegir el que sea adecuado para usted, use el cuestionario a continuación para proporcionarle información de una variedad de proveedores de forma gratuita:

Instalación de un kit

Antes de escribir cualquier código, vamos a tirar del kit de comercio electrónico de la Fundación con la CLI de la Fundación. Diríjase a su terminal y use los kits de la Fundación Comando Instale ECOMMERCE.

Si este comando no funciona, verifique dos veces que su CLI de la Fundación esté actualizada a 2.2.3. Para comprobar qué versión estás, ejecuta FUNDACIÓN -V en su terminal. Si necesita actualizarse, simplemente desinstale la CLI con NPM Uninstall --g Fundación-CLI y reinstalarlo con NPM install -g FOUNDATION-CLI .

¡Esto acaba de descargar todos los bloques de construcción dentro de nuestro kit de comercio electrónico! Cada vez que instale un bloque de construcción, aparecerá en SRC / Parcials / Bloques de construcción . Sabrá que su kit se instaló correctamente si todos los bloques de construcción se han importado automáticamente en su app.scss expediente.

Algunos de estos bloques de construcción incluyen iconos de la fuente increíble, por lo que querrá instalarlos manualmente o agregar su CDN a la & lt; cabeza y gt; de su sitio. Para hacer esto, navegue a src / diseños / default.html y añadir & lt; link href = "https://cdnjs.cloudflashle.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" & gt; Entre los & lt; cabeza y gt; etiquetas

Andamio del sitio

Mix and match blocks to achieve your ideal eCommerce layout

¡Vamos a construir! Con nuestro kit instalado, estos próximos pares de pasos se sentirán un poco como 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 bloques de construcción para lograr su diseño de Ecommerce.

Para este tutorial, los dos primeros bloques de los que comenzaremos son encabezados y promoción. Para hacer esto, vamos a usar el mecanismo parcial del manillar. En nuestro archivo índice.html vacío, vamos a lanzar los parciales {{& gt; Cabecera de comercio electrónico}}} y {{& gt; ecommerce-promo-hero}} . Con estos dos bloques de construcción, nuestra página de aterrizaje de comercio electrónico ya se ve a medio camino.

A continuación, lanzaremos algunas tarjetas de producto debajo de nuestra sección de héroe. Para usar el bloque de construcción de la tarjeta del producto, usaremos la red de bloques de la Fundación para que las cartas se sientan uniformemente dentro de una cuadrícula. Esto también facilitará cambiar el diseño de estas tarjetas más tarde.

Empecemos con & lt; div class = "file small-up-up-up-up-up-5" & gt; . Dentro de este div, lanza diez columnas con la tarjeta del producto dentro de cada columna & lt; div clase = "columna" & gt; {{& gt; Ecommerce-Product-Card}} & lt; / DIV & GT; .

Queremos dar a nuestros clientes la manera de llegar a más de nuestros productos, así que agreguemos un botón de llamada debajo de nuestras tarjetas de producto. Primero necesitamos crear nuestro & lt; div class = "fila columna de texto-centre" & gt; Para que nuestro botón se centre en la página. A continuación, utilizaremos el componente del botón Fundación para crear nuestra llamada. Agrega un & lt; botón clase = "botón" & gt; Tienda Todos los productos & lt; / Button & GT; dentro de la .fila columna .

La página se siente casi completa ahora, pero también agreguemos un encabezado entre nuestro héroe y las tarjetas de productos para dar un poco de contexto. Bajo el héroe, agregue un & lt; div clase = "columna de fila" & gt; Para contener nuestro encabezado & lt; h1 & gt; los últimos llegados & lt; / h1 & gt; .

La mayoría de las páginas de inicio de Ecommerce tienen un contenido más promocional por debajo de sus productos. Vamos a usar el bloque de construcción. {{& gt; Ecommerce-Hero-Slider-Slider-Small}} aquí. Para evitar que el control deslizante se extienda el ancho de la página, lo envolveremos alrededor de un & lt; div clase = "columna de fila" & gt; .

Dado que los sitios de comercio electrónico generalmente consisten en muchas páginas, la mayoría requerirá un mega pie de página con muchos enlaces para manejar el volumen de las páginas. Nuestro kit de comercio electrónico viene con un pie de página para este caso de uso exacto. Para envolver este andamio, vamos a caer en el {{& gt; ecommerce-footer}} En la parte inferior de nuestro HTML.

Compruebe la capacidad de respuesta

En estos días, es difícil para cualquier sitio para obtener sin ser fácilmente amigable. Esto es especialmente cierto para los sitios de comercio electrónico. Ahora que las compras en línea se han convertido en la norma, no queremos perder ese porcentaje de usuarios que lo hacen a través de sus teléfonos móviles.

Siguiendo nuestro lema de Mobile-First, los bloques de construcción de la Fundación están diseñados para ser naturalmente receptivos. Una comprobación rápida en una pantalla más pequeña muestra que nuestro sitio todavía se ve bastante bien.

Sin embargo, cuando hacemos clic en el menú de hamburguesas, nuestro todoterreno no se ha enganchado correctamente. Esta parte se pone un poco complicada, pero no te preocupes! Romperemos lo que está sucediendo en este menú Off-Canvas y luego caminaremos por cómo conectarlo.

Si echa un vistazo al archivo Ecommerce-Header.html, notará que este encabezado tiene un lienzo fuera de lugar. Entonces, ¿por qué no funcionó? Cuando hicimos clic en el menú de hamburguesa, la única cosa que fue 'empujada' fue el encabezado. El resto de la página permaneció a la vista, causando alguna extraña superposición.

Esto se debe a que este encabezado fue construido para trabajar por sí solo, pero en realidad necesita trabajar con toda la página. En otras palabras, debe presionar todo el contenido en la página sobre cuando se active el menú Off-Canvas, no solo el menú del encabezado. Este encabezado de comercio electrónico fue escrito así porque la creación de un lienzo fuera de lona requiere bucear en su src / diseños / default.html Página, que está más allá del alcance del bloque de construcción.

This is what we’re currently seeing because the off-canvas hasn't been hooked up yet

Para solucionar esto, todo lo que tenemos que hacer es tomar todo dentro de & lt; div class = "Off-Canvas Ecommerce-Header-off-Canvas-Position-Izquierda" ID = "Ecommerce-Header" Data-Off-Canvas & GT; y moverlo a SRC / Diseños / default.html . A continuación, vamos a envolver el {{& gt; cuerpo}} de nuestro sitio dentro de un & lt; div class = "off-liend-content-content" data-off-liend-content & gt; . Esto empujará el cuerpo de nuestro sitio cuando se dispare fuera de la lona.

¡Ahora, cuando hacemos clic en nuestra hamburguesa, todo el sitio se mueve para el menú Off-Canvas! El cuerpo de nuestra default.html La página debería verse así:

 & lt; Body & GT;
  & lt; div class = "Off-Canvas Ecommerce-Header-off-Canvas-Position-Izquierda" ID = "Ecommerce-Header" Data-Off-Canvas & GT;
& lt; Button Class = "Cerrar-botón" Aria-Label = "Cerrar menú" Tipo = "Botón" Datos-Close & GT;
  & lt; span aria-hidden = "verdadero" & gt; & amp; veces; & lt; / span & gt;
& lt; / Button & GT;
& lt; ul class = "menú vertical" & gt;
  & lt; li class = "Main-NAV-LINK" & gt; & lt; a href = "Categors.html" & gt; categoría 1 & lt; / a & gt; & lt; / lt; / li & gt; / lt; / li & gt;
  & lt; li clase = "Main-NAV-LINK" & gt; & lt; a href = "#" & gt; categoría 2 & lt; / a & gt; & lt; / li & gt; / li & gt;
  & lt; li class = "Main-NAV-LINK" & gt; & lt; & lt; a href = "why.html" & gt; categoría 3 & lt; / a & gt; / lt; / lt; / li & gt; / li & gt;
  & lt; li clase = "Main-NAV-LINK" & GT; & LT; A HREF = "build.html" & gt; categoría 4 & lt; / a & gt; / lt; / lt; / li & gt; / li & gt;
  & lt; Li Class = "Main-NAV-LINK" & gt; & lt; a href = "#" & gt; categoría 5 & lt; / a & gt; & lt; / li & gt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul class = "menu vertical" & gt;
  & lt; li & gt; & lt; a href = "#" & gt; help & lt; / a & gt; / li & gt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; orden de pedido & lt; / a & gt; & lt; / li & gt; / li & gt;
  & lt; li & gt; & lt; un href = "#" & gt; contacto & lt; / a & gt; / li & gt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; mi cuenta & lt; / a & gt; & lt; / li & gt; / li & gt;
& lt; / ul & gt;
  & lt; / DIV & GT;

  & lt; div class = "off-liend-content-content" data-off-liend-content & gt;
{{& gt; cuerpo}}
  & lt; / DIV & GT;
  & lt; script src = "{{root}} activos / js / app.js" & gt; / script & gt; / script & gt;
& lt; / body & gt;

Conclusión

Le hemos mostrado cómo saltar a su sitio de comercio electrónico con el kit de comercio electrónico de la Fundación, ¡pero no se detenga allí! Hay más de 100 bloques de construcción que se pueden usar para ayudar a mejorar sus páginas. En cuestión de minutos, hemos andamiado un sitio de comercio electrónico estático con bloques de construcción. Esto le ahorra una gran cantidad de tiempo que ahora puede usar para la capa en las imágenes y el estilo del sitio para adaptarse a su marca.

Incluso si está tomando esto más y usando un sistema de back-end, diferente mecanismo parcial o tiene otra forma de obtener sus datos en el sitio, el flujo de trabajo dado con bloques de construcción realmente le ahorrará tiempo y, por lo tanto, el dinero. Los bloques de construcción de la Fundación son una excelente manera de comenzar porque están destinados a extenderse, encajar en sus estilos existentes y se utilizarán en cualquier sistema de aplicaciones.

Este artículo apareció originalmente en revista neta Número 266. Comprarlo aquí .

Artículos relacionados:

Construir una interfaz de usuario basada en la tarjeta con la fundación
10 hermosos nuevos sitios de comercio electrónico que debes ver
Cómo mejorar el desempeño de los sitios de comercio electrónico.

Construye un sitio de comercio electrónico desde cero

Empezando

Instalación de un kit

Andamio del sitio

Compruebe la capacidad de respuesta

Conclusión

Cómo - Artículos más populares

22 mejores herramientas de diseño de UI

Cómo eliminar un fondo en Photoshop

Cómo crear controles de plataformas personalizadas en Maya

Cómo pintar una escena forestal de fantasía de ensueño

Crea un diseño de logotipo perfectamente geométrico en Illustrator

Crea una ducha de meteoros en 3DS MAX

Crea una aplicación que recopila datos del sensor

Crea efectos de incendio en 3D

Categorías