One Page javascript shopping cart

This one struck me because I can remember working out a javascript shopping cart back in 1996... Long time ago in terms of web time, and 13 years later the idea has popped again from some strange mind figuring out that simplicity does it all. If you've had enough of configuring complex ecommerce solutions like Magento or Prestashop, then simplecart(js) is for you. "No databases, no programming, no headaches. A simplejavascript shopping cart in under 20kb that you can setup in minutes. It's lightweight, fast, simple to use, and completely customizable. All you need to know is basic HTML." Works with Paypal and google checkout apparently.

simplecart

http://simplecartjs.com/

Magento release 1.4

It's only alpha but I've tested it because I'm still running 1.2 and I'm waiting for serious reason to upgrade : I can tell you I've seriously avoided the basic Magento advice whic is 'never hack the core', and I have a dozen fixes implemented in the app/code/core section of my production install, which means a few hours upgrade. Reading Release notes was not very interesting so I decided I'd for a test drive. Well not much to say except the new tax system which is suited to european complexity, including or excluding shipping costs, reductions and other attributes are available in the system/ admin menu. The most noticeabl imporvement was not indeed produced by Magento but by google : remember at some time Chrome did not work well with the admin. This is now fixed, and thanks to a better cookie management chrome now handles magento admin pefectly, which means faster work. For enterprise users (9000 $ /year), a new video has been posted about private sales that offer special deals to users for a limited time using special member restricted access with invitations. Magento actually works well with emails, including reports on accepted invitations and generated sales. Enjoy.

Jquery table to graph

jquery-visualize1

The new jQuery plugin  "visualize" demonstrates usage of a specific technique that renders visual graphs (pie charts, bars, area, lines) from HTML table data. The process uses JavaScript to scrape data from an HTML table and generate charts using the HTML 5 Canvas element. It  is particularly useful because the data for the visualization already exists in the page in structured tabular format, making it accessible to people who browse the web with a screen reader or other assistive technology. Also the port to Jquery is particularly simple as it is accessible to HTML generated tables, which is most common. The only drawback for this method would be the CPU power required to render large sets of data. But there is a workaround in the form of data aggregation if the origin is SQL based.

JqGalleryAdmin : php / mysql / jquery gallery drag & drop admin

 

2011/12 UPDATE : EYELASH 3 IS OUT

 

Whoever has had the opportunity to work with silverstripeundesrtands  how the drag and drop features can enhance productivity. Modules in Silverstriupe CMS are great but are wholly integrated within the full framework and cannot work without the huge memory and disk overhead that this framework comes with.  I decided to develop my own independent image gallery admin module, using php / mysql / jquery technologies from the examples below.

The idea is to develop a full featured image gallery with backend features, like the one we have for eyelash gallery, product developped by me a few years ago.

This post provides version 0.1  of JQGallery, an administration module for image gallery management. It has been tested on Firefox /Chrome and will not work with IE6. Please note that it is not secure, not to be used as such in a production environment yet.

Let me know if you find bugs. A demo is available here (upload / delete are disabled)

Installation is quite easy :

  1. check that your server matches the following requirements : php 5 / mysql 5
  2. download EYELASH 3 GALLERY ADMINISTRATOR MODULE   
  3. unzip to a folder within htdocs
  4. configure mysql access  in db_mysql.inc.php with database details (server / database / user / password)
  5. manually create the table : load the sql setup file from includes/setup.sql in your database, using phpMyAdmin
  6. check that the apache has read/ write privileges  on the uploads folder
  7. and off you go
  8. come back to use with bug reports and enhancement requests

code samples used to develop JQGalleryAdmin :

Tomatocart rebuilds oscommerce

tomatocart

