Como inserir um <iframe> em um <field> do Painel de Administração?


13

Estou criando um módulo personalizado que exibe o Google Maps no front-end do Magento. Para obter esses mapas, o administrador precisaria inserir e salvar o URL da localização do mapa no painel do administrador. Tudo isso funciona bem. O URL está sendo salvo no banco de dados e os mapas são exibidos no frontend da loja.

Mas agora eu também gostaria de exibir uma visualização deste mapa no painel de administração. Isso permitirá que o administrador verifique facilmente se o URL correto foi inserido e salvo.

Quero exibir isso Preview Mapem um novo <field>(logo abaixo do campo em que o URL deve ser inserido) e usar uma Visualização de mapa <label>. A maquete abaixo mostra o que estou tentando alcançar.

insira a descrição da imagem aqui

No meu system.xmlarquivo de módulos , adicionei o seguinte código:

<fields>
    ....
    <preview translate="label comment">
        <label>Map Preview</label>
        <frontend_type>link</frontend_type>
        <frontend_model>mymodule/system_config_map</frontend_model>
        <comment>Preview of your map</comment>
        <sort_order>20</sort_order>
        <show_in_default>1</show_in_default>
        <show_in_website>1</show_in_website>
        <show_in_store>1</show_in_store>
    </preview>
</fields>

E my MyNamespace/MyModule/Block/System/Config/Map.phpcontém o seguinte código:

class MyNamespace_MyModule_Block_System_Config_Map extends Mage_Adminhtml_Block_Abstract implements Varien_Data_Form_Element_Renderer_Interface
{
    public function render(Varien_Data_Form_Element_Abstract $element) {

    $url = Mage::helper('mymodule')->getMapUrl($store = null);

    return '<iframe style="border: 0;" src="'.$url.'" frameborder="0" width="100%" height="270"></iframe>';
    }
}

Isso renderiza o Google Map no Painel de administração e também é renderizado corretamente, <group>mas não é carregado no <field>que eu quero. Esta é uma captura de tela real da situação atual.

insira a descrição da imagem aqui

Eu tentei tudo o <frontend_type>que posso pensar ....

Portanto, minha pergunta é: como inserir um <iframe>em um painel de administração <field>? Devo adicionar algo ao meu <frontend_model>?


Acredito que usar o seu <frontend_model>é realmente o caminho a percorrer. Dentro desse arquivo, você deve ser capaz de$rendered .= '<iframe...
Tim Hallman

Qual é o sort_orderseu 'Map Details'campo? É menor do que o 20usado para o seu 'Map Preview'?
Tim Timman

Respostas:


2

Com Varien_Data_Form_Element_Renderer_Interfacevocê, tenha a liberdade de projetar toda a linha como quiser. Como você estende Mage_Adminhtml_Block_Abstracte retorna apenas o iframe em seu render()método, é isso que você obtém. Para usar o layout da tabela padrão, estenda Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Elemente use seu toHtml()método padrão depois de modificar a propriedade do elemento para exibir o iframe.

Atualmente, o rendermétodo receberá um Varien_Data_Form_Element_Linkparâmetro as porque esse é o frontend_typeque você especificou. Mas como você não deseja realmente mostrar um campo de entrada, altere-o para um tipo de frontend em que possa substituir mais facilmente a saída renderizada para HTML arbitrário.

Eu sugiro usar label, então o método render fica assim:

public function render(Varien_Data_Form_Element_Abstract $element) {

    $url = Mage::helper('mymodule')->getMapUrl($store = null);

    $element->setData('value', '');
    $element->setData('after_element_html', '<iframe style="border: 0;" src="'.$url.'" frameborder="0" width="100%" height="270"></iframe>');

    return $this->toHtml();
}

Observe que você deve usar after_element_htmle deixar em valuebranco, porque o valor de um rótulo sempre é escapado, enquanto você sempre pode usar HTML arbitrário emafter_element_html


0

Defina uma classe CSS aqui e remova a largura = "100%".

return '<iframe style="border: 0;" src="'.$url.'" frameborder="0"'
    . ' width="100%" height="270"></iframe>'
;

exemplo:

return '<iframe class="adminmap" style="border: 0;" src="' . $url
    . '" frameborder="0" width="270" height="270"></iframe>'
;

CSS (apenas adivinhando a largura e as margens)

.adminmap { 
    width: 270px !important; 
    margin-left: 50px; 
}

Você também pode usar o texttipo de front-end em vez de link.

Você pode encontrar os diferentes tipos aqui .


Obrigado por suas sugestões. Eu tentei, mas infelizmente eles não me ajudaram. Tudo o que eles fazem é mudar o tamanho do mapa, mas não a posição. De alguma forma, o <iframe>ainda é renderizado acima do conjunto de, <fields>mas eu preciso que ele seja renderizado dentro do <table>na segunda linha (sort_order 20). Eu só não entendo por que o <iframe>é processado primeiro (sem <label>e <comment>que defini em system.xml) e então o <table>é processado depois, com apenas uma linha ...
formato

-1

Bem, para que você possa codificar no arquivo phtml na pasta de design, você não precisa usar o iframe como campo.

1

foreach ($ coleção como $ item) {

                    $ i = $ i + 1;
                     $ item-> getTitle ($ i);
                     $ item-> getUrl ($ i);
                     $ temp = $ item-> getUrl ();
                     $ ytarray = explodir ("/", $ temp);
                            $ ytendstring = fim ($ ytarray);
                            $ ytendarray = explodir ("? v =", $ ytendstring);
                            $ ytendstring = end ($ ytendarray);
                            $ ytendarray = explode ("&", $ ytendstring);
                            $ ytcode = $ ytendarray [0]; 
                    ?> ";?>


  1. este é o meu código de bloqueio
 $ fieldset-> addField ('url', 'texto', matriz (
          'label' => Mage :: helper ('videoslider') -> __ ('Digite o URL do vídeo'),
          'class' => 'entrada obrigatória',
          'style' => 'width: 700px;',
          'required' => true,
          'nome' => 'url',
      ));

faça isso e está tudo pronto! faça essas alterações na pasta view no seu módulo e também faça alterações no saveaction no controller para poder exibi-lo também no lado do administrador.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.