1

I have introduced simpleCart into my AngularJS application.

The issue i am having is that i can only see the cart contents, when i click on the Add To Cart button.

Steps to reproduce issue:

  1. Open: http://plnkr.co/edit/omUfQDTJbzPi1ykzPJ9o?p=preview
  2. Click the See Products hyperlink
  3. Click Add to Cart a couple of times.
  4. Refresh browser.
  5. Click the See Products hyperlink
  6. Notice you cant see items in the cart ''
  7. Click Add to Cart
  8. Notice the cart now shows with updated values

If i take Angular out of my app, the cart and items will always show as expected.

Is Angular doing something with the visibility?

index.html:

<head>

  <script src="jQuery-1.11.1.js"></script>
  <script src="simpleCart.js"></script>
  <script>
    simpleCart({
      checkout: {
        type: "PayPal",
        email: "you@yours.com"
      }
    });
    simpleCart({
      cartColumns: [{
        attr: "name",
        label: "Name"
      }, {
        attr: "price",
        label: "Price",
        view: 'currency'
      }, {
        attr: "quantity",
        label: "Qty"
      }],
      cartStyle: "table"
    });
  </script>
</head>

<body>
  <h1>Hello Plunker!</h1>

  <p><a href="#products">See products</a>

  <div ng-app="myApp">
       <ng-view></ng-view>
    </div>

  <script src="angular.js"></script>
  <script src="angularRoute.js"></script>
  <script src="script.js"></script>

</body>

products.html:

<div class="simpleCart_shelfItem">
  <h2 class="item_name"> Awesome T-shirt </h2>
  <input type="text" value="1" class="item_Quantity">
  <span class="item_price">$35.99</span>
  <a class="item_add" href="javascript:;"> Add to Cart </a>
</div>

<br>

<div class="simpleCart_shelfItem">
  <h2 class="item_name"> Rubbish T-shirt </h2>
  <input type="text" value="1" class="item_Quantity">
  <span class="item_price">$15.99</span>
  <a class="item_add" href="javascript:;"> Add to Cart </a>
</div>


<a href="#cart">View cart</a>

<div class="simpleCart_items"></div>
<strong>Sub-total:</strong> <span class="simpleCart_total"></span>
<strong>Shipping:</strong> <span class="simpleCart_shipping"></span>
<strong>Total:</strong> <span class="simpleCart_grandTotal"></span>
Oam Psy
  • 8,555
  • 32
  • 93
  • 157

1 Answers1

1

I found that adding simpleCart.update(); to the controller causes the cart to appear appropriately. See: http://plnkr.co/edit/QQTceeYdDcJ8qDDWVJdP?p=preview

It seems that SimpleCart makes its first pass looking for DOM elements it should update before angular has created them (as the content is not yet loaded). The update() call gives SimpleCart another chance to look for these elements.

Matthew K
  • 973
  • 6
  • 21