Werken met Avada: Dynamisch markers plaatsen op een kaart van Google maps

Avada is een thema in WordPress waarin je veel kan aanpassen. Je kan bijna alles opmaken en stylen zoals je zelf wilt. Maar zodra je meer uit je beheersysteem wil halen, loop je vaak tegen beperkingen aan. Zo ook de weergave van een Google Maps kaart met markers. Je kan markers plaatsen, maar dat zijn dan altijd dezelfde markers. Dat kan anders!

In deze instructie vind je functies die je Avada-thema kunnen ondersteunen. De plugin die je kan downloaden is een voorbeeld. Na het installeren zul je nog de nodige elementen in Avada moeten toevoegen om de kracht ervan te kunnen benutten.

[1] Opdracht/doelstelling

Bouw een uitbreiding op het thema van Avada waarbij naar wens gezocht kan worden naar bedrijven die horen bij een bepaalde (vak)groep. De resultaten moeten getoond worden als overzicht in een lijst met adresgegevens, en als markers op een kaart.
We kiezen ervoor om zoveel mogelijk gebruik te maken van het systeem van het Avada-thema, zodat de beheerder controle blijft houden over de opmaak en layout van Avada-elementen.

Wat gaan we hiervoor doen?

• Registreren van custom-post-type en taxonomies zodat we data kunnen opslaan en opvragen
• Maken velden voor adresgegevens via ACF
• Bouwen Avada-layout
• Bouwen Avada-formulier
• Eigen shortcode maken om data op te halen
• Details toevoegen om de user experience (UX) te verbeteren

[2] Data opslaan

Om te beginnen moet de informatie waar naar gezocht kan worden, worden opgeslagen in de database. Dat betekent het aanmaken van een ‘custom post type’ zodat je posts van dit type kan presenteren. In de beheerkant kun je dan nieuwe posts/bedrijven aanmaken (zoals je dat kent van Berichten) via een nieuw menu-gedeelte.

Bij het aanmaken van een bedrijf wordt de specifieke informatie die erbij hoort (de adresgegevens en de locatie van de marker) opgeslagen als ‘custom fields’ (in de post_meta-tabel).
Om de bedrijven te kunnen filteren maken we een aantal ’taxonomies’ aan om de bedrijven op verschillende manieren te kunnen groeperen. In dit voorbeeld hebben we ‘plaats’ en ‘regio’ aangemaakt. Maar je zou bijvoorbeeld ook taxonomy ‘expertise’ kunnen aanmaken zodat je kan groeperen op een kwaliteit.

[3] Setup layout en elementen in Avada

Ik ga ervan uit dat je zelf de registratie van bovenstaande informatie types hebt ingesteld en dat je bedrijven kan aanmaken die de gegevens opslaan in custom-fields. Ik werk in dit voorbeeld met post-type ‘bedrijf’ en taxonomy ‘bedrijf_plaats’  en ‘bedrijf_regio’. De coördinaten van de marker slaan we op als custom-field ‘latlng’.

Voor mijn custom-post-type ‘bedrijf’ heb ik in Avada een layout aangemaakt die bestaat uit de volgende elementen:

• Google Maps: voor het tonen van resultaten op kaart
• Avada Form: voor het filteren van een zoekopdracht
• Post Card Archives: tonen van bedrijfsgegevens aan de hand van het zoekresultaat

Deze layout heb ik bij de voorwaarden voor weergave (klik icoon tandwiel) zo ingesteld dat deze layout gebruikt wordt bij de archive-pagina (checked: Bedrijven Archief Types) en bij de taxonomy-pagina’s (checked: Alle Regio + Alle Plaats). Zie hiervoor de tab ‘Archieven’ bij de popup voor de voorwaarden.

[4] Bedrijven als markers op een kaart tonen

