Custom Products Catlog
Client Background & Requirements
- Alden’s Ice Cream is a subsidiary of Oregon Ice Cream company based in Oregon, USA.
- In the initial website that 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 a main catalog page with product filters which 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 which would create a shortcode to render the UI for product filters & product display.
- Whenever a visitor makes 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 are assigned a ‘Rank’ in order of importance suggested by our client and products are sorted by their ‘rank’ when displayed.
Load More Functionality
- As 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 client asked show only 16 products at given time based on the product count.
- If product count for given selection is less than or equal to 16, all products are shown.
- If product count for given selection is greater than 16, only 16 products are shown with a ‘Load More’ button.
- If visitor is interested to look at more products, visitor can click on ‘Load More’ button the next 16 products would be shown via AJAX request and so on until there are no more products to show.
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.
- Please check the screenshot below for product detail page.
Destini API Integration / Product Based Store Locator
- Client wanted us to have something like Store Locator for their products.
- Since client has over 50+ products and its 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 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.