Hikashop Extension

Create a frontend framework for the e-commerce extension used in Joomla CMS. It must be styled and developed to be reused easily and adapt effortlessly to updates and extensions.

GOALS

  • Create a visual style and design system that allows the complexity of the cart to be simple to use for any shopper
  • Write maintainable code that is still capable of overriding unnecessary styles injected by the extension, without sacrificing the structural integrity
  • Easily change styles and customize based on the client’s needs

CLIENT

enCOMPASS Advertising Agency & Father’s House Ghana

RESPONSIBILITIES

Planning, UI Design, frontend development

mobile phone and tablet mockup of shopping cart checkout

SEE IT IN ACTION

Father's House Ghana

Father’s House Ghana, a non-profit that provides community services and a shelter for rescued child slaves, uses the shopping cart to sell shea butter products to raise funds for their safe haven.

view site

Planning & Research

I spent a lot of time looking at the demo version of the extension, deciding on appropriate layouts and features that needed to be part of the foundation. However, when it was time to start creating styles, I learned that Hikashop’s demo site used a custom theme that required an additional purchase. I was left without any plan at this point, and had to start over.

First thing I noticed was the overwhelming amount of tables and code structures that changed per page, per situation. This caused me to pause and make sure I was able to group similar instances together to target them and provide a foundation of consistency.

Besides the actual shopping cart experience, I also had to account for the checkout process and the shopper’s personal account. Account holders will be able to update their preferences, view previous orders, reorder from previous purchases, and even create a cart with orders to save for later.

Design Phase & The Nightmare CSS

I was working with both the design and frontend development of this extension, and because the default template came as a surprise, and I ended up working on both at the same time. I also had to work within the confines of the structure, due to regular updates, either adding more functionality or even changing/adding new class names. I knew I had to be more specific with my styles.

Overriding the default styles that came with the extension was delicate work. It seemed like there were a lot of quick fixes and very specific code. However, that same structure existed in a different place, so you would think it would be developed the same, but it actually had an entirely different code structure and styles applied to it. Not to mention, the number of importants! that seemed to riddle the code. This left me frustrated and looking for the best way to make a cohesive framework that could still be beautiful and maintainable.

From the design standpoint, I had to go back to basics and make the tables responsive, and find the best way to communicate the right information across all devices. I chose to create a card format that divided the content logically, and visually. I wanted to make sure that shoppers understood what part of the checkout process they were in, and allow important information, such as price, stand out at a glance.

Frontend Development

I mentioned the amount of importants! and inconsistent styling, but it was one thing to create a visual design and another to implement that in the less style sheets. I started with overrides first to get rid of all of the default table styles, and assigned the correct typography mixins to the contents contained within them. After the resets, I needed to create consistent styling for all of the tables.

Hikashop also created their own version of Bootstrap-like columns, and I decided to override those because I was afraid in updates they might change the related media queries and I didn’t want to rely on those. On top of that, when we update to Joomla 4 (exclusively using Bootstrap 4), I wanted to make sure moving forward that the framework I implemented would still work when converted from less to scss. I decided to use css grid, with a flex fallback. I was able to put all of the product listing cards, internal product page galleries, and forms into this structure.

Where it Stands

As of now, everything is still working and none of the updates have affected the styles on the frontend. Any client requesting a shopping cart will now easily be able to have this cart with the available features, and easily update colors, fonts, and additional styles to make it their own unique cart.