http://tutorial.hostnet.com.br

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

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 .

Links
relacionados

Qual é o seu
comentário ?

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

drhost disse:

fevereiro 26th, 2010 às 13:59

Olá Fabiano,

Você poderá colocar propagandas na barra lateral sim, clique aqui para visualizar nossa vídeo aula sobre como editar as caixas laterais no OsCommerce.

Atenciosamente,
Dr. Host

Fabiano Lima disse:

fevereiro 3rd, 2010 às 15:47

É possivel colocar propaGandas, anuncios na barra Lateral e no topo. ObriGado

Elias disse:

setembro 10th, 2009 às 0:40

Preciso adicionar algo no lado direito, abaixo do local onde fica o carrinho de compra.
Já localizei o diretório (includes/column_right.php).
mas não sei onde adicionar o aplicativo feito em html, feito em flash.
obs:
pretendo adicionar um link para a comunidade do site, canal do youtube e etc.
Preciso saber em que linha adiciono.
minha pág. é http://www.artesanatoumaarte.com
aguardando resposta….

Hostnet disse:

julho 14th, 2009 às 17:23

Claudinei,

Você poderá editar o osCommerce com qualquer editor de texto. Alterando o arquivo CSS que é a folha de estilos da sua loja você automaticamente estará mudando muitos elementos da sua página, porém para alterar textos e incluir imagens ou estruturas nas páginas da loja será necessário modificar outros arquivos.

Hostnet disse:

julho 14th, 2009 às 17:07

Francisco,

O lugar dentro do script é diferente de acordo com a versão do template escolhido, entre em contato com o nosso suporte técnico para ser orientado de acordo com o template que você está utilizando.

Hostnet disse:

julho 14th, 2009 às 17:05

Andrea,

Verifique se as permissões do diretório permitem o envio do conteúdo. O tutorial sobre SSH pode explicar melhor sobre permissões.

Pelo Gerenciador de Arquivos você poderá enviar o logotipo sem problemas.

claudinei disse:

julho 14th, 2009 às 13:31

OLÁ,

PESSOAL,

EXISTE ALGUM PROGRAMA EM ESPECIFICO QUE EDITE TEMPLATE OSCOMMERCE, PORQUE TENHO ALGUMAS EM LINGUA EXTRANGEIRA E GOSTARIA DE EDITALAS.

OUTRA COISA,,SE EU PEGAR O ARQUIVO ESTILO CSS E ALTERA-LO JÁ MUDA A TEMPLATE OU PRECISO MUDAR VARIOS ARQUIVOS.

AGRADEÇO ANTECIPADAMENTE A ATENÇÃO.

CLAUDINEI

Francisco Junior disse:

julho 12th, 2009 às 21:01

Eu não estou conseguindo axar no css o código que fazer eu mudar a cor do fundo das categoria do menu???? Me ajudem???

Andrea Godoy disse:

julho 11th, 2009 às 20:09

Boa noite.por favor me ajudem… preciso inserir minha logomarca,mas não consigo salvar a imagem no diretorio images/new_template,alguem poderia me especificar melhor como fazer? obrigado!

Hostnet disse:

julho 8th, 2009 às 16:01

Cristian,

Acesse pelo ícone Gerenciador de Arquivos dentro do Painel de Controle da Hostnet no endereço: painel.hostnet.com.br

cristian disse:

julho 6th, 2009 às 11:41

Quanto tendo alterar algum arquivo no gerenciador, como o logo.png ou .php aparece a mensagem: Erro: Diretório protegido contra escrita. Corrija as permissões de usuário para: /home/desatipropaganda/www/ecommerce//includes
Ena encontro o painel para alterar as permissões do administrador. Como faço?

Hostnet disse:

junho 17th, 2009 às 15:48

Elias,

Para colocar uma animação Flash ao lado do logotipo da sua loja vai ser necessário modificar o arquivo logo.php, ou header.php dependendo do lugar exato onde você deseje incluir a animação.

Para fazer esta alteração é necessário ter prévio conhecimento de HTML, caso precise de auxílio, entre em contato com o nosso departamento de suporte técnico: http://hostnet.com.br/atendimento.php por Chat, telefone ou HelpDesk.

Elias disse:

junho 16th, 2009 às 0:10

Já fiz a troca do logo, agora preciso saber como faço para colocar um flas no lado do logo?

Elias disse:

maio 31st, 2009 às 22:27

Estou tentando entrar no login do administrador do site que eu estou criando.
Mas está difícil, pois não concigo nem entrar ná área de administração do site.
criei ele no sábado e vou pagar só na segunda -feira o registro do site.
Será por isso que eu não consigo logar.
dá erro de senha.
Obrigado…

