Alden’s Ice Cream – Custom Products Catalogue with Filter Functionality
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 catalog 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 Custom Post Type (CPT) called ‘Products’ and created two custom taxonomies – First one was ‘Products 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 category 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 consideration, new/best seller & base.
- For example a Sqround product ‘Vanilla & Chocolate Swirl’ will have ‘Sqround’ as 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
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
Destini API Integration / Product Based Store Locator
- The client wanted us to have something like Store Locator for their products.
- Since the client has over 50+ products and it’s very much a possibility that their distributors are not going to have all the products at a time, we decided to go for a product-based store locator as a generalized store locator was not going to solve the problem.
- So, we opted for Destini API which allows you to create product-based store locations. To make it work, we have to enter all product(s) information & their locations for each product in their dashboard.
- Once product info is entered, a product code is generated which we can use on our site to generate store locator results based on product being viewed and Visitor Pincode using their API kit.
Screenshot : Destini API Integration