Hi folks, I’m back with another freebie for you.  This time it’s a Concrete5 package that lets you create, manage and display testimonials on your website.

The following fields are available to you:

• Title
• Author
• Department
• Quote
• URL
• Display Order

When adding a block you can choose specific testimonials to display, or display all. Additionally, you can sort by display order, or in a random order.

Requirements

All you need is a Concrete5 website running on 5.5.0 or greater.

Usage

You can find full documentation on the Github page

License

It’s totally free and open-source so you can do whatever you like with it!  It’s quite easy to adapt into a management system for any other kind of object like people, books or even managing your own movie database.

Screenshots

Download

I’ve submitted the package to the Marketplace and will update this post will a link once it’s live.  In the meantime you can download from Github.

Download here

Support

If you have any issues or feature requests please get in touch via the comments, Twitter, or email

This gem provides all the following search methods:

• hottest deals
• newest deals
• discussed deals
• deals by username
• deals by tag name
• deals by merchant name
• online deals only
• offline deals only
• keyword search

    require 'hukd'
    hukd	=	Hukd.new("YOUR_API_KEY_HERE")
    deals	=	hukd.hottest('deals')
    deals.each |deal| do
    	puts(deal.title)
    end

Source code on Github
Gem on rubygems.org 

If you have any issues or requests then feel free to get in touch

Over a year ago, I released a free Magento Featured Products Widget which groups the featured products by category.  Since releasing it I’ve had a lot of traffic, and a lot of pleasant feedback from users.  Now I’ve finally been able to get round to upgrading the widget to be even better with a lot of rewritten code, testing and few new features too.

New Features

• Creates featured attribute on installation
• Displays Review Summary
• Displays Add to Cart button
• Shows path to categories when selecting categories in admin (easier to distinguish between different stores with same category names)
• Caching
• Code rewrite (better documented and better Magento conventions)
• Compatibility checked on 1.4.0.0 to 1.6.2.0
• More flexible styling (font colours are now theme defaults)
• Included Minimum price for Bundled Products
• Products only fetched from current store
• Mixed template is now a lot cleaner

Screenshots

Grouped by category

Configuration Options

Mixed Display

Installation and Documentation

Installation

Copy the app and skin directories into your Magento installation

Usage

CMS Pages

1. Login to your Magento admin
2. Go to CMS > Pages
3. Select the page you want to use
4. Click the Content tab
5. In the WYSIWYG Editor, click the Insert Widget button (for me it’s top row, second from the left)
6. As Widget Type select Cube Websites - Category Featured Products
7. Configure your Widget using the available options

Frontend Template
Categorised – Displays the products grouped by the category they belong in
Mixed – Displays all the products in a single block with no grouping

Categories (only applies if Categorised Frontend Template is selected)
The categories to select products from

Number of Products
If Categorised – the number of products from each category
If Mixed – the total number of products

Products Per Row
How many products will be displayed on each row in the frontend

Products to Display
Featured – Displays featured products only
All – Displays all available products

Featured Attribute Code (optional)
By default this is cube_category_featured but if you’ve created your own featured attribute code then you can use that instead.

Within your template

1. Open your favourite text editor
2. Within find the Layout XML you want to add the block to within the app/design/frontend directory
3. In your .xml file, add the following in the relevant position

    <block type="categoryfeatured/list" name="featured_products" as="featuredProducts" template="categoryfeatured/block.phtml">
    <action method="setData"><name>categories</name><value>1,2,3,4</value></action>
    <action method="setData"><name>num_products</name><value>4</value></action>
    <action method="setData"><name>products_per_row</name><value>4</value></action>
    <action method="setData"><name>product_type</name><value>featured</value></action>
    <action method="setData"><name>featured_code</name><value>cube_category_featured</value></action>
   </block>

template
categoryfeatured/block.phtml – Displays the products grouped by the category they belong in
categoryfeatured/mixed.phtml – Displays all the products in a single block with no grouping

categories (only applies if categoryfeatured/block.phtml template is selected)
The categories to select products from (comma separated)

num_products
If categoryfeatured/block.phtml – the number of products from each category
If categoryfeatured/mixed.phtml – the total number of products

products_per_row
How many products will be displayed on each row in the frontend

product_type
featured – Displays featured products only
all – Displays all available products

featured_code (optional)
By default this is cube_category_featured but if you’ve created your own featured attribute code then you can use that instead.

