E-Com Club

Documentação

Conteúdo:

2. Estrutura

Ao topo

Os arquivos possuem a seguinte estrutura .pre-header, .top-header, .header, .main, .pre-footer e .footer como mostrado a seguir:

Início da Página

O código abaixo é usado no início de todas páginas HTML para detectar qual a versão do navegador Internet Explorer e configurar uma classe específica para as respectivas versões. 

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="pt-br">
<!--<![endif]-->

Seção Head

A seção head possue metadados, JavaScript e arquivos CSS: 

<!-- Start HEAD -->
<head>
  <meta charset="utf-8">
  <title>E-Com Club - Loja Modelo</title>

  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta content="Loja modelo da plataforma de e-commerce E-Com Club, layout agradável, interativo e flexível. Crie sua loja virtual grátis com hospedagem inclusa." name="description">
  <meta content="E-Com Club" name="author">

  <meta property="og:locale" content="pt_BR">
  <meta property="og:url" content="http://e-com.club/modelo/padrao">
  <meta property="og:site_name" content="E-Com Club - Plataforma E-commerce">
  <meta property="og:title" content="Loja Modelo">
  <meta property="og:description" content="Loja modelo da plataforma de e-commerce E-Com Club, layout agradável, interativo e flexível. Crie sua loja virtual grátis com hospedagem inclusa.">
  <meta property="og:type" content="website"><!-- link to image for socio -->
  <link rel="shortcut icon" href="../app/img/novo/icone.png">

  <!-- Global styles START -->          
  <link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Global styles END --> 
   
  <!-- Page level plugin styles START -->
  <link href="assets/plugins/owl-carousel/assets/owl.carousel.css" rel="stylesheet">
  <!-- Page level plugin styles END -->

  <!-- Theme styles START -->
  <link href="assets/css/preset.min.css" rel="stylesheet"> 
  <link href="css/theme.min.css" rel="stylesheet"> 
  <link href="css/custom.min.css" rel="stylesheet">  
  <link href="assets/css/preset.responsive.min.css" rel="stylesheet"> 
  <link href="css/theme.responsive.min.css" rel="stylesheet"> 
  <link href="css/custom.responsive.min.css" rel="stylesheet">  
  <!-- Theme styles END -->
</head>
<!-- Head END -->

Estilos

Os estilos de todas as páginas serão previamente definidos pelo arquivo preset.css, localizado em seudominio/assets/css/preset.css, e sua versão responsiva preset.responsive.css localizada em seudominio/assets/css/preset.responsive.css.

Alterações na página Visual da Loja, em Configurações > Aparência > Visual da Loja, serão revertidas no arquivo theme.css, localizado em seudominio/css/theme.css, e sua versão responsiva theme.responsive.css localizada em seudominio/css/theme.responsive.css.

Os últimos arquivo CSS carregados em todas as páginas da loja são custom.css, localizado em seudominio/css/custom.css, e sua versão responsiva custom.responsive.css localizada em seudominio/css/custom.responsive.css, inicialmente em branco, estes arquivos poderão ser editados manualmente na página Editar CSS, em Configurações > Aparência > Editar CSS.

Todos os arquivos serão carregados em versões compactadas .min.css.

Topo

O topo é representado pela classe .pre-header, abaixo segue o seu código HTML: 

    <div class="pre-header">
    <div class="container">
      <div class="row">
	  <!-- INÍCIO PARTE ESQUERDA DO TOPO -->
        <div class="col-md-7 col-sm-8 col-xs-6 additional-shop-info">
          <ul class="list-unstyled list-inline">
          </ul>
        </div>
		<!-- FIM PARTE ESQUERDA DO TOPO -->
		<!-- INÍCIO PARTE DIREITA DO TOPO -->
        <div class="col-md-5 col-sm-4 col-xs-6 additional-nav">
          <ul class="list-unstyled list-inline pull-right">
          </ul>
        </div>
		<!-- FIM PARTE DIREITA DO TOPO -->
      </div>
    </div>        
  </div>

Cabeçalho

O Cabeçalho é representado pela classe .top-header, abaixo segue o seu código HTML: 

         <!-- INÍCIO TOP HEADER -->
  <div class="top-header">
    <div class="container">
      <div class="row">
        <!-- INÍCIO LOGO -->
        <div class="col-md-3 col-sm-4 col-xs-12">
          <a href="#" class="logo">
            <img class="img-responsive" src="../loja/img/ecom/logo.png" alt="Loja Modelo">
          </a>
        </div> <!-- FIM LOGO -->
		<!-- INÍCIO MENU DE BUSCA -->
		<div class="col-md-5 col-sm-4 col-xs-12">
          <form action="#">
            <div class="input-group">
              <input type="text" placeholder="Buscar produto" class="form-control bg-top-header">
              <span class="input-group-btn">
                <button class="btn bg-top-header" type="submit"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
        </div> <!-- FIM MENU DE BUSCA -->
		<!-- INÍCIO MENU FACEBOOK -->
		<div class="col-md-4 col-sm-4 col-xs-12">
          <div class="user">
            <i class="fa fa-user"></i>
            <span>
              Olá visitante
              <br /><a href="#" class="link-top-header">Entrar</a> / <a href="#" class="link-top-header">Cadastrar</a>
              <br /><a href="#" class="btn btn-xs btn-primary"><i class="fa fa-facebook-official"></i>  Entre com Facebook</a>
            </span>
          </div>
        </div><!-- FIM MENU FACEBOOK -->
      </div>         
    </div>        
  </div>
  <!-- FIM TOP HEADER -->

Menus

