forked from spree/spree
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d412be2
commit 9238b6a
Showing
4 changed files
with
165 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
module Spree | ||
module NavigationHelper | ||
def categories_data | ||
[ | ||
{ | ||
name: :women, | ||
url: nested_taxons_path('women'), | ||
subcategories: [ | ||
{ dresses: nested_taxons_path('women/dresses') }, | ||
{ shirts_and_blouses: nested_taxons_path('women/shirts-and-blouses') }, | ||
{ t_shirts_and_tops: nested_taxons_path('women/tops-and-t-shirts') }, | ||
{ sweaters: nested_taxons_path('women/sweaters') }, | ||
{ skirts: nested_taxons_path('women/skirts') }, | ||
{ jackets_and_coats: nested_taxons_path('women/jackets-and-coats') } | ||
] | ||
}, | ||
{ | ||
name: :men, | ||
url: nested_taxons_path('men'), | ||
subcategories: [ | ||
{ shirts: nested_taxons_path('men/shirts') }, | ||
{ t_shirts: nested_taxons_path('men/t-shirts') }, | ||
{ sweaters: nested_taxons_path('men/sweaters') }, | ||
{ jackets_and_coats: nested_taxons_path('men/jackets-and-coats') } | ||
] | ||
}, | ||
{ | ||
name: :sportswear, | ||
url: nested_taxons_path('sportswear'), | ||
subcategories: [ | ||
{ tops: nested_taxons_path('sportswear/tops') }, | ||
{ pants: nested_taxons_path('sportswear/pants') }, | ||
{ sweatshirts: nested_taxons_path('sportswear/sweatshirts') } | ||
] | ||
} | ||
] | ||
end | ||
end | ||
end |
41 changes: 41 additions & 0 deletions
41
frontend/app/views/spree/shared/_category_nav_bar.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
<div class="container p-0 d-flex justify-content-xl-around mx-auto"> | ||
<div class="row"> | ||
<div class="category-links"> | ||
<div class="category-links-header text-uppercase"> | ||
<%= Spree.t('category_nav_bar.categories')%> | ||
</div> | ||
|
||
<ul class="pl-0"> | ||
<% link_categories.each do |link_category| %> | ||
<li> | ||
<a href="<%= link_category.values.first %>" class="text-uppercase" > | ||
<%= I18n.t("navigation.subcategories.#{link_category.keys.first}") %> | ||
</a> | ||
</li> | ||
<% end %> | ||
</ul> | ||
</div> | ||
|
||
<%= link_to nested_taxons_path('streetstyle') do %> | ||
<div class="category-image category-image text-center mx-3"> | ||
<%= main_nav_image(category, "summer_collection") %> | ||
|
||
<div class="category-box"> | ||
<div class="category-box-small-text"><%= Spree.t('category_nav_bar.new_collection') %></div> | ||
<div class="category-box-big-text"><%= Spree.t('category_nav_bar.summer_2019') %></div> | ||
</div> | ||
</div> | ||
<% end %> | ||
|
||
<%= link_to nested_taxons_path('summer-sale') do %> | ||
<div class="category-image category-image text-center mx-3"> | ||
<%= main_nav_image(category, "special_offers") %> | ||
|
||
<div class="category-box"> | ||
<div class="category-box-small-text"><%= Spree.t('category_nav_bar.special_offers') %></div> | ||
<div class="category-box-big-text"><%= Spree.t('category_nav_bar.get_up_to_30_percent_off') %></div> | ||
</div> | ||
</div> | ||
<% end %> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,16 @@ | ||
<nav id="main-nav-bar" class="navbar"> | ||
<ul class="nav" data-hook> | ||
<li id="home-link" class="nav-item" data-hook> | ||
<%= link_to Spree.t(:home), spree.root_path, class: 'nav-link' %> | ||
<ul class="nav h-100 main-nav-bar" data-hook> | ||
<% categories_data.each do |category| %> | ||
<li class="navbar main-nav-bar-dropdown main-nav-bar-category" data-hook> | ||
<a href="<%= category[:url] %>" class="p-2 main-nav-bar-item main-nav-bar-category-button"> | ||
<%= category[:name] %> | ||
</a> | ||
|
||
<div class="w-100 shadow main-nav-bar-category-dropdown"> | ||
<%= render partial: 'spree/shared/category_nav_bar', locals: { | ||
link_categories: category[:subcategories], | ||
category: category[:name] | ||
} %> | ||
</div> | ||
</li> | ||
</ul> | ||
<ul class="nav navbar-right" data-hook> | ||
<li id="link-to-cart" class="nav-item" data-hook> | ||
<noscript> | ||
<%= link_to_cart %> | ||
</noscript> | ||
| ||
</li> | ||
<script>Spree.fetch_cart()</script> | ||
</ul> | ||
</nav> | ||
<% end %> | ||
</ul> |
70 changes: 70 additions & 0 deletions
70
frontend/app/views/spree/shared/_mobile_navigation.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
<div class="position-fixed text-uppercase d-xl-none mobile-navigation"> | ||
<div class="d-flex align-items-center bg-white header-spree" data-hook> | ||
<div class="container-fluid header-spree-fluid"> | ||
<div class="d-flex flex-nowrap align-items-center"> | ||
<div class="d-xl-none flex-grow-1"> | ||
<button id="mobile-navigation-back-button" aria-label="<%= Spree.t('nav_bar.go_to_previous_menu') %>"> | ||
<%= icon(name: 'arrow-right', | ||
classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-left', | ||
width: 18, | ||
height: 18) %> | ||
<%= icon(name: 'arrow-right', | ||
classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-left', | ||
width: 17, | ||
height: 28) %> | ||
</button> | ||
</div> | ||
<figure class="logo flex-grow-0 flex-xl-grow-1 order-xl-0 header-spree-fluid-logo" data-hook> | ||
<%= logo %> | ||
</figure> | ||
<div id="top-nav-bar-mobile" class="text-right flex-grow-1 header-spree-fluid-secondary-navigation" data-hook> | ||
<button id="mobile-navigation-close-button" aria-label="<%= Spree.t('nav_bar.close_menu') %>"> | ||
<%= icon(name: 'close', | ||
classes: 'd-sm-none', | ||
width: 17, | ||
height: 17) %> | ||
<%= icon(name: 'close', | ||
classes: 'd-none d-sm-inline', | ||
width: 26, | ||
height: 26) %> | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<ul class="list-unstyled position-relative h-100 mobile-navigation-list"> | ||
<% categories_data.each do |category| %> | ||
<li class="d-flex justify-content-between align-items-center mobile-navigation-list-item"> | ||
<a class="w-75" href="<%= category[:url] %>"> | ||
<%= I18n.t("navigation.categories.#{category[:name]}") %> | ||
</a> | ||
|
||
<a class="w-25 text-right mobile-navigation-category-link" data-category="<%= category[:name].to_s %>" href="#" aria-label="<%= Spree.t('go_to_category')%>"> | ||
<%= icon(name: 'arrow-right', | ||
classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-right', | ||
width: 16, | ||
height: 16) %> | ||
<%= icon(name: 'arrow-right', | ||
classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-right', | ||
width: 14, | ||
height: 27) %> | ||
</a> | ||
|
||
<ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="<%= category[:name].to_s %>"> | ||
<li class="text-center font-weight-bold mobile-navigation-sublist-header"> | ||
<%= I18n.t("navigation.categories.#{category[:name]}") %> | ||
</li> | ||
|
||
<% category[:subcategories].each do |subcategory| %> | ||
<li class="d-flex justify-content-between align-items-center mobile-navigation-list-item"> | ||
<a class="w-75" href="<%= subcategory.values.first %>"> | ||
<%= I18n.t("navigation.subcategories.#{subcategory.keys.first}") %> | ||
</a> | ||
</li> | ||
<% end %> | ||
</ul> | ||
</li> | ||
<% end %> | ||
</ul> | ||
</div> |