There are many discussions on whether oscommerce is dead or not. From an industry where every six months new products come online with ever more exciting new features, the longevity of Oscommerce, the first opensource e commerce application, is a good example of a bad designed  application theat does the job well. Os commerce evolution has stopped in 2005, when the first preview of the MS3 version - not yet released as of today - went public. What struck me with tomatocart is the backend interface, based on ext js desktop layout with charts by piwik / openchart flash . More info on http://www.tomatocart.com/

Opensource Time Tracking application

I ust went for a few minutes of time tracking and found that Kimai is really a neat and well designed PHP/ Mysql
/ Jquery opensource application. Designed for multi users, it implements a very  simple one click time tracking  interface : select the project / customer you're working on, click on play, and there you are,  time starts running. close your browser or leave it open, you can come back to the application to stop the counter and your work is tracked in database records that permits all kinds of reports and statistics. Even though the application works well for those who plan to work full time on a single project / task for a few hours  (implying a start  moment and a end moment), it also works well   to handle end of the day assessments by simply writing tasks and times.  Very good job. What could I improve on this ? tags handling as in wordpress !! (telephone, writing, programming...). And instead of a fixed client / project / task hierarchy, probably easier to understand for most users, I would rather have gone for unlimited sub levelled hierarchy of tasks..

kimai08

Silverstripe CRUD / DATA management

With new versions coming up regularly, Silverstripe proves to be one of the best and usable Content Management System, including full website page content management fetaures and full relational database content management. Like most opensoruce projects, one big asset missing is a documentation, we hope this is getting better especially with the release of the Silverstripe book english translation, to be published in august. Finding one's way in the plethora of modules and code hacks available for Silverstripe is a rough job, but it pays. Data management in silverstripe  is actually, in my opinion, one of the most integrated and flexible solutions available out there. Another good source of information for developers can be found at the newly built ssbits website that develops hacks and tricks.

In detail

Two different options exist in Silverstripe for data management

  • DataObjectManager  is a plugin developed by Uncle Cheese, also known as Aaron Carlino. His dataObjectManager allows the building of data management interafaces within page types, with many features including HTML field, file upload. A good example of the dataobjectmanager is the image_gallery module that improves the standard lightbox gallery that we used in Silverstripe. 
  • ModelAdmin is the new scaffolder for Silverstripe : it allows the building of data mangement systems within the Silverstripe admin. The documentation is a bit sparse but there's a public presentation that explains it quite extensively.

EXTJS EditorAutoGrid – CRUD enabled (2)

I have been working on the autogrid (see 1st implementation)  to provide  server based column model tools, including automatic grid layout, column model definition, and editor component definition. Here is a new implementation of  the editor autogrid extension for ext js 2.2 only - see known bug with extjs 3  below-   that now features :

  • AJAX based combo box editor field for n to 1 data relationship reading from AJAX meta columns via data type :
    {"name":"Categories_title","header"
    :"Categories_title","related":"Category","dataType":"leftJoin","width":250}
  • GridSearch plugin integration

editorautogrid

Download : [download id="3"] - the zip  includes

  • AutoGrid.js : editor auto grid code (exstends EditorGridPanel)
  • taskGrid.js / CatGrid.js : javascript code for the 2 database tables in the  example above (TASKS + CATEGORY).
  • tasks-json.txt :JSON data for main table (TASK)
  • tasks-category-combo-json : JSON data sample for related table data in combobox

Please note that this download does not include server code. among known bugs I can remember the nasty "load twice when doing a search", or the extjs 3.0 rc1.1 "getCellEditor is not a function" error when trying to edit.

Create sample screen of your apps in minutes

Application developpers like to illustrate the process and layout of the work they are planning. Customers like to have a visual sample of what's coming, and that's exactly the kind of step that clarifies discussions when negociating work and contracts.  Balsamiq mockups is a basic ilsutration application  that you can use to very quickly build a UI mockup. A lot of softwares do that, wbut this one is rellay simple to use and very light to install, the free version is actually browser based ! Mockup below took approximately... 15 minutes !

gestionlocative

Dynamic Maps : Google Maps, MSN Maps or OPENLayers

