When building headless eCommerce websites, we rely heavily on the built-in capabilities of the platforms chosen to run the brand. However, having so many options at your fingertips can make it challenging to pick the right one.

I’ve begun training on one of the largest eCommerce platforms that supports native (Stencil) and headless development (react, Vue, Nuxt). I wanted to take a moment from my training and share something that adds a lot of value to brands that are building for the future.

Usually, when building complex frontends for eCommerce, developers are quick to write complex rules on the frontend instead of the backend (server side). Over time this can cause severe bloat and, if not well documented, confusing code. BigCommerce has the ability to write complex API rules through its product configuration schema. We can move code that can complicate the frontend to the backend for specifically changing product prices and attributes.

During this article, we will utilize a few API endpoints under the product tree to enable our complex product logic to live on the server.

Modifiers

👉 Modifiers are built and added to only one product at a time! This does not get added to all or groups of products.

To build and understand how to create complex rules, you first need to understand Modifiers. Modifiers are pretty simple. It’s a way to make elements to modify a product's price and other attributes via the API that will return actionable JSON to create UI elements. Think about it like props for a react component just this data is stored in BigCommerce.

1. required — This is a boolean
2. display_name — This is string
3. type — This is a string but only takes these values as a valid string

This will build the data needed to make a component on your Product Display Page. Complex rules only work with two or more modifiers so let's create two modifiers.

You can hit this endpoint with the body below.

POST / https://api.bigcommerce.com/stores/{{api-access-token}}/v3/catalog/products/{id}/modifiers

// Body for the first modifier
{
    "type": "checkbox",
    "required": false,
    "config": {
        "default_value": "Yes",
        "checked_by_default": false,
        "checkbox_label": "Check for Donation"
    },
    "display_name": "Add a $5 Donation"
}

JSON Result

{
            "id": 117,
            "product_id": 114,
            "name": "Add-a-$5-Donation1659380123-114",
            "display_name": "Add a $5 Donation",
            "type": "checkbox",
            "required": false,
            "sort_order": 0,
            "config": {
                "checkbox_label": "Check for Donation",
                "checked_by_default": false
            },
            "option_values": [
                {
                    "id": 108,
                    "option_id": 117,
                    "label": "Yes",
                    "sort_order": 0,
                    "value_data": {
                        "checked_value": true
                    },
                    "is_default": false,
                    "adjusters": {
                        "price": {
                            "adjuster": "relative",
                            "adjuster_value": 5
                        },
                        "weight": null,
                        "image_url": "",
                        "purchasing_disabled": {
                            "status": false,
                            "message": ""
                        }
                    }
                },
                {
                    "id": 109,
                    "option_id": 117,
                    "label": "No",
                    "sort_order": 1,
                    "value_data": {
                        "checked_value": false
                    },
                    "is_default": true,
                    "adjusters": {
                        "price": null,
                        "weight": null,
                        "image_url": "",
                        "purchasing_disabled": {
                            "status": false,
                            "message": ""
                        }
                    }
                }
            ]
        },

// Body for the second modifier
{
   "type": "checkbox",
   "required": false,
   "config": {
       "default_value": "Yes",
       "checked_by_default": false,
       "checkbox_label": "Check to receive a sticker"
   },
   "display_name": "Add an 'I Donated' sticker"
}

JSON Result

{
            "id": 118,
            "product_id": 114,
            "name": "Add-an-'I-Donated'-sticker1659385541-114",
            "display_name": "Add an 'I Donated' sticker",
            "type": "checkbox",
            "required": false,
            "sort_order": 0,
            "config": {
                "checkbox_label": "Check to receive a sticker",
                "checked_by_default": false
            },
            "option_values": [
                {
                    "id": 110,
                    "option_id": 118,
                    "label": "Yes",
                    "sort_order": 0,
                    "value_data": {
                        "checked_value": true
                    },
                    "is_default": false,
                    "adjusters": {
                        "price": null,
                        "weight": null,
                        "image_url": "",
                        "purchasing_disabled": {
                            "status": false,
                            "message": ""
                        }
                    }
                },
                {
                    "id": 111,
                    "option_id": 118,
                    "label": "No",
                    "sort_order": 1,
                    "value_data": {
                        "checked_value": false
                    },
                    "is_default": true,
                    "adjusters": {
                        "price": null,
                        "weight": null,
                        "image_url": "",
                        "purchasing_disabled": {
                            "status": false,
                            "message": ""
                        }
                    }
                }
            ]
        }

