Category Archives: Programming

Using jQuery with Magento

When it comes to JavaScript libraries, I prefer jQuery over Prototype. This becomes problematic when I try to include jQuery libraries and plugins with Magento because Magento relies heavily on Prototype. Even when I include a call to jQuery.noConflict() and wrap my code in closures, I still get a script error with Internet Explorer 7 and 8: “Object doesn’t support this property or method”.

I solved this problem by rearranging my JavaScript includes. Basically, include the jQuery library and a call to jQuery.noConflict() before including the Prototype library and include your custom code that uses jQuery to the end of the JavaScript includes.

1. Create a jquery folder under Magento’s top-level js directory

2. Put the jQuery .js file in js/jquery

3. Create a .js file named noconflict.js in js/jquery. The only contents of that file are:

jQuery.noConflict();

4. Add the jQuery and noconflict scripts to the page layout. In your theme’s layout/page.xml file, update the “head” block and add the addJs lines to the top before the addJs lines for prototype:

<action method="addJs"><script>jquery/jquery-1.8.2.min.js</script></action>
<action method="addJs"><script>jquery/noconflict.js</script></action>

5. Add any additional custom scripts to the end of the list. But make sure they are enclosed in enclosures:

(function($){
// your custom code that uses jQuery here
})(jQuery);

[SOLVED] Symfony2 Install Problem With Git On Windows XP

I ran across a nasty problem installing Symfony2 on Windows XP SP2. Symfony2 uses git and Composer to create new projects and manage dependencies. This is awesome – when it works. Unfortunately, I setup msysgit incorrectly by selecting the wrong install option.

msysgit install options

See that big nasty warning message in the third option? That scared me enough that I went with option 2. That was a mistake, because when I tried to run Composer’s install command, I ran into this error:

php composer.phar create-project symfony/framework-standard-edition path/ 2.1.2 Failed to clone http://github.com/fabpot/Twig.git, git was not found, check that it is installed and in your PATH env. 

Which is weird because when I run git from the command line, I get a list of options.

The problem is in the Windows PATH variable. Option 2 installs “C:\Program Files\Git\cmd” into the PATH, not “C:\Program Files\Git\bin” like option 3.

Solution: Aside from re-installing msysgit and selecting option 3, just add “C:\Program Files\Git\bin” to the end of your path, close and re-open the command window, and try again.

References:

Technique To Display Product Ratings Using CSS

One of the built-in functions of Magento, or any ecommerce platform for that matter, is the ability for users to submit product ratings and then have those ratings displayed next to each product. This is rendered as a fractional number of stars from 0 to 5. For example:

Example Product Rating

The skin that ships with Magento does this with HTML, CSS, and a background image. In this article, I describe this technique.

This technique uses a background image sprite consisting of both the “active” and “inactive” stars with a transparent background:

Example star rating background sprite

(Click the image to view/download)

Notice that this sprite contains just one star for each state (active vs. inactive). The CSS repeats the top star horizontally for the “inactive” stars in an outer DIV and repeats the bottom star horizontally for the “active” stars in an inner DIV. The magic is using a percentage width for the “active” stars.

The HTML:

<div class="rating-box">
<div style="width:80%" class="rating"></div>
</div>

The CSS:

.rating-box {
background: url("../images/bkg_rating.png") repeat-x;
font-size: 0;
height: 13px;
line-height: 0;
overflow: hidden;
text-indent: -999em;
width: 70px;
}

.rating-box .rating {
background: url("../images/bkg_rating.png") repeat-x;
background-position: 0 100%;
float: left;
height: 13px;
}

This combination of HTML, CSS, and PNG will create a 4 out of 5 star rating (i.e., 80%). The server-side code should render the inline style for the inner DIV by computing a percentage based off of the product’s current rating and the total possible and rounding the number to a valid percentage (i.e., an integer value between 0 and 100).

A PHP example:

<?php
$rating = round(($prod->getRating() / 5) * 100);
?>
<div class="rating-box">
<div style="width: <?php echo $rating; ?>%" class="rating">
</div>
</div>

Some things to consider if you want to design your own background sprite or if you want a rating system with a different maximum (e.g., nof 3):

  • The width of the outer DIV should be about n times the width of the graphic, where n is the maximum rating.
  • The height of both the inner and outer DIV elements should be the height of one rating.

That’s it. I think it’s a pretty simple, elegant technique. Try it out and let me know how it goes.

PHP Quiz: Passing Objects By Value vs. Reference

Editor’s Note: This article was originally posted at my personal site. I am re-posting it here because it is more appropriately placed in this blog.

Here is something to test your knowledge of how PHP handles passing objects by value vs. reference. Try to figure this out without using a PHP interpreter.

What is the output of the following code:

<?php
class Foo {
  private $bar;
  public function Foo($x) {
    $this->bar = $x;
  }
  public function getBar() {
    return $this->bar;
  }
  public function setBar($x) {
    $this->bar = $x;
  }
}

function changeFooByValue($foo) {
 $foo->setBar('high');
 $foo = new Foo('too low');
}

function changeFooByRef(&amp;$foo) {
  $foo->setBar('just high enough');
  $foo = new Foo('too high');
}

$foo = new Foo('low');
echo "Bar: " . $foo->getBar() . "n";

changeFooByValue($foo);
echo "Bar: " . $foo->getBar() . "n";

changeFooByRef($foo);
echo "Bar: " . $foo->getBar() . "n";
?>

Is it:

A:

Bar: low
Bar: too low
Bar: too high

B:

Bar: low
Bar: high
Bar: too high

C:

Bar: low
Bar: too low
Bar: just high enough

D:

Parse/syntax error

E:

None of the above