One part of the BigCommerce apps initiative that I have loved is getting back into development.
It has been a period of re-skilling too. Over the last couple of months, I’ve learnt the basics of #React so that I can take advantage of BigCommerce #BigDesign design system & component library.
It means that I can build an app that looks and feels like the rest of BigCommerce admin and means that I don’t have to write any css. Something that is best for everyone.
Here’s an intro to the component library and some of the iterations I’ve been through for my list of categories.
Transcript
Today, I want to talk to you about the BigCommerce BigDesign library. It’s a component library that you can use in React to build out admin interfaces that look and feel like the rest of BigCommerce.
Now, obviously as I’m building out BigCommerce apps, this has been really important for me, as a backend dev, because I don’t want to write any CSS and I don’t want to do any design. That’s also something that I am not very good at.
So, but also obviously from an e-commerce manager perspective, when I am browsing around the admin interface, I want it to look and feel consistent.
And so building out a BigCommerce app library, and that’s my goal for this year.
I want this to look and feel like the rest of BigCommerce. So let’s just dive in and show you what we’ve got. So, you can find out from the API reference, all the different components that BigCommerce have provided that look and feel like the rest of their apps
So you might have modal windows, you might have their panels with their drop shadow and action buttons.
Or even things like the dropdown, which also, again, just really nice. You can almost think of it like a Bootstrap for BigCommerce.
And so this has obviously gone through multiple rounds of iteration and BigCommerce’s own admin, not everything looks and feels exactly like this as gradually the product is being modernized.
But the most recent things like the channel manager itself was built with this BigCommerce design library.
And so it was actually really helpful for me because they published it on GitHub,
It was really helpful for me, not only to have the API docs, but have a real implementation to see exactly how they’ve used it themselves, gotten around maybe some of the quirks of it.
And so it’s great that we know that they’re also using it and developing it, so that’s something that’s going to stick around.
In terms of going into another example, we have here, this again is something that they’ve linked to in their docs. Just a couple of examples of like a panel. So we’ve got a product form here with some input boxes, which all styled nicely.
An example of the dropdown, which is really nice dropdown actually has things like the search. So we can search for drink and it’ll filter all the dropdown options.
So that is good from accessibility point of view. Validation, all of these things are just baked in, so you don’t have to worry about it.
Similarly, here’s another example for a product lists is their example of a stateful table.
So I’m going to navigate down here so you can see how you might set that up, passing in the column information and data.
And you’ve got your actions in there, like delete. So all pretty cool.
What I was looking for was how do I build out the first page of my automated categories app is “I want to list of categories”.
That could be quite tricky because you then got to look into sub-categories and how you want to show that sub-category tree. But ultimately I want to list of categories and be able to click into one of them to edit.
Now the first thing I looked at was how does BigCommerce do this out of the box? They have a table with the ability to kind of use the plus icon and see the full tree, which, you know, looks nice.
It seems like this was probably before the BigCommerce BigDesign library came out. But you can see the similarities. So then moving over to where I started. I started with a Stateful Tree. So this is one of the components they provide out of the box.
So from my point of view, great getting up and running really quickly and it looking consistent.
There’s a few different options here.
So you can see they’ve used it as, as a category tree, already in the example, and primarly you could see this being used as a product assignment mechanism,
So editing a product and then ticking which categories that it sat in.
And you have some options like disabling the selection.
And that’s kind of where I started with.
I thought “ah that seems quite nice”. I’ve got my subcategory tree functionality working quite nicely. It’s very clean and simple, but found it actually is primarily for category selection rather than navigation.
So it was quite hard if I wanted to use that as clicking on the fencing category to edit that category, didn’t seem to be really what it was intended for.
So that was a little tricky.
And similarly, it is just for the tree. If you wanted this in table form, again, not really appropriate.
So then I kind of went back to basics to move on with the other area of my app.
So you can see here, I just used a really simple table, with category and then action on the right hand side.
Again, you know, basic, just a simple edit action and you can see I sort of dumbed down the category title to just avoid having to worry about the subcategories initially.
But I’ve come back to it recently.
So in a matter of few weeks picking this up and iterating on it.
I now have a table where I can expand out, which is much more similar to some of their other interface and design components that they have.
The chevrons seem to be what they’re using now if you look back up here, So I’ve kind of repeated that, remove the folder indicator, I felt that was like not needed.
And now I can go into the categories and pick one and go to my next page.
And we have our loading spinner and you see the panel sort of mechanism, radio buttons, and all from the BigDesign library.
So yeah, if you’re building out BigCommerce apps for your merchants.
Whether that be as an agency or an app provider, I don’t know why you wouldn’t use the BigDesign library.
And I find it really helpful to get up and running really quickly and build out these different interfaces.
So, thanks a lot BigCommerce.
