The shopping functionality is available in the following apps

  1. Restaurant app
  2. Shopping app

And both of them follow the similar / same data structure of the products and their prices. 


We have implemented / followed the Shopify variants and options system. 

Learn about it here: https://help.shopify.com/manual/products/variants


Each product has Options and Variant. 


Options

Options are array of options, and each options has name and array of values. 


So, lets imagine we are selling sun glasses. 

The sunglasses can have the following options: color, UVprotection,  lensWidth. 

And each of them can have the following values


color: red, black, white, green

uv-protection: yes, no

lensWidth: 66, 70


So with the things declared above our options in JSON format will look like this

"options":{
        "option1":{
          "name":"Color",
          "values":["Red","White","Green"]
        },
        "option2":{
          "name":"UV-Protection",
          "values":["Yes","No"]
        },
        "option3":{
          "name":"lensWidth",
          "values":["66","70"]
        }
      },


if this is general schema for all your product you can put it in "src/config/firestoreschema.js" - but it is not required since you can change the default options there. 


So when new product is inserted through the admin panel, you will have the options there. And you can modify them to suit your needs. 


Each product should have the options element 

Options


When you click on options, and some of the options, you get the details of single option, and you can modify existing or add new values.



Variants

In the above example we had the following options for the sunglasses product


color: red, black, white, green

uv-protection: yes, no

lensWidth: 66, 70


With this options we can build 4 * 2 * 2 = 16 variants of product


Example

  1.  Red, With UV Protection, 66 mm - We sell it for 20$
  2.  Red, No UV Protection, 66 mm - We sell it for 22$
  3.  Green, with UV Protection, 60 mm - We sell it for 40$

etc...


So we need to define prices for each of the variants we have ( not all variants are required - at leas one is necessary ) 


Based on the examples above our JSON structure for single variant will looks like this

{
      "option1":"Red",
      "option2":"Yes",
      "option3":"66",
      "price":20,
      "title":"Red, With UV Protection, 66mm"
    }


But thanks to the Firebase Admin Panel, each product will came with 1 variant inside by default. You job will be to add more and modify existing. 


Each product will have "Variants" colleciton


And you can add / modify / delete variants. 



Summary 


We have taken what we think is good and extendable model. You can have as much as you want options and variants so the solution can work for every situation. 


And this is how the options / variants and their prices are displayed on the app side