Skip to main content

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