In het algemeen werkt Avada zo dat elementen aanmaken in een pagina of layout in de database worden opgeslagen als ‘shortcode’. Voor het tonen van de markers op de kaart gebruik ik een standaard wordpress-filter ‘shortcode_atts_{name}’ om de attributes van de shortcode te filteren. Deze attributes die ik aanpas worden daarna doorgestuurd naar de functie die hoort bij de Avada-shortcode ‘fusion_map’ om de Avada-kaart te genereren.

In ons filter komen de attributes binnen als array (een soort lijst). De attribute ‘address’ gaan we vullen met één of meer lat-lng-coördinaten om een marker op de kaart te plaatsen. Elke marker bestaat uit:
latlng=<lat>, <lng> als tekst en meerdere markers worden gescheiden door <spatie>|<spatie> . Deze lat-lng-coördinaten heb ik eerder per bedrijf opgeslagen in beheer, via de plugin Advanced Custom Fields, door op een kaart de positie te markeren. Deze gegevens kan ik nu ophalen uit de post_meta-tabel (custom-field = post_meta).

Om te weten welke bedrijven zijn opgevraagd, gebruik ik de standaard wp_query voor de archive-pagina van ‘bedrijf’. Deze bedrijven heb ik eerder in de beheer aangemaakt bij mijn nieuwe custom-post-type ‘bedrijf’.

add_filter( 'shortcode_atts_fusion_map', 'nen_add_locations_to_map' );
function nen_add_locations_to_map( $array )
{
    if( nen_is_archive_bedrijf() ) 
    {
        global $wp_query;
        $latlng     = [];
        $infobox    = [];
        $bedrijven  = [];
        if( $wp_query->have_posts() )
        {
            $bedrijven = $wp_query->posts;
        }
        else
        {
            # no results: force all markers to show else there is no map
            $array['class'] = $array['class'].' no-result';
            $bedrijven = get_posts( [
                    'post_type' => 'bedrijf',
                    'posts_per_page' => -1 ,
                ]);
        }
        foreach( $bedrijven as $bedrijf )
        {
            $location               = get_post_meta( $bedrijf->ID , 'latlng' , true );
            if( $location && array_key_exists('lat', $location) && array_key_exists( 'lng', $location ) )
            {
                #add lat-lng to array
                $latlng[$bedrijf->ID]       = $location['lat'] . ', ' .$location['lng'];
                #add name to other array (popup content)
                $infobox[$bedrijf->ID]      = get_post_meta( $bedrijf->ID , 'naam' , true );;
            }
        }
        if( $latlng )
        {
            #add points (array to string)
            $array['address']           = 'latlng=' . implode( ' | latlng=' , $latlng );
            #add popup content (array to string and use fusion encoding)
            $array['infobox_content']   = fusion_encode_input( implode( ' | ' , $infobox ) );
        }
    }
    return $array;
}Code language: PHP (php)

Opmerkingen over de functie:

• Als er geen resultaten zijn wordt de kaart niet getoond. Daarom doen we alsnog een opvraag van bedrijven. Deze kunnen we later met style-sheet verbergen waardoor we een lege kaart zien.
• Check $array[‘infobox_content’] aan het einde van de functie. Hier komt de content van de popup in te staan.

Als eerste test in de functie zie je ‘nen_is_archive_bedrijf’. Omdat we alleen markers willen toevoegen bij de kaart op de archive-pagina doen we deze test. Maar we willen ook dat de markers zichtbaar zijn op een archive-pagina van bijbehorende taxonomies (plaats of regio). In onderstaande functie testen we of de huidige weergave de standaard archive-pagina is of dat het een taxonomy pagina is. Dus het url-pad bevat /bedrijven/ of /bedrijven/plaats/<plaatsnaam>/ of /bedrijven/regio/<regionaam>/

function nen_is_archive_bedrijf()
{
    $post_type = get_query_var('post_type');
    if( !$post_type )
    {
        $tax = get_taxonomy( get_query_var('taxonomy') );
        #this taxonomy is only registered our custom post type (so first in array)
        if( $tax ) $post_type = $tax->object_type[0];
    }
    return $post_type === 'bedrijf';
}Code language: PHP (php)

