CODEWITHSUNDEEP
angularjs
Partha Chowdhury
Partha Chowdhury

Reputation: 33

Angular js add to cart

Currently I am using ngCart feature for my angular application. Currently product name, quantity, amount are being shown.Now as requirement i have to add product image for every added product on the cart.

I can not be able to add this sort of thing.

Any help would be appreciated. Thanks in advance!

Upvotes: 0

Views: 1305

Answers (1)

Sofiane Sadi
Sofiane Sadi

Reputation: 357

I never used ngCart but here is the solution according to the documentation and some test:

First you need to add a "custom" data (picture in your case), this is the default cart-item:

<ngcart-addtocart id="item1" name="My Item #1" price="10.99" quantity="1" quantity-max="5">Add to Cart</ngcart-addtocart>

Now add your custom data using the "data" attribute, so your item will now look like this:

<ngcart-addtocart id="item1" name="My Item #1" price="10.99" quantity="1" quantity-max="5" data="{picture: 'http://placehold.it/350x150'}">Add to Cart</ngcart-addtocart>

Then you need to edit your cart summary, by default it should look like this:

<div class="table-responsive col-lg-12" ng-show="ngCart.getTotalItems() > 0">

    <table class="table table-striped ngCart cart">

        <thead>
        <tr>
            <th></th>
            <th></th>
            <th>Quantity</th>
            <th>Amount</th>
            <th>Total</th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-show="ngCart.getTax()">
            <td></td>
            <td></td>
            <td>Tax ({{ ngCart.getTaxRate() }}%):</td>
            <td>{{ ngCart.getTax() | currency }}</td>
        </tr>
        <tr ng-show="ngCart.getShipping()">
            <td></td>
            <td></td>
            <td></td>
            <td>Shipping:</td>
            <td>{{ ngCart.getShipping() | currency }}</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>Total:</td>
            <td>{{ ngCart.totalCost() | currency }}</td>
        </tr>
        </tfoot>
        <tbody>
        <tr ng-repeat="item in ngCart.getCart().items track by $index">
            <td><span ng-click="ngCart.removeItemById(item.getId())" class="glyphicon glyphicon-remove"></span></td>

            <td>{{ item.getName() }}</td>
            <td><span class="glyphicon glyphicon-minus" ng-class="{'disabled':item.getQuantity()==1}"
                      ng-click="item.setQuantity(-1, true)"></span>&nbsp;&nbsp;
                {{ item.getQuantity() | number }}&nbsp;&nbsp;
                <span class="glyphicon glyphicon-plus" ng-click="item.setQuantity(1, true)"></span></td>
            <td>{{ item.getPrice() | currency}}</td>
            <td>{{ item.getTotal() | currency }}</td>
        </tr>
        </tbody>
    </table>
</div>

What you need to do here is to add a td (don't forget to add a th too) to use the getData() function to grab your "custom" data like this:

<td><img src="{{ item.getData().picture }}"/></td>

So your final cart summary will look like this:

<div class="table-responsive col-lg-12" ng-show="ngCart.getTotalItems() > 0">

    <table class="table table-striped ngCart cart">

        <thead>
        <tr>
            <th></th>
            <th></th>
            <th>Picture</th>
            <th>Quantity</th>
            <th>Amount</th>
            <th>Total</th>
        </tr>
        </thead>
        <tfoot>
        <tr ng-show="ngCart.getTax()">
            <td></td>
            <td></td>
            <td>Tax ({{ ngCart.getTaxRate() }}%):</td>
            <td>{{ ngCart.getTax() | currency }}</td>
        </tr>
        <tr ng-show="ngCart.getShipping()">
            <td></td>
            <td></td>
            <td></td>
            <td>Shipping:</td>
            <td>{{ ngCart.getShipping() | currency }}</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>Total:</td>
            <td>{{ ngCart.totalCost() | currency }}</td>
        </tr>
        </tfoot>
        <tbody>
        <tr ng-repeat="item in ngCart.getCart().items track by $index">
            <td><span ng-click="ngCart.removeItemById(item.getId())" class="glyphicon glyphicon-remove"></span></td>

            <td>{{ item.getName() }}</td>
            <td><img src="{{ item.getData().picture }}"/></td>
            <td><span class="glyphicon glyphicon-minus" ng-class="{'disabled':item.getQuantity()==1}"
                      ng-click="item.setQuantity(-1, true)"></span>&nbsp;&nbsp;
                {{ item.getQuantity() | number }}&nbsp;&nbsp;
                <span class="glyphicon glyphicon-plus" ng-click="item.setQuantity(1, true)"></span></td>
            <td>{{ item.getPrice() | currency}}</td>
            <td>{{ item.getTotal() | currency }}</td>
        </tr>
        </tbody>
    </table>
</div>

And you are done, this have been tested and work.

http://jsfiddle.net/ypjrsat0/227/

Upvotes: 1

Related Questions