Cart lines view

Display the UI of cart lines different from the default SCA UI. The cart lines are displayed different in Desktop and Mobile views.

Cart lines tpl

{{#if isdesktopview}}
<div id="{{lineId}}" data-item-id="{{itemId}}" data-type="order-item" class="{{#if showGeneralClass}} {{generalClass}} {{/if}} cart-lines-row">
    <div class="cart-lines-table-first">
        <div class="cart-lines-thumbnail">
            {{#if isNavigable}}
            <a {{{linkAttributes}}}>
                <img src="{{resizeImage thumbnail.url 'thumbnail'}}" alt="{{thumbnail.altimagetext}}">
            </a>
            {{else}}
            <img src="{{resizeImage thumbnail.url 'thumbnail'}}" alt="{{thumbnail.altimagetext}}">
            {{/if}}
        </div>
    </div>
    <div class="cart-lines-table-middle">
        <div data-view="Item.Sku"></div>
        <div class="cart-lines-name">
            {{#if isNavigable}}
            <a {{{linkAttributes}}} class="cart-lines-name-link">
                {{item._name}}
            </a>
            {{else}}
            <span class="cart-lines-name-viewonly">{{item._name}}</span>
            {{/if}}
        </div>
        <div class="cart-lines-price">
            <div data-view="Item.Price"></div>
        </div>
        <div data-view="Item.Tax.Info"></div>
        <div class="cart-lines-options">
            <div data-view="Item.SelectedOptions"></div>
        </div>
        {{#if showSummaryView}}
        <div class="cart-lines-summary" data-view="Item.Summary.View"></div>
        {{/if}}
        <div data-view="StockDescription"></div>
        <div class="cart-lines-item-actions-desktop" data-view="Item.Actions.View"></div>
    </div>
    <div class="cart-lines-table-last">
        <!-- <div class="cart-lines-item-actions-mobile" data-view="Item.Actions.View"></div> -->
        <div class="cart-lines-shipping-method" data-view="CartLines.PickupInStore"></div>
        <div class="cart-lines-stock" data-view="Product.Stock.Info"></div>
        {{#if showAlert}}
        <div class="cart-lines-alert-placeholder" data-type="alert-placeholder"></div>
        {{/if}}
        {{#if showCustomAlert}}
        <div class="alert alert-{{customAlertType}}">
            {{item._cartCustomAlert}}
        </div>
        {{/if}}
    </div>
</div>
{{else}}
<div id="{{lineId}}" data-item-id="{{itemId}}" data-type="order-item" class="{{#if showGeneralClass}} {{generalClass}} {{/if}} cart-lines-row-mob">
    <div class="cart-lines-table-first">
        <div class="cart-lines-thumbnail">
            {{#if isNavigable}}
            <a {{{linkAttributes}}}>
                <img src="{{resizeImage thumbnail.url 'thumbnail'}}" alt="{{thumbnail.altimagetext}}">
            </a>
            {{else}}
            <img src="{{resizeImage thumbnail.url 'thumbnail'}}" alt="{{thumbnail.altimagetext}}">
            {{/if}}
        </div>
    </div>
    <div class="cart-lines-table-middle">
        <div data-view="Item.Sku"></div>
        <div class="cart-lines-name">
            {{#if isNavigable}}
            <a {{{linkAttributes}}} class="cart-lines-name-link">
                {{item._name}}
            </a>
            {{else}}
            <span class="cart-lines-name-viewonly">{{item._name}}</span>
            {{/if}}
        </div>
        <div class="cart-lines-price">
            <div data-view="Item.Price"></div>
        </div>
        <div data-view="Item.Tax.Info"></div>
        <div class="cart-lines-options">
            <div data-view="Item.SelectedOptions"></div>
        </div>
        {{#if showSummaryView}}
        <div class="cart-lines-summary" data-view="Item.Summary.View"></div>
        {{/if}}
        <div data-view="StockDescription"></div>
        <div class="cart-lines-item-actions-desktop" data-view="Item.Actions.View"></div>
    </div>
    <div class="cart-lines-table-last">
        <div class="cart-lines-shipping-method" data-view="CartLines.PickupInStore"></div>
        <div class="cart-lines-stock" data-view="Product.Stock.Info"></div>
        {{#if showAlert}}
        <div class="cart-lines-alert-placeholder" data-type="alert-placeholder"></div>
        {{/if}}
        {{#if showCustomAlert}}
        <div class="alert alert-{{customAlertType}}">
            {{item._cartCustomAlert}}
        </div>
        {{/if}}
    </div>
</div>

Cart lines scss

.cart-lines-name {
    margin-bottom: $sc-margin-lv2;
    /*height: 49pt;
    width: 97pt;*/
    overflow: hidden;

    /*display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;*/
    @media (min-width: $screen-md-min) {
        /*height: 48pt;
        width: 103pt;*/
        min-height: 49pt;
    }
}

.cart-lines-name-link {
    @extend .medium-title-navigable;
    font-family: $sc-font-family-rounded-r; //$sc-font-family-rounded-b;
    font-weight: inherit; //$sc-font-weight-bold;
    font-size: $nb-home-app-tip-points-font-size;

    @media (min-width: $screen-md-min) {
        font-size: $nb-home-app-tip-sub-font-size;
    }
}

.cart-lines-name-viewonly {
    @extend .medium-title-viewonly;
}

.cart-lines-thumbnail {
    img {
        //width: $img-larger;
        width: $nb-cart-items-img-width-mobile;
        height: $nb-cart-items-img-height-mobile;
        max-width: none;
        border-radius: 5px;

        @media (min-width: $screen-md-min) {
            width: $nb-cart-items-img-width-desktop;
            height: $nb-cart-items-img-height-desktop;
        }
    }
}

.cart-lines-price {
    margin-bottom: $sc-margin-lv2;
}

.cart-lines-price .transaction-line-views-price-lead {
    @extend .middle-price;
    // color: $sc-color-secondary;
    font-family: $sc-font-family-rounded-b;
    font-size: $nb-home-app-tip-sub-points-font-size;
    color: $nb-reward-price-color;

    @media (min-width: $screen-md-min) {
        font-size: $nb-home-app-tip-sub-font-size;
    }
}

.cart-lines-options {
    .cart-option {
        font-size: $sc-font-size-m;
    }
}

/*.cart-lines-row {
    @extend .row;
    margin-bottom:$sc-margin-lv4;
}

.cart-lines-table-first {
    @extend .col-xs-4;
    @extend .col-lg-3;
}

.cart-lines-table-middle {
    @extend .col-xs-8;
    @extend .col-lg-6;
}

.cart-lines-table-last {
    @extend .col-xs-12;
    @extend .col-lg-3;

    @media (max-width: 376px) {
        padding-right: 3px;
        padding-left: 10px;
    }
}*/

.cart-lines-row {
    @extend .col-md-4;
    //margin: auto;
    display: none;

    @media (min-width: $screen-md-min) {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .cart-lines-table-middle {
        text-align: left; //initial;

        @media (min-width: $screen-md-min) {
            //padding: 0 10px;
            padding: 0 12%;
        }

        @media (min-width: $screen-lg-min) {
            //padding: 0 25px;
            padding: 0 22%;
        }

        .product-line-sku-value,
        .product-line-sku-label {
            font-size: $nb-cart-items-sku-mobile-size;

            @media (min-width: $screen-md-min) {
                font-size: $nb-cart-items-sku-desktop-size;
            }
        }
    }
}

.cart-lines-row-mob {
    @extend .row;
    margin-bottom: $sc-margin-lv4;
    border-top: 0.7pt solid $sc-color-tcc-custom-one;
    padding-top: 5%;
    margin-left: 0px;
    margin-right: 0px;

    .cart-lines-table-first {
        @extend .col-xs-4;
        @extend .col-lg-3;
    }

    .cart-lines-table-middle {
        @extend .col-xs-8;
        @extend .col-lg-6;
    }

    .cart-lines-table-last {
        @extend .col-xs-12;
        @extend .col-lg-3;

        @media (max-width: 376px) {
            padding-right: 3px;
            padding-left: 10px;
        }
    }

    .product-line-sku-value,
    .product-line-sku-label {
        font-size: $nb-cart-items-sku-mobile-size;

        @media (min-width: $screen-md-min) {
            font-size: $nb-cart-items-sku-desktop-size;
        }
    }

    @media (min-width: $screen-md-min) {
        display: none;
    }
}





.cart-lines-alert-placeholder {
    margin: $sc-margin-lv2 0;
}

.cart-lines-shipping-method {
    margin-top: $sc-margin-lv3;
}

.cart-lines-item-actions-desktop {
    /*@media (max-width: $screen-md-max) {
        display: none;
    }*/
}

.cart-lines-item-actions-mobile {
    @media (min-width: $screen-lg-min) {
        display: none;
    }
}