If you need to output the block in a certain location of your template, then make sure you include the following in your .phtml file <?php echo $this->getChildHtml('featuredProducts') ?>

Downloads

I’m currently awaiting approval from the Magento Connect site, but I’ve also made this project available free on GitHub.

Download from Magento Connect (awaiting approval)
Download latest version
Download 2.0.1

Fork on GitHub

Feedback and Support

If you have any questions or issues please feel free to post in the comments.

I’ve spent the past few days creating a more up to date version of my Category Featured Product module for Magento.

NOTE: If you just want the solution, skip to the end of this post where I’ve written a quick summary

One of the new features that it has is the ability to display the product review summary, just like you’d get on a category page.

At first I thought it would be quite simple, simply load the product attributes and then call the usual code in the template as follows:

<?php if($_product->getRatingSummary()): ?>
 <?php echo $this->getReviewsSummaryHtml($_product) ?>
 <?php endif; ?>

Unfortunately this piece of code returns nothing and no review summary is displayed.  After a quick var_dump of $_product->getRatingSummary() I noticed that the value being returned was null

Owing to this, I set about trying to find a solution by looking at how the Product List Block works and seeing if I could find anything related in there. Unfortunately there were no clues in there, although I did pick up some other nifty little tricks (will share another day).

After 2 hours searching, I finally managed to find how it’s done…
When the Product List block is about to be rendered, the _beforeToHtml() is run, this in turn dispatches an event:

Mage::dispatchEvent('catalog_block_product_list_collection', array(
 'collection' => $this->_getProductCollection()
 ));

A quick search for catalog_block_product_list_collection in my IDE led me to:
app/code/core/Mage/Review/etc/config.xml
I knew I was about to find the solution as soon as I saw “Review” in the path!

I opened up the file, and found this:

<catalog_block_product_list_collection>
    <observers>
        <review>
            <type>model</type>
            <class>review/observer</class>
           <method>catalogBlockProductCollectionBeforeToHtml</method>
       </review>
    </observers>
</catalog_block_product_list_collection>

I quickly opened up app/code/core/Mage/Review/Model/Observer within which I found the catalogBlockProductCollectionBeforeToHtml method (as mentioned in the XML above).

This method contained the following code:

$productCollection = $observer->getEvent()->getCollection();
if ($productCollection instanceof Varien_Data_Collection) {
    $productCollection->load();
    Mage::getModel('review/review')->appendSummary($productCollection);
}

And obviously this was the solution
I went back to my code and added in the following lines:

$collection->load();
Mage::getModel('review/review')->appendSummary($collection);
return $collection;

After refreshing the page, I was seeing all the product reviews and it was a big win all round. It’s been quite a journey finding the solution, but as is usually the case with such mighty investigations, the sense of elation upon discovery can only be compared to that experienced when finding money under the sofa cushions.

Summary

For those who don’t want to read the entire post (I’m not one to judge and call lazy) here’s a quick summary of the solution:

In your template put (use whatever variable name you assign to your product):

<?php if($_product->getRatingSummary()): ?>
 <?php echo $this->getReviewsSummaryHtml($_product) ?>
 <?php endif; ?>

After filtering your collection, just about it’s going to be passed to the view run the following:

$collection->load();
Mage::getModel('review/review')->appendSummary($collection);
return $collection;

Hope this helps!

This year I’ve decided that I want to learn at least one new language and have decided that I’ll be learning Ruby.  I’ve read great things about Ruby and Rails, all about how it’s made development fun again for devs, lets you actually get on with creating responsive web applications and is generally just so awesome.  I’ll be writing up everything I discover, whether it’s finding things which are much easier than their PHP alternative, or getting frustrated by the fact that I can’t figure out how to do something I’d normally consider trivial in PHP.

Part I is based on me setting up Rails on my local Windows machine and then spending a couple of hours working my way through the Getting Started tutorial.

Ruby VS Ruby On Rails

One of the first things I asked myself was, “am I learning Ruby or Ruby on Rails?” and went off in search for an answer, which was “both”.

Ruby is the language.  Rails is a framework written in Ruby which makes creating web applications really easy.
So me learning Rails is actually me learning how create Rails applications in Ruby.  Got it?

Setup

The setup of Rails itself wasn’t too bad.  I just downloaded the Windows installer from Ruby Installer and the DevKit from the same site, which allows me to compile and use gems natively.  That was it for Rails installation, simple enough.

MySQL Setup

