Master View Detail is our core section type. And it is used to display master view ( list of items ) and then with click on some it opens the details for the selected item. 


But it also has different scenarios, when categories are the first to show, then the master then the detail. 

Also, there are use cases when this section directly displays the details view. 


Lets't go step by step and explain all the configuration options. 


We can separate the configuration options in 4 types


  1. Basic configurations
  2. Categories configurations - categorySetup
  3. Master configuration  - listingSetup
  4. Details configurations - detailsSetup



{
  "category_first" : true,
  "icon" : "MdRestaurantMenu",
  "isRoot" : true,
  "listStyle" : "grid",
  "name" : "General",
  "goDirectlyInDetails":false,
  "objectIdToShow":"xxxxx"
  "categorySetup" : CONF_SETUP,
  "listingSetup" : CONF_SETUP,
  "detailsSetup" :  CONF_SETUP
}



Basic configurations

  1. "category_first" - If you want to show category first - The value can be true or false.
  2. "showCategoryFilter" - If you want to show 
  3. "isRoot" - if this is the root section
  4. "listStyle" - Choose how you want to display the categories (You have 3 choices:  grid, grid2, list)
  5. "goDirectlyInDetails" - If you have only one item to show and  to display only the detail from that item, just set this value to true
  6. "objectIdToShow" -  The id from firestore document that you want to be shown if goDirectlyInDetails  is true
  7. The standard elements  (only icon and name ) 


Categories configurations 

    

 "categorySetup" : {
    "category_style" : "",
    "data_point" : "",
    "fields" : {
      "description" : "",
      "image" : "",
      "title" : ""
    }
  }


  1. "category_style" - what kind of listing style you want to be listed your categories
  2. "data_point" - the name of the collection that you want to get your data
  3. "fields" -which fields has to be shown into the category container and from where to get that data  

             



Master configurations

        

"listingSetup" : {
    "collection_key" : "",
    "data_point" : "",
    "fields" : {
      "actionButton" : "",
      "description" : "",
      "image" : "",
      "subtitle" : "",
      "subtitleFunctions" : "",
      "title" : ""
    }


  1. "collection_key" - Key of the object in firestore that represents the collection this object appears in.
  2.  "data_point" - from which collection to get the data
  3. "hasFeatures" - if you want to display the newest items in the slider, turn this value to true
  4. "listing_style" - Choose how you want to display the categories (You have 3 choices:  grid, grid2, list)
  5. "showCategoryFilter" - If you want to display a category tab, on the top below the navigation bar set this item to true
  6.  "fields" : {

                - "actionButton" - Text of the action button,

                - "description" - description of the item

                - "image" - image of the item 

                - "subtitle" - show the subtitle of the item

                - "subtitleFunctions" - If subtitle is kind of a price 

                - "title" - title of the item

            

Details configurations

    

"detailsSetup" : {
    "actionButton" : "",
    "actionButtonWhenActionDone" : "",
    "cartCODAvailable" : true,
    "collections" : [ "", "" ],
    "descriptionTitle" : "",
    "isShopping" : true,
    "photosTitle" : "",
    "shareButton" : "",
    "showPhotos" : true,
    "fields" : {
      "description" : "",
      "descriptionFunctions" : ",",
      "image" : "",
      "photos" : "",
      "price" : "",
      "priceFunctions" : "",
      "shareLink" : "",
      "subPrice" : "",
      "subPriceFunctions" : "",
      "subtitle" : "",
      "subtitleFunctions" : "",
      "title" : "",
      "titleFunctions" : "",
      "video" : ""
    },
  }


  1. "actionButton" - Text of the action button
  2. "actionButtonWhenActionDone" -  The text of the action button when the action is done
  3. "cartCODAvailable" - Do we have Cash On Delivery Available - in effect only if isShopify is false.
  4.  "collections" - What collections or how many vari
  5. "descriptionTitle" : The title of the description section
  6. "fields" : {
         - "description" : "description",
         - "descriptionFunctions" : ",",
         - "image" : "image",
         - "photos" : "photos",
         - "price" : "price",
         - "priceFunctions" : "round,toCurrency~USD,prepend~Price: ",
         - "shareLink" : "link",
         - "subPrice" : "price",
         - "subPriceFunctions" : "multiply~{qty},round,toCurrency~USD,prepend~/per peace ,append~ for {qty} item/s.",
         - "subtitle" : "calories",
         - "subtitleFunctions" : "prepend~Calories: ,append~ kCal",
         - "title" : "title",
         - "titleFunctions" : "trim:40",
         - "video" : "video"






Summary


So the overall Master View details configuration looks like this


{
  "categorySetup" : {
    "category_style" : "grid2",
    "data_point" : "",
    "fields" : {
      "description" : "description",
      "image" : "image",
      "title" : "title"
    }
  },
  "category_first" : true,
  "detailsSetup" : {
    "actionButton" : "ADD TO CART",
    "actionButtonWhenActionDone" : "PRODUCT ADDED",
    "cartCODAvailable" : true,
    "collections" : [ "variants", "ingredients", "photos" ],
    "descriptionTitle" : "Description",
    "fields" : {
      "description" : "description",
      "descriptionFunctions" : ",",
      "image" : "image",
      "photos" : "photos",
      "price" : "price",
      "priceFunctions" : "round,toCurrency~USD,prepend~Price: ",
      "shareLink" : "link",
      "subPrice" : "price",
      "subPriceFunctions" : "multiply~{qty},round,toCurrency~USD,prepend~/per peace ,append~ for {qty} item/s.",
      "subtitle" : "calories",
      "subtitleFunctions" : "prepend~Calories: ,append~ kCal",
      "title" : "title",
      "titleFunctions" : "trim:40",
      "video" : "video"
    },
    "isShopping" : true,
    "photosTitle" : "Product Images",
    "shareButton" : "Share this recepie",
    "showPhotos" : true,
    "videoButton" : "View Video"
  },
  "icon" : "MdRestaurantMenu",
  "isRoot" : true,
  "listStyle" : "grid",
  "listingSetup" : {
    "collection_key" : "collection",
    "data_point" : "",
    "fields" : {
      "actionButton" : "BUY",
      "description" : "description",
      "image" : "image",
      "subtitle" : "price",
      "subtitleFunctions" : "roundOn,toCurrency~USD",
      "title" : "title"
    },
    "listing_style" : "list"
  },
  "name" : "General"
}