When using widgets in Magento you’ve probably come across the following problem: Magento wraps it’s widgets in paragraphs. This is fine if you have a widget that is supposed to be an inline element, but when you’re using a widget to include a block-type element, you don’t want that anoying wrapping <p></p> around your HTML. So how can we fix this?
Update: I also wrote an article on how to do this for Magento 2.
Create a module first
For this article, I assume you already know how to create a Magento Module, and have basic understanding on how to use helpers, rewriting models and using events. If not, I suggest you read articles about that first, because this article will not cover basic module creation.
Regular expressions are your friend
Lucky for us, we can use a simple regular expression to remove the wrapping paragraphs around our widgets:
|
1 2 |
// Remove wrapping paragraphs around widgets: $content = preg_replace('/\<p\>{{(.*?)}}\<\/p\>/', '{{$1}}', $content); |
We can also extend this example to, for example, remove wrapping <div> -elements or empty paragraphs:
|
1 2 3 4 5 |
// Remove div around widgets $content = preg_replace('/\<div\>{{(.*?)}}\<\/div\>/', '{{$1}}', $content); // Remove empty paragraphs: $content = preg_replace('/<p>(|\s*| |\n)<\/p>/', '', $content); |
Using events to tie it all together
A regular expression like this is great, but we are missing one key ingredient: we need an event to manipulate our CMS content before our widget is rendered. Lucky for us, this can easily be done with an event. Add the following code to your modules’ configuration file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<frontend> <events> <cms_page_render> <observers> <mymodule> <type>singleton</type> <class>Mypackage_Mymodel_Model_Observer</class> <method>cmsPageRenderEvent</method> </mymodule> </observers> </cms_page_render> </events> </frontend> |
Next, we add a simple function to our helper class (located at Helper/Data.php ):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public function processContent($content) { // Remove wrapping paragraphs around widgets: $content = preg_replace('/\<p\>{{(.*?)}}\<\/p\>/', '{{$1}}', $content); // Remove div around widgets $content = preg_replace('/\<div\>{{(.*?)}}\<\/div\>/', '{{$1}}', $content); // Remove empty paragraphs: $content = preg_replace('/<p>(|\s*| |\n)<\/p>/', '', $content); return $content; } |
And in your observer, put the following function:
|
1 2 3 4 5 6 7 8 9 10 |
public function cmsPageRenderEvent($observer) { /* @var $page Mage_Cms_Model_Page*/ $page = $observer->getPage(); $content = $page->getContent(); $content = Mage::helper('mymodule')->processContent($content); $page->setContent($content); } |
That’s it! Your widgets will now no longer be wrapped with those annoying paragraph tags!
Bonus: remove wrapping paragraphs in widgets in static blocks
You might have noticed that the above example applies to CMS pages only. Widgets in your static blocks will still be wrapped with paragraphs. This is because static blocks are rendered in a different way than CMS pages. Fixing this requires rewriting Mage_Cms_Block_Block . So let’s just start there, by adding the following line to your configuration file:
|
1 2 3 4 5 6 7 8 9 |
<global> <blocks> <cms> <rewrite> <block>Mypackage_Mymodule_Block_Cms_Block</block> </rewrite> </cms> </blocks> </global> |
The create a file located at Block/Cms/Block.php and add the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
class Mypackage_Mymodule_Block_Cms_Block extends Mage_Cms_Block_Block { /** * Prepare Content HTML * * @return string */ protected function _toHtml() { $blockId = $this->getBlockId(); $html = ''; if ($blockId) { $block = Mage::getModel('cms/block') ->setStoreId(Mage::app()->getStore()->getId()) ->load($blockId); if ($block->getIsActive()) { /* @var $helper Mage_Cms_Helper_Data */ $helper = Mage::helper('cms'); $processor = $helper->getBlockTemplateProcessor(); $html = $processor->filter( // Pre-process: Mage::helper('mymodule')->processContent($block->getContent()) ); $this->addModelTags($block); } } return $html; } } |
And that’s it! Since we’ve already created the processContent() -function in our helper, this code will work just fine.
So there you have it! No more wrapping paragraphs in widgets in Magento!
Visitors give this article an average rating of 4.7 out of 5.
How would you rate this article?
★ ★ ★ ★ ★
Hi Giel, thanks for this. Rewrote this to work with Magento 2. So for anyone that needs it: https://gist.github.com/TommyKolkman/3cfba2c991ebaba0b0f6
Thanks Tommy! As a matter of fact, I needed this myself today! 😉
I made some adjustments to your gist to remove the wrapping paragraph in static blocks as well: https://gist.github.com/kanduvisla/d010b36639f79641bb76
Expect a blog post about this topic soon! 😉
Giel, great work! Your update actually solved a big problem for me. Nice one!
You’re welcome!