To create my first application I simply fired up Netbeans, which is my IDE of choice, and created a new Ruby on Rails Application.  This was pretty cool, except for the fact that I couldn’t get MySQL working.  I have MySQL running locally as part of WAMP, but installing the mysql gem for Ruby wasn’t enough.  Whenever I tried running the app it’d complain and quit.

I started looking up solutions, and spent a lot of time searching for people with similar issues, but no matter what I tried I couldn’t get it working.  I spent at least an hour looking for a fix and got really frustrated, it was quite a dark time, however I kept looking and finally found this solution on how to install MySQL on Windows 7 64-bit with Ruby.  The tutorial was simple to follow, and as soon as I’d finished my app started working, good times.

Hello Ruby

Now that I had Rails setup and installed on my machine, it was time to start learning how to build things.  I went to the getting started tutorial and worked my way through it.  As I worked through it I spotted a LOT of things which seemed to make me love Ruby, and lot of things which went well and truly over my head.

Things I Loved

1. Sprockets – In your application directory, Rails has assets directories for JavaScript, Stylesheets and Images.  Whenever you use the CLI to create a new controller, it creates new .scss and .coffee files with the name of your controller.  This means that you can separate out all the style and scripts for each component of your site really easily.  Rails then compiles your Sass and CoffeeScript files when your run your application into a single CSS and a single JavaScript file.
2. Response types – it was so stupidly easy to return content in a specific format based on the URL extension.  For example:
   myurl.com/posts – would be the expected HTML output all my blog posts
   myurl.com/posts.json – would route to the same controller and action, but return all the blog posts as a JSON string
   myurl.com/posts.xml – all the posts but now as valid XML
3. Rails IS an MVC framework – Rails is built to be an MVC framework.  The moment you generate your first app (easy as: `rails new myappname`!) it creates a base application which follows the MVC pattern and easily allows you to extend it into your own.
4. Syntax that “just makes sense”– here’s a sample of a Model in Ruby:

   class Post < ActiveRecord::Base
     validates :name,  :presence => true
     validates :title, :presence => true,
                       :length => { :minimum => 5 }
   
     has_many :comments
   end

   It amazes at me at how much you can understand just from looking at the class declaration.
5. It’s So Simple – whilst you could argue that I now have the benefit of a few years PHP experience, I still remember that when I first started with PHP, which was my first web language (I’d done Java and C++ before), I spent a whole summer just going over the basics and working my way up to creating a blog as part of working through a book.  In fact, the blog was pretty poor an lacked a lot of key features like security and it was done in procedural programming.  It wasn’t until about a year into PHP that I started working with frameworks and OOP properly.  In comparison, it took me just a few hours to go from “I want to learn Ruby”, to having a working blog application using MVC conventions.

It’s Over My Head

When I said there were a few things that went well over my head, well…I lied, it was basically just the syntax.  Whilst in some cases the syntax made a lot of sense, in other cases I was getting really confused e.g. when they were generating forms in the views and I had no idea what the hell was going on.  At the time I decided the best thing to do was to carry on the guide and then go through everything and look up the bits I didn’t get.
This is actually as far as I’ve got to date, but see the next section on how I intend to learn the syntax.

Where To Next?

Whilst I’ve completed the basic blog tutorial, the next step is to learn how to make a full web application.  I’ve looked around and found that the book Agile Web Development With Rails is THE book to learn Rails with according to a lot of people.  I managed to find an early edition at work today and have brought it home to start looking through for the rest of this evening.
The book has an appendix which contains a quick-start guide to the Ruby language and syntax so I’m going to start with that to understand the things from the blog tutorial which I didn’t quite get, and then make my way through the book which should also clarify some of the things for me.

Verdict.

Simply put, I think Rails is ACE.  So far it’s been great.  Whilst there’s some bits I don’t quite get yet, well what can you expect, it’s been about 3 hours so far!  Overall it seems to be a very powerful framework which not only enforces but also simplifies the best web programming conventions.  Lovin’ it.

View Demo

As went about creating a page which does this, I ended up creating my jQuery Scroll Tracker.  It’s a very simple script, which allows you to track the position, and take certain actions when a certain part of the page is reached.

If you’ve been on the demo page, you’ll have seen that as you start scrolling the instructions disappear.  Here’s the code and explanation of how that effect is achieved:

