Master View Detail is our core section type. And it is used to display master view ( list of items ) and then with a 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.
Let's go step by step and explain all the configuration options.
We can separate the configuration options in 4 types
- Basic configurations
- Categories configurations - categorySetup
- Master configuration - listingSetup
- Details configurations - detailsSetup
- Form configurations - form
{
"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
- "category_first" - If you want to show category first - The value can be true or false.
- "showCategoryFilter" - If you want to show
- "isRoot" - if this is the root section
- "listStyle" - Choose how you want to display the categories (You have 3 choices: grid, grid2, list)
- "goDirectlyInDetails" - If you have only one item to show and to display only the detail from that item, just set this value to true
- "objectIdToShow" - The id from the firestore document that you want to be shown if goDirectlyInDetails is true
- The standard elements (only icon and name )
Categories configurations
"categorySetup" : {
"category_style" : "",
"data_point" : "",
"fields" : {
"description" : "",
"image" : "",
"title" : ""
}
}- "category_style" - what kind of listing style you want to be listed your categories
- "data_point" - the name of the collection that you want to get your data
- "fields" -which fields have to be shown into the category container and from where to get that data
Master configurations
"listingSetup" : {
"collection_key" : "",
"data_point" : "",
"fields" : {
"actionButton" : "",
"numReview" : "",
"rating" : "",
"showRating" : true,
"description" : "",
"image" : "",
"subtitle" : "",
"subtitleFunctions" : "",
"title" : ""
}
}- "collection_key" - Key of the object in firestore that represents the collection this object appears in.
- "data_point" - from which collection to get the data
- "hasFeatures" - if you want to display the newest items in the slider, turn this value to true
- "listing_style" - Choose how you want to display the categories (You have 3 choices: grid, grid2, list)
- "showCategoryFilter" - If you want to display a category tab, on the top below the navigation bar set this item to true
- "fields" : {
- "actionButton" - Text of the action button
- "description" - description of the item
- "numReview" : -field for the number of reviews,
- "rating" : - the rating,
- "showRating" : - set it to true or false,
- "image" - an image of the item
- "subtitle" - show the subtitle of the item
- "subtitleFunctions" - If the subtitle is kind of a price
- "title" - a title of the item
"detailsSetup" : {
"actionButton" : "",
"actionButtonWhenActionDone" : "",
"cartCODAvailable" : true,
"collections" : [ "", "" ],
"descriptionTitle" : "",
"isShopping" : true,
"photosTitle" : "",
"shareButton" : "",
"showPhotos" : true,
"callButton" : "Call",
"chatButton" : "Chat with the owner",
"deleteButton" : "Delete",
"editButton" : "Edit",
"reviewButton" : "Write a review",
"fields" : {
"description" : "",
"rating" : "rating",
"review" : "review",
"shareLink" : "url",
"descriptionFunctions" : ",",
"image" : "",
"photos" : "",
"price" : "",
"priceFunctions" : "",
"shareLink" : "",
"subPrice" : "",
"subPriceFunctions" : "",
"subtitle" : "",
"subtitleFunctions" : "",
"title" : "",
"titleFunctions" : "",
"video" : ""
}
}- "actionButton" - Text of the action button
- "actionButtonWhenActionDone" - The text of the action button when the action is done
- "cartCODAvailable" - Do we have Cash On Delivery Available - in effect only if isShopify is false.
- "collections" - What collections or how many variants
- "callButton" : -Add this button if in the description of the item you want to have button for making a call,
- chatButton" : - This button if for chatting with the owner of the item,
- "deleteButton" : If you are the owner of the item, then you will see the delete button for deleting the item,
- "editButton" : If you are the owner of the item, then you will also see the edit button for editing the item,
- "reviewButton" : Button for leaving athe review of the item,
- "descriptionTitle" : The title of the description section
- "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"
"formSetup" : [ {
"key" : "title",
"label" : "Title",
"type" : "input"
}, {
"key" : "description",
"label" : "Description",
"type" : "textArea"
}, {
"key" : "phoneNumber",
"label" : "Phone",
"type" : "input"
}, {
"key" : "image",
"label" : "Image",
"type" : "image"
}, {
"key" : "eventLocation",
"label" : "Location",
"type" : "map"
}, {
"key" : "photos",
"label" : "Photos",
"type" : "photos"
}, {
"key" : "category",
"label" : "Category",
"type" : "checkBox"
} ],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"
}