Shoptopia unchain issue demo

by cryptoquick

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/0.13.0/ember-data-latest.min.js"></script>
  <script type="text/x-handlebars">
    <div class="centered">
      <img src="http://www.shoptopia.com/images/shoptopia-beta.png">
      <h1>Shoptopia Ember Demo</h1 class="centered">
    </div>
    <div id="wrap">
      <div class="container channel">
        {{outlet}}
      </div>
    </div>
  </script>

  <script type="text/x-handlebars" data-template-name="products">
<div id="feed">
  {{#each controller}}
    {{#view Shop.FadeInView contentBinding="this"}}
    <article {{bindAttr class=":product PRODUCTAFFINITY:favorited"}}>
      {{#linkTo 'product' id}}
      <img class="image" {{bindAttr src="PRODUCTIMAGESMALL"}}>
      <div class="description">
        <p>
          <a {{bindAttr href="PRODUCTURL"}}>
            <span class="retailerName">{{RETAILERNAME}}</span>
            {{PRODUCTNAME}}
          </a>
        </p>
      </div>
      {{/linkTo}}
      <ul class="interface">
        <li class="share">
          <span class="icon icon-share"></span>
        </li>
        <li class="comment">
          <a {{bindAttr href="PRODUCTURL"}}>
            <span class="icon icon-comment"></span>
            {{! <span class="count">4</span> }}
          </a>
        </li>
        <li class="favorite">
          <span class="icon icon-favorite-heart"></span>
          {{! <span class="count">17</span> }}
        </li>
        <li class="add-to-list">
          <span class="icon icon-add"></span>
        </li>
        <li class="not-for-me">
          <span class="icon icon-not-for-me"></span>
        </li>
      </ul>
    </article>
    {{/view}}
  {{/each}}
</feed>
  </script>

  <script...

CSS

.product {
      position: relative
    }

    h1 {
      font-size:36px
    }

    .centered {
      text-align: center;
    }

/*

red: #e51937;
black: #555555;
grey: #71706d;

*/

@charset "UTF-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}


/* @license
 * MyFonts Webfont Build ID 2499547, 2013-03-08T14:10:10-0500
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2499547
 * Webfonts copyright: Copyright (c) 2011 by Hannes von Doehren. All rights reserved.
 * 
 * © 2013 MyFonts Inc
*/

@font-face {font-family: 'PlutoCondLight';src: url('/fonts/2623DB_4_0.eot');src: url('/fonts/2623DB_4_0.eot?#iefix') format('embedded-opentype'),url('/fonts/2623DB_4_0.woff') format('woff'),url('/fonts/2623DB_4_0.ttf') format('truetype'),url('/fonts/2623DB_4_0.svg#wf') format('svg');}

@font-face {font-family: 'PlutoCondRegular';src: url('/fonts/2623DB_6_0.eot');src: url('/fonts/2623DB_6_0.eot?#iefix') format('embedded-opentype'),url('/fonts/2623DB_6_0.woff') format('woff'),url('/fonts/2623DB_6_0.ttf') format('truetype'),url('/fonts/2623DB_6_0.svg#wf') format('svg');}

@font-face {font-family: 'PlutoCondMedium';src: url('/fonts/2623DB_6_0.eot');src: url('/fonts/2623DB_6_0.eot?#iefix') format('embedded-opentype'),url('/fonts/2623DB_6_0.woff')...

JavaScript

// init / store
Shop = Ember.Application.create({
  LOG_TRANSITIONS: true
});

Shop.deferReadiness();

Shop.Store = DS.Store.extend({
  revision: 13,
  adapter: 'DS.FixtureAdapter'
});

// model

Shop.Product = DS.Model.extend({
  PRODUCTID: DS.attr('string'),
  PRODUCTNAME: DS.attr('string'),
  PRODUCTIMAGELARGE: DS.attr('string'),
  PRODUCTIMAGESMALL: DS.attr('string'),
  PRODUCTDESCRIPTION: DS.attr('string'),
  PRODUCTDESCRIPTIONLONG: DS.attr('string'),
  PRODUCTPRICE: DS.attr('number'),
  TYPE: DS.attr('string'),
  DISTANCE: DS.attr('number'),
  RETAILERNAME: DS.attr('string'),
  PRODUCTAFFINITY: DS.attr('boolean'),
  LOCATIONAFFINITY: DS.attr('boolean'),
  LOCATIONID: DS.attr('string')
});

// data

var data =     [{
        "PRODUCTIMAGELARGE": "http://api.retailigence.com/v2.0/rdr?id=l:faaf8296-feb8-46a0-b5a4-0561a6cb8ca7&requestId=0af2f7f0-cf2e-4aff-b378-62fe7f449c70&apikey=Lu8ywIjCoo49fd5jVku4vSDtfdb0Jdyx",
        "DISTANCE": 2.2235224900152515,
        "PRODUCTDESCRIPTION": "We designed a kid-friendly yoga pant that's perfect for gym class, dance class, or the playground. The super-soft construction has just enough stretch so they can move with ease, while the simple design is sporty and cute without too much fuss.Features:57",
        "PRODUCTPRICE": 30,
        "RETAILERNAME": "Puma",
        "PRODUCTAFFINITY": false,
        "LOCATIONAFFINITY": false,
        "LASTUPDATED": "",
        "BRANDID": "",
        "PRODUCTMFGPARTNO": "",
        "LOCATIONID": "97f13042-0a00-4c1d-bb42-0655a964cd38",
        "PRODUCTIMAGESMALL": "http://api.retailigence.com/v2.0/rdr?id=s:faaf8296-feb8-46a0-b5a4-0561a6cb8ca7&requestId=0af2f7f0-cf2e-4aff-b378-62fe7f449c70&apikey=Lu8ywIjCoo49fd5jVku4vSDtfdb0Jdyx",
        "PRODUCTDESCRIPTIONLONG": "We designed a kid-friendly yoga pant that's perfect for gym class, dance class, or the playground. The super-soft construction has just enough stretch so they can move with ease, while the simple design is sporty and cute without...