orbit-4-1/app/views/admin/template_store/show.html.erb

<% if @template %>
  <div class="wrapper">
    <div id="toolbar">
      <div class="fn"><a class="ui btn" href="/admin/template_store">Back to Store</a></div>
    </div>
    <div id="content" class="clearfix">
      <div class="side">
        <div id="item-info">
          <%= image_tag "#{@store}#{@template['preview']['preview']['thumb']['url']}", :class => "item-thumb" %>
          <h2 class="item-name"><%= @template['title'] %></h2>
           <%= link_to "Download", "javascript:void(0);", "data-url" => @template['template']['template']['url'], :class=> 'btn btn-primary download-link' %>
          <ul class="item-extra-info">
            <li><span class="title">views</span><span class="count"><%= Random.new.rand(10..100) %></span></li>
            <!-- <li><span class="title">color</span><span class="color-tag green"></span></li> -->
          </ul>
        </div>
      </div>
      <div class="main clearfix">
        <h3>description</h3>
        <div id="desc-holder" class="paragraph"><%#= @template['intro'] %></div>
        <h3>screen shot</h3>
        <div id="screen-shot">
          <div class="holder">
           
          </div>
        </div>
      </div>
    </div>
  </div>
<% else %>
  <div class="wrapper">
    <div id="toolbar">
      <div class="fn"><a class="ui btn" href="/admin/template_store">Back to Store</a></div>
    </div>
    <div id="content" class="clearfix">
      <div class="side">
        <div id="item-info">
          <img src="/assets/template/thumb/tb<%= params[:t] %>.jpg" alt="" class="item-thumb">
          <h2 class="item-name">Template Name</h2>
          <a id="download" href="">free download</a>
          <ul class="item-extra-info">
            <li><span class="title">views</span><span class="count"><%= Random.new.rand(10..100) %></span></li>
            <!-- <li><span class="title">color</span><span class="color-tag green"></span></li> -->
          </ul>
        </div>
      </div>
      <div class="main clearfix">
        <h3>description</h3>
        <div id="desc-holder" class="paragraph">Pixel Union’s Jitensha defines storefront minimalism. Japanese for “bicycle,” Jitensha offers clean typography and easy usability, including full color, font, logo, and footer customization. With its painless social media and blog integration, Jitensha gorgeously accomodates every aspect of your business. Any questions before you launch? Don’t hesitate to email us: Support@PixelUnion.net.</div>
        <h3>screen shot</h3>
        <div id="screen-shot">
          <div class="holder">
            <img src="" alt="Thumbnail 1" class="preview item-thumb">
            <img src="" alt="Thumbnail 2" class="preview item-thumb">
            <img src="" alt="Thumbnail 3" class="preview item-thumb">
            <img src="" alt="Thumbnail 4" class="preview item-thumb">
            <img src="" alt="Thumbnail 5" class="preview item-thumb">
          </div>
        </div>
      </div>
    </div>
  </div>
<% end %>
<script type="text/javascript">
  (function(){
    $("a.download-link").on(clickEvent,function(){
      var el = $(this),
          downloadurl = $(this).data("url");

      el.removeClass("btn-primary").addClass("btn-info").text("Installing").attr('disabled',"disabled");
      $.ajax({
        url : "<%= admin_template_store_download_theme_path %>",
        data : {"url" : downloadurl},
        dataType : "json",
        type : "post",
        success : function(data){
          if(data.success){
            el.removeClass('btn-info').addClass('btn-success').text("Installed");
          }
        }
      })
    })
  })()
</script>