There is a feature that prsetashop comes with in its default installation, that is cruelly missing in Magento : the ability to display specials on the website, either on the margin of the home page and category pages, or inside a specifi page. But as always, there are already many discussions going on about this subject, and a community extension has been released, does the job fine but the whole subject  needs more investigation.

• The Catalog Sale Item community extension comes with its own xml layout page,  phtml design template, and Mage_Catalog_Block_Layer_View / Mage_Core_Block_Template class extensions. It creates a new page that displays all products currently on sale.
• Activecodeline publishes some code that extends the product list view to enable sorting products by specials price.
• Inchoo publishes an alternative category list view that displays only products in promotion or with special price, to be selecetd from the category / custom design menu.
• Magento’s forum has a dedicated “special price products” discussion that exlains how to use the product collection with specific query attributes to select only proucts with special price.

Magento’s backoffice comes with a fairly simple CMS that can do a lot : single pages can be modified (content and layout) via the CMS / Manage Pages menu, and page parts can be shared and modified via the CMS / Static Block menu. Web developers who get a first sight inside templates might find it difficult to integrate a newly created block : we describe here two methods to integrate a block in your magento website.

How to create a CMS block : Go to Magento admin uder CMS -> Static Blocks and Add New Block. Insert Block Title, Identifier (for example: mycompany-newsblock), set Status to Enabled, insert block Content and Save Block.

How to add the CMS block to pages (exemple on the right column). You can choose one of these 2 methods

1. LAYOUT block  modification: in layout/page.xml , find the default / right column block
   <block type=”core/text_list” name=”right” as=”right” />
   and transform it by incorporating the newly created CMS block  :
   <block type=”core/text_list” name=”right” as=”right”>
   <block type=”cms/block” name=”ruedesiam.marge” as=”ruedesiam.marge” after=”-”>
   <action method=”setBlockId”><block_id>mycompany-newsblock</block_id></action>
   </block>
   </block>
2. Template block addition : add the following code to
   app/design/frontend/YOURTEMPLATE/default/template/callouts/right_col.phtml
   <?= $this->getLayout()->createBlock(’cms/block’)->setBlockId(’mycompany-newsblock’)->toHtml() ?>

The solutionbelow explains how to add a template block : everything here is done via HTML files. (example for theleft column)

1. in layout/page.xml or in your page custom design, add the following code

<reference name=”left”>
<block type=”core/template” name=”productbrand” alias=”productbrand” as=”productbrand” template=”catalog/product/brand.phtml”  />
</reference>

2. in template/callouts/ left_col.phtml, add the following :

<? $this->getChildHtml(’productbrand’) ?>

PoleOuest_CategoryProductEditLink Magento extension is a lightweight magento backend extension that allows store managers to edit products straight from the category admin page.

Browsing products by category in the admin : there are many examples of opensource ecommerce systems that can do that. Among them, Prestashop backoffice is built around this navigation paradigm, and even Oscommerce  displays products by category in its 5 years old backoffice. Of course none of those two have the flexibility that Magento allows in terms of category / product association in a multistore environment.

But in Magento you can’t search product by category in the admin : can you imagine that this feature is missing in Magento !  As of version 1.4  this is still the reality, easily enhanced by the PoleOuest_CategoryProductEditLink Magento (see the page on Magento website).

INSTALLATION

1. Buy (29$ via Paypal) the extension on our shop
   Note : purchasing the extension gives you unlimited website license and full access to PHP Code
2. Download (TGZ)
3. HOW TO INSTALL :
4. unzip the file in your app/code/local, in order to get the structure below,
5. create the xml module file PoleOuest_All.xml in app/etc/modules with the following code :

   <?xml version="1.0"?>
   <config>
       <modules>
           <PoleOuest_Adminhtml>
               <active>true</active>
               <codePool>local</codePool>
           </PoleOuest_Adminhtml>
   	  </modules>
   </config>

6. go ahead, try it and let me know how to package this thing into a usable magento connect extension !

We will today work on a nice and easy fetaure of temlpate design : adding javascript and static images, with the objective of implementing a simple prototype based image rollover. We chose the simple unobstrusive rollover script by Herryanto Satiano.

• download the zip and place the rollover.js file in your js/prototype folder (or in you js skin folder)
  
