# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.