- 30 Abr 2017, 17:38
#73123
Olá comunidade, vou explicar como criar um modulo de posição, apesar ter sido bem simples criar, não achei nenhum tutorial explicando exatamente como fazer, tiver que quebrar um pouco a cabeça e deixar a preguiça de lado
Funciona na versão Opencart 2.0.3, vamos lá:
Primeiro cria uma cópia do arquivo content_top.php e coloque no mesmo diretório com o nome referente ao nome da posição que você quer, por exemplo content_header.php, o arquivo fica em:
Após fazer a cópia abra-o e renomeie a classe de
Para o nome da sua posição, nesse caso:
Vá até o diretório de view e duplique o content_top.tpl e renomei para content_header.tpl
Depois da linha de código
E adicione
Antes da ultima linha de código:
Tudo certo até aqui?!
Agora vamos habilitar utiliza-lo no painel de administração, primeiro vamos criar o idioma, abra o arquivo de idioma:
Depois abra o control:
Agora vamos adicionar os inputs no formulário do administrador, abra a view que fica em:
e procure esse texto:
Procure a função addModule() no final desse arquivo, dentro dessa função javascript encontre as duas entrada de texto #module-content-bottom e após elas adicione #module-column-header (2 alterações)
se você fez tudo certo, você vera assim:
Considerações Finais: caso você queira que aparece em todos os outros layout, feature, product, account etc você ira precisar adicionar:
$data['content_header'] = $this->load->controller('common/content_header');
em todos os controles dos módulos que podem ser posicionados do diretório, basta procurar por entradas padrões como:
$data['content_top'] = $this->load->controller('common/content_top');
e adicionar a entrada.
As vezes ocorre de você adicionar um modulo na nova posição e as folhas de estilos assim como JavaScript não funcionar, nesse caso você precisa adicionar as funções que adicionam essas arquivos no controle que você adicionou a linha: $data['content_header'] = $this->load->controller('common/content_header');:
para css:
$this->document->addStyle('catalog/view/javascript/{pasta ou nome do arquivo css}');
para js:
$this->document->addScript('catalog/view/javascript/{pasta ou nome do js}');
Funciona na versão Opencart 2.0.3, vamos lá:
Primeiro cria uma cópia do arquivo content_top.php e coloque no mesmo diretório com o nome referente ao nome da posição que você quer, por exemplo content_header.php, o arquivo fica em:
Código: Selecionar todos
/upload/catalog/controller/common/content_top.php
Após fazer a cópia abra-o e renomeie a classe de
Código: Selecionar todos
ControllerCommonContentTop
Para o nome da sua posição, nesse caso:
Código: Selecionar todos
Renomeie todos textos content_top para content_header (2 alterações)ControllerCommonContentHeader
Vá até o diretório de view e duplique o content_top.tpl e renomei para content_header.tpl
Código: Selecionar todos
Abra o arquivo Home.tpl e adicione /upload/catalog/view/theme/default/template/common/content_header.tpl
Código: Selecionar todos
<?php echo $content_header; ?>
Depois da linha de código
Código: Selecionar todos
O arquivo fica em:
<?php echo $header; ?>
Código: Selecionar todos
Para saber se está tudo certo até aqui, abra o arquivo content_header.tpl e adicione:
/upload/catalog/view/theme/default/template/common/home.tpl
Código: Selecionar todos
Vá até o controle do home.php
<h1>Nova posição</h1>
Código: Selecionar todos
/upload/catalog/controller/common/home.php
E adicione
Código: Selecionar todos
$data['content_header'] = $this->load->controller('common/content_header');
Antes da ultima linha de código:
Código: Selecionar todos
Vá até a pagina inicial do opencart e veja se ira aparecer Nova posição acima do banner logo após o menu .$this->response->setOutput($this->load->view('common/home', $data));
Tudo certo até aqui?!
Agora vamos habilitar utiliza-lo no painel de administração, primeiro vamos criar o idioma, abra o arquivo de idioma:
Código: Selecionar todos
E adicione uma entrada de texto $_['text_content_header'] = 'Content Header';/upload/admin/language/en-gb/design/layout.php
Depois abra o control:
Código: Selecionar todos
Após essa linha:
/upload/admin/controller/design/layout.php
Código: Selecionar todos
Adicione:
$data['text_default'] = $this->language->get('text_default');
Código: Selecionar todos
$data['text_content_header'] = $this->language->get('text_content_header');
Agora vamos adicionar os inputs no formulário do administrador, abra a view que fica em:
Código: Selecionar todos
/upload/admin/view/template/design/layout_form.tpl
e procure esse texto:
Código: Selecionar todos
Após ele copie e cole:
<?php $module_row = 0; ?>
Código: Selecionar todos
<div class="row">
<div class="col-sm-12">
<table id="module-content-header" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-center"><?php echo $text_content_header; ?></td>
</tr>
</thead>
<tbody>
<?php foreach ($layout_modules as $layout_module) { ?>
<?php if ($layout_module['position'] == 'content_header') { ?>
<tr id="module-row<?php echo $module_row; ?>">
<td class="text-left"><div class="input-group">
<select name="layout_module[<?php echo $module_row; ?>][code]" class="form-control input-sm">
<?php foreach ($extensions as $extension) { ?>
<optgroup label="<?php echo $extension['name']; ?>">
<?php if (!$extension['module']) { ?>
<?php if ($extension['code'] == $layout_module['code']) { ?>
<option value="<?php echo $extension['code']; ?>" selected="selected"><?php echo $extension['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $extension['code']; ?>"><?php echo $extension['name']; ?></option>
<?php } ?>
<?php } else { ?>
<?php foreach ($extension['module'] as $module) { ?>
<?php if ($module['code'] == $layout_module['code']) { ?>
<option value="<?php echo $module['code']; ?>" selected="selected"><?php echo $module['name']; ?></option>
<?php } else { ?>
<option value="<?php echo $module['code']; ?>"><?php echo $module['name']; ?></option>
<?php } ?>
<?php } ?>
<?php } ?>
</optgroup>
<?php } ?>
</select>
<input type="hidden" name="layout_module[<?php echo $module_row; ?>][position]" value="<?php echo $layout_module['position']; ?>" />
<input type="hidden" name="layout_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $layout_module['sort_order']; ?>" />
<div class="input-group-btn"> <a href="<?php echo $layout_module['edit']; ?>" type="button" data-toggle="tooltip" title="<?php echo $button_edit; ?>" target="_blank" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i></a>
<button type="button" onclick="$('#module-row<?php echo $module_row; ?>').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger btn-sm"><i class="fa fa fa-minus-circle"></i></button>
</div>
</div></td>
</tr>
<?php $module_row++; ?>
<?php } ?>
<?php } ?>
</tbody>
<tfoot>
<tr>
<td class="text-left"><div class="input-group">
<select class="form-control input-sm">
<?php foreach ($extensions as $extension) { ?>
<optgroup label="<?php echo $extension['name']; ?>">
<?php if (!$extension['module']) { ?>
<option value="<?php echo $extension['code']; ?>"><?php echo $extension['name']; ?></option>
<?php } else { ?>
<?php foreach ($extension['module'] as $module) { ?>
<option value="<?php echo $module['code']; ?>"><?php echo $module['name']; ?></option>
<?php } ?>
<?php } ?>
</optgroup>
<?php } ?>
</select>
<div class="input-group-btn">
<button type="button" onclick="addModule('content-header');" data-toggle="tooltip" title="<?php echo $button_module_add; ?>" class="btn btn-primary btn-sm"><i class="fa fa-plus-circle"></i></button>
</div>
</div></td>
</tr>
</tfoot>
</table>
</div>
Procure a função addModule() no final desse arquivo, dentro dessa função javascript encontre as duas entrada de texto #module-content-bottom e após elas adicione #module-column-header (2 alterações)
se você fez tudo certo, você vera assim:
Considerações Finais: caso você queira que aparece em todos os outros layout, feature, product, account etc você ira precisar adicionar:
$data['content_header'] = $this->load->controller('common/content_header');
em todos os controles dos módulos que podem ser posicionados do diretório, basta procurar por entradas padrões como:
$data['content_top'] = $this->load->controller('common/content_top');
e adicionar a entrada.
As vezes ocorre de você adicionar um modulo na nova posição e as folhas de estilos assim como JavaScript não funcionar, nesse caso você precisa adicionar as funções que adicionam essas arquivos no controle que você adicionou a linha: $data['content_header'] = $this->load->controller('common/content_header');:
para css:
$this->document->addStyle('catalog/view/javascript/{pasta ou nome do arquivo css}');
para js:
$this->document->addScript('catalog/view/javascript/{pasta ou nome do js}');