Charm City Screen Print is a Baltimore-based screenprinting business that gets a large volume of sales leads from their website. Rather than a traditional checkout system, CCSP uses an online quote checkout to collect a customer's order and design.
This checkout system still requires the presence of an online catalog which needs quarterly updates. Previously, these updates could take months to complete and were inconsistent.
The challenge
My team had to come up with a way to handle the very large inventory of t-shirt and other products offered on the site. We also needed to create a quick, efficient, and reliable import system without slowing down the site. Lastly, we also had to do as much as possible to reduce the footprint of all the assets (images) that were a contributing factor to the poor speed of the previous build.
Inventory
Early on, we established the structure of a typical product:
- a product can have multiple color variants
- each color variant has a different set images and a different set of available sizes
- a product can be categorized by style (mens, womens, youth), category (t-shirts, polos, etc.), and material
With over 6,000 products and an average of 5 color variants per product, we were looking at an overwhelming 60k+ SKUs. To narrow this scope, we structured a product as a post type with different taxonomies for the categories. Each post has metadata in the form of an array that tracks the different available color variants, the images for each, and the available sizes for each.
Search queries against this large dataset would likely be inefficient, so we offloaded searching and indexing to a cloud-based AI-powered service. The initial import builds the index and subsequent imports update it as needed.
Assets
We decided to offload images to a CDN to reduce the size of the uploads folder. This would speed up the site and be versatile enough when it came time for new imports.
The initial import would mass-store new images. Subsequent import runs simply delete images that are no longer needed, or add images as necessary.
Import
We spent the most amount of time developing an import solution that was efficient and speedy. For this, we used a few libraries:
- to parse CSV files with product data, we used the box/spout package for PHP
- to handle importing, building post types, and uploading files to third-party services, we developed a custom plugin
- to make these PHP processes "async" and not rely on CRON jobs, we used deliciousbrains/wp-background-processing
The initial import took the longest since it had to populate the posts. There is a separate table in the database that keeps a hash of the product's data from the previous import. A subsequent import just needs to compare the two hashes to determine whether an update is needed.
Summary
After a challenging nine months and some very tough testing phases, we rolled out CCSP's new and improved storefront. Typically a WordPress store will use a service like WooCommerce to handle a storefront. Given the size and nature of this build, we preferred a custom build.
One of the benefits of this decision is that the "add to cart" functionality is virtually instant. It's all done on the JS side, so we leverage the Web Storage API to build the cart on the fly.
CCSP has seen an increased lead form submission volume thanks to the speedier checkout process. The client can now get up-to-date inventory out to the public much faster (within 24-72 hours).