Fórum OpenCart Brasil

Por um e-commerce livre, confiável e profissional

#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 :lol:
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
ControllerCommonContentHeader
Renomeie todos textos content_top para content_header (2 alterações)

Vá até o diretório de view e duplique o content_top.tpl e renomei para content_header.tpl
Código: Selecionar todos
/upload/catalog/view/theme/default/template/common/content_header.tpl
Abra o arquivo Home.tpl e adicione
Código: Selecionar todos
<?php echo $content_header; ?>


Depois da linha de código
Código: Selecionar todos
<?php echo $header; ?>
O arquivo fica em:
Código: Selecionar todos
/upload/catalog/view/theme/default/template/common/home.tpl
Para saber se está tudo certo até aqui, abra o arquivo content_header.tpl e adicione:
Código: Selecionar todos
<h1>Nova posição</h1>
Vá até o controle do home.php
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
$this->response->setOutput($this->load->view('common/home', $data));
Vá até a pagina inicial do opencart e veja se ira aparecer Nova posição acima do banner logo após o menu ;).

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
/upload/admin/language/en-gb/design/layout.php
E adicione uma entrada de texto $_['text_content_header'] = 'Content Header';

Depois abra o control:
Código: Selecionar todos
/upload/admin/controller/design/layout.php
Após essa linha:
Código: Selecionar todos
$data['text_default'] = $this->language->get('text_default');
Adicione:
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
<?php $module_row = 0; ?>
Após ele copie e cole:
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:
Imagem


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}');
#73131
possibilita criar mais modulos de posição: https://www.opencart.com/index.php?rout ... n_id=23164

tive problemas quando quis criar um modulo parallax ja que as opções de container do opencart são limitadas dentro dos "content_top, content_left, content_right" criei uma nova area de "content" que fica acima do "content_top" do opencart, achei util pra quem quer por exemplo criar um banner que ocupe 100% da largura, já que as opções do opencart não possibilita isso tendo em vista que os elementos inseridos dentro do "content_top" ficam limitados a largutavda pagina.

Gente preciso de ajuda urgente. Na migraç&a[…]

Caro @reds , muito obrigado pela resposta.

PHP 8+ incompatibilidade

Toda tradução para a versão 3[…]

Ola @alex3257 Se você precisa apenas ver […]