Alden’s Ice Cream – Custom Products Catalogue with Filter Functionality

Project Highlights

Plugin Development
Search Functionality
Filter Functionality
Responsive Design
Theme Customization
Website Development

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

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

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

Have a Project in Mind?

We are ready to help you out!

    By using this form you agree with the storage and handling of your data by this website.