Comment ajouter des champs supplémentaires dans Store Locator

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 !