,
aparecerá uma
janela chamada "Insert
Image", clique
no botão
"procurar" e
ache a imagem
que irá usar
como logotipo,
selecione a
imagem e quanto
voltar a tela "Insert
Image" clique no
botão "Upload",
quando terminar
o processo de
envio, a imagem
será listada na
caixa "Image
Manager" logo
acima do botão "Upload",
clique sobre a
imagem na lista
e ela deverá ser
visualizada na
caixa da
direita, de ok e
depois clique em
"gravar".
, basta alterar
as cores no
photoshop,
fireworks ou
outro editor de
imagem qualquer,
e depois basta
exportar em
formato .jpg
)
referente a ela
para entrar na
categoria,
depois clique
novamente no
botão "nova
categoria" esta
nova categoria
será uma
sub-categoria da
anterior, repita
os procedimento
até criar todas
as categorias e
sub-categorias
desejadas.
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 é uma grande ajuda 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 parâmetros 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 .
Passo 11 (Trocando a logo da sua loja osCommerce)
-
Template personalizado:
Para isso, basta salvar a sua imagem no diretório images/new_template e trocar o nome da imagem da logo, nas linhas 6 e 24, no arquivo includes/logo.php, para o nome da sua imagem. -
Template padrão:
Envie a imagem da sua logo para dentro do diretório images, abra o aquivo includes/header.php e altere na linha 57 o nome da imagem da logo, de store_logo.png, para o nome da imagem da sua logo.
Seguindo o passo a passo abaixo, você verá que é muito fácil alterar o conteúdo dessas páginas:
-
Fretes e Devoluções:
Acesse o diretório includes/language/portugues e abra o arquivo shipping.php. Através dele você poderá editar o texto que aparece. -
Notas de
Privacidade:
Acesse o diretório includes/language/portugues e abra o arquivo privacy.php. Através dele você poderá editar o texto que aparece. -
Condições de Uso:
Acesse o diretório includes/language/portugues e abra o arquivo conditions.php. Através dele você poderá editar o texto que aparece. -
Fale Conosco:
Acesse o diretório includes/language/portugues e abra o arquivo contact_us.php. Através dele você poderá editar o texto que aparece.
Ativando/Desativando o banner:
Para
ativar ou desativar o banner,
acesse o painel de administração
de sua loja (www.EnderecoDeSuaLoja.com/admin)
e entre com seu login e senha.
Após, clique no menu
Ferramentas/Gerenciador de
Banners. Na coluna “Status”, o
sinal verde indica que o banner
está ativo e o vermelho inativo.
Basta marcar o desejado.
Trocando o banner de sua
loja:
Ao
invés de simplesmente ativar ou
desativar, talvez você queira
trocar o banner da loja. Isso
também poderá ser feito
facilmente através do painel de
administração da sua loja.
Acessando ele, e depois
Ferramentas/Gerenciador de
Banners, clique no botão
“Editar” e depois altere o nome
do arquivo do banner (oscommerce.gif)
para o nome do arquivo do seu
banner.
Observação: Não se esqueça de enviar primeiro o arquivo do banner para dentro do diretório images/banners .
Ativando tipos diferentes de línguas:
-
Template
personalizado:
Além do Português, você pode ter a sua loja virtual em Inglês, Espanhol e Alemão. Para ativar essa opção, abra o arquivo includes/column_left.php e remova os comentários “/*” e “*/” das linhas 30 e 36 respectivamente. Salve o arquivo e pronto. -
Template padrão:
Caso esteja utilizando o template padrão do osCommerce, a exibição das línguas já estará habilitada. O arquivo responsável nesse caso é o includes/column_right.php, e as linhas que deverão ser comentadas serão a 43 e 46, conforme o exempĺo:SEM COMENTÁRIO if (substr(basename($PHP_SELF), 0, 8) != ‘checkout’) { include(DIR_WS_BOXES . ‘languages.php’); include(DIR_WS_BOXES . ‘currencies.php’); } COM COMENTÁRIO /*if (substr(basename($PHP_SELF), 0, 8) != ‘checkout’) { include(DIR_WS_BOXES . ‘languages.php’); include(DIR_WS_BOXES . ‘currencies.php’); }*/
Ativando a exibição das bandeiras Visa, MasterCard e PayPal:
Se você estiver usando o template personalizada e desejar habilitar a exibição dessas bandeiras no rodapé de sua loja, abra o arquivo includes/footer.php e remova os comentários “<!–” e “//” da linha 37, o “//” da linha 38 e o “//” e “–>” da linha 39, conforme o exemplo abaixo:
COM COMENTÁRIO <!–<td class=”footerBottom”><?php //echo tep_image(DIR_WS_IMAGES . ‘new_template/paypal.jpg’); ?></td> <td class=”footerBottom”><?php //echo tep_image(DIR_WS_IMAGES . ‘new_template/visa.jpg’); ?></td> <td class=”footerBottom”><?php //echo tep_image(DIR_WS_IMAGES. ‘new_template/mastercard.jpg’); ?></td>–>
SEM COMENTÁRIO
<td class=”footerBottom”><?php echo tep_image(DIR_WS_IMAGES .
‘new_template/paypal.jpg’); ?></td>
<td class=”footerBottom”><?php echo tep_image(DIR_WS_IMAGES .
‘new_template/visa.jpg’); ?></td>
<td class=”footerBottom”><?php echo tep_image(DIR_WS_IMAGES .
‘new_template/mastercard.jpg’); ?></td>
Desabilitando comentários de clientes nos produtos: Se você deseja que não seja possível adicionar comentários aos produtos de sua loja siga as instruções abaixo.
-
Template
personalizada:
Comente a linha 2 do arquivo includes/comentario.php da seguinte forma:SEM COMENTÁRIO echo ‘<a href=”‘ . tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()) . ‘”>’ . tep_image_button(’button_reviews.gif’, IMAGE_BUTTON_REVIEWS) . ‘</a>’; COM COMENTÁRIO //echo ‘<a href=”‘ . tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()) . ‘”>’ . tep_image_button(’button_reviews.gif’, IMAGE_BUTTON_REVIEWS) . ‘</a>’; -
Template padrão:
Comente a linha 212 do aquivo product_info.php conforme o exemplo abaixo:SEM COMENTÁRIO <td class=”main”><?php echo ‘<a href=”‘ . tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()) . ‘”>’ . tep_image_button(’button_reviews.gif’, IMAGE_BUTTON_REVIEWS) . ‘</a>’; ?></td> COM COMENTÁRIO <td class=”main”><?php //echo ‘<a href=”‘ . tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()) . ‘”>’ . tep_image_button(’button_reviews.gif’, IMAGE_BUTTON_REVIEWS) . ‘</a>’; ?></td>