Nu worden alle markers getoond die ook in de standaard loop worden opgevraagd. Echter, de standaard waarde in wordpress is 10 items per pagina. Maar in ons geval willen we alle bedrijven op de kaart. Hiervoor moeten we de loop aanpassen en gebruiken hiervoor het filter ‘pre_get_posts’. Ook zorgen we er gelijk voor dat we het resultaat sorteren op een custom field (item uit de post_meta-tabel)

add_action( 'pre_get_posts', 'nen_set_wp_query_archive_bedrijf'  );  
function nen_set_wp_query_archive_bedrijf( $query ) 
{
    if( is_admin() ) return $query;
    if( isset($query->query_vars['post_type']) && $query->query_vars['post_type'] == 'bedrijf' ) 
    {
        # all posts
        $query->set('posts_per_page', '-1' ); 
        # order by custom field 'plaats'
        $query->set('meta_key', 'plaats' );
        $query->set('orderby', 'meta_value' );
        $query->set('order', 'ASC' );
    }
    return $query;
}Code language: PHP (php)

[5] Formulier maken om bedrijven te kunnen zoeken en filteren

Nu hebben we dus een archive-pagina met markers of een taxonomy-pagina gefilterd op plaats of regio. Maar op zichzelf is dat niet zo intuïtief voor een bezoeker. Een bezoeker wil een bedrijf in de buurt zoeken op naam of op basis van een willekeurig zoekwoord. Dit kunnen we realiseren door het toevoegen van een Avada-formulier aan de pagina. Instellingen voor het formulier:

• Submission Type: POST
• Submission Method: GET
• Submission Url: https://<your-domain>/bedrijven/

Hierbij wordt bij het verzenden van het formulier een pagina-refresh gecreëerd door het type ‘POST’ en de formulier-gegevens worden toegevoegd als GET waarde (../?s=zoekwoord&post_type=bedrijf). Als laatste willen we dat het formulier ons (door)stuurt naar de huidige pagina, de archive-pagina voor bedrijven.

De formulier-elementen

We maken een formulier met een zoek-veld en in ons geval 2 keer een select-dropdown voor Plaats en Regio. Maar belangrijker: we voegen ook een verborgen veld toe met een vaste waarde.

veld 1: post_type [hidden-field]
Dit veld zorgt ervoor dat we zoeken in post_type ‘bedrijf’ en dat we de weergave van de archive-pagina voor bedrijven (met kaart) te zien krijgen. Vul bij het hidden-field de volgende waarden in: Field Name = ‘post_type’ Field Value = ‘bedrijf’. Dit veld kan de bezoeker niet wijzigen.

veld 2: s [text-field]
Dit is een tekst-veld met als instelling bij Field Name de waarde ‘s’. Dit is de naam/waarde in wordpress voor een zoekopdracht. Door het toevoegen van dit veld kan de bezoeker vrij zoeken.

veld 3: bedrijf_plaats [select-field]
Dit is het veld dat correspondeert met taxonomy ‘bedrijf_plaats’ dat we in dit voorbeeld gebruiken voor plaatsnamen. Vul bij Field Name de waarde ‘bedrijf_plaats’ in. We gaan de lijst later vullen via een wordpress-filter met de waardes die zijn ingevoerd bij het aanmaken van de bedrijven.

veld 4: bedrijf_regio [select-field]
Gelijk aan veld 3 maar dan voor taxonomy ‘bedrijf_regio’.

knop 1: Submit Button
Benodigd om het formulier te versturen.

