Magento: How to use admin configforms in frontend?

Question

I have an extension which should give the users (logged in as an Admin in the magento backend) the ability to change some configs in the frontend area. I want to have a link in the frontend which loads the config area via ajax and gives the user the possibility to edit&save this config in the loaded div. I want to use the magento backend forms for this so i don't have to code the forms myself.

My current approach has the link on the pages and loads via ajax the correct backend page (e.g. System > Configuration > Design). For this approach I created a Controller which extends the Mage_Adminhtml_Controller_Action. This Controller get the params from the ajax request and uses an action (like the editAction of the class Mage_Adminhtml_System_ConfigController) to get the right config page in the backend.

My Problems are: - showing only the correct Area (I just want the user to edit only the section "themes" under System > Configuration > Design) everything else should be not available... so how to remove all the information around this config section?

The form needs the JS-variable Form_Key. How to get the current Form_Key (in the frontend)?
After the ajax has loaded the content the form doesnt get initialized correctly. So if I'm trying to submit the form my firebug says "JS-Error: configForm is not defined". How to solve this form initialising ? Any ideas?

I really hope anybody here can give me a hint how to solve this problems to get the backend config work in the frontend.

score 0 · Answer 1 · answered Mar 05 '12 at 11:01

This is untested, but it should be enough to get you on the right track:

Output only a specific block

In the frontend most blocks are instantiated via layout XML. In the adminhtml area this is different, so you need to work with PHP instantiation much more.

In your AJAX action I assume you are currently calling loadLayout() and renderLayout().
To only output a specific section use this instead:

public function yourAjaxAction()
{
    // assuming the required config section is set in the AJAX request
    $sectionCode = $this->getRequest()->getParam('section');
    $sections = Mage::getSingleton('adminhtml/config')->getSections();
    $blockName = (string)$sections->frontend_model;
    if (empty($blockName)) {
        $blockName = Mage_Adminhtml_Block_System_Config_Edit::DEFAULT_SECTION_BLOCK;
    }
    $block = $this->getLayout()->createBlock($blockName)->initForm();

    // Set the AJAX response content
    $this->getResponse()->setBody($block->toHtml());
}

The form key

The form key can be fetched via

Mage::getSingleton('core/session')->getFormKey()

It must be present in the form posted back to the server. You can use the following code to create a HTML hidden field with the formkey:

// If loadLayout() was called:
$formkeyHtml = Mage::app()->getLayout()->getBlock('formkey')->toHtml();

// If working without layout XML:
$formkeyHtml = Mage::app()->getLayout()->createBlock('core/template', 'formkey')
    ->setTemplate('formkey.phtml') // adminhtml theme formkey
    //->setTemplate('core/formkey.phtml') // frontend theme formkey
    ->toHtml();

Add configForm JavaScript

The configForm variable is an JS varienForm object of the DOM element containing the config fields.
It is instantiated using:

// config_edit_form is the CSS id
configForm = new varienForm('config_edit_form');

The varienForm declaration is in the file js/varien/form.js.
There also is some additional javascript used by the system configuration. Magento always adds in these blocks to set up the system config JS environment:

Mage::app()->getLayout()->getBlock('js')->append(
    $this->getLayout()->createBlock('adminhtml/template')
        ->setTemplate('system/shipping/ups.phtml')
);
Mage::app()->getLayout()->getBlock('js')->append(
    $this->getLayout()->createBlock('adminhtml/template')
        ->setTemplate('system/config/js.phtml')
);
Mage::app()->getLayout()->getBlock('js')->append(
    $this->getLayout()->createBlock('adminhtml/template')
        ->setTemplate('system/config/applicable_country.phtml')
);

I hope that gets you started.

Magento: How to use admin configforms in frontend?

1 Answers1

Output only a specific block

The form key

Add configForm JavaScript