• edit app/design/../layout/page.xml and add the following line in the header block :
  <action method=”addJs”><script>prototype/rollover.js</script></action>
  Note that you can also add your javascript in your own magento skin via the following block action :
  <action method=”addItem”><type>skin_js</type><name>js/prototype/rollover.js</name></action>
• add the rollover instanciation in you rpage/head.phtml file :

    <script type="text/javascript">
      window.onload = function() {
        new Rollover('nav');
      }</script>

• test on tow imagse with _over suffix.

The popular All-in-on SEO pack plugin for wordperss does more than just adding the essential meta fields to your articles and pages interfaces. For lazy writers, SEO pack will also create meta tags AUTOMATICALLY the content for these essential code addons that will boost your search engine positionning. A simple tag based configuration will allow you to set up categories, tag and archive pages optimisation via the TITLE tag, most important of all because it is the first thing visitors see when they look at search engines result pages.

Another example of useless feature that could become very useful when a critical mass of web geeks start using ti for specific image display : the jquery parallax plugin order images or elements to respond to mouse effects with a 3D effect. Stunning effect for the display of 3d Landscapes, such as displayed on the plugin homepage, or letter 3D movement, as illustrated in this example. The stephband.info author’s website demonstrates a powerful implmeentation of this plugin.

The image button on the tinymce instance of silverstripe html text fields is really nice and well layed out : it gives editors one of the best text / image integration, with a minimum user actions that’s both powerful, intuitive, and reactive thanks to AJAX calls to the folder structure.

One small drawback is that it comes with one small feature that can be annoying at times, especially when you’re looking for inserting images without resampling them, especially for transparent images or tight image integration / quality that Silverstripe resampling functions (PHP based) cannot match (check out the original image hack).

Image size limit feature

In silverstripe, when you select a big image, width and height are automatically resized to a maximum of 600 pixels. Quick hackers might want to deactivate this feature by commenting the resize algorithm in cms/code/ThumbnailStripField.php (lines 73/80 of 2.3 rc2).

But for those who want the best of both worlds (enjoy limitation AND allow original size), here is a hack that will allow editors to choose between the limited image size (max 600, very useful for huge uploads straight from high definition camera) and the original size (very useful for reasonable image size, like example here of 800). Next trick would be to allow editor to type in width and height with automatic calculation of the image proportion. We’re getting closer to photoshop indeed.

Read the rest of this entry »

Ever experienced trouble uploading files to wordpress (popular opensource blog platform), silverstripe (popular my favourite opensource CMS), or any application using swf upload ? Weeks after the bug has been identified, I have to admit I am wondering about the reactivity of SWFupload team : the version that fixes the bug was out a few days later but is currently still beta. And this is not some minor bug, all platforms that upgraded to flash 10 lost their ability to upload files ! Anyway, no doubt swfupload  version 2.2 final will be out before the end of the year, in the meanwhile you can try NAS UPLOADER, nice alternative that does the job too. Big plus, comes with a nice layout. Big minus, you can’t stop uploading after you’ve started and finally decided your file is too big to go through your small ADSL upload capacity…

If you’ve tried the impromptu jquery plugin, you’re probably left with some frustrating feeling, finding that  such an easy solution for javascript alert, confirm and prompt replacement, could be enhanced by a nicer graphic design. Replacing the “X’” letter by a now standard close button, just like can be found on facebox, could do the job. But then why not benefit default facebook style layout and use the whole facebox plugin, or go for another stylish modal jquery plugin, such as jModal… A few lines of javascript code will easily replace the prompt function, just like the lines of code from the example below.
Read the rest of this entry »

Who has code completion, CSS classes browser, Javascript function browser, PHP code browser, HTML elements browser, all together in a single interface that covers this multiple array of features in a perfectly usable environment  ?  As far as I’m concerned, the battle between Aptana and Dreamweaver is over : the eclipse extension known as Aptana Studio Community Edition performs incredibly well for me after a few months of learning which plugins are best and where different perspectives stand. The fact that Ajax development is covered does a lot : check out Spket extension, I have tested it in Aptana and it does a great job completing code with available  variables and methods from EXTJS . To be faire, Spket is available for Dreamweaver too.