adding sampleData

var SampleData = {
  shopCatalogItems: ShopCatalogItemsBySku,
  shopCartItems: ShopCartItemsBySku
};

src/components/ContentPage/ContentPage.js

@@ -1,11 +1,13 @@
 /*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */
 
 import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
+import _ from 'lodash'; // eslint-disable-line no-unused-vars
 import styles from './ContentPage.less'; // eslint-disable-line no-unused-vars
 import withStyles from '../../decorators/withStyles'; // eslint-disable-line no-unused-vars
 import ShopTerminal from '../ShopTerminal'; // eslint-disable-line no-unused-vars
 import ShopCart from '../ShopCart'; // eslint-disable-line no-unused-vars
 import ShopCatalog from '../ShopCatalog'; // eslint-disable-line no-unused-vars
+import SampleData from '../../stores/SampleData'; // eslint-disable-line no-unused-vars
 
 @withStyles(styles)
 class ContentPage {
@@ -20,6 +22,9 @@ class ContentPage {
   };
 
   render() {
+    var shopCartItems = this.getShopCartItems(SampleData.shopCartItems);
+    var catalogItems = this.getCatalog();
+
     this.context.onSetTitle(this.props.title);
     return (
       <div className="ContentPage">
@@ -28,13 +33,32 @@ class ContentPage {
             this.props.path === '/' ? null : <h1>{this.props.title}</h1>
           }
           <ShopTerminal />
-          <ShopCatalog />
-          <ShopCart />
+          <ShopCatalog items={catalogItems}/>
+          <ShopCart items={shopCartItems}/>
         </div>
       </div>
     );
   }
 
+  getCatalog() {
+    return SampleData.shopCatalogItems;
+  }
+
+  getShopCartItems(shopCartItems) {
+    var catalog = this.getCatalog();
+    var ret = [];
+    var key;
+    var itemData;
+
+    for (key in shopCartItems) {
+      itemData = _.clone(catalog[key]);
+      itemData.quantity = shopCartItems[key];
+      ret.push(itemData);
+    }
+
+    return ret;
+  }
+
 }
 
 export default ContentPage;

src/components/ShopCart/ShopCart.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
 import withStyles from '../../decorators/withStyles'; // eslint-disable-line no-unused-vars
 import styles from './ShopCart.less'; // eslint-disable-line no-unused-vars
-import ShopItem from '../ShopItem'; // eslint-disable-line no-unused-vars
+import ShopCartItem from '../ShopCartItem'; // eslint-disable-line no-unused-vars
 
 @withStyles(styles)
 class ShopCart {
@@ -13,19 +13,21 @@ class ShopCart {
   };
 
   render() {
+    var rows = this.props.items.map(function (item) {
+      return <ShopCartItem name={item.name} quantity={item.quantity} unitPrice={item.unitPrice} />;
+    });
+
     return (
       <div className="ShopCart">
         <div className="ShopCart-container">
-          test ShopCart
-          <ul>
-            <ShopItem />
-            <ShopItem />
-          </ul>
+          <h4>Shop Cart</h4>
+          <div>
+            {rows}
+          </div>
         </div>
       </div>
     );
   }
-
 }
 
 export default ShopCart;

src/components/ShopCartItem/ShopCartItem.js

@@ -0,0 +1,37 @@
+import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars
+import withStyles from '../../decorators/withStyles'; // eslint-disable-line no-unused-vars
+import styles from './ShopCartItem.less'; // eslint-disable-line no-unused-vars
+
+@withStyles(styles)
+class ShopCartItem {
+
+  static contextTypes = {
+  };
+
+  static propTypes = {
+  };
+
+  render() {
+    return (
+      <div className="ShopCartItem">
+        <div className="ShopCartItem-container">
+          <div>
+            <span>name: </span>
+            <span>{this.props.name}</span>
+          </div>
+          <div>
+            <span>quantity: </span>
+            <span>{this.props.quantity}</span>
+          </div>
+          <div>
+            <span>price: </span>
+            <span>{this.props.unitPrice}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default ShopCartItem;

src/components/ShopItem/ShopItem.less → src/components/ShopCartItem/ShopCartItem.less

@@ -1,6 +1,7 @@
 @import '../variables.less';
 
-.ShopItem {
+.ShopCartItem {
   &-container {
+    margin-bottom: @grid-unit;
   }
 }

src/components/ShopCartItem/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "ShopCartItem",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./ShopCartItem.js"
+}

src/components/ShopCatalog/ShopCatalog.js

@@ -12,10 +12,32 @@ class ShopCatalog {
   };
 
   render() {
+    var rows = [];
+    var key;
+    var item;
+    for (key in this.props.items) {
+      item = this.props.items[key];
+      rows.push(
+        <li>
+          <div>
+            <span>name: </span>
+            <span>{item.name}</span>
+          </div>
+          <div>
+            <span>price: </span>
+            <span>{item.unitPrice}</span>
+          </div>
+        </li>
+      );
+    }
+
     return (
       <div className="ShopCatalog">
         <div className="ShopCatalog-container">
-          test ShopCatalog
+          <h4>Shop Catalog Items</h4>
+          <ul>
+            {rows}
+          </ul>
         </div>
       </div>
     );

src/components/variables.less

@@ -39,3 +39,5 @@
 // -----------------------------------------------------------------------------
 
 @animation-swift-out:   .45s cubic-bezier(0.3, 1, 0.4, 1) 0s;
+
+@grid-unit: 16px;

src/stores/SampleData.js

@@ -0,0 +1,28 @@
+const ShopCatalogItemsBySku = {
+  A: {
+    name: 'Shop Item A',
+    unitPrice: 2,
+    unitPricePerVolume: {
+      4: 8
+    }
+  },
+  B: {
+    name: 'Shop Item B',
+    unitPrice: 5,
+    unitPricePerVolume: {
+      4: 8
+    }
+  }
+};
+
+const ShopCartItemsBySku = {
+  A: 1,
+  B: 4
+};
+
+var SampleData = {
+  shopCatalogItems: ShopCatalogItemsBySku,
+  shopCartItems: ShopCartItemsBySku
+};
+
+export default SampleData;