Construa um site de comércio eletrônico a partir do zero

Ecommerce tornou-se tão popular nos últimos anos, é agora difícil imaginar um futuro sem ele. O poder da Internet fez conectando-se com os clientes uma brisa para empresas e marcas, e comércio eletrônico, na maior parte, é a maneira mais fácil de entregar produtos à sua audiência.

Os blocos de construção da Fundação Biblioteca de componentes da UI codificados são projetados para facilitar a atingir um produto final mais rápido. Ao contrário dos modelos, blocos de construção não ditam como seu site deve procurar ou ser estruturado. Eles simplesmente fornecem as ferramentas para construir seu próprio visual personalizado e se sentir muito mais rápido.

Neste tutorial, você aprenderá como construir um site de comércio eletrônico estático a partir do zero usando o kit de comércio eletrônico, uma coleção curada de blocos de construção projetados para ajudá-lo a construir tipos específicos de sites. Embora este andaime seja um protótipo, os blocos de construção que estamos usando e layout acabamos podem ser aplicados a qualquer sistema.

Começando

A primeira coisa que precisamos fazer é criar um ambiente para construir o site. Para este tutorial, você precisará primeiro baixar o Node.js. Uma vez instalado, você vai querer instalar o CLI da Fundação usando o comando NPM install -g fundaation-cl .

Agora que você tem a Fundação instalada no seu sistema, vamos iniciar um novo projeto de fundação usando o novo Command Foundation New Ecommerce-site. Na lista que se segue, selecione a primeira opção ", um site (base para sites) ', digite em nosso nome de projeto' Ecommerce-site 'e selecione' Zurb Template '. Isso irá iniciar um modelo de fundação e servidor de desenvolvimento para que possamos facilmente começar a construir nosso site. Corre iniciar o npm. no terminal para executar o projeto.

Em seguida, vamos dar uma olhada por trás do código do nosso novo projeto, abrindo-o em um editor de texto. Naqui, você encontrará uma página de amostra em 'src / páginas / index.html' contendo algum material de modelo padrão. Vamos remover todo o código aqui.

Nota do editor: Procurando por um design de site de comércio eletrônico para o seu negócio? Se você está procurando informações para ajudá-lo a escolher o que é certo para você, use o questionário abaixo para fornecer informações de uma variedade de fornecedores de graça:

Instalando um kit

Antes de escrevermos qualquer código, vamos puxar o kit de comércio eletrônico da Fundação com a CLI da Fundação. Dirija-se ao seu terminal e use os kits de fundação de comando instalar comércio eletrônico.

Se este comando não funcionar, verifique novamente se o seu Foundation CLI é atualizado para 2.2.3. Para verificar qual versão você está, execute Fundação -V. no seu terminal. Se você precisar atualizar, simplesmente desinstale o CLI com NPM Uninstall -g Foundation-CLI e reinstale-o com NPM install -g fundaation-cl .

Isso acabou de baixar todos os blocos de construção dentro do nosso kit de comércio eletrônico! Toda vez que você instala um bloco de construção, ele aparecerá em SRC / Partials / Building-Blocks . Você saberá que seu kit instalado corretamente se todos os blocos de construção tiverem sido automaticamente importados para o seu app.scss. Arquivo.

Alguns desses blocos de construção incluem ícones da fonte incrível, então você vai querer instalá-los manualmente ou adicionar seu CDN ao & lt; head & gt; do seu site. Para fazer isso, navegue até SRC / layouts / default.html e adicione & lt; link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel = "stylesheet" & gt; Entre o & lt; head & gt; Tag.

Andaimes do site

Vamos começar a construir! Com o nosso kit instalado, estes próximos passos serão um pouco como jogar com Lego: em seus próprios projetos, você pode optar por usar todos eles, ou você pode usar apenas uma seleção. Sinta-se à vontade para misturar e combinar blocos de construção para alcançar o layout do seu sonho.

