Spree custom landing page

Question

I am learning Spree commerce and trying to override the landing page using Deface. The file I need to override is: spree/frontend/app/views/spree/home/index.html.erb

    <% content_for :sidebar do %>
      <div data-hook="homepage_sidebar_navigation">
        <%= render :partial => 'spree/shared/taxonomies' %>
      </div>
    <% end %>

    <div data-hook="homepage_products">
      <% cache(cache_key_for_products) do %>
        <%= render :partial => 'spree/shared/products', :locals => { :products => @products } %>
      <% end %>
    </div>

I have created a partial: app/views/home/_landing.html.erb

And I am calling it from app/override/landing.rb as shown below:

    Deface::Override.new(virtual_path: 'spree/home/index',
            replace: '[data-hook="homepage_products"]',
            name: 'landing-products',
            partial: 'home/landing')

    Deface::Override.new(virtual_path: 'spree/home/index',
            name: 'landing-sidebar',
            remove: '[data-hook="homepage_sidebar_navigation"]')

The problem is that it's inserted in spree/frontend/app/views/spree/layouts/spree_application.html.erb inside a container>row>col-md-12 and just want it straight after the navbar and outside of the container. How can I completely override the landing (without having to change all the other views) using Spree best practice?

    <!--[if lt IE 7 ]> <html class="ie ie6" lang="<%= I18n.locale %>"> <![endif]-->
    <!--[if IE 7 ]>    <html class="ie ie7" lang="<%= I18n.locale %>"> <![endif]-->
    <!--[if IE 8 ]>    <html class="ie ie8" lang="<%= I18n.locale %>"> <![endif]-->
    <!--[if IE 9 ]>    <html class="ie ie9" lang="<%= I18n.locale %>"> <![endif]-->
    <!--[if gt IE 9]><!--><html lang="<%= I18n.locale %>"><!--<![endif]-->
      <head data-hook="inside_head">
        <%= render partial: 'spree/shared/head' %>
      </head>
      <body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
        <%= render partial: 'spree/shared/google_analytics.js' %>
        <%= render partial: 'spree/shared/header' %>

        <div class="container">
          <div class="row" data-hook>
            <%= breadcrumbs(@taxon) %>

            <%= render partial: 'spree/shared/sidebar' if content_for? :sidebar %>

            <div id="content" class="<%= !content_for?(:sidebar) ? "col-sm-12" : "col-sm-8 col-md-9" %>" data-hook>
              <%= flash_messages %>
              <%= yield %>
            </div>

            <%= yield :templates %>
          </div>
        </div>
      </body>
    </html>

Deface is one giant anti-pattern, I avoid it in all front-end parts of my app (but still use it for back-end pages). Unless you have a *very* simple app, I would recommend against deface. — Jason FB, Jul 13 '15 at 14:20

score 2 · Accepted Answer · answered Jul 01 '15 at 16:20

2

The way to do it was to create a new file app/views/layout/landing.html.erb

And override the HomeController
app/controllers/spree/home_controller_decorator.rb

 module Spree
    class HomeController < Spree::StoreController

      layout 'landing'

      helper 'spree/products'
      respond_to :html

      def index
        @searcher = build_searcher(params.merge(include_images: true))
        @products = @searcher.retrieve_products
        @taxonomies = Spree::Taxonomy.includes(root: :children)
      end
    end
  end

answered Jul 01 '15 at 16:20

ChrisEstanol

123
9

2

Yes this perfectly acceptable, however note that you can set the Spree layout in a Spree configuration setting. (I think Spree::Config[:default_layout] or something like that). If you change it globally in the config setting, your custom layout will apply to all controllers which is more DRY than specifying the layout explicitly in the controller. But your solution is perfectly appropriate for getting set up. – Jason FB Jul 13 '15 at 14:22
Thanks for your answer @JasonFB – ChrisEstanol Jul 21 '15 at 15:18

Spree custom landing page

1 Answers1