Fórum OpenCart Brasil

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:

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}');

Pode me explicar o que realmente essa sua modificação faz?

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.

Fórum OpenCart Brasil

[TUTORIAL] Criando um Modulo de Posição (Module Position)

[TUTORIAL] Criando um Modulo de Posição (Module Position)

Re: [Tutorial] Criando um Modulo de Posição (Module Position)

Re: [Tutorial] Criando um Modulo de Posição (Module Position)