Fix Broken Magento Catalog Search Function

We’ve encountered situations where the Magento catalog search function has stopping working for no apparent reason in versions from 1.4.x to 1.7.x. The below details a potential fix that we’ve had success with.

Please note that you should not edit the core file, but create a copy in your local directory so it is not overwritten during future updates.

1) Copy app/code/core/Mage/CatalogSearch/Block/Result.php

2) Uncomment lines 149 and 150

$this->getListBlock()
->setCollection($this->_getProductCollection());

3) Modify line 172 by changing the below:

$this->_productCollection = $this->getListBlock()->getLoadedProductCollection();

to:

$this->_productCollection = Mage::getSingleton('catalogsearch/layer')->getProductCollection();

4) Once the code has been updated, log into the Admin panel and go to System > Index Management. Select all the Indexes, selected the Reindex data action and Submit.

This will hopefully solve any search issues that you are experiencing. Test out the search on the front end to confirm that it is working.

(via Magento)


Add Custom Option Descriptions Magento

Magento’s custom options feature is very handy for creating products that can be customized by shoppers. Unfortunately, the display options are not comprehensive. While you can enter custom option titles and and options, Magento does not have functionality for custom option descriptions out of the box.

Fortunately, this shortcoming can be overcome with an extension and some minor code edits. Follow the steps below to get it up and running:custom-option-description-1

1) Install the Custom Option Description extension via Magento Connect (while it only list compatibility with 1.7, we have this working on a store running Magento 1.8.1. This adds a new field on the Edit Product > Custom Options page in the Magento admin panel that lets you specify a description for a custom option that is separate from the option’s title.

2) Next, update your template files to display the info that is entered in the new field on the Custom Options page. The below example is based on the /app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view/options/type/text.phtml template file and will add descriptions to all custom options that are set to the text value. If this file does not exist, copy it over from /app/design/frontend/base/default/template/catalog/product/view/options/type/text.phtml

IMPORTANT: If you need to add custom option descriptions to custom options that are set to check boxes or radio buttons, you will need to copy and edit select.phtml instead of test.phtml, or whatever the appropriate .phtml file is to successful display the description on the product page.

3) Open text.phtml and add the below code snippet at line 29:

<?php if ($_option->getDescription()): ?>
    <span style="margin-left:20px">
        <?php echo $this->htmlEscape($_option->getDescription()) ?>
    </span>
<?php endif ?>

With the surrounding code it should look like the below:

<dt><label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo  $this->htmlEscape($_option->getTitle()) ?></label>
    <?php if ($_option->getDescription()): ?>
        <span style="margin-left:20px">
            <?php echo $this->htmlEscape($_option->getDescription()) ?>
        </span>
    <?php endif ?>
    <?php echo $this->getFormatedPrice() ?></dt>

That’s all. Enter a description for a custom option in the Mageno admin and check the product page to see it displaying.
custom-option-description-2


Add Text Before Price in Magento 1.8.1

logo_magentoSometimes it is necessary to add descriptive text in front of the price display in Magento. For instance, you may be selling something priced per unit, such as flooring by the square foot or fabric by the yard. Luckily, this is a quick and easy edit, just follow the steps below. While optimized for Magento 1.8.1, the below steps should work on earlier versions. However, line references may be slightly different:

 

1) Open app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/price.phtml. If you have not yet created an override file for your theme, you can copy the file from \app\design\frontend\base\default\template\catalog\product\price.phtml.

2) At line 206, locate the below block of code:

<?php else: ?>
     <span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">
     <?php if ($_finalPrice == $_price): ?>
     <?php echo $_coreHelper->formatPrice($_price, true) ?>
     <?php else: ?>
          <?php echo $_coreHelper->formatPrice($_finalPrice, true) ?>
<?php endif; ?>

3) Add the below code on line 207 right below <?php else: ?>

<span class="NAME_YOUR_SPAN"><?php echo $this->__("CUSTOM TEXT") ?></span>

4) Your updated code should look like:

<?php else: ?>
     <span class="NAME_YOUR_SPAN"><?php echo $this->__("CUSTOM TEXT") ?></span>
     <span class="regular-price" id="product-price-<?php echo $_id ?><?php echo $this->getIdSuffix() ?>">
     <?php if ($_finalPrice == $_price): ?>
     <?php echo $_coreHelper->formatPrice($_price, true) ?>
     <?php else: ?>
          <?php echo $_coreHelper->formatPrice($_finalPrice, true) ?>
<?php endif; ?>

All done! Your custom text will be displayed before the price in both the catalog and the product pages. If you only wish to display the custom text in one location, use CSS to hide span .NAME_YOUR_SPAN in the appropriate location.


How to Scale iFrame Content in IE, Chrome, Firefox, and Safari

Scaling (or zooming) the content of an iFrame can be useful when you are trying to display an object in an area that does not match its original size. The below code scales an iFrame that is 1000 pixels wide down to 710px.

The values for the original dimensions are input after the #scaled-frame id selector and the scaled values are input after the #wrapper id selector. Just multiply the original dimensions by the zoom ration you want to use. For example, if you want to scale to 71% as shown in the example below, 1000px x 2000px becomes 710px x 1420px.

The zoom factor is input for the zoom, -moz-transform, -o-transform, and -webkit-transform properties.

Unless the @media screen and (-webkit-min-device-pixel-ratio:0) is defined, the iFrame will be scaled twice in Google. Leave this value set to 1.

To use the below code, simply copy and paste it into your html and update src="http://your-url.com/" to whatever content you’d like to display.

<style>
#wrapper { width: 710px; height: 1420px; padding: 0; overflow: hidden; }
#scaled-frame { width: 1000px; height: 2000px; border: 0px; }
#scaled-frame {
    zoom: 0.71;
    -moz-transform: scale(0.71);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.71);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.71);
    -webkit-transform-origin: 0 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #scaled-frame  { zoom: 1;  }
}
</style>

<div id="wrapper"><iframe id="scaled-frame" src="http://your-url.com/"></iframe></div>

Magento Extensions Not Displaying on Frontend After Install

magentoIf you are using a custom Magento theme and are having problems getting extensions to display correctly on the frontend, there is a good chance that it is an issue of file location. Extensions usually install to default/default/ or base/default/ because there is no way for the developer of an extension to predict whether you are using a custom theme or what its name might be.

When using a custom theme, Magento will look in YOUR_CUSTOM_THEME/default/ directory for an extension’s .phtml, .xml, and .css files. If they were installed to the default or base directory, Magento won’t be able to locate them within the theme directory and consequently the extension’s output won’t be displayed.

To display the output of an extension, simply make sure that its files are in the correct locations. Check the base and default directories and see if there are any CSS, XML, or PHTML files for the extension. If so, move the files to the corresponding location within your custom theme.

Finally, refresh your cache and test that the extension’s output is correctly displaying.


Invalid Table Rates File Format — Magento Table Rates CSV

magento-logo-tutorialIn Magento, table rates are excellent for specifying shipping rates to different destinations and are fairly easy to set up. The main issues that users encounter when they try to configure table rates usually have to do with improper formatting of the required CSV file. If the CSV file is not properly formatted for import, the import will not succeed and Magento will display Error while saving this configuration: Invalid Table Rates File Format.

Formatting errors often occur because the file that Magento exports does not include quotation marks around all the header values. See Country and Region/State below compared to the other header values.

Country,Region/State,"Zip/Postal Code","Order Subtotal (and above)","Shipping Price"
AUS,*,*,0.0000,10.0000
GBR,*,*,0.0000,20.0000
NZL,*,*,0.0000,15.0000
USA,*,*,0.0000,15.0000

Hopefully this problem will be fixed in future releases, but for the time being it is necessary to format that the CSV file properly by opening it with a text editor, such as Notepad++ or Textwrangler, and adding quotes around Country and Region/State as shown below.