If you've been working on maps publishing for websites, you might have considered one of these alternatives:

  • buy vector format maps and publish them as images with the azppropriate information. this example on ecolopop.info also implements a hand coded image map : this is a lot of work but produces a unique version of the map that reinforces your web site's graphics.
  • use a free online amp provider such as google Map. Very useful for adress positionning : I use it on ecolopop.info for specific business locations. Google Maps in unbeatble at finding stuff from alphanumeric coordinates : if you happen to have a large database of adresses, Google Map will find them for you on its maps
  • OpenLayers is a JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a (still-developing) JavaScript API for building rich web-based geographic applications, similar to the Google Maps and MSN Virtual Earth APIs, with one important difference -- OpenLayers is Free Software, developed for and by the Open Source software community.
    OpenLayers is a project of the Open Source Geospatial Foundation.

    Furthermore, OpenLayers implements industry-standard methods for geographic data access, such as the OpenGIS Consortium's Web Mapping Service (WMS) and Web Feature Service (WFS) protocols. Under the hood, OpenLayers is written in object-oriented JavaScript, using components from Prototype.js and the Rico library.

Jspresso Java RIA framework 3.0.0 release

Jspresso -http://www.jspresso.org- is a free and opensource framework dedicated to building RIAs that offer a desktop-like user experience. Among many improvements, one of the major features of this release is the native support of Adobe Flex as a deployment option.

All Jspresso-based applications will instantly run on the Flash plugin without a single, hand-written, line of MXML or ActionScript in their code base. Nor is there any GUI code generation involved. Jspresso relies on a generic Flex client engine that dialogs with the Jspresso Java backend through Adobe BlazeDS using a generic set of GUI commands. This approach relieves the developer from the DTO pain you usually find in this type of applications while still leveraging the style and power of a Flex client-side and keeping the development server-centric.
Last but not least, Jspresso applications, bootstrapped by a Maven archetype, build entirely in Maven and can be directly imported in Eclipse with full WTP support. The server stack remains unchanged (servlet / Spring / Hibernate) and all the previous frontend technologies remain fully supported.

Zend Framework Scaffolding & RAD (2)

A few months ago we covered a few scaffolding techniques and articles for Zend Framework. For those unfamiliar with the scaffolding term, let's say it is aonther way of saying RAD, or Rapid Application Development. The main principle behind this is that any applicaiton could be automatically generated from a database design created easily with a grphical tool such as visual db designer from FABForce. This free tool allows export of DB schema to XML , that can then be converted to a database code generator called Propel, via a specific  converter .  You'll find on    Invoke's blog (Canadian company) an article that explains how to use propel generated objects within the Zend Framework.

Magento / wordpress showcase : Rue de Siam

screenshot1

I've finally released my first Magento website, and it proves to be a  real SEO winner (100% increase in visits after 2 weeks). RuedeSiam is a furniture importer based in Brittany. Now you know why I bothered comparing commercial and opensource Flash based zoomers : Rue de Siam's website site features an implementation of image  a flash based zoom within a prototype lightbox gallery  (check out this one) . Interesting too is the specific template for the "At your home" showcase category that uses products with  specific layout. Magento is really great for customising layouts, I suppose that's partly a big feature of Zend Framework expressed at its best. One technique I used a lot is the css based text over image transparency effect that I detailed a while ago for WordPress on this blog. Works fine with Magento images categories except that the background image really has to be adjusted perfectly so I used phpthumbs instead of Magento's resizing helpers that seemed to complicated to understand at first.   I've also covered  various development challenges that I shared on this blog during the development :

And a few tips :

One advice : once you're running a Magento production web site, be careful with upgrades. The Sales extension did not work with 1.3.0 on my development server and I'm sticking to 1.2.x for the moment.

egroupware : ext js is dominating the opensource community