//when the document is loaded
    $(document).ready(function(){
        scrollTracker.initialize();
        /* the 'instructions' parameter is just a label we're giving to the tracker so we can delete it later
        /  it's just a label and can be called whatever you want
        /  the second parameter is a callback function, which the scrollTracker will fire when the page is scrolled
        /  the function can accept two parameters:
        /   - scrollpercent - the percentage of the page which has been scrolled
        /   - scollpos - the number of pixels of the page which has been scrolled
        */
        scrollTracker.addObject('instructions',function(scrollpercent,scrollpos){
            //if 10% of the page is scrolled
            if(scrollpercent > 10) {
                //fade the instructions out
                $('#instructions').fadeOut();
                //remove the tracker so that it only gets called once
                scrollTracker.deleteObject('instructions');
            }
        });
    });

As you can see, most of the code is comments.  The scrollTracker listens for when the page is scrolled, and when it is it will call the function you provide it with.

There’s a lot more you can do with it, and you can find full up-to-date documentation on the GitHub project page

If you decide to use it, please let me know so I can link to it as an example.
If you have suggestions or requests then please post in the comments and I’ll see what I can do!

Demo
GitHub Project

Have fun!

This tutorial is available for you to view and download on GitHub

Requirements

To see this tutorial in action, please use Google Chrome or Safari (or Firefox 10 or IE10).  Impress.js is not currently compatible with earlier versions of Firefox or Internet Explorer.

Setup

The first thing you want to do is create a new webpage.  Mine’s index.html and within it setup the basic head and body elements.

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

Add the impress.js file before the end of the body element.  This imports the Impress library into your project

<script type="text/javascript" src="impress.js"></script>

Next we’ll create a wrapper which will contain the slideshow.  This is simply a <div> element with an id of ‘impress’

<div id="impress">

</div>

<div class="step">
    My first slide
</div>

Whilst that creates a simple slide, things are a lot more fun you start adding data properties to your slides.  Data attributes signify properties of your slide for when it’s NOT the active slide.  The following data properties are available to you:

• data-x = the x co-ordinate of the slide
• data-y = the y co-ordinate of the slide
• data-z = the z co-ordinate of the slide (how far/close it appears to the user)
• data-scale = scales your slide by a factor of this value.  A data-scale of 5 would be 5 times the original size of your slide
• data-rotate = rotates your slide by the specified number of degrees
• data-rotate-x = For 3D slides.  This is the number of degrees it should be rotated about the x-axis.  (Tilt forward/lean back)
• data-rotate-y = For 3D slides. This is the number of degrees it should be rotated about the y-axis (swing in from the left/right)
• data-rotate-z = For 3D slides. This is the number of degrees it should be rotated about the z-axis

Data Attributes In Action

The following slide configuration will guide you through each of the data attributes in action.

Let’s start with an initial slide.  This slide has it’s x and y data attributes set to 0, so will appear in the center of the page.

<div class="step" data-x="0" data-y="0">
    This is my first slide
</div>

The second slide will have an x position of 500, but the y position of 0.  This means that it’s going to have to come in 500 pixels across the x-axis (slide left) when it becomes active.

<div class="step" data-x="500" data-y="0">
    This is slide 2
</div>

Easy huh?  The next slide will start with the same x-position as slide 2, but a y position of –400.  This will slide in from the top 400 pixels.

<div class="step" data-x="500" data-y="-400">
    This is slide 3
</div>

Slide 4 uses the scale value to show how a slide can appear to zoom in/out.  It has a scale value of 0.5, meaning that it’s half the size it should be.  When it becomes active the presentation will adjust the scale of ALL the slides by the factor required to make the scale of the active website 1.  What this means in this example is that for this slide to display normally (scale value 1) it will need to be scaled up by a factor of 2 (0.5*2 = 1).  All the other slides will also be scaled up by a factor of two, and become twice the size.

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

The rotate attributes allows you to rotate a slide into view.  Slide 5 is set to rotate by 90 degrees.

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
</div>

Finally, for a 3D transition, you can specify rotate attributes for each dimensional axis (x,y,z).

The x axis is the horizontal axis.  This means that you can make things tilt forwards (positive value) or backwards (negative value).
The y axis is the vertical axis so you can have things swing in from the left (negative value) or right (positive value).
The z axis is the depth axis (the one coming out at you) so rotating things on this would be rotating things up (negative value) and down (positive value).

Combinations

Now that you know all about the data attributes, which is really all you need to animate your slideshow, you can use your imagination to combine these in weird and wonderful ways to create your own style of slideshow.

<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
    This is slide 7 and it has a 3D transition AND a scale.
