13

I'm creating a custom module which displays Google Maps in the frontend of Magento. To get those maps the Admin would have to enter and save the URL of the map location in the Admin Panel. This all works fine. The URL is being saved in the database and the maps are displayed in the frontend of the store.

But now I would like to display a preview of this map in the Admin Panel too. This will allow the Admin to easily check whether the correct URL is entered and saved.

I want to display this Preview Map in a new <field> (just below the field where the URL should be entered) and use a Map Preview <label>. The mockup below displays what I am trying to achieve.

enter image description here

To my modules system.xml file I have added the following code:

<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>

And my MyNamespace/MyModule/Block/System/Config/Map.php contains the following code:

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

This does render the Google Map in the Admin Panel and it also renders in the proper <group> but it is not loaded in the <field> that I want. This is an actual screen shot of the current situation.

enter image description here

I have tried every <frontend_type> I can think of....

So my question is: How can I insert an <iframe> in an Admin Panel <field>? Should I add something to my <frontend_model>?

  • I believe using your <frontend_model> is indeed the way to go. Within that file you should be able to $rendered .= '<iframe... – Tim Hallman May 18 '15 at 13:39
  • What is the sort_order of your 'Map Details' field? Is it less than the 20 used for your 'Map Preview'? – Tim Hallman May 18 '15 at 13:45
2

With Varien_Data_Form_Element_Renderer_Interface you have the freedom do design the whole row as you want. Since you extend Mage_Adminhtml_Block_Abstract and return only the iframe in its render() method, this is what you get. To use the default table layout, extend Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element instead, and use its default toHtml() method after modifying the element property to display the iframe.

Currently the render method will receive a Varien_Data_Form_Element_Link as parameter because that's the frontend_type, that you specified. But since you don't want to actually show an input field, you should change that to a frontend type where you can more easily replace the rendered output to arbitrary HTML.

I suggest using label, then the render method looks like this:

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

Note that you have to use after_element_html and leave value empty, because the value of a label is always escaped, while you can always use arbitrary HTML in after_element_html

0

Define a CSS class here and remove the width="100%".

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

example:

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

CSS (just guessing on width, and margins)

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

You may also want to use text for frontend type instead of link.

You can find the different types here.

  • Thanks for your suggestions. I tried them, but unfortunately they didn't help me. All they do is change the size of the map, but not the position. Somehow the <iframe> is still rendered above the set of <fields> but I need it to be rendered inside the <table> in the second row (sort_order 20). I just don't understand why the <iframe> is rendered first (without the <label> and <comment> which I defined in system.xml) and then the <table> is rendered afterwards, with only one row... – ForMat Jan 7 '15 at 8:02
-1

Well for that you can code in phtml file in design folder you dont need to take iframe as a field take textfield here's what i have done for video slider

1.

foreach ($collection as $item) {

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


  1. this is my block code
 $fieldset->addField('url', 'text', array(
          'label'     => Mage::helper('videoslider')->__('Enter Video URL'),
          'class'     => 'required-entry',
          'style'     => 'width:700px;',
          'required'  => true,
          'name'      => 'url',
      ));

do this and you are all set! make this changes in view folder in your module and also make changes in saveaction in controller so you can display it in admin side too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.