This will build a two checkbox on our PDP that will look like this:

Complex Rules 🔥

Now that we have our two modifiers, we can create complex rules to enable/disable the Add to Cart button. The example I will show here is if a customer selects the “Add an “I Donated” sticker” but does not select the “Add a $5 Donation”.

We do not want to add an additional $2 to the customer’s order and let them check out because the sticker is only for customers that wish to donate.

We can do that like this:

POST / https://api.bigcommerce.com/stores/{{store-hash}}/v3/catalog/products/{id}/complex-rules

{
  "product_id": 114,
  "enabled": true,
  "purchasing_disabled": true,
  "purchasing_disabled_message": "You must donate to receive a sticker",
   "conditions": [
       {
           "modifier_id": 109, // The ID of the modifier
           "modifier_value_id": 117 // The ID of the modifier option in this case it's modifier 109 and value 117. Meaning the checkbox to donate $5 is not selected (It's default value)
       },
       {
           "modifier_id": 110, // ID of the modifier to add a sticker
           "modifier_value_id": 118 // Value of the "yes" selection of the select a sticker.
       }
   ]
}

This will create an output for the frontend to consume similar to this:

{
            "id": 4,
            "product_id": 114,
            "sort_order": 0,
            "enabled": true,
            "stop": false,
            "price_adjuster": null,
            "weight_adjuster": null,
            "purchasing_disabled": true,
            "purchasing_disabled_message": "You must donate to receive a sticker",
            "purchasing_hidden": false,
            "image_url": "",
            "conditions": [
                {
                    "rule_id": 4,
                    "modifier_id": 117,
                    "modifier_value_id": 109,
                    "variant_id": null,
                    "combination_id": 0
                },
                {
                    "rule_id": 4,
                    "modifier_id": 118,
                    "modifier_value_id": 110,
                    "variant_id": null,
                    "combination_id": 0
                }
            ]
}

Now that we have our Modifiers set up and our Complex Rules setup we can anticipate some frontend logic based on selected values and the returned responses from the API for products.

Now you can attempt to select “receive a sticker” but not “Check for Donation,” and when you call the API to retrieve the new price or information about the product, it’ll return JSON similar to this.

Above is a simple frontend example that was built to handle the purchaseable boolean now returned from the complex rule!

Hopefully, this was helpful! I highly recommend utilizing complex rules and modifiers when building in Stencil or Headless!

First write a hook:

Here is a quick example of a simple hook that returns some data that we then format and then return.

Second write a render props component:

Here is a simple render props component that utilizes render props to send the value to it’s child component.

Lastly use the Render Props Component!

Here we pass the value in from the component to the DropDown as options to be rendered and displayed!

Our Result!

Happy coding :)

React Screens

React Screens are simple to use React Native screens. Built with strictly react native components. The website will feature a list of react native screen components that you are able to easily install and use in your next react native app.

You’ll be able to find the component you are looking for to drop into your application by simply searching for it on the website.

Then when you have found the component you need. You will simply be able to scan the QR code with the Exponent phone application to instantaneously view the component on your phone before using it.

You’ll be able to instantaneously import the exact UI elements you need for your application.

React Screens will be releasing a minimum of 2 new react native components a month.

Our first set of screens are coming soon! This bundle includes 4 screens for instant use in any React Native project click here if on your phone to see a demo of our first two screens.

