Tutorial: Creating an Advanced Offering from scratch

Creation of a whole Advanced Offering to give a better understanding of the whole workflow from start to finish

Idea

We want to make a Quoting Portal where we sell a variety of different planks for various uses. The ability to choose the type of plank from an image would be nice. It should be possible for customers to choose length and quantity for each plank.

You can check out the finished result here (try placing an order!)

https://my-quoting-portal.smidyo.com/o/plank-sales

Price calculations

To know how to build up our Offering, we first have to know how the price is constructed. A good idea is to set up a list on what affects the price, and in what way.

  • Plank length
    • A Number input
    • Max 2 decimal places (we enter length in meters and centimeter accuracy)
  • What type of plank the customer wants
    • Different planks --> Different price per meter 
    • We want the selection to be visual, e.g. selected through a picture of the plank type.
  • Extra cost for making a plank shorter
    • If plank length ≠ the max length of the plank --> Extra cost
  • Quantity
    • A Number input
      • 0 decimal places, we only want integers for the quantity
    • Multiplies the total cost of one plank in the sub-rows

Creating an Advanced Offering

To start off, we create a new Advanced Offering that we call "Plank Sales" and give it the subslug "plank-sales". This means it will be available at the URL "/o/plank-sales" in your Sales Domain.

What we need is:

  • A Table for the plank types
    • Meter price for each plank type
    • Max length for each plank type
    • Image for each plank type (for select with image)
    • Name for each plank type
      • Let's also include the dimensions in the name
    • The amount of planks left in stock
  • A Form Pipeline to gather info from the customer
    • Asks what plank customer wants using a select with image
    • Asks what length of the plank customer wants using number input
    • Asks quantity of the specific plank using a number input
  • A Yield Pipeline to calculate the price
    • Get all the info we need for the calculation from the plank type Table
    • Compare the max length of a plank with the length the customer wants with a process pipeline
      • If plank length ≠ max length --> Extra cutting cost
    • A Process Pipeline to calculate the plank price
    • Output all the data we need to construct the final price in our Offering

Creating a Table

To start off, we create a Table to store plank names, max lengths etc.

Let's create columns for all the relevant data for each plank. It could look like this once done:

Next step would be to insert all the different planks we would sell in our shop.

Once done inserting all data it will look like this:

Creating a Form Pipeline

We will now create a Form Pipeline with which the customer will interact and give us information that we need to give them a price. 

Element Blocks represent each part of the form that the customer will enter their info into. The Element Blocks we will use are:

  • Select with image for Planks
  • Number input for Length
  • Number input for Quantity

To start off we create a Form Pipeline and call it "Plank Sales"

We know the Element Blocks we need, so let's create them first.

Let's start with Select with Image. In order to show the plank types from our Table, we need a Table Column Source Block which will take the columns from our "Planks" table and show them in our Select with Image block.

Insert this Source Block above the Select block, and connect as follows:

Number inputs

It's difficult to sell planks if the max length you can make is 2,5m and your customer asks for a 5m plank. So let's prevent that.

We will now make use of the "max-length" value in the "Planks” table and use it as the "max" value in our length input. 

However, first, we need to get additional information about the specific plank we selected. To get this information, we can use the "Table Cells" Source Block. Connect the "output" from the selection into the "row-name" input of that Source Block.

We can now connect the "max-length" value to the "Default Number" and "Max" input of the Number Input. This will set the length to the maximum amount by default (as most likely, most customers will want to order a full-length plank), and prevent the user from entering a number greater than that.

We also want to set the "Min", "Suffix" and "Decimal Places" inputs. These can be set using an inline value, by clicking on the + button.

For the Quantity block, we can use the "Stock" value from our table as the "Max" input, since that's the most we can sell at that time.

Outputs

A Form Pipeline's outputs should consist of what we wish to use later to perform the price calculation in the Yield Pipeline.

So let's drag all pipeline values we will need to the Form Pipeline output section. We will need the "plank-row-name", "plank-length", and "quantity". 

Creating a Yield Pipeline to Process our data

We create a new Yield Pipeline with the same name as our Form Pipeline. Its inputs will have the same names and Data Types as the Form Pipeline outputs. 

To start with, we want data about the plank a customer has chosen. Just as we did in the Form Pipeline, we can use the Table Cells Source Block. Connect "plank-row-name" to its "Row Name" input.

Process Pipeline, Compare

We can now create a Process Pipeline named "Compare Plank Length" that compares if 'plank-length' is less than 'max-length' of that particular plank - if it is, we put an additional cost in our Sub-rows.

