shopify_app 2.0.0 → 2.1.0

data/lib/generators/shopify_app/templates/app/views/home/index.html.erb

@@ -1,103 +1,168 @@
-<div id="sidebar">
-  <h3>Where to start</h3>
-  <h4>Check out the <code style="font-size: 140%">home_controller</code></h4>
-
-  <p class="description">
-    The controller in this demo application fetches the latest 3 orders and products and makes them available as instance variables <code style="color: #218BCE">@orders</code> and <code style="color: #218BCE">@products</code>.
-  </p>
-
-  <h4>Check out the <code>index</code> template</h4>
-
-  <p class="description">
-    This is the Ruby template you are currently looking at. It is located at:<br />  
-  </p>
-
-  <p style="background: #fff; margin-left: 4px"><code>views/home/index.html.erb</code></p>
-
-  <p class="description">
-    Have a look at the markup and Ruby code to see how the Shopify API is being used.
-  </p>
-  
-  <h3>Additional documentation</h3>
-
-  <p class="description">
-    Become an expert:
-  </p>
-
-  <ul>
-    <li>
-      <%= link_to 'API documentation', 'http://www.shopify.com/developers/api/' %>
-      <span class="note">The reference: what you can do with the Shopify API.</span>
-    </li>
-    <li>
-      <%= link_to 'Wiki', 'http://wiki.shopify.com/' %>
-      <span class="note">Get more information and share your knowledge.</span>
-    </li>
-    <li>
-      <%= link_to 'Forum', 'http://forums.shopify.com/community' %>
-      <span class="note">Ask questions and see what others already wanted to know.</span>
-    </li>
-  </ul>
-
-  <h3>Once you're ready</h3>
-
-  <p class="description">
-    We'd love to see what you create using the Shopify API. 
-    Find out how to share your application with the world and read the latest information on the <%= link_to 'API Publishing Page', 'http://www.shopify.com/developers/publishing/' %>.
-  </p>
-</div>
-
-
-<div id="orders">
-  <h2>Your recent orders</h2>
-
-  <% if @orders.blank? %>  
-
-    <em class="note">There are no orders in your store.</em>
-
-  <% else %>
-
+<header class="jumbotron">
+  <div class="inner">
+    <div class="container">
+      <h1 style="letter-spacing:-3px; margin-bottom:20px;">Where do I start?</h1>
+      <p class="lead">An <strong>intro</strong> to using the Shopify App Template<br/>
+      including information on the <strong>Shopify API</strong> and <strong>Bootstrap,</strong><br/>
+      just to get the ball rolling.</p>
+    </div><!-- /container -->
+  </div>
+</header>
+
+<div class="row">
+  <div class="span3">
+    <div class="well">  
+      <h3>Check out the <code>home_controller</code></h3>
+      <hr style="margin:2px 0 7px"/>
+      <p>The controller in this demo application fetches the newest 5 orders and products and makes them available as instance variables <code>@orders</code> and <code>@products</code></p>
+    
+      <br/>
+    
+      <h3>Take a look at <code>index.html.erb</code></h3>
+      <hr style="margin:2px 0 7px"/>
+      <p>Index is the Ruby template you are currently viewing. Have a look at the markup and Ruby code to see how the Shopify API is being used. It's located at <code>views/home/index.html.erb</code></p>
+    </div>
+    
+    <h3>Additional Docs</h3>
+    <p>You can become an expert pretty quickly by reading up on these docs:</p>
+    
     <ul>
-    <% @orders.each do |order| %>
       <li>
-        <div class="order box">
-          <div class="wrapper">
-            <strong><%= link_to order.name, "https://#{current_shop.url}/admin/orders/#{order.id}" %></strong>
-            <span class="price"><%= order.total_price %> <%= order.currency %></span>
-            <span class="highlight"><%= order.financial_status %></span>
-            by <span class="note"><%= order.billing_address.name %></span>
-          </div>
-        </div>
+        <%= link_to 'API documentation', 'http://www.shopify.com/developers/api/' %>
+        <span class="note">Learn what you can do with the Shopify API</span>
+      </li><br/>
+      <li>
+        <%= link_to 'Bootstrap documentation', 'http://twitter.github.com/bootstrap/' %>
+        <span class="note">Find out what you can do with Twitter Bootstrap</span>
+      </li><br/>
+      <li>
+        <%= link_to 'Wiki', 'http://wiki.shopify.com/' %>
+        <span class="note">Get more information and share your knowledge</span>
+      </li><br/>
+      <li>
+        <%= link_to 'Forum', 'http://forums.shopify.com/community' %>
+        <span class="note">Ask questions and see what others already wanted to know</span>
       </li>
