Dear friends, our team operates under full capacity during these unprecedented times of COVID-19 outbreak. See full statement.

To apply for a special quarantine discount for services or an extended trial license without watermark, please write us.

Working With Quote Services In LiveArt HTML5

Unlike many other plugins, LiveArt HTML5 provides a flexible way to build your own quoting in an online product designer. Any option or design element that is added to the working area will affect the quote if it is required by the business rules of your solution. This article describes in brief how quote services work and provide insight for integration teams.

Read more

The quote service is located in the main config.json file. Open the file and locate the line, which designates the endpoint that will handle the quote

"getQuoteUrl": "http://localhost/services/getQuote.php",

Since you would prefer to obtain a quote dynamically, based on selections of the user, you would place some sort of dynamic script into getting Quote service. Referring to a static file, for example, would always return the same price and totals no matter what the selections are and you would not want that.

Once the endpoint is set, use the Fiddler tool, Inspector, or Firebug to see what is being sent to the endpoint when the quote is requested. You would typically get the following JSON structure in the POST request as a “data” variable.

{
  "product":{ "id":"11", "color":"#FFF", "colorName":"White" },
  "locations":[
    {
      "name":"Front",
      "colors":2,
      "colorsList":["#4682b4","#000"],
      "designedArea": 384.60,
      "designedAreaRect": 480.50,
      "objects":[
        {
          "type":"txt",
          "designedArea":126.97,
          "colors":1,
          "colorsList":[
            "#4682b4"
          ]
        },
        {
          "type":"svg",
          "designedArea":258.63,
          "colors":1,
          "colorsList":["#000"]
        }
      ],
      "objectCount":2,
      "letterings":1,
      "images":1
    }
  ],
  "quantities":[{"size":"XS","quantity":1}],
  "namesNumbers":[]
}

While the product ID, color, or location name would be an obvious variable, some of them require explanation, as below:

  • colors - the number of colors used in design; this value is very usable for screen printing quotes. A “-1” value would mean the design contains a photo or too many colors;
  • colorsList - is a list of hex values for each used colors;
  • designedArea - area in units (inches, feet, any kind you designate as part of Product JSON), occupied by design. The designArea is a sum of designAreas for each of the elements.
  • designedAreaRect - an area of a rectangle, in units, occupied by all design elements;

Now once you obtain all these variables, LiveArt HTML5 would expect the following reply from you, the example goes below:

{
  "prices":[
    {"label":"Item Price", "price":"$29"},
    {"label":"Decoration", "price":"$15"},
    {"label":"Discount 0.25%", "price":"-$0.11"},
    {"label":"Total", "price":"$43.89", "isTotal":true}
  ]
}

All in all, you have just got little into Get Quote request, it’s structure, and the way it’s expected to work with LiveArt HTML5. Make sure to check our PHP sample code including reading variables and calculating color-based decoration fees.

Add comment

Loading