This means our Process Pipeline will have one output of Data Type "boolean".
(True: add extra cost / False: No extra cost).

Process Pipeline, Multiply

We need a process pipeline that calculates the price for one plank by using 'meter-price' and 'length' and outputs a 'plank-price'.

Since we inserted meter-price as €/m and length in meters, we can straight away use a Math Basic with multiply for the calculation.

Yield Pipeline

Now that we have created our two Process Pipelines that we needed, we can insert them into our Yield Pipeline and connect everything there.

We can send 'give-extra-cost' which is a boolean to our Yield Pipeline output, which we will later use in the sub-rows of our Offering.

We also output the 'plank-price', which we will also use in the Offering's sub-rows.

Yield Pipeline Outputs

Outputs in our Yield Pipeline should contain:

  • Everything needed for price calculation in sub-rows
    • 'plank-price' which is price for one plank
    • 'give-extra-cost' boolean which will add an additional cost if the plank is cut
    • 'quantity' which will multiply the previous values in the sub-rows
    • 'plank-name' which will be shown before plank price 
  • Everything needed for Quote Info (what is shown in the Quote / "cart")
    • 'plank-length'
    • 'meter-price'
  • Everything needed to complete the Order Steps (in the next section)
    • 'stock'
    • 'plank-row-name'

Order steps

To be able to update the stock after an order, we create a 'Subtract' Process Pipeline that has two inputs, Stock and Quantity, and outputs the updated stock. It's built up similarly as as Plank Price Calculator, but we use subtract instead of multiply. We add it to our Order steps and then update the stock as seen below.

Form Pipeline for Quote Info

Before we go to Offering to connect everything and try our Quoting Portal to see if everything works, let's create another Form Pipeline. We can name it 'Plank Sales Quote Info'.

The inputs will be whatever is relevant to be shown in the Quote (the customer's "shopping cart"). These will come from our Yield Pipeline's outputs. We'll need:

  • plank-length
  • meter-price

That's the info that will be displayed to the customer that isn't shown in the sub-rows, but is good for a customer to know what they are actually ordering. As quantity and whether it's being cut or not will be visible in our sub-rows, so it would be unnecessary information for the Quote Info.

We add the two Element Block Number Outputs, and connect the inputs to these, and give them labels.

Finalizing our Offering

Now it's time to connect everything together in our Offering and hope for the best.

  1. Set the Yield Pipeline to "Plank Sales"
  2. Set the User Info Form Pipeline to "Plank Sales"
  3. Set the Quote Info Form Pipeline to "Plank Sales Quote Info"

We can now connect everything together. If names are the same for outputs as inputs, it should be no problems getting it puzzled together.

Sub-rows

Sub-rows are used to construct the final price of the offering, by letting the customer see the different subtotals that make up a final price. To be able to show a price, we need to build up sub-rows. We build it up like this:

  1. Title: from the Yield Pipeline output "plank-name"
    Value: add, from the Yield Pipeline output "plank-price" (the price for one plank)
  2. Title: "Cutting Cost"
    Value: add, 5 EUR
    Skip unless: Yield Pipeline Output "give-extra-cost" (this row will be skipped if this value is false)
  3. Title: "Quantity"
    Value: multiply, Yield Pipeline Output "quantity"

Let's test it out!

Once we have saved our Offering, we can go to our Quoting Portal to test it out to see if it works. 

 

Price calculation with max length of a plank:

 

Price calculation if it's not the max length:

 

And, if we add to the quote, we can see that our Quote Info is visible!

Further improvements

Everything is working as it should. There's a few things that could be improved though.

  • "Plank Sales" Form Pipeline could have two number outputs, one that states meter price for selected plank, and another number output that states how many are still in stock.
  • On our sub-rows we may want to change the first row containing the plank's price to something more descriptive like "Plank price", and instead change the whole title of the Quote Row to the type of plank.

Form Pipeline

To show price for each plank, and how many are still in stock, we add two number outputs after our Select with Image and its Table Cells Source Block.

These two will become visible once customer has selected a plank they want to buy.

Before selecting:

After selecting:

Sub-rows

Let's name our calculated Quote Row to have a more descriptive name, to make it easier to find in our Quote. This is useful if a customer decides to order multiple different plank types.

Do this by setting Title to "Dynamic Title...", and setting that to the "plank-name" YP output. We can then set sub-row 1's title to just "Plank price", as it's already in the title.

              


 

Overview 

This is how it would look like if we did visualise our whole Offering.