"Country","Region/State","Zip/Postal Code","Order Subtotal (and above)","Shipping Price"
AUS,*,*,0.0000,10.0000
GBR,*,*,0.0000,20.0000
NZL,*,*,0.0000,15.0000
USA,*,*,0.0000,15.0000

Once quotation marks have been added and the file is formatted correctly, the import will go smoothly with no errors.

For instructions on setting up table rate shipping in Magento, refer to the Magento Knowledge Base.


Customize WordPress Search Box and Initial Text

wordpress-search-boxCustomizing the search box in WordPress is pretty straightforward once you understand what file to edit. The form for the search box is defined in searchform.php. Unless your theme has a searchform.php file, your site will revert to the default WordPress searchform.php. To avoid editing the default WordPress template, you can create a searchform.php file within your theme and customize it to your liking. Instructions below:

1) Create a file named searchform.php within your theme (in /wp-content/themes/YOUR_THEME/searchform.php).

2) Copy and paste the below code into the newly created file:

<form id="searchform" method="get" action="<?php bloginfo('url'); ?>/"><input type="text" value="Search this site" onblur="if(this.value == '') {this.value = 'Search this site';}" onfocus="if(this.value == 'Search this site') {this.value = '';}" name="s" id="s" size="25" />

<input type="submit" id="searchsubmit" value="Search" class="submit" name="searchsubmit"/></form>

3) To customize the text that appears in the search box, edit all instances of "Search this site" to whatever you would like to appear. To change the width of the search box, edit the size="25" code to whatever width you would like.


Change Currency Symbols Magento 1.7

Sometimes the default currency symbols in Magento aren't ideal.
Sometimes the default currency symbols in Magento aren't ideal.
With the release of Magento 1.7, changing currency symbols has become much easier. All currency symbols can be adjusted in the backend and no coding is required. Simply follow the below steps:

1) Define the currencies you would like to use in your store under System > Configuration > General > Currency Setup > Allowed Currencies.

2) Go to System > Manage Currency > Symbols and update symbols as desired.

That’s it, nice and easy!


Add Popup to Magento Pages

magento-logoIf you want to make sure that visitors to your site are made aware of new products or announcements, a popup display on the homepage or other popular pages can be an effective tactic. This benefit must be weighed against the fact that some people find popup displays quite annoying. Know your audience and only utilize popups if they truly improve the UX (user experience) or convey essential information.

To implement:
1) Install this free extension through Magento Connect.

2) Enable and configure the extension under System > Configuration > Featured Popup.

3) Add popup images under CMS > Featured Popup and set their dimensions, as well as associated store views. There are also several optional settings: opacity, priority (in the event of more than one popup being called from the same page), start and close delays, and an associated link.

4) After you have completed the above steps, you must update the XML for the page that you wish to display the popup on. Select that page from CMS > Pages and paste the below XML update:

<reference name="after_body_start">
<block type="featuredpopup/featuredpopup" name="toogasfeaturedpopup"  as="toogasfeaturedpopup"   template="toogas_featuredpopup/featuredpopup.phtml" />
</reference>

All done! Now a popup will appear on the page whenever someone visits.


Custom Fonts in Internet Explorer, Chrome, Firefox, and Safari

crash-test-c133-previewGetting custom fonts to work across browsers can be somewhat challenging at times; different browsers require different font formats. Internet Explorer is (unsurprisingly) the worst offender, but even Chrome and Firefox prefer different formats. To avoid all the headaches that this causes, simply use the fail safe code below:

@font-face {
    font-family: 'CustomFontFamily';
    src: url('customfont-webfont.eot?#iefix') format('embedded-opentype'), 
         url('customfont-webfont.ttf') format('truetype'),
         url('customfont-webfont.svg#svgCustomFontName') format('svg'),
         url('customfont-webfont.woff') format('woff');
    }

IE will use .eot and Chrome will pick the first one that works: .tff. Firefox will pick the last one in the list, .woff, working or not, .woff also works for Chrome, but causes aliased glyphs. Putting .svg ahead of .woff solves that issue.