Para este tutorial, os dois primeiros blocos começaremos com cabeçalho e promo herói. Para fazer isso, vamos usar o mecanismo parcial do guidão. No nosso arquivo ict.html vazio, vamos lançar os parciais {{& gt; Ecommerce-Cabeçalho}} e {{& gt; Ecommerce-promo-herói}} . Com apenas estes dois blocos de construção, nossa página de pouso com eCommerce já se parece com o meio caminho.

Em seguida, vamos jogar alguns cartões de produtos abaixo da seção de Herói. Para usar o bloco de construção do cartão de produto, usaremos a grade de bloco da Fundação para que as cartas se sentem uniformemente dentro de uma grade. Isso também tornará mais fácil alterar o layout desses cartões mais tarde.

Vamos começar com & lt; div classe = "Row Small-up-2 média-5" & gt; . Dentro desse div, jogue em dez colunas com o cartão de produto dentro de cada coluna & lt; div classe = "coluna" & gt; {{& gt; Ecommerce-produto-card}} & lt; / div & gt; .

Queremos dar aos nossos clientes uma maneira de chegar a mais de nossos produtos, então vamos adicionar um botão de contração sob nossos cartões de produtos. Primeiro precisamos criar o nosso & lt; div classe = "coluna de fileira-Centro de texto" & gt; para que nosso botão seja centrado na página. Em seguida, usaremos o componente Button Foundation para criar nosso callout. Adicionar A. & lt; botão class = "botão" & gt; shop todos os produtos & lt; / botão & gt; dentro do .linha coluna .

A página se sente quase completa agora, mas também vamos adicionar um cabeçalho entre nossos cartões de herói e produtos para dar um pouco de contexto. Sob o herói, adicione um & lt; div class = "coluna de linha" & gt; Para conter nosso cabeçalho & lt; H1 & GT; mais recentes chegadas e lt; / h1 & gt; .

A maioria das páginas domésticas de comércio eletrônico tem mais conteúdo promocional abaixo de seus produtos. Vamos usar o bloco de construção {{& gt; Ecommerce-Hero-Slider-Small}} aqui. Para impedir que o controle deslizante se abraça a largura da página, vamos envolvê-lo em torno de um & lt; div class = "coluna de linha" & gt; .

Como os sites de comércio eletrônico geralmente consistem em muitas páginas, a maioria exige uma mega rodapé com muitos links para lidar com o volume de páginas. Nosso kit de comércio eletrônico vem com um rodapé para este caso de uso exato. Para embrulhar este andaime, vamos cair no {{& gt; Ecommerce-rodapé}} na parte inferior do nosso HTML.

Verifique a capacidade de resposta

Hoje em dia, é difícil para qualquer site obter sem ser amigável ao celular. Isso é especialmente verdadeiro para sites de comércio eletrônico. Agora que as compras on-line se tornam a norma, não queremos perder essa porcentagem de usuários que fazem isso através de seus telefones celulares.

Após o nosso lema do Mobile-first, os blocos de construção da Fundação são construídos naturalmente. Um cheque rápido em uma tela menor mostra que nosso site ainda está muito bem.

No entanto, quando clicamos no menu Hamburger, nossa lona fora da tela não foi colocada corretamente. Esta parte fica um pouco complicada, mas não se preocupe! Nós vamos quebrar o que está acontecendo neste menu fora de lona e depois percorrer como ligar.

Se você dar uma olhada no arquivo Ecommerce-Header.html, você notará que este cabeçalho tem uma lona embutida. Então, por que não funcionou? Quando clicamos no menu Hamburger, a única coisa que foi "empurrada" foi o cabeçalho. O resto da página permaneceu em vista, causando alguma estranha sobreposição.

Isso ocorre porque este cabeçalho foi construído para trabalhar por conta própria, mas, na realidade, precisa trabalhar com a página inteira. Em outras palavras, ele precisa apertar todo o conteúdo na página quando o menu Off-Canvas for acionado, não apenas o menu de cabeçalho. Este cabeçalho de comércio eletrônico foi escrito assim porque a criação de uma lona exige mergulhar no seu SRC / layouts / default.html página, que está além do alcance do bloco de construção.