This big bundle can also be found at: https://gumroad.com/l/prereactscreens

Mission

Our mission is to create high quality screens for any project. Along with this, we want to spend time educating the community to build better component api’s that are not limited as many are. This involves blogging once a month on how to create the screens we build. Our first post on our card swiper will come out later this month. This is public proof of our code quality along with helping more people create better screens. By purchasing our screens you are funding us to write guides on building top notch components and designs.

Each screen has zero dependencies other than react-native. Some, however, will want you to include react-native-vector-icons. You may always include the non-icon version if you wish.

Who are we?

We are Dominic Gozza and Zach Silveira. You can find us on Twitter @zachcodes and @dom_gozza. We have been using React Native since its inception and love the ecosystem. Along with our React Native expertise, we have brought in a few designers to help us create the most beautiful UI’s possible. With that being said, none of us are experts. Nobody truly is. It is our hope that by writing tutorials and sharing as much as we can, the ecosystem and our components will improve together over time.

I feel like the best part about creating this new product is that it will drive me to create more content and better content ultimately making me a better developer all around. While being able to assist and contribute to the ever growing React Native developers.

Feel free to drop us a comment below for future screens that you would like to see!

Give us a follow for more updates on twitter!!

Zach Silveira (@zachcodes)

Dominic Gozza (@dom_gozza)

React Screens (@reactscreens)

It was really the strong communities built around development and especially built around React and React Native. That made me fall in love.

I was really into business and pushing mobile apps. I really never pictured myself being a developer. But there is just this amazing feeling about creating something from nothing. Creating a layout using flex-box, or creating animations, navigation, having all this communicate with a server. It was just so damn fascinating I couldn’t overlook it for a second.

It just makes sense looking back on why I continued on with development

Sure I wanted to own a business that pushed out amazing mobile apps. But I had no idea of the process, the tech stacks, the hard work. I literally knew nothing.

Being a part of a community really drives me to work hard, produce the best work and the cleanest code possible and not settling for anything less.

In all honesty being part of the Expo community taught me more then a 25 minute tutorial on how to create a ToDo app from Youtube.

Although I didn’t realize it at first but my memory bank was growing ‘expo’nentially(silly pun insert) ever since I joined a community of developers. There is something to be said about developers and the way their mind works, you really have to have a knack for it.(Not discouraging any future dev’s, I never had the mind for it until I tried)

I found it most amazing to be part of a community that was literally pumping out some of the best content I have ever seen

It is crazy but most of the people I interact with on a daily basis are either working on some kick-ass app that is soon to sky rocket on the app store or improve their skill set by ten folds. Or they are working on an even more kick-ass open source project that improves the improves the community.

If it wasn’t for the communities on Expo I wouldn’t be here today. I learned equally as much code by just communicating and chiming in on other peoples chats as physically doing it myself.

I do want to throw in a quick plug: A new community that was creating called “Programming pals” was launched by a friend of mine “William Palacio” on the discord server. It’s really great, it is a mix of experienced, intermediate and novice programmers all extremely interested in moving from whatever languages they primarily used before over to React and React Native! Here is the link! (group projects and more!) https://discord.gg/RTaGCTc

It’s really fun to interact with people that are experts at what they do. Some of the best of the best.

I never had a mentor when it came to developing, I never watched a guide on RN longer then 10 minutes.

I kind of just did it.

I know that really doesn’t make any sense going from literally not knowing any code at all to just “doing it”. Somehow it has worked out.

The best way I can relate this to is when I was young and I learned to surf. Normally you start out on a longer board probably 7–10ft in length until you get the hang of it. Well instead of being normal and crawling before I walk. I jumped right into surfing with a 5'11 board. Took me a few extra months then everyone else. But hey, two great things came from it. 1) I learned and I had a very unique style. 2) I learned to work hard and to not give up.

This really applies to anything but get out there find a community, get involved and you’ll find your niche.

