Example: Shopping Basket

Use

Shopping baskets are used in several SAP Internet Application Components (IACs). In general, the Web shopper first adds items of interest to the shopping basket, but can later review basket contents, delete items or modify quantities. Eventually, the shopper commits the transaction, and a sales order or purchase requisition is created.

To implement a shopping basket correctly, you should follow some guidelines. Since items are added to the shopping basket using a POST operation, the shopping basket with the updated contents is cached at the Web browser. Going back and forth using the Web browser's Back and Forward buttons displays the page from the Web browser cache. However, the displayed items in the shopping basket do not reflect the contents at SAP transaction level (where the items are kept in a data structure such as an internal table).

Process

The following scenario shows that the Web browser contents and the SAP system shopping basket contents are not the same:

1. Add two items to the shopping basket

2. Change the quantity of item 2 ( Change Quantity).

3. Delete item 2 ( Delete Item).

4. Go back, using the browser's Back button

5. Create the sales order

Changing the quantity and deleting an item are executed by sending an OK code back to the transaction. The transaction then changes the internal data structure representing the shopping basket contents and sends a display of the modified contents to the transaction screen. The Internet Transaction Server (ITS) then uses the appropriate HTML template to create an HTML page with the current shopping basket contents.

Using the Back button in the browser will not be propagated to the transaction since the page is retrieved from the Web browser's cache. This is because the page to which the user navigated was generated using a POST operation.

However, you cannot use a GET operation, since it will unintentionally repeat the previous operation. If, for example, the previous operation had added an item to the shopping basket, and the user navigated back one step, another item would be added to the shopping basket.

To implement the shopping basket correctly, you should always use the items currently displayed in the Web page, even though this page may have been retrieved from the Web browser cache. Because of the difference between the shopping basket contents displayed on the page and those maintained in SAP system internal data structures, the page contents should always be transferred back to the SAP transaction.

This, however, requires that the page contains all information needed to create the sales order or purchase requisition. Besides pure display information (such as the long text for a material), the page must also contain the material number, even if it is just a technical key to access the material information.

If this technical information is of no interest to the user, you can use hidden HTML fields to store the information.

<FORM ACTION="`wgateUrl()`" METHOD="POST">
<INPUT TYPE="hidden" NAME="ITEM_COUNT"
                VALUE"`item-MATNR.DIM`">
<TABLE>
`REPEAT WITH I = 1 to item-MATNR.dim`
<INPUT TYPE="hidden" name="ITEM-MATNR[`i`]"
                VALUE"`item-matnr[i]`">
<TR>
<TD>
<INPUT TYPE="TEXT" NAME="ITEM-QUANTITY[`i`]"
                VALUE="`ITEM-QUANTITY[i]`"
</TD>
<TD>
`ITEM-DESCRIPTION[i]`
</TD>
</TR>
`END`
</FORM>
         

In the above example, the shopping basket contents are displayed on the transaction screen using STEP-LOOP. The step loop contains the fields ITEM-MATNR, ITEM-QUANTITY, and ITEM-DESCRIPTION. The HTMLBusiness REPEAT statement copies the current contents of the step loop to an HTML table.

Besides the material long text (field ITEM-DESCRIPTION), and the quantity (field ITEM-QUANTITY), the Web page also posts back the current number of items (in the screen field ITEM_COUNT) and the material number for each line item (contained in ITEM-MATNR). These additional fields are hidden because they are of no concern to the user.

Whenever this generated Web page is posted back to the transaction screen, it overwrites the contents of the shopping basket currently on the SAP system screen. The new number of items will be transferred to the field ITEM_COUNT.