SpreeConf 2012: Spree themes with Deface

Overview of Spree's new core theme, and a deep dive into Deface.

Transcript

2. Brian Quinn Co-founder & CTO of Spree Commerce, Inc. @briandq bdq
3. spree/spree_reviews
4. spree/spree_reviews • Fork it
5. spree/spree_reviews • Fork it • sign in to Travis-CI
6. spree/spree_reviews • Fork it • sign in to Travis-CI • Test Hook
7. spree/spree_reviews • Fork it • sign in to Travis-CI • Test Hook @joshkalderimis
8. Creating Spree Themes with Deface
9. We’re going to cover • Intro to themes • Theme design principals • Walkthrough the core base theme • Deep dive into Deface • Features • Internals • Examples • Tricks • The future!
10. Going to presume • You’re a Rails Developer • You’re comfortable with HTML, CSS • You’ve already worked with Spree • You’ll stop me if you have a question!
11. What is a Spree theme?
12. Theme == Engine
13. app/
14. app/ assets/
15. app/ assets/ javascripts/
16. app/ assets/ javascripts/ stylesheets/
17. app/ assets/ javascripts/ stylesheets/ images/
18. app/ assets/ javascripts/ stylesheets/ images/ overrides/
19. app/ assets/ javascripts/ stylesheets/ images/ overrides/ views/
20. Themes are containers
21. Principals
22. - Maintainable
23. Overrides should use :original
24. - Extension Aware
25. spree-rdr-theme • spree-social • spree-wishlist • spree-recently-viewed • spree-related-products • spree-paypal-express
26. Rails.application.railties.all.map(&:railtie_name) .include? "spree_related_products"
27. Redefine Overrides
28. - Versioned
29. Versionfile "1.0.x" => { :branch => "master" } "0.70.x" => { :ref => "4aedfg" }
30. - NEVER EVER include feature(s)
31. Core Theme
32. Skeleton http://getskeleton.com
34. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
42. <div id="wrapper" class="row" data-hook> <% if content_for?(:sidebar) %> <aside id="sidebar" class="four columns alpha" data-hook> <%= yield :sidebar %> </aside> <% end %> 4 Skeleton app/views/spree/layouts/spree_application.html.erb 1 2 3 4 5 6 7
43. <div id="wrapper" class="row" data-hook> <% if content_for?(:sidebar) %> <aside id="sidebar" class="four columns alpha" data-hook> <%= yield :sidebar %> </aside> <% end %> 4 Skeleton app/views/spree/layouts/spree_application.html.erb 1 2 3 4 5 6 7
44. <div id="wrapper" class="row" data-hook> <% if content_for?(:sidebar) %> <aside id="sidebar" class="four columns alpha" data-hook> <%= yield :sidebar %> </aside> <% end %> 4 Skeleton app/views/spree/layouts/spree_application.html.erb 1 2 3 4 5 6 7
45. 1 column = 40px
46. 1 column = 28px
47. All columns are 420px
48. All columns are 420px 3
49. 3 All columns are 420px
50. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { ul#products { margin-left: 0; margin-right: -20px; li { width: 133px; margin-right: 10px; } } Media Query core/app/assets/stylesheets/store/screen.css.scss
51. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { ul#products { margin-left: 0; margin-right: -20px; li { width: 133px; margin-right: 10px; } } Media Query core/app/assets/stylesheets/store/screen.css.scss
52. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { ul#products { margin-left: 0; margin-right: -20px; li { width: 133px; margin-right: 10px; } } Media Query core/app/assets/stylesheets/store/screen.css.scss
53. All columns are 300px
54. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (max-width: 479px) { ul#products { margin-left: 0; margin-right: -20px; li { width: 140px; margin-right: 10px; } } Media Query core/app/assets/stylesheets/store/screen.css.scss
55. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (max-width: 479px) { ul#products { margin-left: 0; margin-right: -20px; li { width: 140px; margin-right: 10px; } } Media Query core/app/assets/stylesheets/store/screen.css.scss
56. /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (max-width: 479px) { ul#products { margin-left: 0; margin-right: -20px; li { width: 140px; margin-right: 10px; } } Media Query core/app/assets/stylesheets/store/screen.css.scss
63. HTML5 • header • footer • nav • aside • figure
64. HTML5 Reset V2 http://html5reset.org/
65. html5shiv http://code.google.com/p/html5shiv/
66. html5shiv http://code.google.com/p/html5shiv/
67. formalize http://formalize.me/
68. github.com/railsdog/deface deface
69. deface::override Deface::Override
70. Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>}) app/overrides/tweak_thumbs.rb
71. Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>}) app/overrides/tweak_thumbs.rb
72. Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>}) app/overrides/tweak_thumbs.rb
73. (options) options
74. :virtual_path
75. • spree/products/show :virtual_path
76. • spree/products/show • spree/shared/_nav_bar :virtual_path
77. • spree/products/show • spree/shared/_nav_bar • spree/admin/orders/index :virtual_path
78. • spree/products/show • spree/shared/_nav_bar • spree/admin/orders/index • pirates/new :virtual_path
79. :name
80. • replace_product_list :name
81. • replace_product_list • add_help_text :name
82. • replace_product_list • add_help_text • does_anyone_really_care :name
83. :remove :replace :replace_contents :surround :surround_contents :insert_after :insert_before :insert_top :insert_bottom :set_attributes Actions
84. :remove :replace :replace_contents :surround :surround_contents :insert_after :insert_before :insert_top :insert_bottom :set_attributes Actions :action => “css selector”
85. :text :erb :haml :parital :template Source
86. :text :erb :haml :parital :template Source :source => “markup”
87. :disabled
88. :disabled
89. Under the hood (under the hood)
90. Rails Deface Original ERB
91. Rails Deface Original ERB Deface Pre-parser
92. Rails Deface Original ERB Deface Pre-parser Pseudo ERB XML
93. <div id="thumbnails" data-hook> <% if @product.present? %> <%= render :partial => 'thumbnails' %> <% end %> </div> Original ERB 1 2 3 4 5
94. <div id="thumbnails" data-hook> <% if @product.present? %> <%= render :partial => 'thumbnails' %> <% end %> </div> Original ERB Pseudo ERB / XML <div id="thumbnails" data-hook> <code erb-silent> if @product.present? </code> <code erb-loud> render :partial => 'thumbnails' </code> <code erb-silent> end </code> </div> 1 2 3 4 5 1 2 3 4 5
95. <div id="thumbnails" data-hook> <% if @product.present? %> <%= render :partial => 'thumbnails' %> <% end %> </div> Original ERB Pseudo ERB / XML <div id="thumbnails" data-hook> <code erb-silent> if @product.present? </code> <code erb-loud> render :partial => 'thumbnails' </code> <code erb-silent> end </code> </div> 1 2 3 4 5 1 2 3 4 5
96. <div id="thumbnails" data-hook> <% if @product.present? %> <%= render :partial => 'thumbnails' %> <% end %> </div> Original ERB Pseudo ERB / XML <div id="thumbnails" data-hook> <code erb-silent> if @product.present? </code> <code erb-loud> render :partial => 'thumbnails' </code> <code erb-silent> end </code> </div> 1 2 3 4 5 1 2 3 4 5
97. <div id="thumbnails" data-hook> <% if @product.present? %> <%= render :partial => 'thumbnails' %> <% end %> </div> Original ERB Pseudo ERB / XML <div id="thumbnails" data-hook> <code erb-silent> if @product.present? </code> <code erb-loud> render :partial => 'thumbnails' </code> <code erb-silent> end </code> </div> 1 2 3 4 5 1 2 3 4 5
98. <div id="thumbnails" data-hook> <% if @product.present? %> <%= render :partial => 'thumbnails' %> <% end %> </div> Original ERB Pseudo ERB / XML <div id="thumbnails" data-hook> <code erb-silent> if @product.present? </code> <code erb-loud> render :partial => 'thumbnails' </code> <code erb-silent> end </code> </div> 1 2 3 4 5 1 2 3 4 5
99. Original ERB <h1 id="<%= dom_id(@product) %>"> Product Name </h1> 1 2 3
100. <h1 data-erb-id="&lt;%= dom_id(@product) %&gt;"> Product Name </h1> Original ERB Pseudo ERB / XML <h1 id="<%= dom_id(@product) %>"> Product Name </h1> 1 2 3 1 2 3
101. <h1 data-erb-id="&lt;%= dom_id(@product) %&gt;"> Product Name </h1> Original ERB Pseudo ERB / XML <h1 id="<%= dom_id(@product) %>"> Product Name </h1> 1 2 3 1 2 3
102. <h1 data-erb-id="&lt;%= dom_id(@product) %&gt;"> Product Name </h1> Original ERB Pseudo ERB / XML <h1 id="<%= dom_id(@product) %>"> Product Name </h1> 1 2 3 1 2 3
103. Original ERB <p <%= render_style %> <%= show_attrs %>> Product description </p> 1 2 3
104. <p data-erb-0="&lt;%= render_style %&gt;" data-erb-1="&lt;%= show_attrs %&gt;"> Product description </p> Original ERB Pseudo ERB / XML <p <%= render_style %> <%= show_attrs %>> Product description </p> 1 2 3 1 2 3
105. <p data-erb-0="&lt;%= render_style %&gt;" data-erb-1="&lt;%= show_attrs %&gt;"> Product description </p> Original ERB Pseudo ERB / XML <p <%= render_style %> <%= show_attrs %>> Product description </p> 1 2 3 1 2 3
106. <p data-erb-0="&lt;%= render_style %&gt;" data-erb-1="&lt;%= show_attrs %&gt;"> Product description </p> Original ERB Pseudo ERB / XML <p <%= render_style %> <%= show_attrs %>> Product description </p> 1 2 3 1 2 3
107. Deface needs well-formed erb / html
108. <div <%= ">" %>
109. <div <%= ">" %> FAIL!
110. Rails Deface Original ERB Deface Pre-parser Pseudo ERB XML
111. Rails Deface Original ERB Deface Pre-parser Pseudo ERB XML Nokogiri
112. Rails Deface Original ERB Deface Pre-parser Pseudo ERB XML Nokogiri Deface Overrides
113. Rails Deface Original ERB Deface Pre-parser Pseudo ERB XML Nokogiri Deface Overrides
114. Rails Deface Original ERB Deface Pre-parser Pseudo ERB XML Nokogiri Deface Overrides Deface Post- parser
115. Rails Deface Original ERB Deface Pre-parser Pseudo ERB XML Nokogiri Deface Overrides Deface Post- parser Final ERB
116. (examples) Examples
117. (the basics) The Basics
118. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div>
119. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show",
120. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs",
121. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :insert_bottom => "div#thumbnails",
122. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :insert_bottom => "div#thumbnails", :erb => %q{<span>Hello World</span>})
123. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :insert_bottom => "div#thumbnails", :erb => %q{<span>Hello World</span>})
124. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 9 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :insert_bottom => "div#thumbnails", :erb => %q{<span>Hello World</span>})
125. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 9 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :insert_bottom => "div#thumbnails", :erb => %q{<span>Hello World</span>}) <span>Hello World</span>
126. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 9 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <span>Hello World</span> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :insert_top => "div#thumbnails", :erb => %q{<span>Hello World</span>})
127. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 9 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span>Hello World</span> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :insert_before => "div#thumbnails", :erb => %q{<span>Hello World</span>})
128. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 9 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> <span>Hello World</span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :insert_after => "div#thumbnails", :erb => %q{<span>Hello World</span>})
129. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span>Hello World</span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>})
130. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <span>Hello World</span> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace_contents => "div#thumbnails", :erb => %q{<span>Hello World</span>})
131. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :remove => "div#thumbnails", :erb => %q{<span>Hello World</span>})
132. (surround) surround
133. <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb app/views/spree/products/show.html.erb Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :surround => "div#thumbnails", :erb => %q{<span> <h2>Images</h2> <%= render_original %> </span>}) 1 2 3 4 5 6 7 8
134. <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb app/views/spree/products/show.html.erb Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :surround => "div#thumbnails", :erb => %q{<span> <h2>Images</h2> <%= render_original %> </span>}) 1 2 3 4 5 6 7 8
135. <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb app/views/spree/products/show.html.erb Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :surround => "div#thumbnails", :erb => %q{<span> <h2>Images</h2> <%= render_original %> </span>}) 1 2 3 4 5 6 7 8
136. 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 9 10 11 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span> <h2>Images</h2> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :surround => "div#thumbnails", :erb => %q{<span> <h2>Images</h2> <%= render_original %> </span>})
137. 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 9 10 11 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span> <h2>Images</h2> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :surround => "div#thumbnails", :erb => %q{<span> <h2>Images</h2> <%= render_original %> </span>})
138. 1 2 3 4 5 app/overrides/tweak_thumbs.rb app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <span> <%= render 'thumbnails', :product => @product %> </span> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :surround_contents => "div#thumbnails", :erb => %q{<span><%= render_original %></span>}) 1 2 3 4 5 6 7 8 9 10
139. 1 2 3 4 5 app/overrides/tweak_thumbs.rb app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <span> <%= render 'thumbnails', :product => @product %> </span> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :surround_contents => "div#thumbnails", :erb => %q{<span><%= render_original %></span>}) 1 2 3 4 5 6 7 8 9 10
140. (set_attributes) seT_aTTribuTes
141. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div alt="blah" id="thumbs" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :set_attributes => "div#thumbnails", :attributes => { :alt => "blah" :id => "thumbs"})
142. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div alt="blah" id="thumbs" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :set_attributes => "div#thumbnails", :attributes => { :alt => "blah" :id => "thumbs"})
143. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div alt="blah" id="thumbs" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :set_attributes => "div#thumbnails", :attributes => { :alt => "blah" :id => "thumbs"})
144. (sequence) sequence
145. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span>Hello World</span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>})
146. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span><b>Goodbye World</b></span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>}) 1 2 3 4 5 app/overrides/cry_for_help.rb Deface::Override.new(:virtual_path => "spree/products/show", :name => "cry_for_help", :replace_contents => "#product-images span", :erb => “<b>Goodbye World</b>”, :sequence => {:after => ‘tweak_thumbs’})
147. (closing_selector) closing_selector
148. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#main-image", :closing_selector => "div#thumbnails", :erb => %q{<span>Hello World</span>})
149. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#main-image", :closing_selector => "div#thumbnails", :erb => %q{<span>Hello World</span>})
150. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#main-image", :closing_selector => "div#thumbnails", :erb => %q{<span>Hello World</span>})
151. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 app/views/spree/products/show.html.erb Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#main-image", :closing_selector => "div#thumbnails", :erb => %q{<span>Hello World</span>}) <div id="product-images" data-hook="product_images"> <span>Hello World</span> </div>
152. 1 2 3 4 5 6 7 views/spree/products/index.html.erb (pseudo) 1 2 3 4 5 6 7 views/spree/products/index.html.erb <% content_for :sidebar do %> <div data-hook="homepage_sidebar_navigation"> <% if "products" == @current_controller %> <%= render :partial => 'spree/shared/taxonomies' %> <% end %> </div> <% end %> <code erb-silent> content_for :sidebar do </code> <div data-hook="homepage_sidebar_navigation"> <code erb-silent> if “products” == @current_controller </code> <code erb-loud> render :partial => 'spree/shared/filters' </code> <code erb-silent> end </code> </div> <code erb-silent> end </code>
153. 1 2 3 4 5 6 7 views/spree/products/index.html.erb (pseudo) 1 2 3 4 5 6 7 views/spree/products/index.html.erb <% content_for :sidebar do %> <div data-hook="homepage_sidebar_navigation"> <% if "products" == @current_controller %> <%= render :partial => 'spree/shared/taxonomies' %> <% end %> </div> <% end %> <code erb-silent> content_for :sidebar do </code> <div data-hook="homepage_sidebar_navigation"> <code erb-silent> if “products” == @current_controller </code> <code erb-loud> render :partial => 'spree/shared/filters' </code> <code erb-silent> end </code> </div> <code erb-silent> end </code>
154. 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 views/spree/products/index.html.erb (pseudo) <code erb-silent> content_for :sidebar do </code> <div data-hook="homepage_sidebar_navigation"> <code erb-silent> if “products” == @current_controller </code> <code erb-loud> render :partial =&gt; 'spree/shared/filters' </code> <code erb-silent> end </code> </div> <code erb-silent> end </code> Deface::Override.new(:virtual_path => "products/show", :name => "tweak_thumbs", :replace => %q{code[erb-silent]:contains(‘if “products” == @current_controller’)}, :closing_selector => %q{code[erb-silent]:contains(‘end’)}, :erb => %q{<span>Hello World</span>})
155. 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 views/spree/products/index.html.erb (pseudo) <code erb-silent> content_for :sidebar do </code> <div data-hook="homepage_sidebar_navigation"> <code erb-silent> if “products” == @current_controller </code> <code erb-loud> render :partial =&gt; 'spree/shared/filters' </code> <code erb-silent> end </code> </div> <code erb-silent> end </code> Deface::Override.new(:virtual_path => "products/show", :name => "tweak_thumbs", :replace => %q{code[erb-silent]:contains(‘if “products” == @current_controller’)}, :closing_selector => %q{code[erb-silent]:contains(‘end’)}, :erb => %q{<span>Hello World</span>})
156. 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 views/spree/products/index.html.erb (pseudo) <code erb-silent> content_for :sidebar do </code> <div data-hook="homepage_sidebar_navigation"> <code erb-silent> if “products” == @current_controller </code> <code erb-loud> render :partial =&gt; 'spree/shared/filters' </code> <code erb-silent> end </code> </div> <code erb-silent> end </code> Deface::Override.new(:virtual_path => "products/show", :name => "tweak_thumbs", :replace => %q{code[erb-silent]:contains(‘if “products” == @current_controller’)}, :closing_selector => %q{code[erb-silent]:contains(‘end’)}, :erb => %q{<span>Hello World</span>})
157. 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 views/spree/products/index.html.erb (pseudo) <code erb-silent> content_for :sidebar do </code> <div data-hook="homepage_sidebar_navigation"> <code erb-silent> if “products” == @current_controller </code> <code erb-loud> render :partial =&gt; 'spree/shared/filters' </code> <code erb-silent> end </code> </div> <code erb-silent> end </code> Deface::Override.new(:virtual_path => "products/show", :name => "tweak_thumbs", :replace => %q{code[erb-silent]:contains(‘if “products” == @current_controller’)}, :closing_selector => %q{code[erb-silent]:contains(‘end’)}, :erb => %q{<span>Hello World</span>})
158. 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 views/spree/products/index.html.erb (pseudo) <code erb-silent> content_for :sidebar do </code> <div data-hook="homepage_sidebar_navigation"> <code erb-silent> if “products” == @current_controller </code> <code erb-loud> render :partial =&gt; 'spree/shared/filters' </code> <code erb-silent> end </code> </div> <code erb-silent> end </code> Deface::Override.new(:virtual_path => "products/show", :name => "tweak_thumbs", :replace => %q{code[erb-silent]:contains(‘if “products” == @current_controller’)}, :closing_selector => %q{code[erb-silent]:contains(‘end’)}, :erb => %q{<span>Hello World</span>})
159. 1 2 3 4 5 6 7 app/overrides/tweak_thumbs.rb 1 2 3 views/spree/products/index.html.erb (pseudo) <code erb-silent> content_for :sidebar do </code> <span>Hello World</span> <code erb-silent> end </code> Deface::Override.new(:virtual_path => "products/show", :name => "tweak_thumbs", :replace => %q{code[erb-silent]:contains(‘if “products” == @current_controller’)}, :closing_selector => %q{code[erb-silent]:contains(‘end’)}, :erb => %q{<span>Hello World</span>})
160. CSS General Sibling Selector
161. ~
162. code[erb-silent]:contains(‘if “products” == current_controller’) ~ code[erb-silent]:contains(‘end’)
163. (original) original
164. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span>Hello World</span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>}, :original => %q{<%= render 'thumbnails', :product => @product %>})
165. 1 2 3 4 5 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span>Hello World</span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>}, :original => %q{<%= render 'thumbnails', :product => @product %>}) $ Deface [WARNING]: The original source for 'tweak_thumbs' has changed, this override should be reviewed to ensure it's still valid.
166. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span>Hello World</span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>})
167. $ Deface [WARNING]: No :original defined for 'tweak_thumbs', you should change its definition to include: :original => 'eb3fa668cd98b6a1c75c36420ef1b238a1fc55ac'. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span>Hello World</span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>})
168. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <span>Hello World</span> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :replace => "div#thumbnails", :erb => %q{<span>Hello World</span>}, :original => "eb3fa668cd98b6a1c75c36420ef1b238a1fc55ac")
169. (data-hook) data-hook
170. 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div>
171. 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> [data-hook=‘product_images’]
172. 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> [data-hook=‘product_images’] #thumbnails[data-hook]
174. #thumbnails[data-hook], [data-hook=‘thumbnails’]
175. (haml support) haml support
179. Rails Deface Original Haml
180. Rails Deface Original Haml Deface Haml Converter
181. Rails Deface Original Haml Deface Haml Converter Converted ERB
182. Rails Deface Deface Pre-parser Pseudo ERB XML Nokogiri Deface Overrides Deface Post- parser Final ERB Original Haml Deface Haml Converter Converted ERB
183. Rails Deface Deface Pre-parser Pseudo ERB XML Nokogiri Deface Overrides Deface Post- parser Final ERB Original Haml Deface Haml Converter Converted ERB
184. 1 2 3 app/views/spree/shared/_nav_bar.html.erb <li id="search-bar" data-hook> <%= render :partial => 'spree/shared/search' %> </li>
185. 1 2 3 app/views/spree/shared/_nav_bar.html.erb <li id="search-bar" data-hook> <%= render :partial => 'spree/shared/search' %> </li> <li id="search-bar" data-hook> <code erb-loud> render :partial => 'spree/shared/search' </code> </li> Pseudo ERB / XML 1 2 3
186. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 app/views/spree/shared/_nav_bar.html.erb Deface::Override.new(:name => 'insert_blog_link_in_nav_bar', :virtual_path => 'spree/shared/_nav_bar', :insert_after => '#search-bar[data-hook]', :haml => %q{%li{:id => 'blog'}= link_to 'Blog', blog_path}) <li id="search-bar" data-hook> <%= render :partial => 'spree/shared/search' %> </li> <li id="search-bar" data-hook> <code erb-loud> render :partial => 'spree/shared/search' </code> </li> Pseudo ERB / XML 1 2 3
187. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 app/views/spree/shared/_nav_bar.html.erb Deface::Override.new(:name => 'insert_blog_link_in_nav_bar', :virtual_path => 'spree/shared/_nav_bar', :insert_after => '#search-bar[data-hook]', :haml => %q{%li{:id => 'blog'}= link_to 'Blog', blog_path}) <li id="search-bar" data-hook> <%= render :partial => 'spree/shared/search' %> </li> <li id="search-bar" data-hook> <code erb-loud> render :partial => 'spree/shared/search' </code> </li> Pseudo ERB / XML 1 2 3
188. 1 2 app/views/spree/shared/_nav_bar.html.haml %li#search-bar{"data-hook" => ""} = render :partial => 'spree/shared/search' 1 2 3 4 app/overrides/tweak_thumbs.rb Deface::Override.new(:name => 'insert_blog_link_in_nav_bar', :virtual_path => 'spree/shared/_nav_bar', :insert_after => '#search-bar[data-hook]', :haml => %q{%li{:id => 'blog'}= link_to 'Blog', blog_path}) <li id="search-bar" data-hook> <code erb-loud> render :partial => 'spree/shared/search' </code> </li> Pseudo ERB / XML 1 2 3
189. 1 2 app/views/spree/shared/_nav_bar.html.haml %li#search-bar{"data-hook" => ""} = render :partial => 'spree/shared/search' 1 2 3 4 app/overrides/tweak_thumbs.rb Deface::Override.new(:name => 'insert_blog_link_in_nav_bar', :virtual_path => 'spree/shared/_nav_bar', :insert_after => '#search-bar[data-hook]', :haml => %q{%li{:id => 'blog'}= link_to 'Blog', blog_path}) <li id="search-bar" data-hook> <code erb-loud> render :partial => 'spree/shared/search' </code> </li> Pseudo ERB / XML 1 2 3
190. (production & precompiling) production & precompiling
191. rake deface:precompile
192. app/compiled_views
193. Deface::Override.new(:virtual_path => "spree/shared/_store_menu", :name => "remove_home_link", :remove => "#home-link[data-hook]") app/overrides/remove_home_link.rb
194. Deface::Override.new(:virtual_path => "spree/shared/_store_menu", :name => "remove_home_link", :remove => "#home-link[data-hook]") app/overrides/remove_home_link.rb app/spree/shared/_store_menu.html.erb <li id="home-link" data-hook><%= link_to t(:home), root_path %></li> <li id="link-to-cart" data-hook><%= link_to_cart %></li>
195. Deface::Override.new(:virtual_path => "spree/shared/_store_menu", :name => "remove_home_link", :remove => "#home-link[data-hook]") app/overrides/remove_home_link.rb app/spree/shared/_store_menu.html.erb <li id="home-link" data-hook><%= link_to t(:home), root_path %></li> <li id="link-to-cart" data-hook><%= link_to_cart %></li> app/compiled_views/_store_menu.html.erb <li id="link-to-cart" data-hook><%= link_to_cart %></li>
196. YourApplication::Application.configure do ... #disable deface config.deface.enabled = false end config/environments/production.rb
197. [WARNING] Precompiled views present and Deface is enabled, this can result in overrides being applied twice.
198. rake deface:clean
199. (tools & tricks) tool & Tricks
200. Redefining Overrides
201. 1 2 3 4 spree_social/app/overrides/add_icons.rb Deface::Override.new(:virtual_path => "spree/users/new", :name => "add_icons", :replace => "[data-hook=‘user_form’]", :erb => %q{<img src=”icons.png”>}) 1 2 3 app/overrides/tweak_social_icons.rb Deface::Override.new(:virtual_path => "spree/users/new", :name => "add_icons", :erb => %q{<img src=”my-icons.png”>})
202. http://deface.heroku.com
211. https://github.com/BDQ/deface-this
212. Render No More
213. Started GET "/" for 127.0.0.1 at Mon Jan 16 12:01:29 +0000 2012 Processing by Spree::HomeController#index as */* Rendered /spree/core/app/views/spree/shared/_taxonomies.html.erb (9.0ms) Rendered /spree/core/app/views/spree/shared/_products.html.erb (26.7ms) Rendered /spree/core/app/views/spree/home/index.html.erb within /spree/layouts/spree_application (36.6ms) Rendered /spree/core/app/views/spree/shared/_head.html.erb (1.6ms) Rendered /spree/core/app/views/spree/shared/_search.html.erb (2.1ms) Rendered /spree/core/app/views/spree/shared/_store_menu.html.erb (0.7ms) Rendered /spree/core/app/views/spree/shared/_nav_bar.html.erb (3.9ms) Rendered /spree/core/app/views/spree/shared/_google_analytics.html.erb (0.8ms) Completed 200 OK in 48ms (Views: 43.2ms | ActiveRecord: 2.2ms)
214. Started GET "/" for 127.0.0.1 at Mon Jan 16 12:01:29 +0000 2012 Processing by Spree::HomeController#index as */* Rendered /spree/core/app/views/spree/shared/_taxonomies.html.erb (9.0ms) Rendered /spree/core/app/views/spree/shared/_products.html.erb (26.7ms) Rendered /spree/core/app/views/spree/home/index.html.erb within /spree/layouts/spree_application (36.6ms) Rendered /spree/core/app/views/spree/shared/_head.html.erb (1.6ms) Rendered /spree/core/app/views/spree/shared/_search.html.erb (2.1ms) Rendered /spree/core/app/views/spree/shared/_store_menu.html.erb (0.7ms) Rendered /spree/core/app/views/spree/shared/_nav_bar.html.erb (3.9ms) Rendered /spree/core/app/views/spree/shared/_google_analytics.html.erb (0.8ms) Completed 200 OK in 48ms (Views: 43.2ms | ActiveRecord: 2.2ms) Started GET "/" for 127.0.0.1 at Mon Jan 16 11:51:29 +0000 2012 Processing by Spree::HomeController#index as */* Rendered /spree/core/app/views/spree/home/index.html.erb within /spree/layouts/spree_application (27.5ms) Completed 200 OK in 36ms (Views: 31.8ms | ActiveRecord: 1.8ms)
215. 1 2 3 4 app/overrides/render_no_more.rb 1 2 3 views/spree/layouts/spree_application.html.erb <head data-hook="inside_head"> <%= render :partial => 'spree/shared/head' %> </head> Deface::Override.new(:virtual_path => 'spree/layouts/spree_application', :name => 'render_no_more', :replace => "code:contains('spree/shared/head')", :partial => 'spree/shared/head') https://gist.github.com/1345a8603b4c90e26540
216. No Renders With Renders Avg (ms) 77.62 92.61 Max (ms) 313.7 435.4 Min (ms) 28.9 31.3 Total (mins) 12.94 15.44
217. $ rake deface:get_result[spree/shared/_store_menu]
218. ---------------- Before ---------------- <li id="home-link" data-hook><%= link_to t(:home), root_path %></li> <li id="link-to-cart" data-hook><%= link_to_cart %></li> ---------------- Overrides (1)-------- - 'remove_home_link' will be applied. ---------------- After ---------------- <li id="link-to-cart" data-hook><%= link_to_cart %></li> ---------------- Diff ----------------- -<li id="home-link" data-hook><%= link_to t(:home), root_path %></li> <li id="link-to-cart" data-hook><%= link_to_cart %></li>
219. $ rake deface:test_selector[ spree/shared/_store_menu, ‘li’]
220. $ rake deface:test_selector[ spree/shared/_store_menu, ‘li’] Querying 'spree/shared/_store_menu' for 'li' ---------------- Match 1 ---------------- <li id="home-link" data-hook><%= link_to t(:home), root_path %></li> ---------------- Match 2 ---------------- <li id="link-to-cart" data-hook><%= link_to_cart %></li>
221. Never Gonna’
222. 1 2 3 4 app/overrides/never_gonna.rb Deface::Override.new(:virtual_path => "products/show", :name => "never_gonna", :set_attributes => "a", :attributes => {:href => "http://youtu.be/dQw4w9WgXcQ"})
223. 1 2 3 4 app/overrides/never_gonna.rb Deface::Override.new(:virtual_path => "products/show", :name => "never_gonna", :set_attributes => "a", :attributes => {:href => "http://youtu.be/dQw4w9WgXcQ"})
224. (the future) The future
225. More actions! • :cut • :copy
226. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :cut => "div#main-image", :insert_bottom => "div#thumbnails")
227. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :cut => "div#main-image", :insert_bottom => "div#thumbnails")
228. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> <div id="main-image" data-hook> <%= render 'image' %> </div> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :cut => "div#main-image", :insert_bottom => "div#thumbnails")
229. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :copy => "div#main-image", :insert_bottom => "div#thumbnails")
230. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 app/views/spree/products/show.html.erb <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> </div> </div> Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :copy => "div#main-image", :insert_bottom => "div#thumbnails")
231. 1 2 3 4 app/overrides/tweak_thumbs.rb 1 2 3 4 5 6 7 8 9 10 11 app/views/spree/products/show.html.erb Deface::Override.new(:virtual_path => "spree/products/show", :name => "tweak_thumbs", :cut => "div#main-image", :insert_bottom => "div#thumbnails") <div id="product-images" data-hook="product_images"> <div id="main-image" data-hook> <%= render 'image' %> </div> <div id="thumbnails" data-hook> <%= render 'thumbnails', :product => @product %> <div id="main-image" data-hook> <%= render 'image' %> </div> </div> </div>
232. Deface DSL
233. Exception on :original mismatch
234. Questions?