Dynamic Left / Right Callout Block by Category AND file_exist

Last modified by Tim van de Velde on Thu, June 24, 2010 17:11
Source|Old Revisions  

This is an old revision of the document!


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

1. Introduction

This is an easy and upgrade-proof workaround for creating dynamic left / right callouts through category name / file exist.

Basically, it checks if a file exists in a specific folder with the category-name (category1.jpg).

I’m not a programmer but a designer, so it’s not 100% clean-coded, and as it should be. But it works great!

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

2. Creating the block

Create a file called custom_left_callout.phtml, and place it in

app/design/frontend/yourtheme/yourskin/template/catalog/navigation/

The code for showing the dynamic callout is:

  <?php $url=$this->getSkinUrl('images/anyfoldername')?>
  <?php $categor=$this->getCurrentCategory()->getName()?>
  <?php $filename="skin/frontend/yourtheme/yourskin/images/anyfoldername/$categor.jpg";
  if (file_exists($filename)) {
  echo "<div class='yourleftcalloutthemeclass'><a href='#'><img src='$url/$categor.jpg' border='0'></a></div>";
  } else {
  echo "";
  }
  ?>

The placement of the image is done by checking if the file exists! Be sure to direct to the right path..

A brief explanation:
  • $url: the path to your current theme’s skin folder
  • $categor: current browsing category
  • $filename: where to check for the existence of the file

Past it in your custom_left_callout.phtml file.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

3. Placing the block

Open catalog.xml. This file can be found in

app/design/frontend/yourtheme/yourskin/layout/

Place the follow code instead of (or above/below) the existing left callout:

      <reference name="left">
      <block type="core/template" name="left.permanent.callout" template="callouts/left_col.phtml">
      </block>
      <block type="catalog/navigation" name="catalog.navigation" template="catalog/navigation/custom_left_callout.phtml"/>
      </reference> 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

4. Placing the Image

Now, if you place an image named to a category, in the specified folder. It shows up in your left column. For example:

You have a category like this: /Furniture/Chairs The only thing you have to do is place an image called Chairs.jpg in the specified folder, and it shows up.

Use the div class to CSS style your block.

To add a callout to the right column, repeat all the steps, only replace "left" with "right" :D

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

5. Troubleshooting

If no image shows up

You can check if the file_exist script works by replacing the echo’s by text like “this file exists”, and “this file does not exist”. This way, text will be shown in the left column, pointing out that the right path has been set.

You can also check with firefox + firebug for the output. If no code shows up at you probably don’t have an image in the right folder, or the path is incorrect.

You can always contact me for questions. If something can be done cleaner/better, please edit this wiki.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Enjoy !

Tim van de Velde.

The Netherlands




 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs