TL:DR
How do I use CMS collection data to change the colour of SVG objects when these objects are outside the collection list?
Rough prototype:
Read-Only: https://preview.webflow.com/preview/clickable-allotments?utm_medium=preview_link&utm_source=designer&utm_content=clickable-allotments&preview=57227fb5af226550db575670f2acb6d3&workflow=preview
Published link: https://clickable-allotments.webflow.io/
The long version
I’m trying to create a clickable allotment map for a real estate development.
The allotment map will be an SVG image, and I want my client to be able to manage the status of each allotment themselves via the CMS. The statuses are sold (red), under contract (orange) and available (green).
I want the allotment colour on the SVG image to change based on the value of the ‘status’ field and have the allotment be clickable through to the CMS item page.
I have built a CMS collection list (called allotment) and am using the below CSS and Javascript to change the colours.
<style type="text/css">
.st0{fill:#F4EADB;}
.st1{fill:#624B2D; transition: all 500ms}
.st1[data-status='Sold']{fill:red;}
.st1[data-status='Under Contract']{fill:orange;}
.st1:hover{fill:#F4EADB;}
</style>
This is an HTML embed inside the collection list item.
<script>
var element = document.getElementById("Name");
element.setAttribute('data-status', "Status")
element.parentElement.setAttribute('href', '/allotments/Slug');
</script>
The issue with this approach is the script block in every CMS is really clunky and not best practice. Is there a better way to go?