Transforming jQuery plugins into eZ publish extensions

Creating the eZ Flow block

We will now declare our new eZ Flow block : the ContentSlider block. In order to do so, we will modify the block.ini.append.php settings file:

<?php /*

[General]
AllowedTypes[]=ContentSlider

[ContentSlider]
Name=Content Slider
NumberOfValidItems=9
NumberOfArchivedItems=5
ManualAddingOfItems=disabled
FetchClass=eZFlowMCFetch
FetchParameters[Source]=NodeID
FetchParametersSelectionType[Source]=single
FetchParametersIsRequired[Source]=true
FetchParameters[Classes]=string
ViewList[]=contentslider
ViewName[contentslider]=Content Slider

*/ ?>

This is how one can define how an eZ Flow block works. For more information about eZ flow blocks configuration, visit : http://doc.ez.no/Extensions/eZ-Flow/eZ-Flow-2.2/Configuration/Configuring-the-eZ-Flow-block-system/Defining-block-types

We now need to give our new block a template to express himself. This is achieved through an override rule, written in our extension's override.ini.append.php file :

<?php /* #?ini charset="utf-8"?

[block_contentslider]
Source=block/view/view.tpl
MatchFile=block/contentslider.tpl
Subdir=templates
Match[type]=ContentSlider
Match[view]=contentslider

*/ ?>

This file specifies which template file is used to display the eZ Flow html content, in our case the file that will be called by eZ is "contentslider / design / ezflow / override / templates / block / contentslider.tpl", in this file we need to put the html and javascript from the example, making minor adjustments, so, here is our base the javascript (from the Jquery plug-in):

<script language="javascript">
    <!--
    $(document).ready(
        function (){
            $("#pikame").PikaChoose();

            $("#pikame").jcarousel({scroll:4,                    
                initCallback: function(carousel)
                {
                    $(carousel.list).find('img').click(function() {
                        //console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
                        carousel.scroll(parseInt($(this).parents('.jcarousel-item').attr('jcarouselindex')));
                    });
                }
            });

        });
        
    -->
</script>

As the characters '{' and '}' are used as eZ template language delimiters, we have to open the editor and find and replace the character '{' for 'ldelim' and '} ' for 'rdelim', then do a find and replace again for 'ldelim' by '{ldelim}' and 'rdelim' by '{rdelim}', fixing the javascript that now can be used inside the ez template code, thus:

<script language="javascript">
    <!--
    $(document).ready(
        function (){ldelim}
            $("#pikame").PikaChoose();

            $("#pikame").jcarousel({ldelim}scroll:4,                    
                initCallback: function(carousel)
                {ldelim}
                    $(carousel.list).find('img').click(function() {ldelim}
                        //console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
                        carousel.scroll(parseInt($(this).parents('.jcarousel-item').attr('jcarouselindex')));
                    {rdelim});
                {rdelim}
            {rdelim});

        {rdelim});
        
    -->
</script>

Copy this code to the ”contentslider / design / ezflow / override / templates / block / contentslider.tpl” file. Let's now check the html shipped with the jquery plug-in:

<div class="pikachoose">
Basic example
    <ul id="pikame" class="jcarousel-skin-pika">
        <li><a href="http://www.pikachoose.com"><img src="../1.jpg"/></a><span>Thanks to <a href="http://web.cara-jo.net">Cara Jo</a> for the awesome new themes!</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../2.jpg"/></a><span>jCarousel is supported and integrated with PikaChoose!</span></li>

        <li><a href="http://www.pikachoose.com"><img src="../3.jpg"/></a><span>Let me know at jeremy.m.fry@gmail.com if you find any bugs!</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../4.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../5.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../1.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../2.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../3.jpg"/></a><span>Caption</span></li>

        <li><a href="http://www.pikachoose.com"><img src="../4.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../5.jpg"/></a><span>Caption</span></li>

    </ul>
</div>

One can note that the HTML follows the following structure:

<div class="pikachoose">
Basic example
    <ul id="pikame" class="jcarousel-skin-pika">
    <!-- LOOP OBJECTS -->
        <li><a href="URL"><img src="IMG_URL"/></a><span>MESSAGE</span></li>
    <!-- END LOOP OBJECTS -->
    </ul>
</div>

We will reflect this loop in the display template for our block, using the {foreach} template language construct.

When using our block, we will associate to it a list of content objects (all placed in one folder, content container), for display. This constitutes the dynamic content These objects can be accessed within the block's view template like this:

{def $valid_nodes = $block.valid_nodes}