www.hostnet.com.br /tutorial

12/05 | Comércio Eletrônico, osCommerce

Tags : Comércio Eletrônico, E-commerce, Loja Online, Loja Virtual, osCommerce, Template

Criando template para o osCommerce

Atenção: Informamos que a ferramenta osCommerce teve seu uso descontinuado no Instalador Automático da Hostnet por questões técnicas que envolvem falha de segurança. Porém, manteremos no ar os tutoriais sobre a ferramenta para ajudar àqueles que ainda utilizam o sistema.

Sobre este tutorial

O objetivo deste tutorial é mostrar como criar um template personalizado a partir do template padrão do osCommerce. Para instalar o template personalizado que a Hostnet desenvolveu, basta acessar o painel de controle da Hostnet, clicar no ícone “Instalador Automático“, escolher o osCommerce e seguir as instruções.

Geral

Folha de estilo

A folha de estilo define praticamente toda a parte visual da loja, como as cores, backgrounds, tipos e tamanhos das fontes, posições das tabelas, DIV’S, TD’S entre outros elementos, enfim, muitas alterações na loja são obtidas mexendo apenas no arquivo stylesheet.css, que é a folha de estilo. Esse arquivo fica dentro do diretório raíz da loja, ou seja, aonde ela está instalada. Em geral, para um melhor entendimento, as classes são nomeadas com um nome que as associe ao elemento que ela será aplicada, ou mesmo com o nome do próprio elemento que ela será aplicada.

Funções

O diretório de funções includes/functions é um grande ajudador no funcionamento da loja, pois nele estão criadas diversas funções que são utilizadas em todo o site para executar variadas ações. Algumas delas são:

tep_draw_separator
Localizada em includes/functions/html_output.php e utilizada para separar as tabelas no decorrer das páginas.
tep_href_link
Localizada em includes/functions/html_output.php e utilizada para criar um link
tep_session_is_registered
Localizada em includes/functions/sessions.php e utilizada para verificar se uma sessão está registrada.
tep_banner_exists
Localizada em includes/functions/banner.php e utilizada para verificar se o banner existe e atende aos parametros setados.

Boxes

O conteúdo da loja é divido em partes, chamadas de boxes. Por exemplo, na coluna esquerda está a box “categorias”, que é o menu de produtos, a box “fabricantes” e por último a box “novidades”. As classes que criam cada box estão no arquivo includes/classes/boxes.php, e no diretório includes/box se encontram os arquivos de cada box, onde as classes são executadas.

Centralizando a Loja

A centralização da loja é realizada através da classe centerpage, que se encontra na folha de estilo.

Definindo o background da Loja

A aplicação do background da loja é feita pela classe BODY, que se encontra na folha de estilo.

Topo da loja

O topo da loja se encontra no arquivo includes/header.php.

Menu preto/Barra superior preta

Para realizar alguma alteração no menu horizontal superior preto e na barra que o acompanha é necessário apenas mexer nas classes DIV.btMenuTopo, DIV.btMenuTopo1, DIV.btMenuTopo2, DIV.btMenuTopo3 e DIV.barraPretaTopo, na folha de estilos.

A primeira corresponde a DIV que contém as outras três que possuem os links do menu. A última classe cuida da barra preta que acompanha o menu.

Logotipo

A logotipo é chamada no arquivo includes/logo.php, através de um CSS criado somente para tratar a imagem da logotipo, pois como ela é uma PNG transparente e o IE 6 tem problemas com transparências nesse tipo de arquivo, ele não conseguiria exibi-la corretamente. Sendo assim, para alterar a logotipo basta salvar a sua imagem dentro do diretório images/new_template e trocar o nome da imagem logo.png nas linhas 6 e 24 do arquivo includes/logo.php para o nome do da sua imagem.

Meio da loja

O meio da loja foi adaptado para conter a coluna esquerda includes/column_left, as boxes de busca includes/boxes/search.php e de carrinho de compras includes/boxes/shopping_cart.php, e a área de apresentação das informações index.php, que inicialmente ficam o banner e os novos produtos do mês includes/modules/new_products.php.

Para realizar essa adaptação foi necessário suprimir algumas boxes da coluna esquerda, mover outras para dentro de cada arquivo .php que se encontram diretamente dentro do diretório de instalação da loja, e remover a coluna direita, comentando o bloco de código que a chama em cada um desses arquivos também. Todas essas alterações serão abordadas logo abaixo:

Suprimir Boxes

Para suprimir alguma box, basta comentar a parte do código que a chama. Abrindo o arquivo includes/column_left.php por exemplo, você poderá ver que se comentar o bloco de código que exibe a box “fabricantes” conforme abaixo, ela não irá aparecer mais na página:

ANTES
19   if ((USE_CACHE == 'true') && empty($SID)) {
20     echo tep_cache_manufacturers_box();
21   } else {
22     include(DIR_WS_BOXES . 'manufacturers.php');
23   }

DEPOIS
19   /*if ((USE_CACHE == 'true') && empty($SID)) {
20     echo tep_cache_manufacturers_box();
21   } else {
22     include(DIR_WS_BOXES . 'manufacturers.php');
23   }*/

Mover Boxes