Hostnet disse:

abril 15th, 2009 às 13:02

Roberson,

Sim, é possível trocar as imagens dos templates personalizados e trocar inclusive os botões. O osCommerce é um sistema Open Source e ofecere no site do fabricante http://www.oscommerce.com diversos aplicativos que podem ser adicionados no seu sistema. Provavelmente um módulo que faça o cálculo de frete junto com o pagamento deve estar disponível.

Caso utilize o PagSeguro, configure-o para efetuar o cálculo de frete, desta forma o usuário terá informação sobre o frete que irá pagar antes de ter acesso ao meio de pagamento.

Roberson Parente disse:

abril 9th, 2009 às 21:50

Olá,

Gostaria de saber se dá para modificar os templates personalizados, como trocar os botões de adicionar, colocar outra figura no carrinho de compras e instalar o cálculo do frete dentro do carrinho de compras, para que o comprador fique sabendo o total da compra somado ao frete antes de finalizar a compra.

Adriano Meijon disse:

abril 1st, 2009 às 11:33

Fabia Romana,

Venho fazendo sites e hospedando na Hostnet a mais de 2 anos, hoje tenho cerca de 25 sites hospedados aqui.
Entendo bem do OsCommerce e fico à disposição tanto de você Fabia quanto de qualquer outro que precise de alguma ajuda.

Sei sim que a Hostnet tem (literalmente falando) os melhores para suporte, mas quem quiser me adicionar no MSN ( webimpacto@hotmail.com ) para um tirar dúvidas, fique avontade.

^^
Adriano Arantes Meijon Camopolina

Fabia Romana disse:

março 28th, 2009 às 22:39

Ah, gente, me perdoem, mas é fácil instalar o OsCommerce para quem tem noção de PHP. Eu apanhei muito para trocar o banner e isso estava detalhado.

Não consigo sequer trocar as imagens e colocar meus produtos a venda. Não tenho condições de contratar um web designer e estou desistindo.

Agradeço os 30 dias de prazo para testar. Estou testando meus conhecimentos, que são nada frente a tudo que preciso fazer para ter o tal do OsCommerce.

F.R.

Hostnet disse:

março 24th, 2009 às 13:27

Pedro,

Este tutorial não engloba estes detalhes, para efeutar uma modificação deste tipo, será necessário que o senhor entre em contato com um profissional web.

Hostnet disse:

março 24th, 2009 às 12:16

Marcelo,

Para efetuar o procedimento de troca de template sem perder o conteúdo que a sua loja já possuí, acesse o Painel de Controle > Ferramentas > Instalador Automático > Loja > osCommerce

Clique no botão Instalação Avançada e depois modifique a opção Como deseja prosseguir? para Atualização de Template.

Na caixa Instalador do osCommerce preencha o diretório onde a loja está instalada atualmente, selecione o banco de dados da loja, informe a senha do banco de dados, e escolha o novo template desejado. Basta clicar em Ok para finalizar a troca sem perder o conteúdo.

Pedro disse:

março 23rd, 2009 às 14:24

Olá, Gostaria de saber como faço para deixar na pagina inicial, somente os produtos separado por categoria sem foto e com um link que mostre o proprio

Marcelo Bastos disse:

março 21st, 2009 às 14:42

Olá!

Escolhi o Template 1 estou testando e fazendo as inclusões pertinentes a minha loja, porém gostaria de alterar para o Template 2. Como faço sem perder as minhas alterações já efetuados no Template 1?

Grato.

Hostnet disse:

fevereiro 5th, 2009 às 14:15

Giovana,

Dependendo do modelo adotado, a imagem de fundo personalizada estará em um endereço diferente, para modificar as cores do modelo, altere o arquivo de folha de estilos (stylesheet.css) que estará dentro do diretório principal da sua loja.

Hostnet disse:

fevereiro 5th, 2009 às 13:14

Anderson e Fabiano

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.

Giovana Q. disse:

fevereiro 3rd, 2009 às 20:07

Gostaria de personalizar apenas a imagem de fundo, colocar meu logotipo e fazer uma coisa mais colorida. Não conheço muito de php, somente de design. Alguém poderia me ajudar? Estou ansiosa para colocar a pagina no ar!

Fabiano Farias disse:

fevereiro 3rd, 2009 às 15:47

Gostaria de saber como substituir esse banner preto do fundo da logo.

Já sei que o nome deste arquivo é “topo.jpg”

Tentei só substiutir ele por outro arquivo com mesmo tamanho e nome, mas o site passa a abrir sem mostrar esse topo. Isso quando abre, pois simplismente trava o navegador.

