Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • Seller onboarding forms
  • Marketplace homepage
  • Listing details page
  • User account management
  • Recent purchases
  • On platform communication
  • Sellers transactions page
  • Favourites Page
  • Two sided reviews
  • What's up next?

Was this helpful?

  1. Templates
  2. Two sided marketplace template
  3. Introduction

Part II: Understanding what features are included in the marketplace template

In this tutorial we overview what features are included in the marketplace template. This is important to understand before you start to modify the template.

PreviousPart I: Installing and setting up the marketplace templateNextPart III: Customizing your marketplace frontend without coding

Last updated 1 year ago

Was this helpful?

Depending on which type of marketplace template you installed, there will be a different set of features to highlight. For instance, whilst rental marketplaces focus heavily on the features such as the duration a renter can use a providers property for, item condition tracking and so on, product marketplaces have more of a focus on shipping and logistics.

That being said, all marketplace templates include the following set of features.

Seller onboarding forms

Sellers, also known as "providers" all have to have a way to onboard new products, services or rental property to their marketplace. To test this out and upload your first property listing, click on the "List your property" option in the top right of the screen. This is shown below.

Note. Depending on which template you have implemented, the seller onboarding forms will be displayed in different locations. However, each full stack template will work in the same way.

After clicking on the List your property button, your sellers will get pulled through the the My Listings page. This page will be used to display all of their marketplace listings. From within here the seller can click on "Create Listing" to create a new listing. This is shown below.

Clicking "Create Listing" will bring up the seller onboarding forms. The seller can click "Get Started" in order to start the process of listing their first item.

Note. All of these onboarding screens are fully customizable from within Dittofi's visual development studio. You will be able to edit these with the same flexibility as coding but without having to write any code. We will come onto how to do this in later tutorials.

After the seller clicks "Get Started" they will then be able prompted to tell us something about their listing. As noted above, you will be able to switch out images, change the colors and copywriting on these forms using Dittofi's visual development studio. We will show you this later on.

Once the seller clicks next, they will be prompted to fill in some information about their listing. This includes:

A title for the listing

A location for the listing

Basic information about the listing

Again - this form can be customized later on for your specific use case.

Add photos to their listing

Assign a listing to a category

Sellers can group listings into a set of categories. Again, it is possible to create your own custom listing categories and sub categories at a later stage.

Give a listing description

Set a price for the listing

And finally, publish the listing.

Once the listing has been published, sellers will automatically get a popup that encourages them to input their bank details. This is so that they can start to receive payouts. By default the seller can dismiss this box, but they will not be eligable for payouts until they setup their account details.

Once the setter has setup their account, they will be able to publish their listing onto the marketplace. To do this, go to the listings page and click the three dots next to the listing and then click "Activate".

Marketplace homepage

The marketplace homepage will display your sellers listings. In the screenshot below you can see the example listing that I uploaded and activated in the previous step.

We will show you how to customize this page using Dittofi's visual development studio in later tutorials.

On this page, users have the option to search for listings using our keyword search, location based search and by selecting different categories to filter by.

Listing details page

When buyers or renters want to see more details about a listing, they can click on the listing. This will bring up the listing details page, as shown below.

On the listing details page, users are able to buy or rent a particualr listing. If they are renting out a property, they are able to set the date range that they're interested in booking for, by clicking the "Reserve" button or in the case of the product marketplace, "Buy now", "Make an offer" or "Add to Cart" options, this will allow the buyer to begin their transaction flow.

Lastly, buyers can also use the listing details page to review details about the seller and the property such as reviews, additional details, cancellation policies and so on.

User account management

Each buyer and seller on your marketplace is able to create a user profile. To get to the user profiles, buyers and sellers can click on the "Account" button, as shown below.

After this, they will be taken through to an Account page. From inside here, users are able to reach separate pages where they can input information for their Personal info, Login & Security and Payments & Payouts.

In this example we can click on the Personal info box and this will bring up the Personal profile page. From there, users are able to create user profiles.

Note. User profiles will propgate throughout the entire application. For example, once added users will be able to see these on their listings pages.

Users can also manage their passwords and deactivate their account from the Security page, as shown below.

