Pelsue (Shop)

QUICK

Introduction

My first WooCommerce Powered store, built on WordPress. Started the project at the end of 2018 and finished it in February 2019 when it also went live. Rated at over 150 hours of work (design + development) this project was quite interesting for me since I have never build a store before.

Pelsue’s website was redesigned from the ground up to provide a better customer experience, generate more leads, and enhance the overall branding. The new website includes a distributor locator map, the ability for customers to add products and accessories to a quote, a video showcase page instead of sending users to YouTube, redesigned product pages, and an auto-populating search so users can easily find what they are looking for. 

OVERCOMED

Challenges

One of the biggest challenges for me was developing the Distributors page functionality. Their business has over 200 distributors and they needed to list a map of them at the top of the page. As soon as the website user accepts location permission request, the map needs to be updated with the closest distributors to him.

It was also needed to work mostly with WordPress’s Rest API. Since I’m more of a front-end guy, this was quite interesting. Each distributor needs to have a map with location coordinates in the back-end. This is achieved by using ACF Google Map, then the location is saved in form of post meta (lat/lng) to make possible the querying based on the radius of a specific location. The front-end is done 100% using the REST API and a modified WP_Query. Distance is calculated at the moment of searching for an address (comparing user address location vs distributor CPT location from meta and calculating the distance / exposed to rest API after) since is a bit faster than doing it after the results were populated using Google’s API, not to mention that the distance result was approximately the same as Google’s distance.

ROADBLOCKS

What I like less about it

Well, the design is quite simple and user-friendly, I’ve had to do some parts of it by using other’s services API, but in the form of iframe embeds. I hate iframes since they do not give the developer too much control. Excepting the part for YouTube Videos page, where I’m lazyloading them (imagine all that videos loaded at the same time, that would be quite ugly and slow, especially on mobile). By the way, this page is also built using the REST API and infinite scrolling.

I’m not the designer of this project, the credits goes to myZone, the company I work per contract. I would probably go with some smaller font sizes, but as far as I’m aware this was meant for an audience of older people, so I understand their point.

Happy Codding :)