Magento Make Top Menu Sticky with jquery

Saturday, March 22nd, 2014 by gulshan maurya
Share on facebookShare on twitterShare on emailShare on pinterest_shareMore Sharing Services1

This post helps you to make your magento’s top menu fixed sticky to top of the page. Just follow some steps and its too easy.

Required: this script uses jquery, so you must have to include jquery javascript plugin.

Css: Include css to your themes stylesheet.

.page .nav-container .fixed {
position: fixed !important;
top: 0;
background-color: #0A263D;
margin-top: 5px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

Script: Include this script in your page will will be available to each page.

jQuery(document).ready(function(){
var menu = jQuery(‘#nav’);
menu.addClass(‘default’);
pos = menu.offset();
jQuery(window).scroll(function(){
onscroll();
});
function onscroll(){
if(jQuery(this).scrollTop() > pos.top+menu.height() && menu.hasClass(‘default’)){
menu.fadeOut(1, function(){
jQuery(this).removeClass(‘default’).addClass(‘fixed’).css(‘width’,jQuery(this).parent().width())
.fadeIn(‘fast’);
});
} else if(jQuery(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut(1, function(){
jQuery(this).removeClass('fixed').addClass('default').removeAttr('style').show();
});
}
}
onscroll();
});

Using Magento’s Import/Export Profiles

Tutorial: Using Magento’s Import/Export Profiles

Category: Build Your Store

Contents

• Step 1: Exporting All Products
• Step 2: Copying Images to the Magento Server
• Step 3: Editing the .csv File
• Step 4: Importing Products
• Last Step: Reindex
• For More Information

Although it is fairly simple to do, Magento users often encounter difficulties when attempting to use the import functionality built in to Magento software. We see a fair number of inquiries about this here at Magento Enterprise Support, so we’ve decided to write a tutorial to help you better understand how to use dataflow.

First, let’s take a look at how to create an import file, which will include all the data we want to bring into Magento. Ironically, the easiest way to learn how to import is to first do an export because exporting creates a sample comma-separated value (.csv) file you can use as a template for your import.

Note: The information in this article was verified on Magento Community Edition (CE) 1.8.0.0 and Enterprise Edition (EE) 1.13.1.0. The steps might be different for older versions.

Step 1: Exporting All Products

To export products from Magento CE or EE:

1. Log in to the Admin Panel as an administrator.
2. Click System > Import/Export > Dataflow – Profiles.
   The Profiles page displays available profiles. By default, Magento CE and EE ship with several default profiles. The one we’ll use for this tutorial is named Export All Products.
3. Click Export All Products.
4. On the Export All Products page, in the left column, click Run Profile.
   The other options in the left column don’t apply to this tutorial.
5. On the next page, click Run Profile in Popup.
6. Wait while your products export.
   The length of time varies with the number of products in your catalog. Don’t interrupt the export while it’s happening.
   The following message displays when all products have been exported:
   Finished profile execution.
   The following figure shows an example.
   
7. Look on your Magento server’s file system for a file named magento-install-dir/var/export/export_all_products.csv
8. Open this file in a plain text editor capable of UTF-8 encoding.
   Magento recommends using an application like Notepad++ because it adds no extra data to the .csv file.

   Important: Do not use a program like Microsoft Excel to open the file because it adds additional data to the .csv file that causes issues when you import it back into Magento CE or EE.

The following figure shows a sample .csv file.

Click image for full-size

Step 2: Copying Images to the Magento Server

For the product import to work, any images required by your products must be copied to the server’s magento-install-dir/media/import directory. By default this directory doesn’t exist.

To create the media/import directory manually:

1. Log in to the Magento server as the owner of the Magento file system (typically the web server user or a user with root privileges.)
2. Enter the following commands in the order shown:

   cd magento-install-dir/media
   mkdir import

3. Copy your images to that directory before continuing with the next section.

Step 3: Editing the .csv File

Now that you have a template to work with, edit the file and add the relevant information which you would like to import.

We now come to the most important part of the process which is often missed when saving the import file and causes many of the issues which are referred to us.

Two things cause the most problems with import:

• The the import file must be UTF-8 encoded to ensure that the file can be read and processed by Magento CE or EE.
  If you use Notepad++, click Encoding > Encode in UTF-8 without BOM.
• You must set your PHP memory limit to a value that meets or exceeds Magento system requirements.
  For assistance, see the Magento installation guide.

If your products have images, use the following steps when editing the .csv file:

1. Find a product in the export file that has images (search for .jpg or .png, for example).
   Images are typically specified similar to the following:

   "/n/o/nokia-2610-phone-2.jpg","/n/o/nokia-2610-phone-2.jpg","/n/o/nokia-2610-phone-2.jpg"

2. Change the paths and file names like the following:

   "/myimage.jpg","/myimage.jpg","/myimage.jpg"

3. If your product has multiple images, specify them on multiple lines. Avoid importing duplicate images.
4. Save your changes to the .csv file and continue with the next section.

Step 4: Importing Products

To import products:

1. Log in to the Admin Panel as an administrator.
2. Click System > Import/Export > Dataflow – Profiles.
3. On the Profiles page, click Import All Products.
   This option can be used to import any number of products into Magento CE or EE. You can also use it to update existing products.
4. In the Import/Export Profile section in the left column, click Upload File.
5. Click Browse and follow the prompts on your screen to locate the file you previously exported and edited.
6. Click Save and Continue Edit.
7. In the left column, click Run Profile.
8. From the list, click the name of the file you previously uploaded.
   The following figure shows an example.
   
   Click image for full-size
9. Click Run Profile in Popup.
10. Wait while your products import.
    Importing typically takes longer than exporting. Progress messages displays during the import. Don’t interrupt the import while it’s happening.
    The following message displays when all products have been imported:
    Imported number records.

The following message displays to confirm products were imported successfully:

Last Step: Reindex

After you import products, you’ll most likely have to reindex. If a message displays at the top of the Admin Panel instructing you to update your indexes, click System > Index Management and follow the prompts on your screen to reindex. (You can also click the link in the message itself.)

For More Information

For more information about dataflows, see Introduction to Magento Dataflow.

Discussion:

How to detect IE8 using JavaScript (Client side)

A question I’ve been asked recently is  “How can I detect IE8 using JavaScript?”. There are several ways to accomplish this task, and each one will have his pros and cons. In this post I will show the best practices to detect IE8 on real world scenarios.

If you have any feedback or you would like to suggest an alternative method, please feel free to add a comment to this post.

Detect the IE rendering engine

In the past, the Version Token (the token of the User Agent string which looks like “MSIE 7.0”) used to be a clear indicator of the browser version (IE6, IE7, …). Today, since IE8 include 3 rendering engines (IE8 Standards, IE7 Compatibility, IE6 Quirks), IE8 will set the Version Token dynamically, based on the user compatibility settings for each site.

For instance:

• Using IE8, if the site is in the compatibility list view, the VT will be MSIE 7.0
• Using IE8, if the site is in the compatibility list view, and the site owner used the X-UA-Compatible meta tag with “IE=8”, the VT will be MSIE 8.0
• Using IE8, if the site is NOT in the compatibility list view, the VT will be MSIE 8.0
• If you are debugging a site using the IE8 Developer Tools and you set the Document Mode to IE7, the VT will be MSIE 7.0
• Using IE7, the VT will be MSIE 7.0

As you can see from the previous examples, the VT shows what rendering engine is used by IE to display the site…no matter the version of the browser.

function getInternetExplorerVersion() {

    var rv = -1; // Return value assumes failure.

    if (navigator.appName == 'Microsoft Internet Explorer') {

        var ua = navigator.userAgent;

        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

        if (re.exec(ua) != null)

            rv = parseFloat(RegExp.$1);

    }

    return rv;

}

function checkVersion() {

    var msg = "You're not using Windows Internet Explorer.";

    var ver = getInternetExplorerVersion();

    if (ver > -1) {

        if (ver >= 8.0)

            msg = "You're using a recent copy of Windows Internet Explorer."

        else

            msg = "You should upgrade your copy of Windows Internet Explorer.";

    }

    alert(msg);

}

Check this MSDN article for more information about this function.

Detect if Web Slices, Accelerator, Visual Search are supported by the browser

The previous function will not tell us if the Web Slices, Accelerators and Visual Search are supported by the current browser (remember, those features always work in IE8, regardless the rendering engine adopted).

In general, the best practice is to check if each feature is supported by the current browser; this statement might sound generic or “too complex”. However, since web standards and browser keep evolving, it’s not possible to know today if a feature will be supported from the same (or other browsers) in the future. Obviously this concept applies to either Internet Explorer, Firefox, Opera, ….

In particular, I recommend to use the following functions:

function WebSliceSupported {

    return (typeof (window.external.AddToFavoritesBar) != "undefined");

}

function AcceleratorSupported {

    return (typeof (window.external.AddService) != "undefined");

}

function VisualSearchSupported {

    return (typeof (window.external.AddService) != "undefined");

}

NOTE: in case you are adding web slices to your site, I recommend to build them for any browser (they will be transparent to other browsers…); or, if you want to send them only to IE8, you should detect the browser on the server side.

Detect IE as browser

There are scenarios where you might still want to know the version of IE installed on the machine. For instance, let’s say you want to suggest your users to upgrade from IE6 to IE8.

In this case, the best client-side solution is to check if the query string contains the new token “Trident 4.0”.

function IsIE8Browser() {

    var rv = -1;

    var ua = navigator.userAgent;

    var re = new RegExp("Trident\/([0-9]{1,}[\.0-9]{0,})");

    if (re.exec(ua) != null) {

        rv = parseFloat(RegExp.$1);

    }

    return (rv == 4);

}

NOTE: since the Trident number will most likely change in the future, we don’t recommend to use this function as an indicator of web slices, accelerators or visual search support.

Other useful resources

IE Blog: IE8 User Agent string

Version Vectors

Happy detection!

IE8, IE

Jquery ui date picker

How to: Customizing and Theming jQuery UI Datepicker

http://www.hongkiat.com/blog/jquery-ui-datepicker/

By Thoriq Firdaus. Filed in Web Design

Ads by Google

MetaCDN Content Deliverymetacdn.com/14-Day-Free-Trial Enterprise Level Live Streaming & Content Delivery Network From $16/m

jQuery UI is simply awesome and due to the ease of use, it is popular and widely used in almost any website that need interactive features.

And, in this post, we’ll look at one of the features provided, the Datepicker widget.

We will try to learn how to customize the calendar theme, so that you will be able to create your own theme that will correspond to your overall design. However, you need a bit of understanding in JavaScript and familiarity with CSS before following this tutorial.

• Demo
• Download Source

If you’re ready, let’s get started.

The Assets

Let’s prepare some of the essential assets for the calendar.

First, the calendar design will refer to this PSD file from Premium Pixels. So we’d better download it first to help us take a sample of the colors we need. Then, download two patterns from Subtle Patterns that we will use as the background of our calendar. In this example, we decided to use the following patterns: black denim and dark leather.

We will also need a web development tool like Firebug to inspect element classes/ids generated by the jQuery UI.

Well, I think we’ve had enough preparation. Now let’s go to the first step.

Step 1: jQuery UI Datepicker

First, go to jQuery UI download page. In this page you’ll be presented with a few options, as follows; the UI Core, Widgets, Interactions and Effects.

We should deselect all the components, as we don’t need all of them.

Then, in the Widgets section select only the datepicker. The jQuery UI will select the essential dependencies automatically, and then download the file.

Link all the downloaded files — except the CSS — to your HTML blank document, as follows:

view plaincopy to clipboardprint?

1. <script type=“text/javascript” src=“js/jquery-1.7.1.min.js”></script>
2. <script type=“text/javascript” src=“js/jquery-ui-1.8.18.custom.min.js”></script>

Step 2: Customizing the Datepicker

In this step, we will configure a datepicker with the following options.

view plaincopy to clipboardprint?

1. <script type=“text/javascript”>
2.     $(function(){
3.         $(‘#datepicker’).datepicker({
4.             inline: true,
5.             showOtherMonths: true,
6.             dayNamesMin: [‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’],
7.         });
8.     });
9. </script>

The above code will instruct the jQuery to display the calendar on an element with datepicker id. So, we need put the following div tag with — datepicker ID — in the body section to form the calendar:

view plaincopy to clipboardprint?

1. <div id=“datepicker”></div>

Now the calendar should have already been generated and appear like this, plain without any styles, but still has the functionality.

Step 3: The Styles

Now let’s begin styling the calendar. We will start off by normalizing all the elements – as usual – and creating a new stylesheet, in this example I name it datepicker.css. Then link them all to the HTML document.

view plaincopy to clipboardprint?

1. <link href=“css/normalize.css” rel=“stylesheet” type=“text/css”/>
2. <link href=“css/datepicker.css” rel=“stylesheet” type=“text/css”/>

Then, we will first attach a background to the body so our HTML doesn’t look too plain.

view plaincopy to clipboardprint?

1. body {
2.     background: url(‘../img/darkdenim3.png’) repeat 0 0 #555;
3. }

Next, we will specify the datepicker’s width, position it to the center and add drop shadow to give the prominece effect to the calendar.

view plaincopy to clipboardprint?

1. .ui-datepicker {
2.     width: 216px;
3.     height: auto;
4.     margin: 5px auto 0;
5.     font: 9pt Arial, sans-serif;
6.     -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
7.     -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
8.     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
9. }

We will also remove the default underline decoration from every anchor tag.

view plaincopy to clipboardprint?

1. .ui-datepicker a {
2.     text-decoration: none;
3. }

The calendar in jQuery UI is formed with a table. So, let’s add 100% width for the table, so it will have the same maximum width as the wrapper above; that is 216px

view plaincopy to clipboardprint?

1. .ui-datepicker table {
2.     width: 100%;
3. }

Styling the Header Section

The datepicker has a header section containing Month & Year of the calendar. This section will have the dark leather texture we’ve downloaded before with slightly white font color and 1px white shadow at the top.

view plaincopy to clipboardprint?

1. .ui-datepicker-header {
2.     background: url(‘../img/dark_leather.png’) repeat 0 0 #000;
3.     color: #e0e0e0;
4.     font-weight: bold;
5.     -webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
6.     -moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
7.     box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
8.     text-shadow: 1px –1px 0px #000;
9.     filter: dropshadow(color=#000, offx=1, offy=-1);
10.     line-height: 30px;
11.     border-width: 1px 0 0 0;
12.     border-style: solid;
13.     border-color: #111;
14. }

Next, let’s center the Month position.

view plaincopy to clipboardprint?

1. .ui-datepicker-title {
2.     text-align: center;
3. }

Replace the Next and Prev text with the sprite arrow images sliced from the PSD.

view plaincopy to clipboardprint?

1. .ui-datepicker-prev, .ui-datepicker-next {
2.     display: inline–block;
3.     width: 30px;
4.     height: 30px;
5.     text-align: center;
6.     cursor: pointer;
7.     background-image: url(‘../img/arrow.png’);
8.     background-repeat: no-repeat;
9.     line-height: 600%;
10.     overflow: hidden;
11. }

Then, adjust the arrow position respectively.

view plaincopy to clipboardprint?

1. .ui-datepicker-prev {
2.     float: left;
3.     background-position: center –30px;
4. }
5. .ui-datepicker-next {
6.     float: rightright;
7.     background-position: center 0px;
8. }

While the day names section is wrapped within a thead, based on our design reference, it will have a slightly white gradient. And, to simplify our task, we will use this tool to generate the gradient code:

view plaincopy to clipboardprint?

1. .ui-datepicker thead {
2.     background-color: #f7f7f7;
3.     background-image: -moz-linear-gradient(top,  #f7f7f7 0%, #f1f1f1 100%);
4.     background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));
5.     background-image: -webkit-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
6.     background-image: -o-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
7.     background-image: -ms-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
8.     background-image: linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
9.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#f7f7f7’, endColorstr=‘#f1f1f1’,GradientType=0 );
10.     border-bottom: 1px solid #bbb;
11. }

The day names text will have the dark grey color of #666666 and they will also have a thin white text-shadow to give it the pressed effect.

view plaincopy to clipboardprint?

1. .ui-datepicker th {
2.     text-transform: uppercase;
3.     font-size: 6pt;
4.     padding: 5px 0;
5.     color: #666666;
6.     text-shadow: 1px 0px 0px #fff;
7.     filter: dropshadow(color=#fff, offx=1, offy=0);
8. }

At this point, the calendar will appear like this:

Styling the Dates

The calendar dates are wrapped within td or table data. So, we will set the padding to 0 to remove the spaces between the td and give it a right border of 1px.

view plaincopy to clipboardprint?

1. .ui-datepicker tbody td {
2.     padding: 0;
3.     border-right: 1px solid #bbb;
4. }

Except for the last td, which will not have right border. We set the right border to 0 for this.

view plaincopy to clipboardprint?

1. .ui-datepicker tbody td:last-child {
2.     border-right: 0px;
3. }

The table row will be almost the same. It will have a 1px border bottom except for the last row.

view plaincopy to clipboardprint?

1. .ui-datepicker tbody tr {
2.     border-bottom: 1px solid #bbb;
3. }
4. .ui-datepicker tbody tr:last-child {
5.     border-bottom: 0px;
6. }

Styling the Default, Hover and Active State

In this step we will define the date hover and active styles. We will first define the date default state by specifying the dimension; center the date text position, add gradient color and inner white shadow.

view plaincopy to clipboardprint?

1. .ui-datepicker td span, .ui-datepicker td a {
2.     display: inline–block;
3.     font-weight: bold;
4.     text-align: center;
5.     width: 30px;
6.     height: 30px;
7.     line-height: 30px;
8.     color: #666666;
9.     text-shadow: 1px 1px 0px #fff;
10.     filter: dropshadow(color=#fff, offx=1, offy=1);
11. }
12. .ui-datepicker-calendar .ui-state-default {
13.     background: #ededed;
14.     background: -moz-linear-gradient(top,  #ededed 0%, #dedede 100%);
15.     background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#ededed), color-stop(100%,#dedede));
16.     background: -webkit-linear-gradient(top,  #ededed 0%,#dedede 100%);
17.     background: -o-linear-gradient(top,  #ededed 0%,#dedede 100%);
18.     background: -ms-linear-gradient(top,  #ededed 0%,#dedede 100%);
19.     background: linear-gradient(top,  #ededed 0%,#dedede 100%);
20.     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#ededed’, endColorstr=‘#dedede’,GradientType=0 );
21.     -webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
22.     -moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
23.     box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
24. }
25. .ui-datepicker-unselectable .ui-state-default {
26.     background: #f4f4f4;
27.     color: #b4b3b3;
28. }

When you hover over the date, it will turn to slightly white.

view plaincopy to clipboardprint?

1. .ui-datepicker-calendar .ui-state-hover {
2.     background: #f7f7f7;
3. }

When the date is in an active state, it will have the following styles.

view plaincopy to clipboardprint?

1. .ui-datepicker-calendar .ui-state-active {
2.     background: #6eafbf;
3.     -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
4.     -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
5.     box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
6.     color: #e0e0e0;
7.     text-shadow: 0px 1px 0px #4d7a85;
8.     filter: dropshadow(color=#4d7a85, offx=0, offy=1);
9.     border: 1px solid #55838f;
10.     position: relative;
11.     margin: –1px;
12. }

Now, the calendar should look much better.

Fixing the Position

At this point, look at the date carefully. When you click on the date at the first or the last column, you will notice that the active state overflowing a pixel off the calendar edge.

So here, we will do a some small fixes.

First we will decrease the date width to 29px, and set the right margin of the last column and left margin of the first column to 0 to reverse the -1px margin we have set previously for the active state.

view plaincopy to clipboardprint?

1. .ui-datepicker-calendar td:first-child .ui-state-active {
2.     width: 29px;
3.     margin-left: 0;
4. }
5. .ui-datepicker-calendar td:last-child .ui-state-active {
6.     width: 29px;
7.     margin-right: 0;
8. }

The date at last row of the calendar will also have a similar treatment.

view plaincopy to clipboardprint?

1. .ui-datepicker-calendar tr:last-child .ui-state-active {
2.     height: 29px;
3.     margin-bottom: 0;
4. }

Now, let’s see the result. Well, the calendar now looks beautiful and fits perfectly as our design reference. And, you can see the demo and download the source to examine the code from the links below the image.

• Demo
• Download Source

Bonus: Extend the Calendar

Well, today we have learned quite a lot on how to create a custom theme for jQuery UI Datepicker. But you shouldn’t to stop here, as there are still many things that can be extended from this datepicker. Depending on your jQuery and CSS proficiency you extend the calendar to be like this – text input with an overlay datepicker.

Magento showing error a:5:{i:0;s:73:”Invalid method Mage_Cms_Block_Block::(Array ( [0] => top_cmslinks ) )”;i:1;s:2124:”#0 [internal function]: Varien_Object->__call(”, Array)

Find the lay out page and  check this line ………………

As I suspected, this is your problem: <action type="setBlockId"> <block_id>top_cmslinks</block_id> </action> Should be <action method="setBlockId"> <block_id>top_cmslinks</block_id> </action>

How the Magento Search works and what you should know for best configuration

One of the most popular questions we receive is how to properly configure the Magento search in order to get the best results. The truth of the matter is that it depends on what you are looking to do. I am going to walk you through the process of properly configuring your search through the use of screen shots, so you can see, step by step, what you need to do. With that said, it is important to get familiar with the three search options that are provided to you when you configure your search settings. The three options available to you are ‘like’, ‘fulltext’ and ‘combine’.

How The Like Search Option Works

The ‘like’ method is based on a database query method that states “Find me results that are similar to this keyword”. So if you are selling notebooks and notepads, and somebody on your website types the word ‘note’, the ‘like’ search setting will allow that user to view all options where the product name has the word ‘note’ in it. It is considered a more ‘loose’ approach to searching because you are not forcing the user to only view results that are a 100% perfect match with your keyword.

This type of option can have performance issues and is not based on ‘relevance’ at all so it is not the most accurate method of searching. Its primary benefit is the ability to find products if a customer accidentally mistypes a product name. This is why many people prefer the ‘fulltext’ method.

How The Fulltext Search Option Works

If you select ‘fulltext’ as the ‘search method’ for your store’s search engine, you will be providing your visitors with a search that bases results on relevance. It will *not* find partial matches, so if you type note in the search box, you are not going to see ‘notebook’ products listed.

What it will do, though, is, behind the scenes, calculate which products are the best match for your search so if you have a few products with the keyword in the title, since Magento also searches the description of a product, it will be able to weigh which listings are worth showing first. The advantage to this method is you are providing a higher quality listing of products based on their search. The potential disadvantage is that if they make a mistake on typing the keyword, they will not find the product they intended to find. This is why the third option, titled ‘combine’, may be appealing to some people.

How The Combine Search Option Works

The ‘combine’ method uses the power of both ‘like’ and ‘fulltext’ searches. When it comes to matching product titles with the keyword, just like a ‘like’ query, it will allow for partial words to be matched such as ‘note’, as a search word, pulling up listings for ‘notepad’ – something a ‘fulltext’ search will not do.

As for generating results, the ‘combine’ method, while it is flexible when it comes to finding products with a partial match of the keyword, it uses the flexibility and power of the ‘fulltext’ search in order to sort results by relevancy. Therefore, as it is described in its title, it is combining the benefits of ‘like’ and ‘fulltext’ searching. Now that you are familiar with the logic behind the three magento search options, it is time to learn how to configure your search feature.

Step 1 – Finding The Magento Search Configuration Options

When you are logged into the Magento admin, you will notice a navigation menu at the top. The link at the far right is titled “System”. Put your mouse over that and you will see a drop down menu and, on that menu, the last link at the very bottom will be titled ‘configuration’.

Click on ‘configuration’ and you will see a page where there is a menu of links on the left side. Scroll down the page and look for the ‘catalog’ link:

You will then see the page where the search configuration options reside. This is what you will see:

Click on the ‘Catalog Search’ menu item and then you will see the catalog settings:

The option “Search Type”, which is the 4th option on that form, is where you will tell Magento to use a ‘like’, ‘fulltext’ or ‘combine’ search option. When you make your selection, there will be one more step before this becomes official; indexing your search catalog.

After you make your selection for ‘search type’ you will have to pay attention to the top of the admin page. You will see this:

Click on the “Index Management” link and you will be taken to the page that allows you to re-index your search catalog. This is a necessary step for Magento to properly adapt to your new search type setting. When you are on that page you will see this:

You will notice that there are two rows with a red background. The red background is telling you “Please, re-index me”. To do this, all you have to do is select the checkbox for that row (in this case, select both rows) and hit the submit button. You will then notice the page will need a few moments to properly handle your request.

Important Note About Re-Indexing:

Large catalogs with over 5,000 products will take more time to re-index than those catalogs with only a few hundred products. So be patient while this process is in progress. You will be notified of the completion of the re-indexing with an alert message, at the top of the page, telling you that re-indexing is complete. At this point, you will notice that the former red background items are now loading a green background. This indicates that you have successfully performed your re-index. You are now ready to show off your new search setting. Should you need to change the search setting again, simply follow the steps in this article and you will be good to go.

Summary

If you want to get the most out of your website, take the time to experiment. Wait until most of your products are loaded, complete with descriptions, and experiment with all three options. If you need something more advanced, we can recommend modules that are built to handle more complex tasks. Contact us or leave a comment and tell us how we can help you.

Adding JavaScript and CSS files to head section of Magento

Have you ever wonder why are there so many ways of adding JavaScript or CSS file into a Magento page? The task is quite ordinary and can be accomplished by even junior Magento developer. The thing is each of us has just one approach in his arsenal when in fact the variety of available methods is much wider.

Finding out the complete list is easy. All methods reside in Mage_Page_Block_Html_Head class. The first pair is addCss and addJs. The syntax is quite simple:

<action method="addJs">
    <script>scriptaculous/scriptaculous.js</script>
</action>

Some core modules use <file> instead of <script>. There are some talks over the internet regarding which approach is correct. The fact is there is absolutely no reason what container to use. Magento will accept anything as long as the closing tag matches opening one and will send the contents as the first argument to the addJs method of Mage_Page_Block_Html_Head class.

You got it right, there is also a second argument. It allows you to send any additional parameters to be included into <script> or <link> tag:

<action method="addCss">
    <name>print.css</name>
    <params>media="print"</params>
</action>

The path of a script added by addJs method is relative to Magento root /js directory. For addCss method it is relative to skin directory of your theme.

In fact both those methods are just wrappers for universal addItem method which can add either CSS or JavaScript into your page.

The basic syntax is the following:

<action method="addItem">
    <type>js</type>
    <name>lib/ds-sleight.js</name>
</action>

The type can be js, js_css, skin_js, skin_css, link_rel or rss.

js will include a JavaScript file and will search it in /js directory of your Magento installation. This is similar to what addJs method does.

js_css will create a CSS link and will also search the file in /js directory. This is handy for including stylesheets of some JavaScript libraries.

skin_js will try to locate a referred JavaScript file in js directory of your theme.

skin_css will create a CSS link to relative to skin directory of your theme. This is similar to addCss method described above.

link_rel can be used to create a custom <link /> element with custom attributes. Can be used for including CSS files located remotely.

rss will create an RSS link but you most likely will never use it.

In general addItem method accepts 3 more parameters. The params is the same as the one used for addJs and addCss. Then there’s if and condition.

If if is set the added link will be placed into wrapper. That means you will be able to limit its inclusion to some specific browser versions. The syntax is the following:

<action method="addItem">
<type>skin_css</type>
<name>below_ie7.css</name>
<params />
<if>lt IE 7</if>
</action>

The blank <param /> is important here because as we already found out earlier Magento is not looking at the name of container tag but at it’s position. More info about conditional comments can be found here.

The last parameter is condition. It is not documented and I have not found any references on internet about how it works. The syntax is following:

<action method="addItem">
    <type>skin_css</type>
    <name>custom.css</name>
    <params />
    <if />
    <condition>this_custom_css_is_allowed</condition>
</action>

Once Magento comes upon such a statement it checks if this_custom_css_is_allowed is set on the head block and if yes and it is not false the js/css item will be included.

This is quite interesting technique. As you surely know it is possible to control whether the js/css will be included into the page by sticking to the particular layout handles. The condition parameter gives you an ability to provide even more sophisticated configuration. So within your controller you can do something like this:

$this->getLayout()->getBlock('head')->setThisCustomCssIsAllowed(true);

Or you can set this value through XML layout. However this will not make much sense as again you are coming back to layout handles:

<reference name="head">
    <action method="setThisCustomCssIsAllowed">
        <flag>1</flag>
    </action>
</reference>

There are some other valid methods available which are all just another shortcuts for addItem method:

addCssIe and addJsIe are working same as addCss and addJs but also sending IE value as the if parameter to addItem.

addLinkRel is just a shortcut for addItem with link link_rel type. The first argument is used as a file path and the second can be fed with all attributes like rel, media, etc which will be directly injected into the <link /> tag.

It may look like you don’t need any of those shortcuts if you have mastered the usage of addItem method. It may look like all those shortcuts are kept in the code for backward compatibility and you only need to know them to pass Magento Frontend certifications. Not quite. addItem method was included into Magneto from the very beginning and is will be converted into the private method in Magneto 2 leaving us all those shortcuts plus something new.

the path for Mage_Page_Block_Html_Head class

app/code/core/Mage/Page/Block/Html/Head.php