[catalog-categories] Adding categories on catalog's side bar and breadcrumb on top

Rodrigo Souto
1 parent 86f1c20e
Showing 3 changed files with 104 additions and 2 deletions Show diff stats
app/helpers/catalog_helper.rb
app/views/catalog/index.rhtml
public/stylesheets/application.css
@@ -3,4 +3,28 @@ module CatalogHelper
   include DisplayHelper
   include ManageProductsHelper
  
+  def breadcrumb(category)
+    start = link_to(_('Start'), {:action => 'index'})
+    ancestors = category.ancestors.map { |c| link_to(c.name, {:action => 'index', :level => c.id}) }.reverse
+    current_level = content_tag('strong', category.name)
+    all_items = [start] + ancestors + [current_level]
+    content_tag('div', all_items.join(' &rarr; '), :id => 'breadcrumb')
+  end
+
+  def category_link(category, sub = false)
+    count = profile.products.from_category(category).count
+    name = truncate(category.name, :length => 22 - count.to_s.size)
+    link_name = sub ? name : content_tag('strong', name)
+    link = link_to(link_name, {:action => 'index', :level => category.id}, :title => category.name)
+    content_tag('li', "#{link} (#{count})") if count > 0
+  end
+
+  def category_sub_links(category)
+    sub_categories = []
+    category.children.each do |sub_category|
+      sub_categories << category_link(sub_category, true)
+    end
+    content_tag('ul', sub_categories) if sub_categories.size > 1
+  end
+
 end
 <% extra_content = [] %>
 <% extra_content_list = [] %>
  
-<ul id="product-list">
-  <li><h1><%= _('Products/Services') %></h1></li>
+<h1><%= _('Products/Services') %></h1>
  
+<%= breadcrumb(@category) if params[:level] %>
+
+<div class='l-sidebar-left-bar'>
+  <ul>
+    <% if @categories.size > 0 %>
+      <% @categories.each do |category| %>
+        <%= category_link(category) %>
+        <%= category_sub_links(category) %>
+      <% end %>
+    <% else %>
+      <%= content_tag('li', _('There are no sub-categories for %s') % @category.name, :style => 'color: #555753; padding-bottom: 0.5em;') %>
+    <% end %>
+  </ul>
+</div>
+
+<ul id="product-list" class="l-sidebar-left-content">
   <% @products.each do |product| %>
     <% extra_content = @plugins.dispatch(:catalog_item_extras, product).collect { |content| instance_eval(&content) } %>
     <% extra_content_list = @plugins.dispatch(:catalog_list_item_extras, product).collect { |content| instance_eval(&content) } %>
@@ -2655,6 +2655,40 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
 .msie #product-list h3 {
   margin-top: -15px;
 }
+
+.l-sidebar-left-bar ul,
+.l-sidebar-right-bar ul {
+  list-style-type: none;
+  margin-left: 0;
+  padding: 1em 1em 0.5em 1em;
+}
+
+.l-sidebar-left-bar ul ul,
+.l-sidebar-right-bar ul ul {
+  padding-top: 0;
+}
+
+.l-sidebar-left-bar ul{
+  background-color: #eeeeec;
+  border-radius: 5px;
+}
+
+.l-sidebar-left-bar a,
+.l-sidebar-right-bar a {
+  text-decoration: none;
+}
+
+.l-sidebar-left-bar a:hover,
+.l-sidebar-right-bar a:hover {
+  text-decoration: underline;
+}
+
+.l-sidebar-left-bar li,
+.l-sidebar-right-bar li {
+  margin: 0;
+  padding: 0;
+}
+
 /* * * Show Product * * * * * * * * * * * * */
  
 .controller-catalog #show_product .product-pic {
@@ -6078,3 +6112,32 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
      margin: .8em 0 .2em;
      line-height: 1.5;
 }
+
+/* Sidebar Layout */
+
+.l-sidebar-left-bar {
+  float: left;
+  width: 20%;
+}
+
+.l-sidebar-left-content {
+  float: right;
+  width: 78%;
+}
+
+.l-sidebar-right-bar {
+  float: right;
+  width: 20%;
+}
+
+.l-sidebar-right-content {
+  float: left;
+  width: 78%;
+}
+
+/* Breadcrumb */
+
+#breadcrumb {
+  font-size: 16px;
+  margin: 15px 0;
+}
...	...	@@ -3,4 +3,28 @@ module CatalogHelper
3	3	include DisplayHelper
4	4	include ManageProductsHelper
5	5
	6	+ def breadcrumb(category)
	7	+ start = link_to(_('Start'), {:action => 'index'})
	8	+ ancestors = category.ancestors.map { \|c\| link_to(c.name, {:action => 'index', :level => c.id}) }.reverse
	9	+ current_level = content_tag('strong', category.name)
	10	+ all_items = [start] + ancestors + [current_level]
	11	+ content_tag('div', all_items.join(' → '), :id => 'breadcrumb')
	12	+ end
	13	+
	14	+ def category_link(category, sub = false)
	15	+ count = profile.products.from_category(category).count
	16	+ name = truncate(category.name, :length => 22 - count.to_s.size)
	17	+ link_name = sub ? name : content_tag('strong', name)
	18	+ link = link_to(link_name, {:action => 'index', :level => category.id}, :title => category.name)
	19	+ content_tag('li', "#{link} (#{count})") if count > 0
	20	+ end
	21	+
	22	+ def category_sub_links(category)
	23	+ sub_categories = []
	24	+ category.children.each do \|sub_category\|
	25	+ sub_categories << category_link(sub_category, true)
	26	+ end
	27	+ content_tag('ul', sub_categories) if sub_categories.size > 1
	28	+ end
	29	+