Whatever the cause was I am glad I still kept theorizing new ideas and writing them down. Because if I didn’t I wouldn’t be here today, writing my first blog post on Medium, about a foreign language to most of us.

You see my brother whom I look up to in the technology world is a wizard when it comes to knowing literally everything that crosses his path. So knowing this I thought that heck if I come up with the best idea in the world for an app he would just create it!

Clearly that wasn’t the case. :(

That is when I quickly realized if I want to bring my own projects to life I can’t depend on others to do all the heavy lifting while I just sit in a leather office chair and think.

So here I am roughly 5 months ago, no clue where to begin. I started with the Android SDK, didn’t like it. I moved on to Xcode, didn’t like it. Then I sat there and I thought to myself, well I do not like and understand the two platforms I need to use to actually complete all my ideas. I thought that was it for me.

One day I went to my brother when he wasn’t busy and I said: Look you just finished an app, it is on the app store and it looks great! Now build this app with me, or at least get me started. Honestly, it took some convincing cause he seemed to always be busy. But I managed to trap him for roughly 1–2 hours. In this time he showed me some of the most incredible development tools.

First he showed me, https://github.com/facebookincubator/create-react-app which immediately blew my mind. He taught me how to create import, and modify my first react app. Being able to see him load up an app, and have it ready to modify within 10 minutes or less blew my freaking mind. I knew right then and there, this is what I need to do. (It was just so damn simple) React Native was the move. (seriously it still is)

(A very good listen! The end gets interesting!) https://softwareengineeringdaily.com/2017/04/11/the-future-of-react-native-with-brent-vatne-and-adam-perry/

I started off replicating the same simple component about 20 times. Until I understood everything that was going on that page. Until I understood why you import the Components, how you import them and how they are used.

After that I knew if I really wanted to learn I would have to create something I have a passion for.

So I knew components, how to import them. Now what? How the heck do I go from this to a full blown app?!

That is where my brother sent me this amazing IDE, that I can not get enough of: https://expo.io/

When I saw this I said to myself, “Okay Dom, this is your shot to really create something you’ve always dreamed about”. After combing through the docs I quickly realized that this is the best path for me.

After relentlessly bugging the fine developers of https://slack.exponentjs.com/ I quickly learned how to use expo, how to tap into their amazing library of SDK API’s and their sweet guides. Use their amazing navigation component. And now I had a working and functioning app, with a pretty crappy UI :(

So I found myself asking a bagillion questions about flex-box and quickly learned it can’t necessarily be explained you just have to mess with it. That is when http://flexboxfroggy.com/ came in handy. Taught me all the basics and what I needed to know!

I figured If I really wanted to create something I cant keep just messing around creating screens that don’t really function and that I don’t really care for.

That is when I said to myself its time to take one of those wild ideas from my journal of ideas and actually try and build it. Took me about one month to make a perfect cross platform UI! I was beyond stoked. I thought I was a dev. Ha.. That’s when I decided it was time to learn redux, firebase, setState and a whole bunch of other stuff. Which I am still learning till this day. redux and setState are some sort of magic though.. I’ll never fully understand.

http://cloneable.io/ The free course here on creating a weather app helped me a lot with state!

So I guess the moral of the story is get an idea that you truly believe in. Because having an idea or a goal that you want more than anything to come alive means you’ll stop at nothing to get it done. Then just jump into it, all you need is a small nudge in the right direction.

I had no idea where I wanted to go honestly, I had no idea of coding, how it worked, what languages are used for what, and how they interact together. I just dived right into it. Granted I am still learning, and granted my personal stack only consist of, React Native, Firebase, Redux, Javascript, Git. I should have my first app Clone on the app store in just a few short weeks!

So that’s how and why I went from not knowing anything about mobile development to knowing a lot more then I could imagine in just 5 short months.

Keep on keeping on!

Here is a project I recently started to create, it is an updated version of one of my old, very poorly coded app ideas.

https://github.com/Domthegrom/Teachon