SpreeConf 2012: Spree themes with Deface

Transcript

1. None

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

33. None

34. 1 2 3 4 5 6 7 8 9 10

    11 12 13 14 15 16
35. None

36. 4

37. 12

38. 3

39. 6

40. 10

41. 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
57. None
58. None
59. None
60. None
61. None
62. None

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]
173. None

174. #thumbnails[data-hook], [data-hook=‘thumbnails’]

175. (haml support) haml support

176. None
177. None
178. None

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

203. None
204. None
205. None
206. None
207. None
208. None
209. None
210. None

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?