Template requirements
The chart is a separate JavaScript module that needs two things in the template: acanvas element and two script blocks.
The canvas element
The plugin is written in the Solid.js framework and draws the chart into acanvas element. You need to provide this element in the template.
canvas element itself, overwriting the values in the markup. The calculation is based on the style of the surrounding element. So give the container a height, otherwise the chart stays invisible.
The two script blocks
The first block loads the module, the second configures and starts it.The sample template
The template covers all three steps of the ordering process and additionally shows a summary of all of the customer’s reservations.Sample template for the ordering process
Sample template for the ordering process
The three steps of the ordering process
The module has three page states. You query which one currently applies with the three section tags of the same name. The form fieldwsbp_act advances to the next step.
The form fields the module evaluates:
The quantity input in the first step has an
onblur attached that reloads the page via ws_AJAXloadTemplate. Only this makes the chart and tier price update while the customer changes the quantity.The two tags ~WS-DisableAmpersandLinkEncoding~ and ~WS-EnableAmpersandLinkEncoding~ turn ampersand encoding in the link off and back on. Without them, the & in the appended amount parameter becomes & and the call fails.Configuring the price tier chart
You pass the parameters as an object tonewBulkBestPrice. Parameters with an asterisk are required, all others are optional.
In the
text field, only the HTML entity for the euro sign can be substituted. For any other currency symbol, use the Unicode value, € in the example.The counter in the dataBar array
The array needs commas between the entries, but none before the first one. The example solves this with a counter:DC-Counter1_inc increments on every iteration, and the negated block {!DC-Counter1(1)} inserts the comma everywhere except in the first iteration. You can use the same pattern for any other JSON structure in the template.
The NO_PARSING block in the reservation list
The reservation list contains a construct that looks confusing at first glance:PR-AdvData expects a product index as a parameter, which here only comes from ~E-BP_ProdIndex~ at runtime. Without NO_PARSING, the parser would evaluate the half-finished tag immediately and fail. The NO_PARSING brackets protect the two halves so that only the assembled expression gets parsed.
Other E-BP tags
The example uses only some of the available tags. The following don’t appear in it and are added here.
In addition,
~E-BP_Begin~ and ~E-BP_End~ accept a format parameter, for example ~E-BP_Begin(%d.%m.%Y)~. Without a parameter, they output the default format.
The address fields
WithinE-BP_BillingAddress and E-BP_DeliveryAddress, the example shows only first and last names. The complete address is available. This list is added here.
Pitfalls
Three things stand out when you rebuild the example. All three are added here because they aren’t in the previous documentation.E-BP_NewCompletePrice and E-BP_NewCompleteSaving exist only as single tags, not as sections. They return the sum of all previous reservations plus the current process.E-BP_BillingAddress and E-BP_DeliveryAddress are pure switches to the respective address record. They are always true, and a negated block {!E-BP_BillingAddress} has no effect. To check whether an address exists at all, use E-BP_HAS-ADDRESS or E-BP_HAS-DELIVERY-ADDRESS.The module doesn’t care about the capitalization of tags.
~E-BP_CurrentPrice_Format~ and ~E-BP_CurrentPrice_format~ are the same tag, which is why the inconsistent spelling in the example has no consequences.Campaign states
Three section tags query the status of the campaign. They are mutually exclusive.
In the example,
E-BP_ACTIVE wraps the order button. Keep it that way, otherwise after the campaign ends the customer sees a button that leads nowhere.
Compared with the previous documentation, fourteen places have been corrected: the three parameter names
progressLineWidth, progressLineColor, and totalMount in the configuration table, two typos in sample texts, an unclosed p element, a superfluous table end tag, two p elements that contained block elements, the orderid field that was a visible input field, two unformatted price tags in the display, a comment that described a checkbox where there is a hidden field, and the English subheading “Summary”.