Création des VIEWS Ajax

Drupal_logo

Il est vrai qu'il n'y a pas de standard défini pour générer des blocs Ajax avec Views en Drupal. Cependant c'est un élément très demandé par les clients pour leur site web, je vais donc vous montrer comment les créer rapidement.

Normalement il n'est pas nécessaire de télécharger d'autres modules, mais cela dépend de la fonctionnalité que nous avons besoin de développer. Pour cet exemple nous utilisons un module customisé (homeslider), Ctools, Date (Date API), Views et strongarm pour l’exporter avec des features.

Notre module va avoir

hook_init: Pour appeler un fichier javascript

function homeslider_init(){
    if (drupal_is_front_page()){
       drupal_add_js(drupal_get_path('module', 'homeslider') . '/js/homeslider.js');
    }
    // 	drupal_add_css(drupal_get_path('module', 'homeslider') . '/css/homeslider.css');

}

hook_menu: Pour génerer des chemins avec des callbacks Ajax

function homeslider_menu(){

  $items = array();

  // $items['homeslider-ajax/%/%node'] = array(
   $items['homeslider-ajax/%/%'] = array(
    'access arguments' => array('access content'),
    'page callback' => 'homeslider_ajax_callback',
    'page arguments' => array(1,2),
    'type' => MENU_CALLBACK,
  );

  return $items;
}

Avant le callback personnalisé, nous allons créer une VIEW Drupal qui filtrera des nodes type Actualité, avec trois/quatre displays où nous allons montrer des nodes avec des filtres différents. Pour l'exemple nous créons les blocs :

  • Aujourd'hui
  • Ce weekend
  • Cette semaine

Pour montrer des nodes Drupal avec ces filtres de date de création (À faire dans un hook_view après)

Voici l'exemple du premier Display (Aujourd'hui)

block_ppal

Et ici  Ce weekend (filtres différents, par exemple date de publication DESC > ASC)

other_block

Par la suite nous pouvons voir le le callback personnalisé dans notre module

Pour notre exemple la variable $period sera 'auj' (aujourd'hui)

function homeslider_ajax_callback($js, $period) {
  // If the nojs didn't get changed to ajax, the user has no javascript.
  // Send them to the regular node page instead.
  if ($js == 'nojs') {
    // A génerer dans le cas sans javascript
  }
 
//Ici on appelle la view Drupal 
  $my_view_name = 'programmation_des_galeries';
  $html = '';
  $programmes = array(
    "auj" => "block_today", //"Aujourd'hui", -- Default one
    "cew" => "block_thisweekend", //"Ce Weekend",
    "ces" => "block_nextweek", //"Cette Semaine"
  );
  if (array_key_exists ($period, $programmes)) {
    //Default block
    $my_display_name = $programmes[$period];
//Dynamic parameter
  }else{
    //Default block
    $my_display_name = 'block';
  }
  //views_embed_view($my_view_name, $my_display_name )
  $my_view = views_get_view($my_view_name);
  if ( is_object($my_view) ) {
    $my_view->set_display($my_display_name);
    $my_view->pre_execute();
    $html .= $my_view->render($my_display_name); //return $my_view->render($my_display_name);
  }
  // Prepare an ajax command to insert the node html into our ajax wrapper.
  $commands = array();
//Voici la fonctionnalité qui va spécifier quel DIV doit être changé (dans notre cas, le div avec la class .region-highlighted), et pour quel HTML ($html)
  $commands[] = ajax_command_html('.region-highlighted', $html);
 
  //To catch Selected value and load JS functions
  $commands[] = array
  (
    // The command will be used in our JavaScript file (see next section)
    'command' => 'afterAjaxCallbackExample',
    // We pass the value that the user selected in the select element to our
    // JavaScript function:
    'selectedValue' => $period,  //Available dans le jscript file
  );
  // Render the commands into JSON and print them.
  print ajax_render($commands);
  exit;  // Exit so Drupal doesn't have a chance to build a whole page.
}
 

 

Finalement, dans notre fichier Javascript homeslider.js nous pouvons ajouter d'autres fonctionnalités, si besoin.

Nous pouvons par exemple ajouter une class ACTIVE dans l'onglet que nous avons cliqué.

 

(function($, Drupal)
{
                // Our function name is prototyped as part of the Drupal.ajax namespace, adding to the commands:
                Drupal.ajax.prototype.commands.afterAjaxCallbackExample = function(ajax, response, status)
                {
                  var active_onglet = response.selectedValue;
                  jQuery('.ong-slider').removeClass('active');
                  jQuery('#onglet-'+active_onglet).addClass('active');
                };
}(jQuery, Drupal));

 

Après, nous devons montrer un bloc par défaut dans la page de configuration de blocks Drupal admin/structure/block

Dans la région Highlight (mis en évidence), nous devons déplacer le bloc de notre VIEW à montrer d'abord "programmation galeries AUJOURD'HUI"

highlight

Il reste à montrer la VIEW dans notre site Web. Pour le faire rapidement nous copions/collons ce code dans le fichier page.tpl.php de notre thème (homepage pour ce projet).

loading

Voici les différents ONGLETS a montrer (Aujourd'hui | Ce Weekend | Cette semaine)

<div class="filtres-date clearfix" style="clear:both;">
<ul class="clearfix left">
<li><a id="onglet-auj" class="ong-slider use-ajax active" href="cpga_homeslider-ajax/nojs/auj">Aujourd'hui</a></li>
<li><a id="onglet-cew" class="ong-slider use-ajax" href="cpga_homeslider-ajax/nojs/cew">ce weekend</a></li>
<li><a id="onglet-ces" class="ong-slider use-ajax" href="cpga_homeslider-ajax/nojs/ces">cette semaine</a></li>
</ul>
</div>

 

La Variable $page['highlighted'] correspond à la région ou nous avons inclut le block initial à montrer dans notre page (aujourd'hui)

<!-- slider -->
<div id='cpga_homeslider-ajax-wrapper'>
<?php print render($page['highlighted']); ?>
</div>

 

Comme d'habitude avec Drupal il va falloir vider le cache de Drupal 🙂

La partie d'intégration va dépendre des besoins du client, mais pour ce cas nous avons utilisé les CSS du comitedesgaleriesdart.com.

Pour nous, dans la home, nous avons le bloc Aujourd'hui par défaut, avec trois contenus du type Actualité

    ce_weekend

Et voila, quand nous cliquons sur un autre onglet (Ce weekend),

loading

L'Ajax va rafraîchir le contenu de notre VIEW

refreshed

Enregistrer

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.