¿Cómo insertar un <iframe> en un Panel de administración <campo>?


13

Estoy creando un módulo personalizado que muestra Google Maps en la interfaz de Magento. Para obtener esos mapas, el administrador tendría que ingresar y guardar la URL de la ubicación del mapa en el panel de administración. Todo esto funciona bien. La URL se está guardando en la base de datos y los mapas se muestran en la interfaz de la tienda.

Pero ahora también me gustaría mostrar una vista previa de este mapa en el Panel de administración. Esto permitirá que el administrador verifique fácilmente si se ingresó y guardó la URL correcta.

Quiero mostrar esto Preview Mapen una nueva <field>(justo debajo del campo donde se debe ingresar la URL) y usar una Vista previa del mapa <label>. La maqueta a continuación muestra lo que estoy tratando de lograr.

ingrese la descripción de la imagen aquí

A mi system.xmlarchivo de módulos he agregado el siguiente 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>

Y mi MyNamespace/MyModule/Block/System/Config/Map.phpcontiene el siguiente 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>';
    }
}

Esto representa el mapa de Google en el Panel de administración y también se muestra en el correcto, <group>pero no se carga en el <field>que quiero. Esta es una captura de pantalla real de la situación actual.

ingrese la descripción de la imagen aquí

He intentado todo lo <frontend_type>que puedo pensar ...

Entonces mi pregunta es: ¿Cómo puedo insertar un <iframe>en un Panel de administración <field>? ¿Debo agregar algo a mi <frontend_model>?


Creo que usar tu <frontend_model>es el camino a seguir. Dentro de ese archivo deberías poder$rendered .= '<iframe...
Tim Hallman

¿Cuál es el sort_orderde su 'Map Details'campo? ¿Es menos que el 20usado para tu 'Map Preview'?
Tim Hallman,

Respuestas:


2

Con Varien_Data_Form_Element_Renderer_Interfaceusted tiene la libertad de diseñar toda la fila como desee. Como extiende Mage_Adminhtml_Block_Abstracty devuelve solo el iframe en su render()método, esto es lo que obtiene. Para usar el diseño de tabla predeterminado, extienda en su Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Elementlugar y use su toHtml()método predeterminado después de modificar la propiedad del elemento para mostrar el iframe.

Actualmente, el rendermétodo recibirá un Varien_Data_Form_Element_Linkparámetro como ese porque es el frontend_typeque especificó. Pero como no desea mostrar realmente un campo de entrada, debe cambiarlo a un tipo de interfaz donde pueda reemplazar más fácilmente la salida renderizada a HTML arbitrario.

Sugiero usar label, entonces el método de representación se ve así:

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

Tenga en cuenta que debe usar after_element_htmly dejar en valueblanco, porque el valor de una etiqueta siempre se escapa, mientras que siempre puede usar HTML arbitrario enafter_element_html


0

Defina una clase CSS aquí y elimine el ancho = "100%".

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

ejemplo:

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

CSS (solo adivinando el ancho y los márgenes)

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

También es posible que desee utilizar textpara el tipo de interfaz en lugar de link.

Puedes encontrar los diferentes tipos aquí .


Gracias por sus sugerencias Los probé, pero desafortunadamente no me ayudaron. Todo lo que hacen es cambiar el tamaño del mapa, pero no la posición. De alguna manera, <iframe>todavía se representa por encima del conjunto de, <fields>pero necesito que se represente dentro <table>de la segunda fila (sort_order 20). Simplemente no entiendo por qué <iframe>se representa primero (sin el <label>y <comment>que system.xml<table>
definí

-1

Bueno, para eso puede codificar en el archivo phtml en la carpeta de diseño, no necesita tomar iframe como campo, tomar textfield, esto es lo que he hecho para el control deslizante de video

1)

foreach ($ colección como $ artículo) {

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


  1. este es mi código de bloqueo
 $ fieldset-> addField ('url', 'text', array (
          'label' => Mage :: helper ('videoslider') -> __ ('Ingresar URL del video'),
          'class' => 'required-entry',
          'style' => 'width: 700px;',
          'required' => verdadero,
          'name' => 'url',
      ));

¡Haz esto y estarás listo! realice estos cambios en la carpeta de vista en su módulo y también realice cambios en la acción de guardar en el controlador para que también pueda mostrarla en el lado del administrador.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.