- 22 Nov 2010, 18:41
#1711
Olá Galera, estive pesquisando como fazer um menu horizontal com categorias, consegui um tutorial americano e fiz aqui.... Deu certo!!! 
Então resolvi compartilhar com vocês e traduzi o conteúdo:
Como colocar as categorias num menu horizontal (dropdown) no OpenCart.
Fiz numa instalação da versão 1.4.9 mas acho que serve para todos.
veja a minha loja como ficou: http://www.virtuopolis.com.br/modelos/lojas/farmacia
IMPORTANTE: como sempre faça primeiro backup de sua loja antes de tentar usar o menu horizontal!
OS dropdowns (Abertura dos sub-menus não irão funcionar no IE6, mas as categorias de nível superior serão utilizaveis.
Esta modificação será feita em três etapas:
1. Criar cópias dos arquivos necessários e renomea-los para criação do módulo
2. Inserir o código que será informado abaixo, nos arquivos criados (utilizando como base o conteudo da cópia)
3. Alterar o CSS para o funcionamento.
PASSO 1
1.1 Criar uma cópia do arquivo: /admin/controller/module/category.php e de o nome a esse arquivo de: headermenu.php
Abra o headermenu.php
Alterar a linha 2 de:
Agora, usando a função procurar no Dreamweaver (Control+F) altere o texto "category" para "headermenu" você terá 21 ocorrências.
No final da linha 25, cole o seguinte código:
1.2 Crie uma cópia do arquivo: /language/admin/portuguese-br/module/category.php e dê o nome a esse arquivo de: headermenu.php
Abra-o
Alterar o título para "Menu Horizontal"
Adicione esta linha antes de "text_right":
1.3 Crie uma cópia do arquivo: /admin/view/template/module/category.tpl e dê o nome a esse arquivo de: headermenu.tpl
Agora, sando a função procurar no Dreamweaver (Control+F) altere o texto "category" para "headermenu" você terá 7 ocorrências.
No final da linha 27 cole o seguinte código:
1.4 Crie uma cópia do arquivo: /catalog/controller/module/category.php e dê o nome a esse arquivo de: headermenu.php
delete todo o conteúdo e substitua por:
1.5 Crie uma cópia do arquivo: catalog/language/english/module/category.php e dê o nome a esse arquivo de: headermenu.php
Mude o título de: "Categories" para "Menu Horizontal"
1.6 Crie uma cópia do arquivo: of /catalog/view/theme/default/template/module/category.tpl e dê o nome a esse arquivo de: headermenu.tpl
Delete o conteúdo e insira apenas este código:
PASSO 2
2.1 Abra o arquivo: /catalog/controller/common/header.php
No final da Linha 3 'protected function index() {' cole o seguinte código:
2.2 Abra o arquivo /catalog/view/theme/default/template/common/header.tpl
Aqui você precisa saber um pouco de HTML/CSS, você precisa decidir onde você quer que seu menu apareça. copie e cole o seguinte código no local que você acha que esta melhor para seu design:
PASSO 3
Abra o arquivo: /catalog/view/theme/YOUR_THEME/stylesheet/stylesheet.css e cole o código abaixo no final da página:
3,2 Agora, é só ativá-lo! Entre no seu painel de administração e va para Extensões -> Módulos, instale o módulo Menu Horizontal e edite a posição para "Header" e status para "habilitado". Vá para a sua frente de loja e dê uma olhada!
Espero que desfrutem!
Abraços amigos!!!!
Miguel Muñoz
http://www.virtuopolis.com.br
Então resolvi compartilhar com vocês e traduzi o conteúdo:
Como colocar as categorias num menu horizontal (dropdown) no OpenCart.
Fiz numa instalação da versão 1.4.9 mas acho que serve para todos.
veja a minha loja como ficou: http://www.virtuopolis.com.br/modelos/lojas/farmacia
IMPORTANTE: como sempre faça primeiro backup de sua loja antes de tentar usar o menu horizontal!
OS dropdowns (Abertura dos sub-menus não irão funcionar no IE6, mas as categorias de nível superior serão utilizaveis.
Esta modificação será feita em três etapas:
1. Criar cópias dos arquivos necessários e renomea-los para criação do módulo
2. Inserir o código que será informado abaixo, nos arquivos criados (utilizando como base o conteudo da cópia)
3. Alterar o CSS para o funcionamento.
PASSO 1
1.1 Criar uma cópia do arquivo: /admin/controller/module/category.php e de o nome a esse arquivo de: headermenu.php
Abra o headermenu.php
Alterar a linha 2 de:
Código: Selecionar todos
para:
class ControllerModuleCategory extends Controller {Código: Selecionar todos
class ControllerModuleHeaderMenu extends Controller {Agora, usando a função procurar no Dreamweaver (Control+F) altere o texto "category" para "headermenu" você terá 21 ocorrências.
No final da linha 25, cole o seguinte código:
Código: Selecionar todos
$this->data['text_header'] = $this->language->get('text_header');1.2 Crie uma cópia do arquivo: /language/admin/portuguese-br/module/category.php e dê o nome a esse arquivo de: headermenu.php
Abra-o
Alterar o título para "Menu Horizontal"
Adicione esta linha antes de "text_right":
Código: Selecionar todos
$_['text_header'] = 'Header';1.3 Crie uma cópia do arquivo: /admin/view/template/module/category.tpl e dê o nome a esse arquivo de: headermenu.tpl
Agora, sando a função procurar no Dreamweaver (Control+F) altere o texto "category" para "headermenu" você terá 7 ocorrências.
No final da linha 27 cole o seguinte código:
Código: Selecionar todos
<?php if ($headermenu_position == 'header') { ?>
<option value="header" selected="selected"><?php echo $text_header; ?></option>
<?php } else { ?>
<option value="header"><?php echo $text_header; ?></option>
<?php } ?>1.4 Crie uma cópia do arquivo: /catalog/controller/module/category.php e dê o nome a esse arquivo de: headermenu.php
delete todo o conteúdo e substitua por:
Código: Selecionar todos
<?php
class ControllerModuleHeaderMenu extends Controller {
protected $category_id = 0;
protected $path = array();
protected function index() {
$this->language->load('module/headermenu');
$this->data['heading_title'] = $this->language->get('heading_title');
$this->load->model('catalog/category');
$this->load->model('tool/seo_url');
if (isset($this->request->get['path'])) {
$this->path = explode('_', $this->request->get['path']);
$this->category_id = end($this->path);
}
$this->data['category'] = $this->getCategories(0);
$this->id = 'headermenu';
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/headermenu.tpl')) {
$this->template = $this->config->get('config_template') . '/template/module/headermenu.tpl';
} else {
$this->template = 'default/template/module/headermenu.tpl';
}
$this->render();
}
protected function getCategories($parent_id, $current_path = '') {
$category_id = array_shift($this->path);
$output = '';
$results = $this->model_catalog_category->getCategories($parent_id);
if ($results) {
$output .= '<ul>';
}
foreach ($results as $result) {
if (!$current_path) {
$new_path = $result['category_id'];
} else {
$new_path = $current_path . '_' . $result['category_id'];
}
$output .= '<li>';
$children = '';
$children = $this->getChildCategories($result['category_id'], $new_path);
$output .= '<a class="hide" href="' . $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/category&path=' . $new_path) . '">' . $result['name'] . '</a>';
$output .= $children;
$output .= '</li>';
}
if ($results) {
$output .= '</ul>';
}
return $output;
}
protected function getChildCategories($parent_id, $current_path = '') {
$category_id = array_shift($this->path);
$output = '';
$results = $this->model_catalog_category->getCategories($parent_id);
if ($results) {
$output .= '<ul>';
}
foreach ($results as $result) {
if (!$current_path) {
$new_path = $result['category_id'];
} else {
$new_path = $current_path . '_' . $result['category_id'];
}
$output .= '<li>';
$children = '';
if ($category_id == $result['category_id']) {
$children = $this->getChildCategories($result['category_id'], $new_path);
}
$output .= '<a href="' . $this->model_tool_seo_url->rewrite(HTTP_SERVER . 'index.php?route=product/category&path=' . $new_path) . '">' . $result['name'] . '</a>';
$output .= $children;
$output .= '</li>';
}
if ($results) {
$output .= '</ul>';
}
return $output;
}
}
?>1.5 Crie uma cópia do arquivo: catalog/language/english/module/category.php e dê o nome a esse arquivo de: headermenu.php
Mude o título de: "Categories" para "Menu Horizontal"
1.6 Crie uma cópia do arquivo: of /catalog/view/theme/default/template/module/category.tpl e dê o nome a esse arquivo de: headermenu.tpl
Delete o conteúdo e insira apenas este código:
Código: Selecionar todos
<div class="menu">
<?php echo $category; ?>
</div>PASSO 2
2.1 Abra o arquivo: /catalog/controller/common/header.php
No final da Linha 3 'protected function index() {' cole o seguinte código:
Código: Selecionar todos
// START OF HEADER MODULE MOD
$module_data = array();
$this->load->model('checkout/extension');
$results = $this->model_checkout_extension->getExtensions('module');
foreach ($results as $result) {
if ($this->config->get($result['key'] . '_status') && ($this->config->get($result['key'] . '_position') == 'header')) {
$module_data[] = array(
'code' => $result['key'],
'sort_order' => $this->config->get($result['key'] . '_sort_order')
);
$this->children[] = 'module/' . $result['key'];
}
}
$sort_order = array();
foreach ($module_data as $key => $value) {
$sort_order[$key] = $value['sort_order'];
}
array_multisort($sort_order, SORT_ASC, $module_data);
$this->data['modules'] = $module_data;
// END OF HEADER MODULE MOD2.2 Abra o arquivo /catalog/view/theme/default/template/common/header.tpl
Aqui você precisa saber um pouco de HTML/CSS, você precisa decidir onde você quer que seu menu apareça. copie e cole o seguinte código no local que você acha que esta melhor para seu design:
Código: Selecionar todos
<?php foreach ($modules as $module) { ?>
<?php echo ${$module['code']}; ?>
<?php } ?>PASSO 3
Abra o arquivo: /catalog/view/theme/YOUR_THEME/stylesheet/stylesheet.css e cole o código abaixo no final da página:
Código: Selecionar todos
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {font-family: arial, sans-serif; width:900px; height:30px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff;width:120px; height:30px; text-align:center; border-left:1px solid #fff; border-right:1px solid #fff; background:#467bb1; line-height:30px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:30px; left:0; width:120px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-120px;}3,2 Agora, é só ativá-lo! Entre no seu painel de administração e va para Extensões -> Módulos, instale o módulo Menu Horizontal e edite a posição para "Header" e status para "habilitado". Vá para a sua frente de loja e dê uma olhada!
Espero que desfrutem!
Abraços amigos!!!!
Miguel Muñoz
http://www.virtuopolis.com.br
- por reds
- por alex3257