wCart Tutorial part 5. Add Session and Arrays to the Template

[ben]

A. Introduction

This is where the fun starts. If you have not read the Introduction to this Tutorial, please do so now so that you can be acquainted with Sessions and Arrays. Continuing with our template…

B. Create the Session Storage

1. To add a Session, right click App (1), select State Management (2) and click on Session Storage (3).

   

2. Select Session Storage (1), set the Session ID (2) and click Define Session Storage Items (3).

   

3. In the pop-up, right click sessionStorage (1) and click on Add Object (2)

   

4. Name the object cart

   

5. Create the cart items as a Keyed Array by right clicking cart (1) and clicking on Add Keyed Array (2)

   

6. Name the Keyed Array items

   

7. We now add our 3 variables for product name, price and quantity. Right click items (1) and select Add Variable (2) and give the variable the name of product. Repeat for price and qty ensuring that the last 2 will have a type of number.

   

8. This is the end result

   

9. Right click sessionStorage (1) and click on Add Object (2). This will be our subtotal object.

   

10. And name it subtotal (1)

    

11. Create an object for Product ID’s (1) and save the parameters (2).

    

C. Create the Cart Array

1. We will now add an array for our cart object. Right click Session Storage Manager (1), Add After (2), Data (3) and Array (4)

   

2. With Array selected (1), give the array an identifiable ID (2) and select the lightning bolt (3)

   

3. Under Session Storage Manager (1) select cart (2) and click on Select (3) to apply the binding

   

4. This is to update the Session when updating the Array. Make sure that Array (1) is selected, click on Dynamic Events (2) and Value Updated automatically appears. Click the Action button (3).

   

5. In the pop-up, select Sessions Storage Set (1), click the plus sign (2), select session.set (3), click on the Name selector (4) and select cart (5). You may need to do 4 and 5 twice!! because the first attempt does not work.

   

6. This is where I get tangled up. It’s most likely me. The way that I untangled myself was to go into Code view and change
   <dmx-array id="arrCart" dmx-bind:items="session.data.cart" dmx-on:updated="session.set('cart',,{})"></dmx-array>
   to
   <dmx-array id="arrCart" dmx-bind:items="session.data.cart" dmx-on:updated="session.set('cart',items,{})"></dmx-array>

D. Create the Subtotal Array

1. We now add the Array for Subtotal by right clicking arrCart (1), Add After (2), Data (3) and Array (4).

   

2. With Array still selected, give the array an ID (2) and select the lightning bolt (3)

   

3. In the pop-up, choose subtotal (1) and Select (2) to apply the binding.

   

4. So that the Session is updated when the Array value changes, with the Array (1) still selected, we click on Dynamic Events (2) and Value Updated automatically appears. Click the Action button (3).

   

5. In the pop-up, select Sessions Storage Set (1), click the plus sign (2), select session.set (3), the name selector (4) and cart (5). You may need to do 4 and 5 twice!! because the first attempt does not work. Click the lightning bolt (6) to enter the value.

   

6. In the pop-up select items (1) under the Subtotal array and Select (2) to apply the binding.

   

7. Click Select (1) to save the Action

   

E. Create an Array for the Product ID

1. To add the Array for product ID, right click arrSubtotal (1), Add After (2), Data (3) and Array (4).

   

2. With the Array (1) still selected, give the array an ID (2) and select the lightning bolt (3)

   

3. In the pop-up, choose pid (1) and Select (2) to apply the binding.

   

4. So that the Session is updated when the Array value changes, with the Array (1) still selected, we click on Dynamic Events (2) and Value Updated automatically appears. Click the Action button (3).

   

5. In the pop-up, select Sessions Storage Set (1), click the plus sign (2), the name selector (4) and pid (5). You will need to do 4 and 5 twice!! because the first attempt does not work. Click the lightning bolt (6) to enter the value.

   

6. In the pop-up select items (1) under the PID array and click on Select (2) to apply the binding.

   

7. Click Select (1) to save the Action

   

Important Note:
I have found that Wappler is not very willing when creating the Arrays. Go into Code view and make sure that the arrays are similar to the following:

<dmx-array id="arrCart" dmx-bind:items="session.data.cart" dmx-on:updated="session.set('cart',items,{})"></dmx-array>
<dmx-array id="arrSubtotal" dmx-bind:items="session.data.subtotal" dmx-on:updated="session.set('subtotal',items,{})"></dmx-array>
<dmx-array id="arrPID" dmx-bind:items="session.data.pid" dmx-on:updated="session.set('pid',items,{})"></dmx-array>

[kfawcett]

There’s definitely some bugs in Wappler. I am unable to get most of the Session Manager related setup to work. I wonder if it’s because I’m trying to define them in a Header Include file? It appears the “config.js” under dmxAppConnect holds the Session Storage structure.

Even though I define these in an Include file they are showing under the “index” page.

    "index": {
        "sessionStorage": [
          {
            "type": "object",
            "name": "cart",
            "sub": [
              {
                "type": "key_array",
                "name": "items",
                "sub": [
                  {
                    "type": "text",
                    "name": "product_name"
                  },
                  {
                    "type": "number",
                    "name": "product_price"
                  },
                  {
                    "type": "number",
                    "name": "product_quantity"
                  }
                ]
              }
            ]
          },

I get the spinning wheel of death when trying to expand the Session Storage within the Data Bindings dialog.

I also do not see any items under the Name field for the session.set, but my Session Manager definitely has the defined variables/objects.

Next Part

[ben]

Hi Keith, I have implemented the session and arrays in an include file and have run into many problems during the development stage.

My fix was to create a self containing document and, once developed, add the included file and remove the corresponding files from my document.

[Teodor]

Hey @ben and @kfawcett

have run into many problems

Please report the issues you are having with the sessions/arrays in separate topic(s) so we can reproduce them and fix what’s broken

[TomD]

I get the spinning wheel of death when trying to expand the Session Storage within the Data Bindings dialog.

I think this happens if your App IDs are not the same for files which need to access the Session Storage settings (and other settings stored in config.js). It might be worth checking the IDs in case that’s the issue:
<body id="myID" is="dmx-app">

[kfawcett]

Thanks Tom. This is an Include file, so I don’t think your idea applies.

[baub]

<dmx-array id="arrCart" dmx-bind:items="session.data.cart" dmx-on:updated="session.set('cart',items{})"></dmx-array>

looks like you are missing a comma in your first array there right after items in your note. should be:

<dmx-array id="arrCart" dmx-bind:items="session.data.cart" dmx-on:updated="session.set('cart',items,{})"></dmx-array>

[ben]

Thank you for your feedback. You are correct and I am living up to my reputation, namely 98% Ben

Have now corrected the script.

[baub]

Me personally, I always try to follow those verbatim, so just wanted to let you know. I’m adding e-com to a site now. I’ll let you know how it turns out!