-    <% end %>
     </ul>
+  
+    <hr/>
+  
+    <h3>Once you're ready</h3>
+  
+    <p>We'd love to see what you create using the Shopify API. You can keep up to date on the latest and greatest via the <%= link_to 'Shopify API Twitter Account', 'http://www.twitter.com/shopifyapi' %>. You can also read the latest information on the <%= link_to 'API Publishing Page', 'http://www.shopify.com/developers/publishing/' %>.</p>
+    
+    <br/>
+    
+    <a href="https://twitter.com/shopifyapi" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @shopifyapi</a>
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+  </div> <!-- span3 / left-column -->
 
-  <% end %>
-</div>
-
-
-<h2>Some of your products</h2>
-
-<% if @products.blank? %>
-
-  <em class="note">There are no products in your store.</em>
-
-<% else %>
-
-  <% @products.each do |product| %>
-    <div class="product box">
-      <div class="wrapper">
-        <%= image_tag product.images.first.small rescue '' %>
-
-        <h4><%= link_to product.title, "https://#{current_shop.url}/admin/products/#{product.id}" %></h4>
 
-        <p class="price"><%= product.price_range %> <%= current_shop.shop.currency %></p>
-        <p style="margin-bottom: 0"><%= product.product_type %> <span class="note">type</span></p>
-        <p style="margin: 0"><%= product.vendor %> <span class="note">vendor</span></p>
+  <div class="span8 offset1">
+    <h2>Recent orders</h2>
+  
+    <% if @orders.blank? %>
+      <table class="table table-striped">
+        <tr>
+          <td><em>There are no orders in your store.</em></td>
+        </tr>
+      </table>
+    
+    <% else %>
+  
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th>Order</th>
+            <th>Placed by</th>
+            <th>Paid</th>
+            <th>Fulfillment</th>
+            <th>Total</th>
+          </tr>
+        </thead>
+      <% @orders.each do |order| %>
+        <tr>
+          <td><%= link_to order.name, "https://#{current_shop.url}/admin/orders/#{order.id}", :target => 'blank' %></td>
+          <td><%= order.billing_address.name %></td>
+          <td>
+            <span class="label  <% if order.financial_status  == 'paid' %>label-success<% end %> <% if order.financial_status  == 'pending' %>label-warning<% end %> <% if order.financial_status  == 'refunded' %>label-important<% end %>"><%= order.financial_status %>
+            </span>
+          </td>
+          <td>
+            <% if !order.fulfillment_status %>
+            <span class="label">Not Fulfilled</span>
+            <% else %>
+            <span class="label label-success">Fulfilled</span>
+            <% end %>
+          </td>
+          <td><%= order.total_price %> <%= order.currency %></td>
+        </tr>
+      <% end %>
+      </table>
       
-        <div style="clear:left"></div>
-      </div>
-    </div>
-  <% end %>
-
-<% end %>
+    <% end %>
+    
+    <br/>
+    
+    <h2>New Products</h2>
+    
+    <div class="accordion" id="accordion">      
+      
+      <% if @products.blank? %>
+      
+        <div class="accordion-group">
+          <div class="accordion-heading">
+            <em>There are no products in your store.</em>
+          </div>
+        </div>
+      
+      <% else %>
+      
+        <%  @products.each_with_index do |product, index| %>
+          <div class="accordion-group">
+            <div class="accordion-heading">
+              
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#<%= product.id %>">
+                <%= product.title %> <span class="pull-right muted"><%= product.price_range %> <%= current_shop.shop.currency %></span>
+              </a>
+            </div>
+        
+            <div id="<%= product.id %>" class="accordion-body collapse <% if index == 1 %>in<% end %>">
+              <div class="accordion-inner">
+                
+                <% if !product.images.empty? %>
+                  <div class="polaroid">
+                    <%= link_to image_tag(product.images.first.medium), '#modal-'+product.id.to_s, :'data-toggle' => 'modal' %>
+                  </div>
+                <% end %>
+                
+                <p><strong>Type:</strong> <%= product.product_type %></p>
+                <p><strong>Vendor:</strong> <%= product.vendor %></p>
+                <p><%= raw(product.body_html) %></p><br/>
+                <% if product.published_at != nil %>
+                <p class="muted">Published at <%= Time.parse(product.published_at).strftime("%H:%M on %m/%d/%Y") %></p>
+                <% end %>
+                <p><%= link_to raw('View in your Shopify Admin <i class="icon-chevron-right" style="opacity:.25"></i>'), "https://#{current_shop.url}/admin/products/#{product.id}", :target => 'blank', :class => 'btn btn-primary' %></p>
+              </div>
+              
+            </div>
+          </div>
+          
+          <div class="modal hide fade" id="modal-<%= product.id %>" style="display:none;">
+            <div class="modal-header">
+              <a class="close" data-dismiss="modal">×</a>
+              <h3><%= product.title %></h3>
+            </div>
+            <div class="modal-body" >
+              <% if !product.images.empty? %>
+                <%= image_tag product.images.first.large %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      
+      <% end %>
+      
+    </div> <!-- accordion -->
+  </div> <!-- span8 / right-column -->
+</div>

