> For the complete documentation index, see [llms.txt](https://docs.akinon.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.akinon.com/technical-guides/project-zero/django/page-types/basket-page/basket-page-view.md).

# Basket Page - View

## <mark style="color:red;">Login</mark>​ <a href="#login" id="login"></a>

* Basket page consists of 4 main components: "Product List", "Campaigns and Discounts Area", "Cart Summary" and "Discount Form". There may be different components under the main components.
* `Html(Jinja)` and `Javascript` are used together while creating page contents.
* For the `Html(Jinja)` and `Javascript` side, the `basket` object contains the same properties.

### <mark style="color:red;">Product Listing​</mark> <a href="#product-listing" id="product-listing"></a>

**HTML Path:** `templates/basket/basket-list/index.html`

**Js Path:** `templates/basket/basket-list/list.js`

* The html file of the product list is included in `templates/basket/index.html` in the relevant field.

  ```
  {# templates/basket/index.html #}
  {% include 'basket/basket-list/index.html' %} 
  ```
* The `BasketList` and `BasketListItem` js classes are imported under `templates/basket/index.js`.

  ```
  /* templates/basket/index.js */
  import BasketList from './basket-list/list';
  import BasketListItem from './basket-list/item';
  ```
* The `BasketList` js class is called in the `constructor` method under the `Basket` class in `templates/basket/index.js`.

  When calling class; It takes the selector of the class it is called in its constructor (ie: `this.$basketContent`) as a parameter and takes the `BasketListItem` class as a parameter to its own `setViewHolder` method .

  ```
  /* templates/basket/index.js */
  new BasketList(this.$basketContent).setViewHolder(BasketListItem);
  ```

  > Since `BasketList` is extended from `List` class, it contains `setViewHolder` method. The class passed as a parameter to the `setViewHolder` method will be the template of the list elements.

### <mark style="color:red;">Product</mark>​ <a href="#product" id="product"></a>

**HTML Path:** `templates/basket/basket-list/index.html`

**Js Path:** `templates/basket/basket-list/item.js`

* In the `BasketListItem` js class, the html template elements in which we will fill and manipulate the data must have class names in the format `js-basket-item-{...name...}`.

  ```
  {# templates/basket/basket-list/index.html #}
  <div class="js-basket-list-item">
  ...
  <span class="js-basket-item-product-name"><span>
  <span class="js-basket-item-product-price"><span>
  ...
  </div>
  ```
* Rendering is done in the `render` method under the `BasketListItem` js class.

  ```
  /* templates/basket/basket-list/item.js */
  this.$productPicture.attr('src', product.productimage_set[0].image);
  ```

### <mark style="color:red;">Basket Summary​</mark> <a href="#basket-summary" id="basket-summary"></a>

**HTML Path:** `templates/basket/summary/index.html`

**Js Path:** `templates/basket/summary/index.js`

* The html file is included in a suitable place in `templates/basket/index.html` where you want the basket summary to be displayed.

  ```
  {# templates/basket/index.html #}
  {% include 'basket/summary/index.html' %}
  ```
* `BasketSummary` js class is imported under `templates/basket/index.js`.

  ```
  /* templates/basket/index.js */
  import { BasketSummary } from './summary';
  ```
* The `BasketSummary` js class is called in the `constructor` method under the `Basket` class in `templates/basket/index.js`.

  When calling class; It takes as a parameter the selector (ie: `this.$basketContent`) of the class for which it is called in its constructor.

  ```
  /* templates/basket/index.js */
  new BasketSummary(this.$basketContent);
  ```
* In the `BasketSummary` js class, the html elements in which we will fill and manipulate the data must have class names in the format `js-basket-summary-{...name...}`.

  ```
  {# templates/basket/summary/index.html #}
  <div class="js-basket-summary">
     ...
     <span class="js-basket-summary-total-product-amount"></span>
     ...
  </div>
  ```
* Class selectors must be written in the `constructor` method under `BasketSummary` js class.

  ```
  /* templates/basket/summary/index.js */
  this.$totalProductAmount = this.$basketSummary.find('.js-basket-summary-total-product-amount');
  ```
* `observe(basketSelector).subscribe((basket) => {...});` in `constructor` method under `BasketSummary` js class; rendering is done.

  ```
  /* templates/basket/summary/index.js */
  observe(basketSelector).subscribe((basket) => {
     this.$totalProductAmount.html(basket.total_product_amount);
  });
  ```

### <mark style="color:red;">Discount Form​</mark> <a href="#discount-form" id="discount-form"></a>

**HTML Path:** `templates/basket/voucher-form/index.html`

**Js Path:** `templates/basket/voucher-form/index.js`

* The html file should be included in a suitable place in `templates/basket/index.html` where the discount form is desired to be displayed.

  ```
  {# templates/basket/index.html #}
  {% include 'basket/voucher-form/index.html' %}
  ```
* `VoucherForm` js class is imported under `templates/basket/index.js`.

  ```
  /* templates/basket/index.js */
  import VoucherForm from './voucher-form';
  ```
* The `VoucherForm` js class is called in the `constructor`` method under the` Basket`class in`templates/basket/index.js\`.

  When calling class; It takes as a parameter the selector (ie: \`\`\`this.$basketContent\`\`\`\`\`) of the class in which it is called in its constructor.

  ```
  /* templates/basket/index.js */
  new VoucherForm(this.$basketContent);
  ```
* In the `VoucherForm` js class, the html elements on which we will work must have class names in the format `js-basket-voucher-form-{...name...}`.

  ```
  {# templates/basket/voucher-form/index.html #}
  <pz-button class="js-basket-voucher-form-submit">
     ...
  </pz-button>
  ```
* Class selectors must be written in the `constructor` method under the `VoucherForm` js class.

  ```
  /* templates/basket/voucher-form/index.js */
  this.submit = this.form.querySelector('.js-basket-voucher-form-submit');
  ```
* Rendering is done in `observe(basketSelector).subscribe(({ voucher_code }) => {...});` structure in the `constructor` method under the `VoucherForm` js class.

  ```
  /* templates/basket/voucher-form/index.js */
  observe(basketSelector).subscribe(({ voucher_code }) => {
     ...
  });
  ```

### <mark style="color:red;">Campaigns and Discounts Area​</mark> <a href="#campaigns-and-discounts-area" id="campaigns-and-discounts-area"></a>

**HTML Path:** `templates/basket/upsell-and-discount-messages/index.html`

**Js Path:** `templates/basket/upsell-and-discount-messages/index.js`

* The html file should be included in a suitable place in "templates/basket/index.html" where discount campaigns and discounts are desired to be displayed.

  ```
  {# templates/basket/index.html #}
  {% include 'basket/upsell-and-discount-messages/index.html' %}
  ```
* `UpsellAndDiscountMessages` js class is imported under `templates/basket/index.js`.

  ```
  /* templates/basket/index.js */
  import UpsellAndDiscountMessages from './upsell-and-discount-messages';
  ```
* The `UpsellAndDiscountMessages` js class is called in the `constructor` method under the `Basket` class in `templates/basket/index.js`.

  When calling class; It takes as a parameter the selector (ie: `this.$basketContent`) of the class for which it is called in its constructor.

  ```
  /* templates/basket/index.js */
  new UpsellAndDiscountMessages(this.$basketContent);
  ```
* In the `UpsellAndDiscountMessages` js class, the html elements in which you will fill and manipulate the data must be found in the file `templates/basket/upsell-and-discount-messages/index.html`.

  ```
  {# templates/basket/upsell-and-discount-messages/index.html #}
  <pz-carousel class="js-basket-upsell-messages">
  ...
  </pz-carousel>
  ```
* Class selectors must be written in the `constructor` method under the `UpsellAndDiscountMessages` js class.

  ```
  /* templates/basket/upsell-and-discount-messages/index.js */
  this.$upsellMessages = this.$upsellAndDiscountMessages.find('.js-basket-upsell-messages');
  ```
* Rendering is done under `observe(basketReducer).subscribe(({ basket, pending }) => {...});` in the `constructor` method under the `UpsellAndDiscountMessages` js class.

  ```
  /* templates/basket/upsell-and-discount-messages/index.js */
  observe(basketReducer).subscribe(({ basket, pending }) => {
     ...
  });
  ```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.akinon.com/technical-guides/project-zero/django/page-types/basket-page/basket-page-view.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.