</div>

Unsupported Browsers

Impress automatically detects whether or not a browser supports it or not, and if it doesn’t then automatically adds a class name called ‘impress-not-supported’ to the wrapper ‘<div>’.  Using some CSS we can show a message to people on browsers which aren’t supported by Impress.

At the start of your <div id=”impress”> add the following:

<div class="no-support-message">
    Your browser doesn't support impress.js.  Try Chrome or Safari.
</div>

Then, create a stylesheet or add this to your existing stylesheet:

.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; }

This hides the message by default, but then displays it to browser if the impress-not-supported class is present.

Have fun!

This tutorial covers the fundamentals of using Impress.js to create your very own online presentation.  The entire example is available on Github for you to download and play with.

View on GitHub

If you’re an active user of GitHub and work on any open-source projects then may want to show off your projects and activity on your own website.  This is where Gitview comes in.

Gitview allows you to display all your GitHub repos, and gives the option to display a detailed version including a graph of your project activity, or a simple compact version if you prefer.  Not only that, but all the information displayed is live.

The full feature list is:

• Asynchronous loading of all date
• All data is 100% live
• The Activity Graph uses the Canvas element
• You can toggle the regular or small version
• No need for additional styles
• Works with all JS frameworks (jQuery, Prototype, Mootools, etc)
• WTFPL license

Using it is very simple:

1.  Include the script on your page

<script src="http://logicalcognition.com/Projects/Gitview/Gitview.js"></script>

2.  Create a GitView anywhere on your page from a script tag or a JavaScript file:

var view = new Gitview({
  user    : 'cubewebsites',      // any github username
  domNode : document.body,  // domNode to attach to
  compact : false           // if set to true, will display smaller version of widget (no participation graph)
});

Enjoy!

Now, there’s a free and open-source JavaScript library called Impress.js (the author says no rhyme intended!) which will blow your mind.  It’s a JavaScript adaptation of Prezi (which uses Flash), which uses CSS3 transforms and transitions to create really cool effects similar to those on Prezi, and on top of that it’s also uses CSS3 3D animations which takes things one-step further and lets you have 3D effects in your presentation too.

The downside is that at the moment it’s only guaranteed to work on the latest versions of Chrome and Safari.  Non-webkit browsers do have a fall-back mode, which is a simple display of the slides but without any of the animation.  It does work with the alpha versions of Firefox 10 and IE10 builds, so once those are out the browser support will be much better.

Whilst the browser requirements may be a deterrent for most folks, it’s amazing to see what can be achieved using CSS3 and maybe highlights the shape of things to come.

It’s certainly worth bookmarking and having a play with.

Click here for a live demo (use Chrome or Safari)
Source code on GitHub

jQuery UI Bootstrap is an open-source effort by @addyosmani to introduce the Bootstrap styling into the standard jQuery UI widgets.  It covers many of the widgets available on the jQuery UI website including:

• Accordion
• Tabs
• Buttons and Button Sets
• Horizontal slider
• Progress Bar
• Dialogs
• Icons
• Date Picker

Whilst it’s still a work in process, what’s available already is fantastic and I’d love to see where this project goes.  It’s the next logical step for the Bootstrap framework; we have the standard web elements and layouts, now it’s about making those pages interactive using one of the most popular widget libraries available, jQuery UI, and making that look like the rest of the site…well it just makes good sense.

Bootstrap

Here’s a quick introduction to Bootstrap for those that haven’t yet heard of it, or aren’t sure what it does.

Bootstrap is a prototyping framework introduced by Twitter in mid-2011.  It’s aimed at making more consistent browsing experience for users as they browse various sites and applications on the web.  It’s free, open-source, and uses LessCSS making it a breeze to modify to suit your own needs.

Since it’s launch, it has been very well received by the developer community, and I’ve noticed it being adopted by many popular websites and open-source software including:

• Concrete5
• CodeAcademy
• WHMCS

I’ve even used it on the Cube Websites website for the form elements and as a grid system.

Get Started

• jQuery UI Bootstrap
• jQuery UI Bootstrap on GitHub
• Bootstrap

jQuery UI Bootstrap seems like a great idea, and has a lot of potential for making Bootstrap even better.  I’ll definitely be trying it on my next project involving UI widgets.  Whilst it looks fantastic already, I’d love to see where it goes from here.  One of the things I’d like to see is the stylesheets done in Less so that the widgets can be customised to look exactly how the web designer wants.