Magento Designer Developer Portland, OR

Magento- adding images to recently viewed products block

admin — Wed, 15 Feb 2012 22:38:05 +0000

A client recently asked me to add images to the recently viewed products block in their left hand column.
Here is what it looks like before:

The file that generates the recently viewed products block is in app/design/frontend/base/default/template/reports/product_viewed.phtml.
You will want to open that file in a text editor, and save it in your theme’s templates file app/design/frontend/default/your_theme/template/reports/product_viewed.phtml.
This will prevent you from overwriting any base theme template files, which is recommended.
You will be looking around line 36, which is what generates the ordered list of recently viewed products. The code is as follows:
(Click to Enlarge)

We are going to insert a snippet of code to generate thumbnails above the product name link, and wrap it in a paragraph tag.
Click the link below to download code sample.
Add images to recently viewed block (4)

Here is the what it looks like after:

Inventory Updates in Magento

admin — Tue, 10 Jan 2012 18:36:23 +0000

One of the most repetitive and time consuming weekly tasks with a Magento store is updating inventory.

In most stores, this is done at least 3 times per week, to sync Magento with warehouse inventory levels. If you have a store with 2,000+ products, uploading and importing an updated inventory csv file can take 2+ hours. That’s 6+ hours per week spent! There is an alternative, though.

Our Inventory Update Script will reduce the uploading and importing time to 5 minutes for 2,000 products, saving you time and money every week. More info

Adding Magento Account Login Logout to Footer Links

admin — Fri, 16 Dec 2011 17:05:08 +0000

As sometimes happens, clients want to remove the Account Login links from the header links block. Usually due to space and or design constraints. This reduces some of the built in functionality in Magento. But don’t despair, you can add them to the footer links static block that’s there by default, before the closing ul tag. Click Login Link to see working code example:Login Links (34)
How easy was that?

Adding an introductory message to your contact form

admin — Tue, 29 Nov 2011 00:44:59 +0000

I was recently asked to add an introductory paragraph above the default magento contact form, before any of the form fields. A static block was the most logical way to do this, so the client could modify and/or change this paragraph whenever they needed to. We first made a static block called ‘contact-welcome’, containing the intro paragraph:
We would love to hear from you.
Whether it is questions, complaints, feedback, dreams, or ideas for improvement.
Please contact us at any time.

The contact form is generated by the app>template>contact>form.phtml file. Download this from your base>default folder and place in your theme’s app>template>contact folder. At the top of the page, you are going to insert a static block at the top of the page, after the header tag and before the form post tag:Contact Form Welcome paragraph (29)
Once we have this inserted in the form.phtml file and uploaded to our theme’s template>contact folder, it is active and is displayed right above the form fields. You can style this paragraph as needed in your stylesheet.
Good luck.

Changing the search results page layout

admin — Tue, 29 Nov 2011 00:26:06 +0000

A client recently wanted to change the search results page layout, so that instead of having three columns, it was two columns, with one column left, which included their left navigation bar. The search results page is controlled by the catalogsearch.xml file. Download that file from the app>layout> base>default folder to your own theme’s layout folder.
If you look around line 52 you will find where the layout is set:Catalog search results (47)

We are going to change that to 2columns left:Catalog search results page (58)
and our search results will have two colums with a sidebar on the left side.
It’s that easy!

Changing product page image size

admin — Tue, 29 Nov 2011 00:00:31 +0000

Magento has standardized product image sizes for category and product pages, which takes a lot of the guesswork out of image processing. Sometimes, though, your client wants different images sizes for thumbnails, small image, and main images. Sometimes, they’re not square and the background is either an image or a different color than white.This can create issues, as Magento will insert white background panels to make the images square.

To get rid of those annoying panels on the product page thumbnails, you need to modify the app>template>catalog>product>view>media.phtml file. Look around line 73 for the code that generates the image.
Here is the section that generates the more views thumbnails: More Views code block (48)
As you can see, inserting a background color before resizing will make sure the panels that make the background appear square will now have the same background color as your theme: ie: ->backgroundcolor(’000′, ’000′, ’000′)->resize(56); ?>
In this example, the background color matches the theme background color- #000000.

