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 Layers screenshot

Sketch Groups

This generated the following SVG code:

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:

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

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.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">