Dynamic SVGs with Custom Fields, and JavaScript

I recently worked on a WordPress project to make a site for an exhibition event (vendors in booths gathered in one place). The client wanted to have floor map that would show which booths were taken, and which were still available (there were over 130 booths). Normally, this would require a graphic that would have to be updated every time a booth got sold. Being lazy, I didn’t want to have to do that. I decided to make an SVG that would change a booth’s color with JavaScript based on posts being created.

The theme we used was specific for events and conferences, so it had a specific post type for exhibitors. Each exhibitor would have an individual post. The exhibitor posts had the usual fields (title, content, featured image, category, etc.), and custom fields as well. One of those custom fields became the “Booth” field, in which my client would specify the booth that corresponded to each exhibitor (all booths were numbered).

I then created an SVG in Sketch and made sure to name all booth groups in a specific way:

Sketch Groups

This generated the following SVG code:

<g id="boxGroup26" transform="translate(311.000000, 66.000000)">
    <g id="small-square">
        <g id="Rectangle-Copy-18">
            <use fill="#00C961" fill-rule="evenodd" xlink:href="#path-40"></use>
            <rect stroke="#1F335A" stroke-width="1" x="0.5" y="0.5" width="35" height="35"></rect>
        </g>
    </g>
    <text id="26" font-family="PTSerif-Regular, PT Serif" font-size="18" font-weight="normal" fill="#1F335A">
        <tspan x="7.906" y="21">26</tspan>
    </text>
</g>

<g id="boxGroup26" transform="translate(311.000000, 66.000000)">

```
    <g id="small-square">
```

        <g id="Rectangle-Copy-18">

            <use fill="#00C961" fill-rule="evenodd" xlink:href="#path-40"></use>

            <rect stroke="#1F335A" stroke-width="1" x="0.5" y="0.5" width="35" height="35"></rect>

```
        </g>
```
```
    </g>
```

    <text id="26" font-family="PTSerif-Regular, PT Serif" font-size="18" font-weight="normal" fill="#1F335A">

        <tspan x="7.906" y="21">26</tspan>

```
    </text>
```
```
</g>
```

In function.php, I added some code to create an array with all the booths that are taken, and then pass that array to a script:

function mytheme_load_scripts() {
    $taken = [];
    $key = 'booth';
    global $wp_query, $post;

    $loopTaken = new WP_Query( array(
        'posts_per_page'  => -1,
        'post_type'        => 'exhibitor',
        'post_status'	   => 'publish'	
        )
    );

    while( $loopTaken->have_posts() ) {
        $loopTaken->the_post();
        $taken[] = wp_strip_all_tags( get_post_meta( $post->ID, $key, true ) );
    }

    wp_enqueue_script('floormap-script', get_stylesheet_directory_uri() . '/js/floorplan.js', array('jquery'), "0.59", true);

    wp_localize_script('floormap-script', 'floormap_vars', array(
        'takenBooths' => $taken
        )
    );
}
add_action('wp_enqueue_scripts', 'mytheme_load_scripts');

```
function mytheme_load_scripts() {
```
```
    $taken = [];
```
```
    $key = 'booth';
```
```
    global $wp_query, $post;
```
```
 
```

    $loopTaken = new WP_Query( array(

        'posts_per_page'  => -1,

        'post_type'        => 'exhibitor',

        'post_status'	   => 'publish'

```
        )
```
```
    );
```
```
 
```

    while( $loopTaken->have_posts() ) {

```
        $loopTaken->the_post();
```

        $taken[] = wp_strip_all_tags( get_post_meta( $post->ID, $key, true ) );

```
    }
```
```
 
```

    wp_enqueue_script('floormap-script', get_stylesheet_directory_uri() . '/js/floorplan.js', array('jquery'), "0.59", true);

```
 
```

    wp_localize_script('floormap-script', 'floormap_vars', array(

```
        'takenBooths' => $taken
```
```
        )
```
```
    );
```
```
}
```

add_action('wp_enqueue_scripts', 'mytheme_load_scripts');

Then in floorplan.js, for each booth received from that array, I used jQuery to add some CSS to those booths:

(function($) {
  	var boxes = floormap_vars.takenBooths;
  	$("svg").each(function(){
  		for (var i = 0; i < boxes.length; i++) {
  			var id = boxes[i];
    			$(this).find('#boxGroup' + id + ' use').css({ fill: '#BB4629'});
    			$(this).find('#boxGroup' + id + ' text').css({ fill: '#ffffff'});
  		}
  	})
})( jQuery );

```
(function($) {
```

  	var boxes = floormap_vars.takenBooths;

```
  	$("svg").each(function(){
```

  		for (var i = 0; i < boxes.length; i++) {

```
  			var id = boxes[i];
```

    			$(this).find('#boxGroup' + id + ' use').css({ fill: '#BB4629'});

    			$(this).find('#boxGroup' + id + ' text').css({ fill: '#ffffff'});

```
  		}
```
```
  	})
```
```
})( jQuery );
```

Just a note about the code above, it’s an abridged version of what I actually used. In my actual JavaScript, I did some cleaning up of the strings in the array to ensure that they didn’t have extra white spaces, where empty, etc.

It works like a charm. The only drawback is that the SVG can’t be optimized (at least via an automatic optimizer) since it would rename the ids in the SVG, and break the code.