Transforming jQuery plugins into eZ publish extensions
Friday 11 February 2011 4:06:54 am
Step 2: Creating an eZ flow block
Now it's time to create a basic framework for our extension. The eZ flow documentation describes in detail how to create eZ flow blocks: http://doc.ez.no/Extensions/eZ-Flow/eZ-Flow-2.2/Configuration/Configuring-the-eZ-Flow-block -system/Defining-block-types
Creating the structure
Let's start by creating the folder structure and files for our initial extension, which will be called contentslider. Create the following initial files inside the eZ publish extension folder:
contentslider/
|-- design
| `-- ezflow
| |-- images ( copy pikachoose/assets/images )
| |-- javascript
| | |-- jquery.jcarousel.min.js ( copy pikachoose/assets/js/ jquery.jcarousel.min.js )
| | `-- jquery.pikachoose.js ( copy pikachoose/assets/js/ jquery.pikachoose.js )
| |-- override
| | `-- templates
| | `-- block
| | `-- contentslider.tpl
| `-- stylesheets
| `-- contentslider.css (copy pikachoose/bottom/css/styles.css, remove the first two lines)
`-- settings
|-- block.ini.append.php
|-- design.ini.append.php
`-- override.ini.append.php
Before proceeding, check the contentslider.css, which has the same content as the pikachoose / bottom / css / styles.css file. Notice it makes image references using the original jQuery plugin file structure, you need to do some modifications on this file to reflect the new file structure.
So, open your code editor and do a find and replace, find “../../assets/images” and replace it with “../images”.. The file is fixed.
We first need to tell eZ Publish that our newly created extension contains design elements (stylesheets, javascript files, templates, images ). To do so, we need to modify the design.ini.append.php settings file :
<?php /* #?ini charset="utf-8"? [ExtensionSettings] DesignExtensions[]=contentslider */ ?>