FlexWin (Method 1)

- Tips'n'Tricks — Order lines work-around

FlexWin does not currently have a DIBS tag for showing order information, such as the delivery address, ordered items, and the price of each item. However, if you know your way around JavaScript and XML, you can display that information in your own decorator.

The trick is to send the order information along to FlexWin in the parameters deliveryx, priceinfox, and ordlinex-y as described in the section "Parameters". In addition, you need four "new" parameters, which will tell your JavaScript just how many instances there is of each line (the x/y part of the parameter name), e.g., how many delivery lines there are. These extra parameters are only referred to from your own code, and have no effect elsewhere, so you may call them what you like. In the following implementation, we will use the following names:

• deliveryx: The number of delivery lines.
• priceinfox: The number of priceinfo lines.
• ordlinesx: The number of order lines (0-based).
• ordlinesy: The number of fields in each order line.

Please note, that you need to enable the return of all CGI variables in DIBS Admin under Ingration > Return Values.

Also note, that the order information is not available on the final receipt page of FlexWin.

The order

For this example, we will use the following order information:

• The delivery address is "Elmer Fudd, Main Street 100, 12300 Elsewhere". We will split the address into three delivery lines with an initial header line, i.e. four delivery lines.
• The price information merely contains the sum total of the purchase. So there is only one line of priceinfo.
• Elmer Fudd is ordering several pieces of home entertainment. Three TVs and two HiFi amplifiers. Each order line will contain the ID of the item, a description, the number of items ordered, and the price. In addition we will provide a header line. So the number of order lines is three, and the number of fields per order line is four. Please note, that the counter for order lines i 0-based, so the three order lines will be numbered 0 through 2. All the other counters start from 1.

The form

The idea is, that we will have an HTML form with all the necessary parameters for FlexWin as hidden fields. So the delivery lines are specified like this:

<input name="delivery1" value="Delivery address" type="hidden"/>
<input name="delivery2" value="Elmer Fudd" type="hidden"/>
<input name="delivery3" value="Main Street 100" type="hidden"/>
<input name="delivery4" value="12300 Elsewhere" type="hidden"/>

The price information one-liner is specified like this:

<input name="priceinfo1" value="3,317.00" type="hidden"/>

The order information matrix is composed like this:

<input name="ordline0-1" value="ID" type="hidden"/>
<input name="ordline0-2" value="Description" type="hidden"/>
<input name="ordline0-3" value="Number" type="hidden"/>
<input name="ordline0-4" value="Price (USD)" type="hidden"/>
<input name="ordline1-1" value="102" type="hidden"/>
<input name="ordline1-2" value="42&quot; Plasma TV" type="hidden"/>
<input name="ordline1-3" value="3" type="hidden"/>
<input name="ordline1-4" value="2,997.00" type="hidden"/>
<input name="ordline2-1" value="201" type="hidden"/>
<input name="ordline2-2" value="Amplifier" type="hidden"/>
<input name="ordline2-3" value="2" type="hidden"/>
<input name="ordline2-4" value="320.00" type="hidden"/>

Finally, we add the extra counter parameters:

<input name="deliveryx" value="4" type="hidden"/>
<input name="ordlinex" value="2" type="hidden"/>
<input name="ordliney" value="4" type="hidden"/>
<input name="priceinfox" value="1" type="hidden"/>

Again, please note that ordlinex is 0-based.

The decorator

Now comes the part, where we take the order information, and display it in FlexWin through our decorator. All parameters sent to FlexWin, are stored in hidden fields. So if we know the IDs of these fields, we can access them through JavaScript. Each ID is a concatenation of the string "cancelform_" and the parameter name. E.g. the value of parameter "delivery1" is stored in the hidden field with the ID "cancelform_delivery1". As the IDs indicate, the hidden fields are associated with the cancel button. So in the decorator, the JavaScript has to be located after the DIBS tag dibs:payment, which includes the cancel button. Using JavaScript we will construct the necessary HTML for the order information, and then insert it into a designated area in our decorator — a DIV tag.

Of course you can just have your JavaScript code write HTML directly. But in this example, we want to display the order information before dibs:payment. We do this by having an (almost) empty DIV tag before dibs:payment, and then having our JavaScript generate the order information and inserting it into the DIV tag.

The DIV tag must have an ID and a little content, so we just give it the ID "ordercontent" and a period as content:

<div id="ordercontent">.</div>

Now comes the JavaScript code, which generates the order information output. Most likely you will want to implement your own JavaScript code. This merely serves as an example on how to loop through the order information.

<script language="JavaScript" type="text/javascript">
<![CDATA[
var ordertext = new String;
ordertext = "";
ordertext += "<p><br /><b>" 
    + document.getElementById("cancelform_delivery1").getAttribute("value") + ":</b> ";
ordertext += document.getElementById("cancelform_delivery2").getAttribute("value");
ordertext += ", " 
    + document.getElementById("cancelform_delivery3").getAttribute("value");
ordertext += ", " 
    + document.getElementById("cancelform_delivery4").getAttribute("value")+ "</p>";
 
ordertext += "<table style=\"background-color:#dddddd\">";
for (x = 0; 
      x <= document.getElementById("cancelform_ordlinex").getAttribute("value"); 
      x++) {
    ordertext += "<tr>";
    for (y = 1; 
          y <= document.getElementById("cancelform_ordliney").getAttribute("value");
          y++) {
        ordertext += "<td";
        if (y == 3) { ordertext += " align=\"center\"" }
        if (y == 4) { ordertext += " align=\"right\"" }
        ordertext += ">";
        ordertext += document.getElementById("cancelform_ordline" + x.toString() 
            + "-" + y.toString()).getAttribute("value");
        ordertext += "</td>";
    }
    ordertext += "</tr>";
}
 
for (x = 1; 
      x <= document.getElementById("cancelform_priceinfox").getAttribute("value"); 
      x++) {
    ordertext += "<tr>";
    for (y = 1; 
          y < document.getElementById("cancelform_ordliney").getAttribute("value"); 
          y++) {
        ordertext += "<td></td>";
    }
    ordertext += "<td align=\"right\">";
    ordertext += document.getElementById("cancelform_priceinfo" 
        + x.toString()).getAttribute("value");
    ordertext += "</td>";
    ordertext += "</tr>";
}
ordertext += "</table>";
//alert(ordertext);
document.getElementById("ordercontent").innerHTML = ordertext;
]]>
</script>

All of this will result in the display of the order information as shown in this image:

In conclusion

We hope this little example gave you some ideas on how to implement your own solution. Through JavaScript you have a lot of freedom to arrange the order information as you like, and you can style it the way you like.