Let’s look at the category images, now.
The client wants the images to be larger than the default image sizes, which are 165×165 by default. The client wants them to be 215 wide with the length to whatever it needs to be based on the image that was uploaded. The file we need to modify is app>template>catalog>product>list.phtml which generates the product grid on the catalog page. We are going to insert the same background color modification, and change the image size:Category List image size (32)
->backgroundcolor(’000′, ’000′, ’000′)->resize(215); ?>
We will also need to modify some of the css to accomodate the larger image sizes.
If you are having trouble identifying which template is building the images, turn on template path hints, in the admin>developer section.
Good luck.

Building a top nav for Magento CMS pages

admin — Thu, 13 Oct 2011 18:25:33 +0000

Incorporating a different navigation menu for your content pages (CMS) in your Magento store can be a good idea, especially if your site has a lot of content. But Magento isn’t really designed that way. There is an obvious solution, though. Make a CMS template, and apply that to all your content pages. The first part is adding a new theme to our /app and /skin folders. We’ll call it cms-theme. Duplicate all the folders you have in your current theme, and rename them cms-theme. Once we have that done, we’ll design the static block that will build the cms menu pages. For that we are going to tie into Magneto’s current navigation styling so it looks the same as magento’s default navbar.
So, make a new static block, lets call it cms-navbar, and use the following to build your menu:
(click to enlarge)

You can download an example here:CMS menu unordered list (69)
After saving the static block the next step is inserting it into the template where the navbar is generated, which is catalog/navigation/top.phtml
Here is the code before:
(click to enlarge)

Here is the code after removing the default loop to build categories, and then inserting our cms-block:
(click to enlarge)

You can download an example here:
Insert static block in top nav (53)

Now, go to a content page, and in the design section, there is a custom design section. In the custom theme section, select your cms-theme as the theme for your content pages.

Flush your cache and you can now see your new custom menu at the top of your content page.

To apply this to other cms pages, just apply the template as you did above.
As you can see, you now have an easily customizable navbar for all the content pages in your store.
Good luck!

Magento and New Relic

admin — Fri, 02 Sep 2011 23:52:39 +0000

New Relic is a new website analysis tool, which gives you a wealth of information about your Magento store, how visitors interact with it, and what processes/extensions are slowing your site down. More about New Relic

In order to use New Relic, though, you need to install it on your server, and then have magento make api calls when a page begins loading and when it finishes loading.

This is done by modifying the header and footer template files in your theme. In your theme’s header.phtml file , place this snippet at the very top:

<?phpphp if( extension_loaded(‘newrelic’) ) { echo newrelic_get_browser_timing_header(); } ?> In your theme’s footer.phtml file, place this snippet:

<?phpphp if ( extension_loaded(‘newrelic’) ) { echo newrelic_get_browser_timing_footer(); } ?>

So what’s the payoff?

Indepth analysis of your page load times, slow db queries, slow applications, and enough information about your server to make your eyes water.

Debugging Magento

admin — Fri, 02 Sep 2011 23:36:48 +0000

There is a little used function in Magento, that’s quite handy when trying to identify bugs and errors. It is in the Developer section, and it allows you to generate log files in the /var/log directory.

These logs will allow you to identify errors and where to look for clues. All valuable information when trying to track down a slow checkout process or an error you see in the admin section.
There are two logs that Magento creates, system log and exception log. Cruising through these two log files will tell you a lot about the health of your magento site and allows you to identify frequently occuring errors throughout your store.

Magento-Finding the Manufacturer List in the DB

admin — Fri, 01 Jul 2011 22:18:37 +0000

Some bits of information are hard to pull out of Magento’s admin interface. I made a list of all the manufacturers I wanted to put in my Magento install. This shows under Catalog/Attributes/Manage Attributes. Typically you select the Manufacturer attribute, and click on Manage Label/Options. This gives you the whole list of manufactures, but you cannot export it from this screen or through Magento’s export profile interface.

The database is the best way to pull a list of manufacturers from Magento. Connect using Sequel Pro or some other db tool, and find the following table:

eav_attribute_option_value

Select that table and export it as a csv. Then open it up and you’ll find labels for your Manufacturer’s and other options as well. Just cut out the stuff you don’t need and you’re done.