Par défaut, l’extension Store Locator ne permet pas d’ajouter des informations complémentaires à une fiche d’établissement. Impossible par exemple d’ajouter un lien vers le site de l’établissement, un numéro de téléphone ou que sais-je. Quelques lignes de code suffisent pour ajouter une ou plusieurs information.s à vos fiches Store Locator.
Comment ajouter des métadonnées personnalisées (site web, téléphone, etc…) aux magasins dans Store Locator ?
Pour ajouter des champs supplémentaires à Store Locator, il faut tout d’abord commencer par créer des métas supplémentaires pour le filtre « wpsl_meta_box_fields« .
Aucun « type » n’étant spécifié pour les différents champs de cet exemple, ils seront tous par défaut en type « texte », ils seront rendus comme champs de saisie de texte. Les différents types disponibles sont :
- texte – (champ texte).
- checkbox – (case à cocher).
- textarea – (zone de texte).
- dropdown – (menu déroulant).
- wp_editor – (éditeur de texte wordpress).
Ajoutez le code suivant à votre fichier functions.php pour définir les champs supplémentaires :
add_filter( 'wpsl_meta_box_fields', 'wppln_sl_add_new_fields' );
function wppln_sl_add_new_fields( $wppln_sl_new_fields ) {
$wppln_sl_new_fields[__( 'Informations complémentaires', 'wpsl' )] = array(
'wppln_sl_tel' => array(
'label' => __( 'Tel', 'wpsl' )
),
'wppln_sl_email' => array(
'label' => __( 'Email', 'wpsl' )
),
'wppln_sl_url' => array(
'label' => __( 'Url', 'wpsl' )
),
'wppln_sl_rdv' => array(
'label' => __( 'Prendre rendez-vous', 'wpsl' )
)
);
return $wppln_sl_new_fields;
}
Vous pouvez modifier les labels ainsi que les hooks « wppln_sl_xxx » comme bon vous semble, tout comme ajouter d’autres champs personnalisés.
Rechargez la page Store Locator et vous devriez voir apparaître un nouvel onglet « Informations complémentaires » avec vos nouveaux champs :
Comment afficher les nouveaux champs dans mon thème ?
Pour afficher nos nouveaux champs dans notre thème, nous devons utiliser les filtres « wpsl_listing_template » pour le thème « store listing » et « wpsl_info_window_template » pour le thème « info window » de Store Locator afin de les remplacer par notre version.
Dans cet exemple, nous allons utiliser le champ « prendre rendez-vous » afin d’afficher un lien vers la page en question. La méthode est la même pour afficher tous les autres champs. À vous de jouer !
Ajoutez le code suivant à votre fichier functions.php :
add_filter( 'wpsl_listing_template', 'wppln_sl_champsup_template' );
function wppln_sl_champsup_template() {
global $wppln_sl_settings;
$wppln_sl_template = '<li data-store-id="<%= id %>">' . "\r\n";
$wppln_sl_template .= "\t\t" . '<div>' . "\r\n";
$wppln_sl_template .= "\t\t\t" . '<p><%= thumb %>' . "\r\n";
$wppln_sl_template .= "\t\t\t\t" . wpsl_store_header_template( 'listing' ) . "\r\n";
$wppln_sl_template .= "\t\t\t\t" . '<span class="wpsl-street"><%= address %></span>' . "\r\n";
$wppln_sl_template .= "\t\t\t\t" . '<% if ( address2 ) { %>' . "\r\n";
$wppln_sl_template .= "\t\t\t\t" . '<span class="wpsl-street"><%= address2 %></span>' . "\r\n";
$wppln_sl_template .= "\t\t\t\t" . '<% } %>' . "\r\n";
$wppln_sl_template .= "\t\t\t\t" . '<span>' . wpsl_address_format_placeholders() . '</span>' . "\r\n";
$wppln_sl_template .= "\t\t\t\t" . '<span class="wpsl-country"><%= country %></span>' . "\r\n";
$wppln_sl_template .= "\t\t\t" . '</p>' . "\r\n";
// Verifier si le lien rendez-vous existe.
$wppln_sl_template .= "\t\t\t" . '<% if ( wppln_sl_rdv ) { %>' . "\r\n";
$wppln_sl_template .= "\t\t\t" . '<p><a href="<%= wppln_sl_rdv %>">' . __( 'Prendre Rendez-vous', 'wpsl' ) . '</a></p>' . "\r\n";
$wppln_sl_ .= "\t\t\t" . '<% } %>' . "\r\n";
$wppln_sl_ .= "\t\t" . '</div>' . "\r\n";
// Verifier si il faut afficher la distance.
if ( !$wpsl_settings['hide_distance'] ) {
$wppln_sl_template .= "\t\t" . '<%= distance %> ' . esc_html( $wpsl_settings['distance_unit'] ) . '' . "\r\n";
}
$wppln_sl_template .= "\t\t" . '<%= createDirectionUrl() %>' . "\r\n";
$wppln_sl_template .= "\t" . '</li>' . "\r\n";
return $wppln_sl_template;
}
et personnalisez le à votre guise.
Videz le cache de Store Locator et admirez le résultat !