Como dito, para que a box da busca e a do carrinho de compras pudessem aparecer na parte superior do meio da loja, foi necessário movê-los para dentro de cada arquivo .php que se encontra diretamente dentro do diretório de instalação da loja. Para isso, basta copiar o bloco de código responsável pela exibição da box e inseri-la no local desejado no outro arquivo. Veja o exemplo:

ANTES
62     <td valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">
63      <tr>
64        <td><table border="0" width="100%" cellspacing="0" cellpadding="0">
65          <tr>
66            <td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
67            <td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES .
  $category['categories_image'], $category['categories_name'],
  HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
68           </tr>
69         </table></td>
70       </tr>

DEPOIS
62     <td valign="top">
63
64                        <!-- início do bloco responsável pela exibição da busca -->
65            <table class="headerBusca" cellpadding="2" border="0">
66               <tr>
67                  <?php require(DIR_WS_BOXES . 'search.php'); ?>
68                  <?php require(DIR_WS_BOXES . 'shopping_cart.php');?>
69               </tr>
70                 <tr>
71                   <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
72                 </tr>
73            </table>
74
75           <!-- fim -->
76
77  <table border="0" width="100%" cellspacing="0" cellpadding="0">
78    <tr>
79      <td><table border="0" width="100%" cellspacing="0" cellpadding="0">
80        <tr>
81          <td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
82          <td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES .
  $category['categories_image'], $category['categories_name'], HEADING_IMAGE_WIDTH,
  HEADING_IMAGE_HEIGHT); ?></td>
83        </tr>
84      </table></td>
85    </tr>

Repare que nesse caso também foi removida a propriedade “width” da tabela, para obtermos um melhor comportamento da mesma, atendendo assim a nossa necessidade.

Além disso, uma pequena alteração no código HTML, mas precisamente no BODY, após a marcação <!– body //–>, também foi necessária. Veja abaixo o arquivo account.php como exemplo:

ANTES
46 <!-- body //-->
47 <table border="0" width="100%" cellspacing="3" cellpadding="3">
48   <tr>
49     <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0"
  width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
50 <!-- left_navigation //-->
51 <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
52 <!-- left_navigation_eof //-->
53     </table></td>

DEPOIS
46 <!-- body //-->
47 <table class="page">
48   <tr>
49     <td valign="top" width="190px">
50       <table cellpadding="0" cellspacing="0">
51         <tr>
52           <td class="menuLeft" width="<?php echo BOX_WIDTH; ?>" >
53             <table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
54               <!-- left_navigation //-->
55                 <?php //require(DIR_WS_INCLUDES . 'main_menu.php'); ?>
56                 <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
57               <!-- left_navigation_eof //-->
58             </table><!--<td class="sombraMeio"><div class="sombraMeio"></div></td>-->
59           </td>
60         </tr>
61       </table>
62     </td>

IMPORTANTE: Não se esqueça que essa alteração deve ser realizada em cada um dos arquivo .php que se encontram diretamente dentro do diretório de instalação da loja.

Remover coluna direita

Para remover o bloco de código que chama a coluna direita includes/column_right.php, basta procurar ao final de cada arquivo a marcação <!– body_text_eof //–>, que indica o fim do BODY, e comentar o bloco de código que a segue, conforme o exemplo abaixo:

ANTES
225 <!-- body_text_eof //-->
226     <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0"
   width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
227 <!-- right_navigation //-->
228 <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
229 <!-- right_navigation_eof //-->
230     </table></td>

DEPOIS
225 <!-- body_text_eof //-->
226     <!--<td width="<?php //echo BOX_WIDTH; ?>" valign="top"><table border="0"
   width="<?php //echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">
227 <!-- right_navigation //-->
228 <?php //require(DIR_WS_INCLUDES . 'column_right.php'); ?>
229 <!-- right_navigation_eof //-->
230     <!--</table></td>-->

Rodapé da loja

O rodapé da loja se encontra no arquivo includes/footer.php.

Número de visitas/período

Essas informações são processadas pelo arquivo includes/counter.php .

Data e hora

Essas informações são processadas pela função strftime(), encontrada no arquivo includes/functions/general.php .

Menu horizontal e informação de copyright

Tanto o menu quanto a informação de copyright se encontram definidas no arquivo de constantes includes/language/portugues.php, através das constantes FOOTER_TEXT_BODY_LOGIN e FOOTER_TEXT_BODY_LOGOUT. A função que as chama é a tep_customer_greeting(), encontrada em includes/functions/general.php .

Encontrou alguma informação desatualizada?
Envie um e-mail para drhost@hostnet.com.br ou clique aqui para utilizar nosso formulário de contato. Colabore você também.

Compartilhe
este tutorial

Qual é o seu
comentário ?

Opine sobre este assunto e veja o que outros usuários acham.

Daniel disse:

março 29th, 2011 às 14:22

Comentário:Olá gostaria de saber como eu personalizo o header do oscommerce, exemplo eu instalei a loja tudo ok, porém eu preciso tirar o campo de busca que se encontra na lateral esquerda e colocar no topo, alguém pode me ajudar nessa? obrigado a todos.

www.hostnet.com.br/tutorial