Os Menus são representados pela classe .header-navigation, abaixo segue o seu código HTML: 

            <!-- INÍCIO MENUS -->
        <div class="header-navigation">
	   <ul>
		  <li class="dropdown dropdown-megamenu"> <!-- MENU MÉDIO -->
		  ...
		  </li>
		  <li class="dropdown dropdown100 dropdown-megamenu">  <!-- MENU MAIOR -->
		  ...
		  </li>
		  <li class="dropdown dropdown100 nav-catalogue"> <!-- MENU CATÁLOGO -->
		  ...
		  </li>
		  <li class="dropdown"> <!-- MENU PEQUENO -->
		  ...
		  </li>
		  <li class="menu-search"> <!-- BUSCA DO MENU -->
		  ...
		  <li>
	    </ul>
	</div>
        <!-- FIM MENUS -->

Carrinho

O carrinho é representado pela classe .top-cart-block, abaixo segue o seu código HTML: 

    <!-- INÍCIO CARRINHO -->
      <div class="top-cart-block">
        <div class="top-cart-info"> <!-- Informações no carrinho -->
		...
        </div>
        <i class="fa fa-shopping-cart"></i>          
      </div>
      <!--FIM Carrinho -->

Conteúdo

O Conteúdo é representado pela classe .main, nele ficará a maioria dos plugins. Segue o código HTML do corpo principal: 

    <div class="main">
      <div class="container">
	  ...
      </div>
    </div>

Slider

O slider Carousel utilizado é representado pela classe .page-slider page-slider-four, abaixo segue o seu código HTML: 

    <!-- INÍCIO SLIDER -->
        <div class="page-slider page-slider-four">
            <div id="carousel-example-generic" class="carousel slide carousel-slider">
			...
	   </div>
        </div>
    <!-- FIM SLIDER -->

Rodapé

O Rodapé é representado pela classe .pre-footer, abaixo segue o seu código HTML: 
    <!-- INÍCIO RODAPÉ -->
    <div class="pre-footer">
      <div class="container">
	 ...
	  <div>
      </div>
    </div>
    <!-- FIM RODAPÉ -->

Selos

Os selos são representados pela classe .footer, abaixo segue o seu código HTML: 
    <!-- INÍCIO SELOS -->
    <div class="footer">
      <div class="container">
	  ...
     </div>
    </div>
    <!-- FIM SELOS -->

Fim da Página (JavaScript)

Arquivos JS serão carregados no final da página, reduzindo o tempo de carregamento.

    <!-- Carrega os javascripts no final, reduzindo o tempo de carregamento da página -->
    <!-- INÍCIO PRINCIPAIS PLUGINS (NECESSÁRIO PARA TODAS AS PÁGINAS) -->
    <!--[if lt IE 9]>
    <script src="assets/plugins/respond.min.js"></script>  
    <![endif]-->
    <script src="assets/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-migrate.min.js" type="text/javascript"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>      
    <script src="assets/corporate/scripts/back-to-top.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- FIM PRINCIPAIS PLUGINS -->

    <!-- INÍCIO JAVASCRIPTS DA PÁGINA (NECESSÁRIO APENAS PARA PAGINA ATUAL) -->
    <script src="assets/plugins/owl-carousel/owl.carousel.min.js" type="text/javascript"></script><!-- slider for products -->

    <script src="assets/corporate/scripts/layout.js" type="text/javascript"></script>
    <script src="assets/pages/scripts/bs-carousel.js" type="text/javascript"></script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        Layout.init();
        Layout.initOWL(4, true, 4000);
        Layout.initTwitter();
        Layout.initFixHeaderWithPreHeader();
        Layout.initNavScrolling();
        setTimeout(function(){ $("#myModal").modal("show")}, 5000);
      });
    </script>
    <!-- FIM JAVASCRIPTS DA PÁGINA -->

4. Inicialização JavaScript

Ao topo

Inicialização principal JavaScript implementada em assets/js/layout.min.js pelo layout como mostrado abaixo:

Isso permite uma fácil implementação de módulos para iniciar os plugins jQuery e outras aplicações lógicas. 

var Layout = function () {

    var localVariable; //variável local

    var sampleFunction = function() {
       //função exemplo
    }

    return {

        //método principal para iniciar as páginas template
        init: function () {           
            sampleFunction() // call local function
        },

        //exemplo declaração do método
        sampleMethod: function (test) 
        {
          alert(test);
      }

    };

}();

Funções principais definidas em assets/js/layout.min.js

Abaixo estão listados todas funções principais implementadas no layout objeto:

handleIEFixes

Conserta o atributo placeholder do HTML5 para ie7 & ie8.

handleBootstrap

Plugins de inicialização doBootstrap.

handleMisc

Scroller

handleSearch

Barra de buscas Show/hide

5. Plugins JavaScript e Recursos

Ao topo

Abaixo segue a lista de todos plugins e recursos externos usados.

Nome Descrição URL
jQuery 1.11.2 Biblioteca JavaScript principal. http://www.jquery.com
Twitter Bootstrap v3.3.2 Poderoso e intuitivo framework de front-end para desenvolvimento web mais rápido e fácil. http://getbootstrap.com
Bootstrap Touchspin Um componente desenvolvido para o Bootstrap 3 para mobile e touch . http://www.virtuosoft.eu/code/bootstrap-touchspin/
OWL Carousel Slider de conteúdo responsivo, completamente carregado. http://owlgraphic.com/owlcarousel/demos/custom.html
Slider Range Slider leve, ideal para mobiles. http://jqueryui.com/slider/#range
Uniform Elementos de forma minimalista com jQuery http://uniformjs.com/
Zoom Um plugin para aumentar imagens em touch, click e mouseover. http://www.jacklmoore.com/zoom/
Font Awesome Fonte criada para uso com Twitter Bootstrap http://fortawesome.github.com/Font-Awesome/

6. Fim da Documentação

Ao topo

Agradeçemos por utilizar a nossa plataforma.