knop 2: reset
Dit is een standaard knop (geen formulier element) die linkt naar de archive-pagina ‘bedrijven’ (https://<your-domain>/bedrijven/).

Het formulier en bovenstaande velden kun je naar wens opmaken, bijvoorbeeld door gebruik te maken van kolommen voor een horizontale oriëntatie. Vergeet niet het formulier toe te voegen aan de Avada-layout voor de archive-pagina voor bedrijven (zie Setup layout en elementen in Avada).

Select dropdown dynamisch vullen

Om de bezoeker specifiek te kunnen laten zoeken naar een plaats of regio gaan we de select-velden (veld 3 en 4) vullen met de ingevoerde ’terms’ die aan de verschillende bedrijven zijn toegekend. Ook dit doen we weer door het filteren van de attributes van de shortcode voordat het betreffende veld gerenderd wordt.

add_filter( "shortcode_atts_fusion_form_select", 'nen_add_selectfield_options' , 20 );
add_filter( "shortcode_atts_fusion_form_text", 'nen_add_selectfield_options' , 20 );
function nen_add_selectfield_options( $array )
{      
    $selects        = [ 'bedrijf_plaats' , 'bedrijf_regio' ];
    $found_current  = false;
    if( array_key_exists('name', $array) && in_array( $array['name'] , $selects ) )
    {
        #add options to select dropdown
        $taxonomy   = $array['name']; //Field name from form, same as taxonomy name
        $list       = []; //array to fill with select options 
        $terms      = get_terms([
                        'taxonomy' => $taxonomy,
                        'hide_empty' => true,
                    ]); //get all terms for this taxonomy 
        if( is_array($terms) )
        {
            #empty option
            $list[] = [0, '- geen '. str_replace( 'bedrijf_' , '' , $array['name'] ) .' -' , null ];
            foreach( $terms as $term )
            {
                $current = 0;
                if( $term->slug === get_query_var( $taxonomy )) 
                {
                    $current = 1; //set as current if used in search 
                    $found_current = true; //variable used to add a class name
                }
                $list[] = [ $current , $term->name , $term->slug ];
            }
        }
        #add options to attribute
        if( count($list) > 1 ) $array['options'] = json_encode($list);
    }
    else if( array_key_exists('name', $array) && $array['name'] === 's' )
    {
        if( get_query_var('s') ) $found_current = get_query_var('s');
    }
    if( $found_current )
    {
        #add class to field to allow styling
        $array['class'] = ( $array['class'] ? $array['class'] .' ' : '' ) . 'in-current-search' ;
    }
    return $array;
}Code language: PHP (php)

Als het goed is zie je in het zoekformulier nu de select-velden gevuld met de eerder aangemaakte ’terms’ bij elke taxonomy. Je kan nu naar wens zoeken binnen de bedrijven.

[6] Tonen van adresgegevens via een shortcode

Avada is niet altijd even makkelijk met het tonen van data uit de meta-tabel (custom field). Daarom is het soms handig om je eigen shortcode te maken om data op te kunnen vragen. Deze shortcode kun je dan bijvoorbeeld gebruiken in de Avada-post-card om de adresgegevens te tonen. Ook kun je dit toepassen in de functie die de markers op de kaart plaatst. In deze functie kun je de infobox_content gelijk vullen met de bedrijfsnaam en adresgegevens. Elk custom-field kun je dan opvragen met bijvoorbeeld:
do_shortcode( ‘[bedrijfsdata id=”‘.$bedrijf->ID.'” key=”naam” ]’ );

add_shortcode( 'bedrijfsdata', 'nen_render_shortcode_bedrijfsdata' );
function nen_render_shortcode_bedrijfsdata( $atts ) 
{
    $vars = array(
            'key'           => null,
            'id'            => null,
            'label'         => null,
            'wrapper'       => null,
            'break'         => false,
            'fallback'      => null, 
    );
    $vars = shortcode_atts($vars , $atts );
    extract( $vars );
    $return = null;
    $id     = (int)( !$id ? get_the_ID() : $id );
    if( $key  )
    {
        $meta   = get_post_meta( $id , $key , true );                        
        # create meta content
        if( $meta )
        {
            $meta_html = null;
            
            if( $key === 'email' )
            {
                $meta_html = '<a href="mailto:'.esc_attr( $meta ).'">'.  esc_html( $meta ) . '</a>';
            }
            else if( $key === 'website' )
            {
                $meta_html = '<a target="_blank" href="'.esc_attr( $meta ).'">'. preg_replace("(^https?://)", "",  esc_html( $meta ) ) . '</a>';
            }
            else if( $key === 'telefoon' || $key === 'mobiel' )
            {
                $meta_html = '<a href="tel:'.esc_attr( $meta ).'">'. esc_html( $meta ) . '</a>';
            }
            else
            {
                $meta_html = esc_html( $meta );
            }
            if( $meta_html  ) $return = '<span class="bedrijf-value ' . esc_attr( $key )  . '">'. $meta_html . '</span>';
        }
        # add label
        if( $label )
        {
            if(  $return  ) 
            {
                    $return = '<span class="bedrijf-label">' . esc_html( $label ) . '</span>' . $return;
            }
            else if( $fallback )
            {
                    $return = '<span class="bedrijf-label">' . esc_html( $label ) . '</span>' . esc_html( $fallback );
            }
        }
        # add wrapper
        if( $return && $wrapper && in_array( $wrapper , [ 'div' , 'span' , 'p' ] ) )
        {                        
            $return = '<' . esc_attr($wrapper) . ' class="bedrijf-wrapper ' . esc_attr( $key ) . '">' . $return . '</' . esc_attr($wrapper) . '>' ;
        }
        # add break
        if( $return && $break )
        {                        
                $return = $return . '<br/>';
        }
    }
    return $return;
}Code language: PHP (php)

In basis is bovenstaande voldoende, maar je kan je bezoekers nóg beter bedienen. Bijvoorbeeld door de zoom van de kaart mee te laten werken met het gevonden resultaat, door de vindbaarheid te vergroten, of door informatie over de zoekopdracht te tonen. Natuurlijk kun je het geheel stylen zoals je het wilt hebben.

Zoom-waarde van de kaart instellen

add_filter( 'shortcode_atts_fusion_map', 'nen_bedrijf_map_set_zoom' );
function nen_bedrijf_map_set_zoom( $array )
{
    global $wp_query;
    $query_vars   = nen_get_bedrijf_archive_query_vars();
    if( count( $wp_query->posts ) > 0  )
    {
        if( count( $wp_query->posts ) === 1 || in_array( 'bedrijf_plaats', $query_vars ) )
        {
            $array['zoom'] = 12;
        }
        else if( in_array( 'bedrijf_regio', $query_vars ) )
        {
            $array['zoom'] = 10;
        }
    }
    return $array;
}
if( !function_exists( 'nen_get_bedrijf_archive_query_vars' ) )
{
    function nen_get_bedrijf_archive_query_vars()
    {
        $list           = [ 'bedrijf_plaats' , 'bedrijf_regio' , 's' ];
        $filtered       = []; 
        foreach( $list as $item )
        {
            if( !empty( get_query_var($item) ) )
            {
                $filtered[$item] = get_query_var($item);
            }
        }
        return $filtered;
    }   
}Code language: PHP (php)

Onofficiële manier om te zoeken in post_meta

De post-meta-tabel toevoegen aan de zoek-query kan vertragend werken. Daarom voegen we content van meerdere custom fields toe aan het veld ‘post_excerpt’ in de posts-tabel. We zorgen dat dit veld wordt meegenomen in de zoek.

#save custom field data in post_excerpt
add_filter( 'wp_insert_post_data' , 'nen_save_post_meta_in_field_excerpt' , 99 , 2 );
function nen_save_post_meta_in_field_excerpt( $data , $postarr ) 
{
    if( $postarr['post_type'] === 'bedrijf' && array_key_exists( 'acf', $postarr ) )
    {
        $arr = [];
        foreach( $postarr['acf'] as $key => $val )
        {
            if( strpos( $val , '{' ) === 0 ) continue;
            if( !$val || empty( $val ) ) continue;
            $arr[] = $val;
        }
        if( $arr ) $data['post_excerpt'] = implode( ' | ' , $arr );
    }
    return $data;
}
#extend search posts-table
add_filter('posts_where', 'nen_extend_search_with_post_excerpt');
function nen_extend_search_with_post_excerpt($where) 
{
    if( is_search() && get_query_var('post_type') === 'bedrijf' ) 
    {
        $where = preg_replace(
            "/(\w+).post_title LIKE ('%.*?%')/",
            "$1.post_title LIKE $2) OR ($1.post_excerpt LIKE $2",
            $where);
    }
    return $where;
}Code language: PHP (php)

Titel aanpassen naar gevonden resultaten

add_action( 'avada_page_title_bar_contents', 'nen_bedrijf_archive_title' );
function nen_bedrijf_archive_title( $array )
{
    if( nen_is_archive_bedrijf() )
    {
        global $wp_query;
        $obj = get_post_type_object( 'bedrijf' );
        if( $wp_query->have_posts() )
        {
            $query_vars = nen_get_bedrijf_archive_query_vars();
            $where      = ' gevonden';
            if( count($query_vars) === 1 )
            {
                $type =  array_keys( $query_vars )[0];
                $slug =  $query_vars[ $type ];
                if( in_array( $type , [ 'bedrijf_plaats' , 'bedrijf_regio' ] ) )
                {
                    $term   = get_term_by( 'slug' , $slug , $type );
                    if( !is_wp_error($term) )
                    {
                            $where = ' in ' . $term->name;
                    }
                }
            }
            if( !$query_vars )
            {
                $array[0] = 'Alle ' .  strtolower( $obj->name_plural ) .  ' (' . count( $wp_query->posts ) . ')' ;
            }
            else if( count( $wp_query->posts ) === 1 )
            {
                    $array[0] = '1 ' .  strtolower( $obj->name ) . $where;
            }
            else
            {                                
                $array[0] = count( $wp_query->posts ) . ' ' .  strtolower( $obj->name_plural ) . $where;
            }
        }
        else
        {                       
            $array[0] = 'Geen ' . strtolower( $obj->name_plural ) . ' gevonden';
        }
    }
    return $array;
}
if( !function_exists( 'nen_is_archive_bedrijf' ) )
{
    function nen_is_archive_bedrijf()
    {
        $post_type = get_query_var('post_type');
        if( !$post_type )
        {
            $tax = get_taxonomy( get_query_var('taxonomy') );
            #this taxonomy is only registered our custom post type (so first in array)
            if( $tax ) $post_type = $tax->object_type[0];
        }
        return $post_type === 'bedrijf';
    }
}
if( !function_exists( 'nen_get_bedrijf_archive_query_vars' ) )
{
    function nen_get_bedrijf_archive_query_vars()
    {
        $list           = [ 'bedrijf_plaats' , 'bedrijf_regio' , 's' ];
        $filtered       = []; 
        foreach( $list as $item )
        {
            if( !empty( get_query_var($item) ) )
            {
                $filtered[$item] = get_query_var($item);
            }
        }
        return $filtered;
    }   
}Code language: PHP (php)

Additional styling

/* hide markers on map if no result */
.fusion-google-map.no-result [role="button"], 
.fusion-google-map.no-result [aria-label="Kaart"] > div > div:not(:last-child) img{
    display:none;
}
/* bedrijf ARCHIVE form: if form item in search, make it red */
.fusion-form-select-field.taxonomy-in-search select{
    color: red;
    font-weight: 600;
}
.fusion-form-text-field.in-current-search input,
.fusion-form-text-field.in-current-search input#s{
    color: red;
    font-weight: 600;
}
.fusion-form-form-wrapper .fusion-form-field.in-current-search .fusion-form-input-with-icon>i{
    color: red;
}Code language: CSS (css)