Basket Page - View

Login​

• 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.

Product Listing​

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.

Product​

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);

Basket Summary​

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);
  });

Discount Form​

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 Basketclass intemplates/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 }) => {
     ...
  });

Campaigns and Discounts Area​

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 }) => {
     ...
  });