Rivets.js IF object exist

412 views Asked by At

I have a shopping cart from shopify. The object looks like this:

{
  "attrs": {
    "line_items": [
      {
        "image": {
          "id": 19361216518,
          "created_at": "2016-10-03T11:50:25-05:00",
          "position": 1,
          "updated_at": "2017-02-03T17:11:13-06:00",
          "product_id": 8659646086,
          "src": "https://cdn.shopify.com/s/files/1/1481/5646/products/watermain-box.jpg?v=1486163473",
          "variant_ids": [

          ]
        },
        "image_variants": [
          {
            "name": "pico",
            "dimension": "16x16",
            "src": "https://cdn.shopify.com/s/files/1/1481/5646/products/watermain-box_pico.jpg?v=1486163473"
          }
        ],
        "variant_id": 30287712070,
        "product_id": 8659646086,
        "title": "Dome Water Main Shut Off Valve",
        "quantity": 1,
        "properties": {

        },
        "variant_title": "Default Title",
        "price": "99.99",
        "compare_at_price": null,
        "grams": 0,
        "shopify-buy-uuid": "shopify-buy.1494514993286.2"
      }
    ],
    "shopify-buy-uuid": "shopify-buy.1494514993286.1"
  }

And a function that looks like this:

var updateCart = function() {
    var cart = localStorage.getItem(domeCart).toJSON();
        if (cart.lineItemCount != 0) {
            var shoppingCart = document.getElementById('shopping-cart');
            rivets.bind(shoppingCart,{cart:cart});
        }
    }

And a cart that looks like this:

<div id="shopping-cart">
              <h3 class="empty-cart">Empty!</h3>
             <div class="top-cart-items items">
                <div class="top-cart-item clearfix">
                  <div class="top-cart-item-image">
                    <a href="#"><img src="images/shop/small/6.jpg" alt="Light Blue Denim Dress" /></a>
                  </div>
                  <div class="top-cart-item-desc">
                    <a href="#">Light Blue Denim Dress</a>
                    <span class="top-cart-item-price">$24.99</span>
                    <span class="top-cart-item-quantity">x 3</span>
                  </div>
                </div>
              </div>
              <div class="top-cart-action clearfix">
                <span class="fleft top-checkout-price">$114.95</span>
                <a href="https://test.myshopify.com/cart" class="button button-3d button-small nomargin fright cart-button">View Cart</a>
              </div>
              </div>   

I'm having trouble figuring out how I can use rivets to check if the object is empty or not and if it is empty put <h2>Shopping cart empty</h2> but if it isn't empty loop through all of the cart items and place the data in its respectable part of the markup.

I've looked through Rivets.js documentation and it the product doesn't seem well documented. Any help would be very much appreciated.

0

There are 0 answers