The Stack
We’re doing a configurator that checks fitment to a rack system that sits on top of a van. We had to come up with a way to get product images into a grid system where the product sizes are to scale with everything else. The products need to be editable by the store owner. We need to load standard product configurations for the customers to choose from, or drag and drop the products into their own custom configuration. And we need to do it in Shopify.
The typical Shopify store doesn’t allow a lot of customization. It’s kind of like WordPress, but for selling stuff. It’s a no-code solution for people who need that, and it works well for what it is. The components are rendered with their Liquid template system, and adding anything to a store involves editing a Theme or install various app widgets from their app store for the merchants to interact with.
For those who need to integrate custom features with Shopify, they’re developing a framework called Hydrogen, and a hosting service called Oxygen. Hydrogen is based on React-Remix, and interacts with Shopify stores through their Storefront API. You can build a custom storefront that pulls all the products from the existing Shopify store and then create a custom experience with all the tools in the Javascript box. Oxygen is free for Shopify subscribers, but it doesn’t include database hosting – you get product data from the Shopify API, which is somewhat customizable, or you pay for an external database.
We test drove a few JS libraries for draggable grid layouts, and we chose react-grid-layout because it was easiest to integrate into the React-based Shopify app template. We’re going to do our best to use the Shopify API to get live product data, because that’s what our sponsor wants. It means pulling images and size fields out of CAD models they’ve provided, and hopefully adding those to new metafields in their product data.
These decisions were complicated by documentation issues on Shopify.dev. The tutorials hadn’t been updated to V2 of their API, which breaks the V1 code, and some of the instructions were a bit vague. We were relieved to finally get the grid in place and get some product images into draggable boxes:
I can’t say any of us prefer being constrained by Shopify’s requirements, but that’s life – and it beats refactoring 1000 lines of someone else’s Java-based business logic to add a single menu item. Also, this is going to be a resume cornerstone.
Fun fact: cats are keyboard-enviers:
Leave a Reply