Dammit Jim, I’m a coder not a designer. ~Dr. Bones as a programmer
I’m terrible with design. My strength is taking other people’s design ideas and writing the code that makes the design work in the real world. Today’s demo is from Codrops and they call it a “responsive grid design”. I loved it right away and decided to code some back-end functionality.
The first thing I did was create a JSON file featuring all of the shirts and the sizes and colors available to each (JSON file here). In a live environment this would be pulled from a database. This also makes it very easy to manipulate the items – for example arrange by price or filter by available sizes. I used the standard jQuery .getJSON() call.
If you hover over the size box a list of available sizes appears. I added code to show the selected size in the box once a size is chosen.
While I loved the tool-tip type popup for the colors, users want to be able to select a different color. Having the shirt image change to match that color is a bonus feature. Click on the upper-right arrow to see the back of the shirt, this image changes to match the selected color as well. Finally, the color displaying in the box should always match the color of the shirt, making it easy to grab the color information for the shopping cart.
I coded the change for the “like” heart – now if you click on it the heart will toggle on and off.
The icon on the left was meant by CoDrops for comparison shopping, but I coded it to bring up a lightbox window to show additional information about the item.
Finally I coded a hook for the add to cart icon, collecting the color, size, name and price of the item and displaying it in a popup. It would be simple to add this to a real shopping cart – for example Pay Pal.
There are a couple more things I intend to add, including the JSON change I noted above:
- Filtering: The ability to filter the displayed items by price or size availability.
- Ability to have different prices and colors for different sizes
- Integration with CoDrops’ Horizontal Slide Out Menu. I do a lot of small ecommerce projects and if you had a limited number of items in distinct categories, this would make a cool store solution.
The post Adding Functionality to CoDrops’ Responsive Grid Design appeared first on Sophrosyne Life.