Comment personnaliser la page Store Locator sur WordPress ?

Si vous utilisez l’extension Store Locator, vous vous demandez certainement comment est-il possible de personnaliser la page de résultat ? Par défaut Store Locator s’affiche sur une de vos pages de contenu, mais il est tout à fait possible de la modifier à votre sauce.

Sans modification, votre page Store Locator affiche simplement une carte avec l’emplacement du magasin, ses coordonnées, ses heures d’ouverture. Des informations somme toute assez basiques.

Comment modifier la page d’affichage des magasins dans Store Locator ?

Comme pour à peu près toutes les pages de votre site WordPress, vous pouvez écraser le choix du thème des pages par défaut en ajoutant un fichier template dédié sur votre serveur.

Ce tutoriel s’adresse avant tout aux utilisateurs sachant comment fonctionne la structure de leur thème et ses différents éléments.

Créons donc le fichier : single-wpsl_stores.php dans le répertoire de votre thème. (Mettez-y la structure de votre thème, ou copiez celle de page.php).

À la place de : « the_content() », mettez-y le code suivant :

<?php
    global $post;
    $wppln_queried_o = get_queried_object();
                 
    // On ajoute le shortcode "wpsl_map"
    echo do_shortcode( '[wpsl_map]' );
                   
    // On affiche le contenu de la page
    $wppln_sl_content = get_post( $wppln_queried_o->ID );
	setup_postdata( $wppln_sl_content );
    the_content();
    wp_reset_postdata( $wppln_sl_content );
                 
    // On affiche l'adresse du magasin
    echo do_shortcode( '[wpsl_address]' );
?>

Il va de soit que vous pouvez modifier ce contenu à votre guise pour y ajouter du CSS ou le code de votre choix.

Quels éléments sont les éléments que je peux afficher ?

Pour afficher les horaires d’ouverture :

echo do_shortcode( '[wpsl_hours]' );

Pour afficher l’image mise en avant :

echo get_the_post_thumbnail( $queried_object->ID, 'medium' );

Pour afficher le ou les noms des catégories :

$terms = wp_get_post_terms( $queried_object->ID, 'wpsl_store_category', '' );

if ( $terms && !is_wp_error( $terms ) ) {
    if ( count( $terms ) > 1 ) {
        $location_terms = array();

        foreach ( $terms as $term) {
            $location_terms[] = '<a href="' . get_term_link( $term->term_id, 'wpsl_store_category' ) . '">' . esc_html( $term->name ) . '</a>';
        }

        $term_list = implode( ', ', $location_terms );
    } else {
        $term_list = '<a href="' . get_term_link( $terms[0]->term_id, 'wpsl_store_category' ) . '">' . esc_html( $terms[0]->name ) . '</a>';
    }

    echo __( 'Categories :', 'wpsl' ) . ' ' .  $term_list;
}

Pour afficher un lien de Navigation via Google Maps :

$adresse       = get_post_meta( $queried_object->ID, 'wpsl_address', true );
$ville          = get_post_meta( $queried_object->ID, 'wpsl_city', true );
$pays       = get_post_meta( $queried_object->ID, 'wpsl_country', true );
$destination   = $adresse . ',' . $ville . ',' . $pays;
$direction_url = "https://maps.google.com/maps?saddr=&daddr=" . urlencode( $destination ) . "";
                    
echo '<p><a href="' . esc_url( $direction_url ) . '">' . __( 'Comment s\'y rendre', 'wpsl' ) . '</a></p>';

Il reste encore une autre possibilité qui est d’afficher du contenu personnalisé, basé sur de nouvelles valeurs. Cependant, afin de ne pas compliquer le tuto, nous allons voir cela dans un tuto connexe comment ajouter un lien ou une page à un magasin store locator. Cela vaut également si vous souhaitez pouvoir personnaliser le contenu du shortcode.