Magento is all about taking notes and standing on the shoulders of others.  I frequently reuse code that others provide to make development a little faster and smoother.  I hope to help out others as they learn by sharing my learning experiences.  In this case, a current client needed two search bars on any given page. I could have just duplicated the ‘topSearch’ call and styled them separately using CSS but in this case, that wasn’t an option as the layout and wording for each was different.

To duplicate any block that doesn’t require any kind of controller, there are a few options, but for this entry, I’ll use the method that I took and leave one for another example.  In this case, we’re looking at the original .phtml found in /catalogsearch/form.mini.phtml.  This file is called through:

<?php echo $this->getChildHtml('topSearch') ?>

Calling getChildHtml() just returns the rendered html from EVERY child of the current block. So in this case, the header.phtml > catalogsearch.xml (with the reference name ‘header’) > form.mini.phtml > then rendered on the page.  Knowing this, we can duplicate easily or create easily.

For the second search, I duplicated the form.mini and created a template named more appropriately to where it was to be placed.  With this new name, let’s call it: newSearch.phtml, we then move to the catalogsearch.xml file to add to the appropriate reference block.  In this case, it was the ‘header’.  I simply duplicated the block as shown below:

<block type="core/template" name="new.search" as="newSearch" template="catalogsearch/newSearch.phtml" />

Now that we have the correct layout/structure of our newSearch.phtml, and the appropriate block to call it in catalogsearch.xml, we can create the call within our header.phtml to start the whole process. Using the same code as before, we just add in the “as” field from the XML file.

<?php echo $this->getChildHtml('newSearch') ?>

We now have two search bars that are ready for styling and production.

Magento Minneapolis Web Development

Need a Magento web developer for your ecommerce store? We can help. Give Snap Agency a call at (763) 548-2297 or contact us by email to get started.