Finally, users are able to manage their payments and payouts through the Payments & Payouts page, as shown below.

Recent purchases

If we create a new account on the marketplace, we can sign up to the buy side of the marketplace. After creating a new account on the buy side, we can then purchase a product on the marketplace.

In my case, I am going to pay to stay in the canal boat for one night.

Once the buyer clicks the pay button, they will automatically be redirected back to the homepage of the their marketplace applicaiton. From here, the buyer can click "Trips" from the dropdown to display a list of upcoming trips.

The upcoming trips (or past purchases) are then displayed on the Recent Purchases page like so.

Buyers are able to click into the booking in order to review a specific transaction, review additional information about the trip, message the seller, get a PDF receipt of the transaction and so on. An example of this is shown below.

On platform communication

Dittofi's marketplace templates also all come with a fully functional on platform chat feature. This allows buyers and sellers to be able to send messages directly to each other about a transaction.

Below is an example of the chats page for our canal boat example. You will notice that the buyer in this case is messaging the seller.

Sellers transactions page

On the sell side of the marketplace, the transaction that we put through in the last section is represented to the seller as a pending transaction. This is viewable on the reservations page and is shown in the screenshot below.

Sellers can click the "View" button to view the transaction.

Clicking "View" will pull the seller through to a screen where they can view details of the transaction. This is similar to the buyers transactions details view that we saw in the earlier.

On this page, the seller has the option to either accept or cancel any transaction that is in a pending status. The marketplace admin can also accept or cancel the booking. The marketplace admin's accept or cancelation has higher privileges to either the buyer or the seller.

Once the transaction has been accepted it will move to an upcoming state and the buyer will be notified. Then, once the transaction has taken place e.g. a product was delivered to a client or the renter has stayed at the property, the transaction will move to a past state. As shown below.

Favourites Page

Buyers can share and favourite individual listings. To do this, there are two buttons on the top of each listing, as shown below.

Listings that are favourited will be saved to the favourites page. On the rental marketplace template, this page is called "Wishlists" and can be found under the menu at the top of the page.

An example of the Favourites (Wishlists) page is shown below.

Two sided reviews

Once the transaction has complete, both the buyer and the seller has the option to review each other. To view this, buyers and sellers can go to the past trips and then click "Review" as shown below.

Reviews can incorporate star rating and text rating by default however you can also add picture or video reviews. The screenshot below gives an example of the default star rating on the rental marketplace template.

Once the reviews have been submitted, the listing, the seller profile and the buyer profile will update with new reviews. An example of how this is displayed on the lising profile is shown below. Note that the star rating on the listing is the average of all the star ratings.

What's up next?

You should now try signing up to your marketplace and creating a test listing as a seller. Once you've successfully listed an item, try taking the point of view of the buyer and make a transaction.

Once you fully understand how the marketplace works and the features that are on offer move to the next tutorial where we will go over how you can quickly customize your marketplace.

Click List your property to lst your first property
The my listings page, sellers can click "Create Listing" to create a new listing.
Sellers, create a new listing!
Sellers, tell us about your listing!
Sellers can title for their listing
Sellers enter where their listing is located
Sellers can add more information about their listing
Sellers can add photos to their listings
Sellers can create listing categories
Sellers can set listing descriptions
Sellers can set a price for the listing
Sellers can publish their marketplace listing
Seller is prompted to setup their bank details.
Sellers can activate new listings.
Homepage of the marketplace
Buyers / renters can get more information about the listing on the listing details page.
Buyers and sellers can click on the "Account"
Personal info page
Users can manage their passwords from the Security page
Users can manage their passwords payments and payouts from the Payments & Payouts page.
Pay to stay in the canal boat for one night.
Click "Trips" to view a list of upcoming trips.
Upcoming trips
Sellers can review a recent transaction
Example of a buyer messaging a seller using on platform communciation.
The sellers reservations page
Sellers can click the "View" button to view past transactions.
The seller can view the transaction details page.
Transactions can be in Pending, Upcoming, Past and Cancelled states.
Buyers can share and favourite different listings
Buyers can navigate to the listings that they have favourited
Example of a favourites page for Canal Hub
Buyers and sellers can click "Review" to review a past transaction.
Addng a star review for a past transaction.