No we will not enter the debate over the right to license freely available libraries : ext js javascript framework is a wonderful set of rich interface components that now power a great deal of opensource applications, including matuire egroupware frameworks such as sugar crm, tine 2.0, and the young and promising cojoon. Cojoon is a webmail and feed readers that has contributed a lot to ext js + zend framweork development  : it ambitions to become a full featured groupware. Tine 2.0, made by a group of devloperse whosplit from egroupware one year ago, have successfully come up with a news release last month. It now comes with a task manager and time tracking modules.

Magento product : display new product icon on product list

If you're working on Magento Ecommerce layouts and template design, you might have had a look at some nasty bugs, such the sort by price bug that's occuring on Magento's latest release (1.2..1). If you've spent a few minutes reading the fix for that bug on Magento's forums, you know what product collection means. Product Collection in Magento means an easy way of listing products for specific blocks : the big drawback is that product collections store arrays of products, and products inside don't always come fully loaded of details. That's why the few hacks below are useful to get the very basic attribute of every product on a decent ecommerce store : is that product new or not, and should I tell my customer which products are new ???

magento-new-product490

How to load new attribute : in Magento the new attribute is defined by two database fields (or attributes) : new from and new to .

  • Using these parameters in list.phtml requires you to modify the attribute set returned by the Mage_Catalog_Block_Product_List class to be found in app\code\core\Mage\Catalog\Block\Product\List.php
  • in function _getProductCollection, paste the following line
    $this->_productCollection
    ->addAttributeToSelect('news_from_date')
    ->addAttributeToSelect('news_to_date');
  • obvisouly this comes just after the product collection definition around line 75 of the List.php
    $this->_productCollection = $layer->getProductCollection();
  • your list.phtml template now has access to the data and checking that a product is new is as simple as performing PHP based date comparisons. We provide here basic comparison that will only work for products where both news_from and news_to have been filled. Add the following PHP code somewhere in your productcollection loop and the work is done !
    $now = date("Y-m-d");
    $newsFrom= substr($_product->getData('news_from_date'),0,10);
    $newsTo=  substr($_product->getData('news_to_date'),0,10);
    if ($now>=$newsFrom && $now<=$newsTo)
    {?> <h3 class="nouveauteProductList" >NEW PRODUCT!<h3><?};
    ?>

This hack will be used on RueDeSiam's website (to be released next month,bookmark it now!)

Contact us / get a free web development quote

Thanks for your interest in our website and products : xls2mysql, eyelash...

I provide custom services for web development, with expertise on the following  PHP / MYSQL opensource solutions :

  • ecommerce : magento,  prestashop
  • cms : silverstripe, wordpress

please use the form below to send us suggestions, enhancements or bug notice or to ask for a quote on custom developments

WebmasterBulletin Support

  • Please enter a number from 5 to 5.

Magento custom attributes display on product page

The flexibility created by the attribute feature in Magento allows limitless possibilities : vairous product types can be created and each of them can go with specific attributes, meaning specific form fields for the admin, that are inserted in the product view (template/product/view.phtml) for public display. The functions availble for each user defined attributes are very simple to guess : they are dynamically created for each attribute create using , as explained in the Pratthost developer zone blog...
Read more

Inside Magento : sidebar shopping cart explained

Described by multiple elements, the shopping cart display that appears on the right column in Magento's default layout is a complex issue. BAsically it is a good example of how blocks, layouts and templates work together to render the appropriate context sensitive information on the screen. The sidebar shopping cart display uses shopping cart information from PHP, and displays user cart content after a few conditionnal checks that occur in the template :

  • PHP class is defined  in magento/app/code/core/Mage/Checkout/Block/Cart/Sidebar.php
    Mage_Checkout_Block_Cart_Sidebar extends Mage_Checkout_Block_Cart_Abstract
  • HTML template is in app/design/frontend/default/default/template/checkout/cart/sidebar.phtml
  • position within the right sidebar is defined in the checkout.xml
    default\layout\checkout.xml

Read more