data/lib/generators/shopify_app/templates/app/views/layouts/application.html.erb

@@ -1,39 +1,76 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-  <title>Shopify Application</title>
+  <title>Shopify Demo App</title>
   <%= stylesheet_link_tag 'application' %>
   <%= javascript_include_tag 'application' %>
   <%= csrf_meta_tags %>
+  
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+  
+  <!-- icons -->
+  <link rel="shortcut icon" href="../assets/favicon.png">
+  <link rel="apple-touch-icon" href="../assets/shopify-57.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="../assets/shopify-72.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="../assets/shopify-114.png">
+  
+  <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+  <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
 </head>
 
 <body>
-  <div id="header">
-    <h1><%= link_to 'Shopify Demo Application', '/' %></h1>
-    
-    <p id="login-link">
-      <% if current_shop %>
-          <span class="note">current shop</span> <%= link_to current_shop.url, "https://#{current_shop.url}", :class => 'shop_name' %> <span class="note">|</span>
-          <%= link_to 'logout', logout_path %>
-      <% end %>
-    </p>
+  
+  <div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+      <div class="container">
+        
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </a>
+        
+        <%= link_to 'Shopify Demo App', '/', :class => 'brand' %>
+        
+        <% if current_shop %>
+          <div class="nav-collapse">
+            <ul class="nav">
+              <li class='<%= active_nav_class('home', 'index') %>'><%= link_to 'Where to Start', '/' %></li>
+              <li class='<%= active_nav_class('home', 'design') %>'><%= link_to 'Bootstrap Info', '/design' %></li>
+            </ul>
+          </div>
+          
+          <ul class="nav pull-right">
+            <li class="dropdown">
+              <%= link_to raw(current_shop.url+' <b class="caret"></b>'), "https://#{current_shop.url}", :class => 'shop_name dropdown-toggle', :'data-toggle' => 'dropdown'  %>
+              <ul class="dropdown-menu">
+                <li><%= link_to raw('<i class="icon-home"></i> Storefront'), "http://"+current_shop.url, :target => 'blank' %></li>
+                <li><%= link_to raw('<i class="icon-cog"></i> Shopify Admin'), "http://"+current_shop.url+"/admin", :target => 'blank' %></li>
+                <li class="divider"></li>
+                <li><%= link_to raw('<i class="icon-off"></i> logout'), logout_path %></li>
+              </ul>
+            </li>
+          </ul>
+        <% end %>
+        
+      </div>
+    </div>
   </div>
-
-  <div id="container" class="clearfix">
-    <ul id="tabs">
-      <%= tab :index, {:controller => '/home'}, :label => 'Home' %>
-      <%= tab :design, {:controller => '/home', :action => 'design'}, :label => 'Design Help' %>
-    </ul>
-    
-    <!-- Flash error & notice-->
-    <% if flash[:error] %> <div id="flasherrors"><%= flash[:error] %></div><% end %>
-    <% if flash[:notice] %><div id="flashnotices"><%= flash[:notice] %></div><% end %>
   
-    <!-- begin div.main-->
-    <div id="main">
+  
+  <div class="container">
+    
+    <div class="content">
       <%= yield %>
     </div>
-    <!-- end div.main -->
-  </div>
+    
+    <footer>
+      <p>A Shopify app by (company name here)</p>
+    </footer>
+    
+  </div> <!-- /container -->
 </body>
 </html>

data/lib/generators/shopify_app/templates/app/views/login/index.html.erb

