A couple of Spree overrides examples

12 Jun A couple of Spree overrides examples

If you want to apply some javascript functions in a spree view you can do something like:

Deface::Override.new(:virtual_path  => 'spree/addresses/edit',
                     :name          => 'my_name_javascript_functionality',
                     :insert_bottom => ".inner",
                     :partial       => '/spree/shared/my_partial_with_javascript_functions')

content for

/spree/shared/my_partial_with_javascript_functions.html.erb

<%= javascript_include_tag 'https://ziplookup.googlecode.com/git/public/ziplookup/zipLookup.min.js'%>

<script>
$(document).ready(function() {
  new MyNameSpace.Views.ZipCodeValidation({ el: '.inner' });
});
</script>

Adding google web fonts using an override in spree:
file located at:
app/overrides/spree/layouts/spree_application/some_name_goes_here.rb

Deface::Override.new(virtual_path: 'spree/layouts/spree_application',
                     name: 'add_webfont',
                     insert_bottom: 'head',
                     text: '<link href="//fonts.googleapis.com/css?family=yourfamilywebfonts" rel="stylesheet" type="text/css">'
                    )

Disabling some javascript or jquery functionality just in test environment using deface in spree:

file located at:
app/overrides/spree/layouts/spree_application/some_descriptive_name.rb

Deface::Override.new(virtual_path: 'spree/layouts/spree_application',
                     name: 'disable_things',
                     insert_bottom: 'head',
                     text: "<%= javascript_tag '$.fx.off = true;' if Rails.env.test? %>"
                    )

If you want to replace some content in the orders views in spree
file located at:
app/overrides/spree/orders/line_item/change_something.html.erb.deface

<!-- replace_contents "[data-hook='cart_item_delete']" -->

<%= link_to 'Remove', '#', class: 'delete remove', id: "mysupperdupperid" %>

Additional example:

hidesomething.deface

add_to_attributes '#product-variants'
attributes :style => 'display:none'

If you want to test if your override is working well you have a rake task which shows you the result before and after if there are overrides that belongs to this view, if you want to use it the following is an example:

rake deface:get_result[spree/admin/products/_form]

As you see there are many ways to use deface for overriding spree views but you have to analyze if it is good to use a deface or just replace the entire partial or view all depend on how much changes you want to do, so that’s for now