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 !