Client Background & Requirements
- Alden’s Ice Cream is a subsidiary of Oregon Ice Cream company based in Oregon, USA.
- In the initial website that the client had built, they had only a simple page per product category.
- With this arrangement, a visitor had to visit all the product category pages to get a grasp of all products which was tiresome and time-consuming.
- So, to solve this problem we came up with a solution to create the main catalogue page with product filters that allows a visitor to skim through the products quickly.
How did we provide solution?
We worked on the project as follows:
Products Filters Functionality
- To create a custom catalog of products, we first created a Custom Post Type (CPT) called ‘Products’ and created two custom taxonomies – The first one was ‘Product Type’ and the other one was ‘Product Tags’ that will be used to denote tags to a product.
- ‘Product Type’ will be used to assign categories to products which could be – Sqrounds, Pints, Bars & Sandwiches.
- ‘Product Tags’ will be used to create tags that can be assigned to a product. Product tags can be flavors, dietary considerations, new/bestseller & base.
- For example a Sqround product ‘Vanilla & Chocolate Swirl’ will have ‘Sqround’ as the product category and have tags like ‘Vanilla’ & ‘Chocolate’ tags for flavors, ‘Kosher’ tag for dietary considerations, ‘Dairy’ for Base.
- After product entries were made, we developed a custom plugin that would create a shortcode to render the UI for product filters & product display.
- Whenever a visitor makes a selection on UI filters, an AJAX request is sent which is followed by a database query to show the products as per the filters set by the visitor.
- If no selections are made by the visitor (which is usually the case on page load) or when a visitor deselects all the filters, by default 16 featured products are shown. Each of these 16 featured products is assigned a ‘Rank’ in order of importance suggested by our client and products are sorted by their ‘rank’ when displayed.
Screenshot : Filter in Action
Load More Functionality
- As a total number of products were above 50. It could easily become quite overwhelming for a visitor to see all of the products at once.
- So the client asked to show only 16 products at a given time based on the product count.
- If the product count for a given selection is less than or equal to 16, all products are shown.
- If the product count for a given selection is greater than 16, only 16 products are shown with a ‘Load More’ button.
- If the visitor is interested to look at more products, the visitor can click on the ‘Load More’ button the next 16 products would be shown via AJAX request and so on until there are no more products to show.
Screenshot : Load More Functionality
Product detail template with Advanced Custom Fields (ACF)
- We created a custom template for Product CPT as per the layout provided by the client’s designer.
- We had created several ACF fields for CPT ‘Products’ to capture every product detail.
- The ACF Fields were – Product Heading, Sub Heading, Ingredients Summary, Ingredients List, Good Stuff List, Allergens, Nutrition Label & Badges as applicable.
- When a product is being viewed, the template pulls Product Name, Taxonomy, and featured image from CPT database and the ACF fields values for that particular product from ACF.
Screenshot : Product Details
What our clients have to say about us
“SaffireTech is a genuine and highly professional company. They provided us quality work and On-Time Delivery even on short notice. The team is friendly and flexible which is what you want in developing your website. I highly recommended it for people looking for top-notch professional work!”Ankit JoshiCo-Founder, BloomDesk
“SaffireTech has a very energetic and passionate team to work with. They stayed on schedule and delivered the promised finished product. I had a wonderful experience working with them and would gladly recommend them to others who need expert custom coding solutions done right and on time.”Resha ShroffCEO, Lynx
“SaffireTech has a highly professional team, the best thing is that they are always ready to help & find the solution for any challenges. It has been a great experience to work with them for our project. I wish all good luck and best of the future to them.”Zia KhanBusiness Manager, Nahar Group
“Woah I took almost a year to find out the right company to design my website, it was very complicated to develop as it had to be totally customized. I came across many agencies but the confidence and commitment Ankit & his team showed up was amazing and they did give their 100 percent and completed the project on deadline and giving us a great service as well. Totally recommended!”Daskhina SawantFounder, ITZ-Showtime