Add and remove items to cart, and view its content.

Introducing the shopping cart

No real store without a shopping cart. First we get the shopping cart status and content to display them on the header of each page.

grails-app/controllers/ShopController.groovy


def shoppingCartService
...
def cart = shoppingCartService.get()

Then display the status and content of the shopping cart in the header of the main layout template layout.html

grails-app/views/layouts/layout.gsp


<div class="cart box_1">
    <h3>
        <span id="cart_total" class="simpleCart_total"> $ ${cart.total} </span>
        (<span id="cart_items_count" class="simpleCart_quantity"> ${cart.items.size()}  Items</span>)
        <asset:image src="bag.png"/>
    </h3>

    <p><a href="/cart" class="simpleCart_empty">Your cart</a></p>
    <div class="clearfix"> </div>
</div>

Add items the shopping cart

We use AJAX to make a HTTP POST to our backend call with information about the item to add to the shopping cart, view js/cart.js file which contains the javascript AJAX code.

This is how to add the item to the cart, it is as simple as a single method call.

grails-app/controllers/ShopController.groovy


def addToCart(){
    LineItem item = new LineItem(
                   quantity: params.quantity as int ,
                   product: new Product(id: params.product))
    try {
        def sc = shoppingCartService.addItem(item)
        render(contentType: "application/json") {
            status "success"
            message "Item added successfully!"
            total sc.total
            count sc.items.size()
        }
    }catch(RuntimeException e){
        render(contentType: "application/json") {
            status "error"
            message e.message
        }
    }
}

View the shopping cart

grails-app/controllers/ShopController.groovy


def shoppingCartService

def cart() {
    [ cart: shoppingCartService.get()]
}

In a previous step (Introducing the shopping cart), we learned how to get the shopping cart, and displayed its status, We put that code in a @ModelAttribute method so it is available in every page. Now all what we need is to write the view template to display full content of the shopping cart.

grails-app/views/shop/cart.gsp


<h2>MY SHOPPING CART </h2>
    <g:if test="${cart.items.empty}">
        <h1>No Items in your cart yet</h1>
    </g:if>
    <g:else>
    <div class="cart-gd">

        <g:each in="${cart.items}" var="item">
        <div class="cart-header" id="${item.id}">

            <a href="#" class="close1 deleteItem" data-item-id="${item.id}"> </a>

            <div class="cart-sec simpleCart_shelfItem">
                <div class="cart-item cyc">
                    <img src="${item.product.mainPhoto.url}" class="img-responsive" alt="" />
                </div>
                <div class="cart-item-info">
                    <h3><a href="#"> ${item.product.title} </a></h3>

                    <div class="delivery">
                        <p><span>Item Unit Price : $</span> <span>${item.product.price}</span></p>
                        <div class="clearfix"></div>
                        <p><span>Quantity : </span> <span>${item.quantity}</span></p><br>
                        <div class="clearfix"></div>
                        <p><span>Item Total Price : $</span> <span>${item.total}</span></p>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="clearfix"></div>

            </div>
        </div>
        </g:each>
        <div style="margin-top: 50px; text-align: right;">
            <g:link controller="orders" action="checkout" class="big_button">Checkout</g:link>
        </div>
    </div>
    </g:else>

Delete items from the cart

grails-app/controllers/ShopController.groovy


def removeCart(){
    try {
        def sc = shoppingCartService.removeItem(params.itemId)
        render(contentType: "application/json") {
            status "success"
            message "Item removed successfully!"
            total sc.total
            count sc.items.size()
        }
    }catch(RuntimeException e){
        render(contentType: "application/json") {
            status "error"
            message e.message
        }
    }
}