@@ -1,15 +1,21 @@
-<h1>Install</h1>
+<div class="page-header" id="login-header">
+  <h1>Install This App</h1>
+  <h1><small>This app requires you to login to start using it.</small></h1>
+</div>
 
-<p>Install this app in a shop to get access to its private admin data.</p>
+<div style="width:340px; margin:0 auto;">
+  <%= form_tag '/login/authenticate', :class => 'form-search' do %>
+    <%= text_field_tag 'shop', nil, :placeholder => 'Shop URL', :class => 'btn-large' %>
+    <%= submit_tag 'Install', :class => 'btn btn-primary btn-large' %>
+  <% end %>
+</div>
 
-<p style="padding-bottom: 1em"><span class="hint">Don&rsquo;t have a shop to install your app in handy? <a href="https://app.shopify.com/services/partners/api_clients/test_shops">Create a test shop.</a></span></p>
+<p align="center" style="margin-top:30px">
+  <%= image_tag '../assets/shopify.png' %>
+</p>
 
-<%= form_tag '/login/authenticate' do %>
-  <label for='shop'><strong>The URL of the Shop</strong>
-    <span class="hint">(or just the subdomain if it&rsquo;s at myshopify.com)</span>
-  </label>
-  <p>
-    <%= text_field_tag 'shop', nil, {:size => 45} %>
-    <%= submit_tag 'Install' %>
-  </p>
-<% end %>
+<br/>
+
+<p align="center" class="muted">
+  Don't have a shop? <a href="https://app.shopify.com/services/partners/api_clients/test_shops">Create a Test Shop</a>
+</p>

data/lib/generators/shopify_app/templates/public/404.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>404 Error: This page doesn't exist!</title>
+  <link rel="stylesheet" type="text/css" href="../assets/bootstrap.css" />
+  <link rel="stylesheet" type="text/css" href="../assets/responsive-bootstrap.css" />
+  <link rel="stylesheet" type="text/css" href="../assets/shopify_app.scss" />
+  
+  <style>
+  .container { text-align:center;}
+  .navbar .brand { float:none;}
+  </style>
+</head>
+
+<body>
+  <div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+      <div class="container">
+        <a href="/" class="brand">Shopify Demo App</a>
+      </div>
+    </div>
+  </div>
+  
+  <div class="container">
+    <div class="content">
+      <div class="page-header">        
+        <h1>AH! 404!</h1>
+      </div>
+
+      <h3><i class="icon-warning-sign" style="margin-top:6px; opacity:.5;"></i> Well dang, looks like this page doesn't exist.</h3>
+      <p class="muted">Well, not this one, but the one you were looking for... at least there's a kitten!</p>
+      <br/>
+      <p><img src="http://gifs.gifbin.com/122009/1259928856_surprised_kitten.gif" style="border-radius:10px;"/></p>
+      <br/>
+      <p><button type="button" value ="back" onClick="window.history.back();" class='btn btn-primary'><i class="icon-chevron-left" style="opacity:.25"></i> Back to the app</button></p>
+    </div>
+    
+    <footer>
+      <p>A Shopify app by (company name here)</p>
+    </footer>
+  </div> <!-- /container -->
+</body>
+</html>

data/lib/generators/shopify_app/templates/public/422.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>422 Error: Your change was rejected</title>
+  <link rel="stylesheet" type="text/css" href="../assets/bootstrap.css" />
+  <link rel="stylesheet" type="text/css" href="../assets/responsive-bootstrap.css" />
+  <link rel="stylesheet" type="text/css" href="../assets/shopify_app.scss" />
+  
+  <style>
+  .container { text-align:center;}
+  .navbar .brand { float:none;}
+  </style>
+</head>
+
+<body>
+  <div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+      <div class="container">
+        <a href="/" class="brand">Shopify Demo App</a>
+      </div>
+    </div>
+  </div>
+  
+  <div class="container">
+    <div class="content">
+      
+      <div class="page-header">        
+        <h1>422 Error</h1>
+      </div>
+      
+      <h3><i class="icon-warning-sign" style="margin-top:6px; opacity:.5;"></i> Sorry, the change you requested was rejected.</h3>
+      <p class="muted">Did you try to change something you don't have access to?</p>
+      
+      <p><button type="button" value ="back" onClick="window.history.back();" class='btn btn-primary'><i class="icon-chevron-left" style="opacity:.25"></i> Back to the app</button></p>
+      
+    </div>
+    
+    <footer>
+      <p>A Shopify app by (company name here)</p>
+    </footer>
+  </div> <!-- /container -->
+</body>
+</html>