eZ Community » Learn » eZ Publish » Transforming jQuery plugins into eZ...

Transforming jQuery plugins into eZ publish extensions

Friday 11 February 2011 1:06:54 pm

  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

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
 
*/ ?>
 
36 542 Users on board!

Tutorial menu

Printable

Printer Friendly version of the full article on one page with plain styles

Author(s)

Proudly Developed with from