Project Retro

What looked like a simple project from the outside ended up being pretty hard. It was appeared to be a simple landing page for a gym, but there were small details that proved to be difficult. Here is the end result:

Most difficult details were:

  1. Header – logo changes colour when scrolling, links change color, responsive drop down menu. How I fixed it:

2. Buttons that were skewed. How I fixed it:

  • gave the buttons a css class of vigor-button
  • then added the following css to make the button appear skewed
.vigor-button {transform: skew(-9deg);}

.vigor-button span.elementor-button-text{
    transform: skew(9deg);
}

@media screen and (max-width: 736px) and (min-width: 346px){
    .vigor-button span{
        padding-bottom: 2px;
    }
}

3. The google map API. Now this was out of my realm of skills, so I asked Jonathan Bossenger to help me with this. We created custom post types for the various gyms and then added this code that he came up with the solve the problem:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vigor Google Map</title>

    <style>
        #map {
            height: 910px;
            width: 100%;
        }

        .gm-style .gm-style-iw-c {
            border-radius: 0;
            font-family: 'IBM Plex Sans';
        }

        span.place-location {
            font-size: 16px;
            font-weight: normal;
        }

        h1.place-title {
            font-size: 26px;
            font-weight: 600;
            margin: 0 0 13px 0;
        }

        ul.opening-times {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 23px;
        }

        ul.opening-times li {
            font-size: 12px;
            font-weight: normal;
            line-height: 2;
        }
        
        .gallery-image-count {
    position: relative;
    top: -40px;
    left: 210px;
    color: #fff;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    font-size: 11px;
    width: 60px;
}
        

    </style>
</head>
<body>
<div id="map"></div>
<script>

    function loadMap(gyms) {

        // Loop through gyms to set up markers
        let markers = [];
        for (var i = 0; i < gyms.length; i++) {
            let gym = gyms[i];
            markers[i] = {
                coords: {
                    lat: Number(gym.coordinates.lat),
                    lng: Number(gym.coordinates.lng)
                },
                iconImage: 'https://svgshare.com/i/NcR.svg',
                title: gym.title.rendered,
                content: gym.content.rendered
            }
        }

        // Map options
        var options = {
            zoom: 14,
            center: {lat: 37.788936, lng: -122.448915}
        }

        //new map
        var map = new google.maps.Map(document.getElementById('map'), options);

        // Loop through markers and set them on the map
        for (var i = 0; i < markers.length; i++) {
            // Add markers
            addMarker(markers[i]);
        }

        // Add Marker Function
        function addMarker(props) {
            var marker = new google.maps.Marker({
                position: props.coords,
                map: map,
                // icon: props.iconImage

            });
            //check for custom icon
            if (props.iconImage) {
                // set icon image
                marker.setIcon(props.iconImage);
            }

            //check content
            if (props.content) {
                // create the infoWindow for this marker
                var infoWindow = new google.maps.InfoWindow({
                    content: '<h1>' + props.title + '</h1>' + props.content
                });

                // listen on the marker for a click
                marker.addListener('click', function (element) {
                    // if the marker is black, change to yellow
                    // it will probably always be black, but the check is for just in case it isnt
                    if (marker.icon == 'https://svgshare.com/i/NcR.svg') {
                        marker.setIcon('https://svgshare.com/i/Nc4.svg');
                    }
                    //trigger the infoWindow open
                    infoWindow.open(map, marker);
                    // listen for the infoWindow close click, and reset the marker
                    infoWindow.addListener('closeclick', function () {
                        marker.setIcon('https://svgshare.com/i/NcR.svg');
                    });
                });
            }
        }
    }

    /**
     * Google Maps init callback
     */
    function initMap() {
        /**
         * Fetch the gyms JSON data from the WP REST API
         */
        fetch('/wp-json/wp/v2/gyms')
            .then(function (response) {
                return response.json();
            })
            .then(function (gyms) {
                loadMap(gyms)
            });
    }
</script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsnwsMgmeftha-iKBXpS5BfywvZAwVSkQ&callback=initMap"></script>
</body>
</html>

4. Showing WooCommerce products as clickable blocks. How I solved this:

Created a custom product block using the following free plugin: https://wordpress.org/plugins/ele-custom-skin/

And following this tutorial:

Plugins used on this site:

  1. Classic editor
  2. Custom post type ui
  3. ele custom skin
  4. Elementor Pro
  5. Elementor
  6. Password Protected
  7. Slider Revolution
  8. Sticky Header Effects for Elementor
  9. WooCommerce

Theme usee:

Hello Elementor

It took a while to get there, but I passed the project vetting stage after weeks of agonising over tiny little details, passed the interview stage at the interview stage and now an official Codeable Expert and I’m already killing it.

More on my Codeable experience so far here:

Share now :

Facebook
Twitter
LinkedIn