Javascript not loading -rails - spree commerce

Question

I'm messing around with Spree commerce trying to learn it. I downloaded an HTML theme ( http://themeforest.net/item/convertible-responsive-html5-template/full_screen_preview/6289591) and I'm just trying to have that as the front end of the site. Not the actual store.

The store is mounted at /store while this template is going to be the static pages.

I'm not sure if it's because of the templates, rails 4 turbolinks, spree commerce and how it messes the setup of a rails app. I've been trying everything for the past 3 days and I've looked/tried every fix I could find and it's still not working.

Below is the code for the slider part of the homepage. It's literally the same as the theme above. It's a flexslider. Here's the js (which I have the same file in: app/assets/javascripts in my rails app

https://github.com/werein/flexslider-rails/blob/master/vendor/assets/javascripts/jquery.flexslider.js

Home slider:

    <!-- home 
        ================================================== -->
    <div class="section">
        <div id="home-section">
            <div class="home-box">
                <%= image_tag "upload/singlepage-bg.jpg", :class => "background-view"  %>
                <div class="slider-caption">
                    <div class="container">
                        <div class="flexslider">
                             <ul class="slides">
                                <li>
                                    <p class="flex-caption">Convertible <span>is great</span> template</p>
                                </li>
                                <li>
                                    <p class="flex-caption">We are great <span>company</span></p>
                                </li>
                                <li>
                                    <p class="flex-caption">We <span>support</span> you</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>              
            </div>
        </div>
    </div>


    <!-- End home -->

Beginning of JS file: jquery.flexslider.js

;(function ($) {

  //FlexSlider: Object Instance
  $.flexslider = function(el, options) {
    var slider = $(el),
      vars = $.extend({}, $.flexslider.defaults, options),
      namespace = vars.namespace,
      touch = ("ontouchstart" in window) || window.DocumentTouch && document instanceof     DocumentTouch,
    eventType = (touch) ? "touchend" : "click",
    vertical = vars.direction === "vertical",
    reverse = vars.reverse,
    carousel = (vars.itemWidth > 0),
    fade = vars.animation === "fade",
    asNav = vars.asNavFor !== "",
    methods = {};

Answer 1

It looks like you have to use deface otherwise it won't work. I found out from a rails developer with experience in spree on a google helpout