# Displaying the cart summary

## Problem

You want to display an order summary to your customer, including the order line items and totals.

![A sample cart summary](https://2610849379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lk-ezuDClaMavTqnRi0%2Fuploads%2FKQr6oiWu3Za5WRUbZsj7%2Fcart-summary-cover.jpg?alt=media\&token=5fb9a6ac-ae51-4351-bb28-ad8c5478bb7c)

## Solution

To retrieve the list of line items that compose an order summary, send a `GET` request to the `/api/orders/:id` endpoint and include its line items.

{% hint style="info" %}
To get a faster response and fewer data to parse, we recommend requesting only the fields you need to show in the cart summary.
{% endhint %}

### Example

{% tabs %}
{% tab title="Request" %}
The following request fetches the list of line items associated with the order identified by the "yzkWXfgHQS" ID, with a specific selection of the fields you need to show in the cart summary:

```javascript
curl -g -X GET \
  'https://yourdomain.commercelayer.io/api/orders/yzkWXfgHQS?include=line_items&fields[orders]=number,skus_count,formatted_subtotal_amount,formatted_discount_amount,formatted_shipping_amount,formatted_total_tax_amount,formatted_gift_card_amount,formatted_total_amount_with_taxes,line_items&fields[line_items]=item_type,image_url,name,sku_code,formatted_unit_amount,quantity,formatted_total_amount' \
  -H 'Accept: application/vnd.api+json' \
  -H 'Authorization: Bearer your-access-token'
```

{% endtab %}

{% tab title="Response" %}
On success, the API responds with a `200 OK` status code, returning the order object with all the line items included, showing only the requested fieldset:

<pre class="language-javascript"><code class="lang-javascript">{
  "data": {
    "id": "yzkWXfgHQS",
    "type": "orders",
    "links": {
      "self": "https://yourdomain.commercelayer.io/api/orders/yzkWXfgHQS"
    },
    "attributes": {
<strong>      "number": 1234,
</strong><strong>      "skus_count": 7,
</strong><strong>      "formatted_subtotal_amount": "843.00€",
</strong><strong>      "formatted_discount_amount": "-84.30€",
</strong><strong>      "formatted_shipping_amount": "10.00€",
</strong><strong>      "formatted_total_tax_amount": "168.60€",
</strong><strong>      "formatted_gift_card_amount": "-50.00€",
</strong><strong>      "formatted_total_amount_with_taxes": "718.70€"
</strong>    },
    "relationships": {
      "line_items": {
        "links": {...},
        "data": [
          {
            "type": "line_items",
            "id": "aBmNkPQRst"
          },
          {
            "type": "line_items",
            "id": "kXBqtVaYMN"
          },
          {
            "type": "line_items",
            "id": "ypQptRQABk"
          },
          {
            "type": "line_items",
            "id": "yaoMtJoqjv"
          },
          {
            "other": "... line items"
          }
        ]
      }
    },
    "meta": {
      "mode": "test"
    }
},
"included": [
    {
      "id": "aBmNkPQRst",
      "type": "line_items",
      "links": {
          "self": "https://spineless.commercelayer.io/api/line_items/aBmNkPQRst"
      },
      "attributes": {
<strong>        "item_type": "skus",
</strong><strong>        "image_url": "https://img.yourdomain.com/skus/TSHIRTB5B5B5XL.png",
</strong><strong>        "name": "Grey T-Shirt XL",
</strong><strong>        "sku_code": "TSHIRTB5B5B5XL",
</strong><strong>        "formatted_unit_amount": "129.00€",
</strong><strong>        "quantity": 2,
</strong><strong>        "formatted_total_amount": "258.00€"
</strong>      },
      "meta": {
        "mode": "test"
      }
    },
    {
      "id": "kXBqtVaYMN",
      "type": "line_items",
      "links": {
        "self": "https://spineless.commercelayer.io/api/line_items/kXBqtVaYMN"
      },
      "attributes": {
<strong>        "item_type": "skus",
</strong><strong>        "image_url": "https://img.yourdomain.com/skus/SHOESFFFFFF41.png",
</strong><strong>        "name": "White Shoes 41",
</strong><strong>        "sku_code": "SHOESFFFFFF41",
</strong><strong>        "formatted_unit_amount": "299.00€",
</strong><strong>        "quantity": 1,
</strong><strong>        "formatted_total_amount": "299.00€"
</strong>      },
      "meta": {
        "mode": "test"
      }
    },
    {
      "id": "ypQptRQABk",
      "type": "line_items",
      "links": {
        "self": "https://spineless.commercelayer.io/api/line_items/ypQptRQABk"
      },
      "attributes": {
<strong>        "item_type": "skus",
</strong><strong>        "image_url": "https://img.yourdomain.com/skus/HOODIE000000M.png",
</strong><strong>        "name": "Black Hoodie M",
</strong><strong>        "sku_code": "HOODIE000000M",
</strong><strong>        "formatted_unit_amount": "199.00€",
</strong><strong>        "quantity": 1,
</strong><strong>        "formatted_total_amount": "199.00€"
</strong>      },
      "meta": {
        "mode": "test"
      }
    },
    {
      "id": "yaoMtJoqjv",
      "type": "line_items",
      "links": {
        "self": "https://spineless.commercelayer.io/api/line_items/yaoMtJoqjv"
      },
      "attributes": {
<strong>        "item_type": "skus",
</strong><strong>        "image_url": "https://img.yourdomain.com/skus/SOCKS212F3FXS.png",
</strong><strong>        "name": "Blue Socks XS",
</strong><strong>        "sku_code": "SOCKS212F3FXS",
</strong><strong>        "formatted_unit_amount": "29.00€",
</strong><strong>        "quantity": 3,
</strong><strong>        "formatted_total_amount": "87.00€"
</strong>      },
      "meta": {
        "mode": "test"
      }
    },
    {
<strong>      "other": "... line items (different item types)"
</strong>    }
  ]
}
</code></pre>

{% endtab %}
{% endtabs %}

### Mapping

The image below shows how each of the elements of the shopping cart is mapped to a specific field of the order or line item objects.

![A sample cart summary mapping](https://2610849379-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lk-ezuDClaMavTqnRi0%2Fuploads%2Feq4QIJqJs0DiefFnTkAb%2Fcart-summary-mapping.jpg?alt=media\&token=70c3a097-5688-423e-9752-d0ded16b0635)

## Logged customers

When working with carts belonging to logged customers, you might want to retrieve the current order associated with the logged customer (e.g. to give them the possibility to edit the cart content before placing the order). To do that, you don't need to know the order ID in advance, but you can directly fetch the order relationship of the customer using a [customer token](https://app.gitbook.com/s/-LgByaSP8eKjad-MIuHE/authentication/password). Just make sure to:

* Select the last updated order belonging to the customer by sorting the API call results by the `updated_at` attribute (desc) with `page[size]=1`.
* Double-check that the order has not been created as guest by filtering the API call by the `guest` attribute.
* Check that the order is still editable by filtering the API call by `status`.

### Example

{% tabs %}
{% tab title="Request" %}
The following request fetched the last updated, editable order belonging to the customer identified by the "nDNahABVZR" ID:

```sh
curl -g -X GET \
  'https://yourdomain.commercelayer.io/api/customers/nDNahABVZR/orders?sort=-updated_at&page[size]=1&filter[q][guest_false]=true&filter[q][status_eq]=pending' \
  -H 'Accept: application/vnd.api+json' \
  -H 'Authorization: Bearer your-access-token'
```

{% endtab %}

{% tab title="Response" %}
On success, the API responds with a `200 OK` status code, returning the order object:

<pre class="language-json"><code class="lang-json">{
  "data": [
    {
      "id": "qLmohkVnMX",
      "type": "orders",
      "links": {
        "self": "https://yourdomain.commercelayer.io/api/orders/qLmohkVnMX"
      },
      "attributes": {
        "number": 12345678,
        "autorefresh": true,
<strong>        "status": "pending",
</strong>        "payment_status": "unpaid",
        "fulfillment_status": "unfulfilled",
<strong>        "guest": false,
</strong><strong>        "editable": true,
</strong><strong>        "customer_email": "bob@example.com",
</strong>        "language_code": "en",
        "currency_code": "USD",
        "subtotal_amount_cents": 3480,
        "subtotal_amount_float": 34.8,
        "formatted_subtotal_amount": "$34.80",
        ...
        ...
      },
      "relationships": {
        "market": { ... },
        "customer": { ... },
        "shipping_address": { ... },
        "billing_address": { ... },
        "available_payment_methods": { ... },
        "available_customer_payment_sources": { ... },
        "available_free_skus": { ... },
        "available_free_bundles": { ... },
        "payment_method": { ... },
        "payment_source": { ... },
        "line_items": { ... },
        "shipments": { ... },
        "transactions": { ... },
        "authorizations": { ... },
        "captures": { ... },
        "voids": { ... },
        "refunds": { ... },
        "returns": { ... },
        "order_subscriptions": { ... },
        "order_copies": { ... },
        "recurring_order_copies": { ... },
        "attachments": { ... },
        "events": { ... },
        "tags": { ... }
      },
      "meta": {
        "mode": "test",
        "organization_id": "EnAvaFOrRe"
      }
    }
  ],
  "meta": {
    "record_count": 3,
    "page_count": 3
  },
  "links": {
    "first": "https://yourdomain.commercelayer.io/api/customers/nDNahABVZR/orders?filter[q][guest_false]=true&#x26;filter[q][status_eq]=pending&#x26;page[number]=1&#x26;page[size]=1&#x26;sort=-updated_at",
    "next": "https://yourdomain.commercelayer.io/api/customers/nDNahABVZR/orders?filter[q][guest_false]=true&#x26;filter[q][status_eq]=pending&#x26;page[number]=2&#x26;page[size]=1&#x26;sort=-updated_at",
    "last": "https://yourdomain.commercelayer.io/api/customers/nDNahABVZR/orders?filter[q][guest_false]=true&#x26;filter[q][status_eq]=pending&#x26;page[number]=3&#x26;page[size]=1&#x26;sort=-updated_at"
  }
}
</code></pre>

{% endtab %}
{% endtabs %}

## Additional notes

#### Filtering by item type

You may have noticed the pseudo-code `{ "other": "... line items (different item types)" }` in the response. That's because the above request fetches **all** the line items associated with the order (SKUs, shipments, payment methods, and promotions). If you plan to use only some of them, remember to properly filter them through some client-side logic based on their `item_type` attribute.

#### Showing the payment method cost

Commerce Layer supports the option for payment methods to have a cost. If that's your case and you want to display it in the cart summary, remember to add also the `formatted_payment_method_amount` order's field in the [API call above](#example).

## More to read

See our documentation if you need more information on how to [retrieve an order](https://app.gitbook.com/s/RWJeylueWkzLadK710XZ/orders/retrieve) or to [fetch relationships](https://app.gitbook.com/s/-LgByaSP8eKjad-MIuHE/fetching-relationships). For further details on how to use `include`, `sort`, and `fields` queries in your request, see [including associations](https://app.gitbook.com/s/-LgByaSP8eKjad-MIuHE/including-associations), [sorting results](https://app.gitbook.com/s/-LgByaSP8eKjad-MIuHE/sorting-results), and [sparse fieldset](https://app.gitbook.com/s/-LgByaSP8eKjad-MIuHE/sparse-fieldsets).