Estranho pois só susbtiutir um arquivo JPG causar isso.

Anderson disse:

fevereiro 1st, 2009 às 15:18

Olá,eu consegui fazer muitas coisas sozinho mas tem algumas coisas que eu estou tentando e não consigo como:

1º) Gostaria de retirar ond está escrito (OnliShop) e colocar o nome da minha Loja (Mult Apostilas Digitais).

2º) Gostaria de remover o item (condições de uso) do menu da esquerda.

Aguardo retorno;

Att;

Anderson Luis

Aristides disse:

janeiro 26th, 2009 às 15:48

gostaria de saber como desabilitar o campo que aparece no site onde ele mostra a seguinte informação:

474 visitas desde terça 20 janeiro, 2009.

Alquem pode me ajudar?

Hostnet disse:

janeiro 23rd, 2009 às 10:18

Eder,

Para retirar esta informação do rodapé da página, abra o arquivo configure.php dentro do diretório includes e modifique a linha #41 de:

$FOOTER_HOST = “true“;

Para:

$FOOTER_HOST = “false” ;

Eder disse:

janeiro 20th, 2009 às 15:28

Como retiro o “Powered by Hostnet Internet - Hospedagem de Sites”, como retiro, pois vou vender a ideia e não quero que apareça!

Hostnet disse:

novembro 18th, 2008 às 19:58

Carlos,

Para personalizar o título da loja:

Acesse o arquivo “portugues.php” dentro do diretório “includes/languages/” e modifique o conteúdo da definição TITLE.

Marcos Franklin disse:

novembro 16th, 2008 às 19:42

BOa noite eu queria saber como faço para mudar o nome que fica no topo do navegador logo assima na URL:
o nome que fica padrão é ” LOJA osCommerce 2.2 Milestone 2 Portugu?s Brasil - Windos Internet Explorer”

Obrigado

admin disse:

setembro 5th, 2008 às 14:15

Olá Paula,

Sim, os templates personalizados desenvolvidos pela Hostnet podem sofrer as modificações que você achar necessário. Alterações das cores dos templates poderão ser realizadas através do arquivo CSS (stylesheet.css).

Para modificar as atuais categorias existentes em sua loja online. utilize o painel administrativo da própria loja osCommerce instalada em seu plano de hospedagem.

Paula disse:

setembro 4th, 2008 às 16:59

Olá,
A partir do template personalizado Hostnet posso fazer as modificações que eu quiser, como cores, árvore de categorias e outras?
Abraços,

admin disse:

agosto 29th, 2008 às 23:38

Olá Sérgio,

Nos informe a URL do seu domínio para que possamos verificar tal questão e lhe orientar da melhor forma possível.

sergio luis disse:

agosto 29th, 2008 às 23:07

não estou conseguindo personalizar a minha marca, como devo proceder?

admin disse:

julho 29th, 2008 às 11:12

Olá Márcia!

Observamos que você já está utilizando um dos nossos templates personalizados e já está expondo os seus produtos normalmente.

Após personalizar a sua loja virtual, administre os seus recursos utilizando o tutorial ” Administrando uma loja com o osCommerce ” através da URL: http://tutorial.hostnet.com.br/2008/05/14/administrando-uma-loja-com-o-oscommerce/

marcia disse:

julho 27th, 2008 às 19:31

olá, não consigo se quer entrar no diretório p/ modificar, alguém pode me ajudar?
estou tentando fazer o meu site e loja, pois não tenho recursos para pagar um web dzigner, este site me chamou a atençao pelas propagandas dizendo ser de fácil acesso p/ montar.
aguardo uma ajuda
obrigada

Blog Hostnet » Blog Archive » Com a Hostnet é cada vez mais fácil hospedar uma Loja Virtual disse:

junho 10th, 2008 às 18:09

[...] de templates, foram desenvolvidos tutoriais que devem servir de guia para customização e utilização da loja. [...]

Marcelo disse:

maio 23rd, 2008 às 22:28

Muito bom esse tutorial !! ajuda bastante na hora das alterações !

Blog Hostnet » Blog Archive » osCommerce ganha templates e tutoriais para Comércio Eletrônico disse:

maio 12th, 2008 às 16:20

[...] Para fazer outras modificações e inovações no osCommerce, estão disponibilizados os seguintes tutoriais: “Personalizando a loja osCommerce” (http://tutorial.hostnet.com.br/2008/05/08/personalizando-a-loja-oscommerce/) e “Criando template para o osCommerce” http://tutorial.hostnet.com.br/2008/05/12/criando-template-para-o-oscommerce/ [...]

Opine sobre este assunto