6	30	end
...	...
1	1	<% extra_content = [] %>
2	2	<% extra_content_list = [] %>
3	3
4		-<ul id="product-list">
5		- <li><h1><%= _('Products/Services') %></h1></li>
	4	+<h1><%= _('Products/Services') %></h1>
6	5
	6	+<%= breadcrumb(@category) if params[:level] %>
	7	+
	8	+<div class='l-sidebar-left-bar'>
	9	+ <ul>
	10	+ <% if @categories.size > 0 %>
	11	+ <% @categories.each do \|category\| %>
	12	+ <%= category_link(category) %>
	13	+ <%= category_sub_links(category) %>
	14	+ <% end %>
	15	+ <% else %>
	16	+ <%= content_tag('li', _('There are no sub-categories for %s') % @category.name, :style => 'color: #555753; padding-bottom: 0.5em;') %>
	17	+ <% end %>
	18	+ </ul>
	19	+</div>
	20	+
	21	+<ul id="product-list" class="l-sidebar-left-content">
7	22	<% @products.each do \|product\| %>
8	23	<% extra_content = @plugins.dispatch(:catalog_item_extras, product).collect { \|content\| instance_eval(&content) } %>
9	24	<% extra_content_list = @plugins.dispatch(:catalog_list_item_extras, product).collect { \|content\| instance_eval(&content) } %>
...	...
...	...	@@ -2655,6 +2655,40 @@ div#activation_enterprise label, div#activation_enterprise input, div#activation
2655	2655	.msie #product-list h3 {
2656	2656	margin-top: -15px;
2657	2657	}
	2658	+
	2659	+.l-sidebar-left-bar ul,
	2660	+.l-sidebar-right-bar ul {
	2661	+ list-style-type: none;
	2662	+ margin-left: 0;
	2663	+ padding: 1em 1em 0.5em 1em;
	2664	+}
	2665	+
	2666	+.l-sidebar-left-bar ul ul,
	2667	+.l-sidebar-right-bar ul ul {
	2668	+ padding-top: 0;
	2669	+}
	2670	+
	2671	+.l-sidebar-left-bar ul{
	2672	+ background-color: #eeeeec;
	2673	+ border-radius: 5px;
	2674	+}
	2675	+
	2676	+.l-sidebar-left-bar a,
	2677	+.l-sidebar-right-bar a {
	2678	+ text-decoration: none;
	2679	+}
	2680	+
	2681	+.l-sidebar-left-bar a:hover,
	2682	+.l-sidebar-right-bar a:hover {
	2683	+ text-decoration: underline;
	2684	+}
	2685	+
	2686	+.l-sidebar-left-bar li,
	2687	+.l-sidebar-right-bar li {
	2688	+ margin: 0;
	2689	+ padding: 0;
	2690	+}
	2691	+
2658	2692	/* * * Show Product * * * * * * * * * * * * */
2659	2693
2660	2694	.controller-catalog #show_product .product-pic {
...	...	@@ -6078,3 +6112,32 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6078	6112	margin: .8em 0 .2em;
6079	6113	line-height: 1.5;
6080	6114	}
	6115	+
	6116	+/* Sidebar Layout */
	6117	+
	6118	+.l-sidebar-left-bar {
	6119	+ float: left;
	6120	+ width: 20%;
	6121	+}
	6122	+
	6123	+.l-sidebar-left-content {
	6124	+ float: right;
	6125	+ width: 78%;
	6126	+}
	6127	+
	6128	+.l-sidebar-right-bar {
	6129	+ float: right;
	6130	+ width: 20%;
	6131	+}
	6132	+
	6133	+.l-sidebar-right-content {
	6134	+ float: left;
	6135	+ width: 78%;
	6136	+}
	6137	+
	6138	+/* Breadcrumb */
	6139	+
	6140	+#breadcrumb {
	6141	+ font-size: 16px;
	6142	+ margin: 15px 0;
	6143	+}
...	...