Para consertar isso, tudo o que precisamos fazer é levar tudo dentro de & lt; div classe = "Ecommerce-Cabeçante de lona-cabeçalho-off-desligado - esquerda" ID = "Ecommerce-Cabeçalho" Data-off-Lona & GT; e mova-o para SRC / Layouts / Default.html . Em seguida, vamos envolver o {{& gt; corpo}} do nosso site dentro de um & lt; div class = "off-telas-content" conteúdo-off-top-telas e gt; . Isso irá empurrar o corpo do nosso site quando a lona é acionada.

Agora, quando clicamos em nosso hambúrguer, todo o site se move para o menu Off-Canvas! O corpo do nosso default.html. Página deve ficar assim:

& lt; corpo e gt;
  & lt; div classe = "Ecommerce-Cabeçante de lona-cabeçalho-off-desligado - esquerda" ID = "Ecommerce-Cabeçalho" Data-off-Lona & GT;
& lt; Botão Class = "Close-Button" Aria-Label = "Fechar Menu" Tipo = "Botão" Data-Close & GT;
  & lt; span aria-hidden = "true" & gt; & amp; vezes; & lt; / span & gt;
& lt; / botão & gt;
& lt; ul class = "menu vertical" & gt;
  & lt; li class = "main-nav-link" & gt; e lt; a href = "categorias.html" & gt; categoria 1 & lt; / a & gt; & lt; / lt; / lt; / lt; / lt;
  & lt; li class = "main-nav-link" & gt; a href = "#" & gt; categoria 2 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; & lt; a href = "why.html" & gt; categoria 3 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; a href = "build.html" & gt; categoria 4 & lt; / a & gt; & lt; / li & gt;
  & lt; li class = "main-nav-link" & gt; a href = "#" & gt; categoria 5 & lt; / a & gt; & lt; / lt; / lt; / lt; / lt; / lt; / lt; / lt; / li & gt;
& lt; / ul & gt;
& lt; hr & gt;

& lt; ul class = "menu vertical" & gt;
  & lt; li & gt; & lt; a href = "#" & gt; ajuda & lt; / a & gt; & lt; / lt; / li & gt;
  & lt; li & gt; & lt; a href = "#" & gt; status do pedido & lt; / a & gt; & lt; / lt; / li & gt;
  & lt; li & gt; e lt; a href = "#" & gt; contact & lt; / a & gt; & lt; / lt & gt;
  & lt; li & gt; e lt; a href = "#" & gt; minha conta & lt; / a & gt; & lt; / lt & gt;
& lt; / ul & gt;
  & lt; / div & gt;

  & lt; div class = "off-telas-content" conteúdo-off-top-telas e gt;
{{& gt; corpo}}
  & lt; / div & gt;
  & lt; script src = "{root}} ativos / js / app.js" & gt; & lt; / script & gt;
& lt; / corpo e gt; 

Conclusão

Nós mostramos a você como iniciar seu site de comércio eletrônico com o kit de comércio eletrônico da Fundação, mas não pare de lá! Existem mais de 100 blocos de construção que podem ser usados ​​para ajudar a melhorar suas páginas. Em questão de minutos, andafamos um site estático com ecommerce com blocos de construção. Isso economiza muito tempo que você pode agora usar para camada no Visuals e estilo o site para se adequar à sua marca.

Mesmo que você esteja tomando isso mais e usando um sistema de back-end, mecanismo parcial diferente ou tenha outra maneira de obter seus dados no site, o fluxo de trabalho fornecido com blocos de construção realmente economizará tempo e, portanto, dinheiro. Os blocos de construção da fundação são uma ótima maneira de começar, porque eles devem ser estendidos, se encaixam em seus estilos existentes e serem usados ​​em qualquer sistema de aplicativos.

Este artigo originalmente apareceu em Revista Net. edição 266. Compre aqui .

Artigos relacionados:

• Construa uma interface do usuário baseada em cartão com fundação
• 10 belos novos sites de comércio eletrônico que você deve ver
• Como melhorar o desempenho dos sites de comércio eletrônico