spree_frontend 3.7.14.1 → 4.0.0.beta

data/app/views/spree/products/_cart_form.html.erb

@@ -1,27 +1,30 @@
 <%= form_for :order, html: { id: 'add-to-cart-form' } do |f| %>
   <div class="row" id="inside-product-cart-form" data-hook="inside_product_cart_form" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
     <% if @product.variants_and_option_values(current_currency).any? %>
-      <div id="product-variants" class="col-md-6">
+      <div id="product-variants" class="col-lg-6 mt-4">
         <h3 class="product-section-title"><%= Spree.t(:variants) %></h3>
         <ul class="list-group">
           <% @product.variants_and_option_values(current_currency).each_with_index do |variant, index| %>
-            <li>
-              <%= radio_button_tag "variant_id", variant.id, index == 0,
-                  'data-price' => variant.price_in(current_currency).money,
-                  'data-in-stock' => variant.can_supply?,
-                  'data-backordered' => variant.backordered?
-              %>
-              <%= label_tag "variant_id_#{ variant.id }" do %>
-                <span class="variant-description">
-                  <%= variant.options_text %>
-                </span>
-                <% if variant_price variant %>
-                  <span class="price diff"><%= variant_price variant %></span>
+            <li class="list-group-item <%= "active" if index == 0 %>">
+              <div class="form-check">
+                <%= radio_button_tag "variant_id", variant.id, index == 0,
+                    'data-price' => variant.price_in(current_currency).money,
+                    'data-in-stock' => variant.can_supply?,
+                    'data-backordered' => variant.backordered?,
+                    class: 'form-check-input'
+                %>
+                <%= label_tag "variant_id_#{ variant.id }", class: "form-check-label" do %>
+                  <span class="variant-description">
+                    <%= variant.options_text %>
+                  </span>
+                  <% if variant_price variant %>
+                    <span class="price diff"><%= variant_price variant %></span>
+                  <% end %>
+                  <% unless variant.can_supply? %>
+                    <span class="out-of-stock"><%= Spree.t(:out_of_stock) %></span>
+                  <% end %>
                 <% end %>
-                <% unless variant.can_supply? %>
-                  <span class="out-of-stock"><%= Spree.t(:out_of_stock) %></span>
-                <% end %>
-              <% end %>
+              </div>
             </li>
           <% end%>
         </ul>
@@ -31,9 +34,9 @@
     <% end %>
 
     <% if @product.price_in(current_currency) && !@product.price.nil? %>
-      <div data-hook="product_price" class="col-md-5">
+      <div data-hook="product_price" class="col-lg-5 mt-4">
         <div id="product-price">
-          <h6 class="product-section-title"><%= Spree.t(:price) %></h6>
+          <h3 class="product-section-title"><%= Spree.t(:price) %></h3>
           <div>
             <span class="lead price selling" itemprop="price" content="<%= @product.price_in(current_currency).amount.to_d %>">
               <%= display_price(@product) %>
@@ -44,8 +47,9 @@
           <% if @product.master.can_supply? %>
             <link itemprop="availability" href="https://schema.org/InStock" />
           <% elsif @product.variants.empty? %>
-            <br />
-            <span class="out-of-stock"><%= Spree.t(:out_of_stock) %></span>
+            <span class="out-of-stock d-block mt-2">
+              <%= Spree.t(:out_of_stock) %>
+            </span>
           <% end %>
           <% if @product.backordered? %>
             <div class="alert alert-warning" id="cart-backordered-info">
@@ -55,22 +59,20 @@
         </div>
 
         <% if @product.can_supply? %>
-          <div class="add-to-cart">
-            <br />
+          <div class="add-to-cart mt-2">
             <div class="input-group">
               <%= number_field_tag :quantity, 1, class: 'title form-control', min: 1 %>
-              <span class="input-group-btn">
+              <div class="input-group-append">
                 <%= button_tag class: 'btn btn-success', id: 'add-to-cart-button', type: :submit, disabled: true do %>
                   <%= Spree.t(:add_to_cart) %>
                 <% end %>
-              </span>
+              </div>
             </div>
           </div>
         <% end %>
       </div>
     <% else %>
       <div id="product-price">
-        <br />
         <div>
           <span class="price selling" itemprop="price">
             <%= Spree.t('product_not_available_in_this_currency') %>

data/app/views/spree/products/_product.html.erb

@@ -1,15 +1,14 @@
 <% url = spree.product_path(product, taxon_id: taxon.try(:id)) %>
-<div id="product_<%= product.id %>" class="col-md-3 col-sm-6 col-xs-6 product-list-item" data-hook="products_list_item" itemscope itemtype="https://schema.org/Product">
-  <div class="panel panel-default">
+<div id="product_<%= product.id %>" class="d-flex w-100 col-12 col-sm-6 col-lg-4 col-xl-3 product-list-item mb-4" data-hook="products_list_item" itemscope itemtype="https://schema.org/Product">
+  <div class="card w-100">
     <% cache(taxon.present? ? [I18n.locale, current_currency, taxon, product] : cache_key_for_product(product)) do %>
-      <div class="panel-body text-center product-body">
-        <%= link_to url, itemprop: "url" do %>
-          <%= small_image(product, itemprop: "image") %><br/>
-          <%= content_tag(:span, truncate(product.name, length: 50), class: 'info', itemprop: "name", title: product.name) %>
+      <div class="card-body text-center product-body">
+        <%= link_to url, itemprop: "url", class: 'd-block text-center' do %>
+          <%= small_image(product, itemprop: "image", class: "d-block mx-auto") %>
+          <%= content_tag(:span, truncate(product.name, length: 50), class: 'info mt-3 d-block', itemprop: "name", title: product.name) %>
         <% end %>
-        <br/>
       </div>
-      <div class="panel-footer text-center">
+      <div class="card-footer text-center">
         <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
           <span class="price selling lead" itemprop="price" content="<%= (product.price_in(current_currency).amount.nil?)? 0 : product.price_in(current_currency).amount.to_d %>">
             <%= display_price(product) %>

data/app/views/spree/products/_promotions.html.erb

@@ -4,17 +4,19 @@
   <div id="promotions">
     <h3><%= Spree.t(:promotions) %></h3>
     <% promotions.each do |promotion| %>
-    <div class="well well-sm">
-      <h4><%= promotion.name %></h4>
-      <p><%= promotion.description %></p>
-      <% if promotion.products.any? %>
-        <ul>
-          <% promotion.products.each do |product| %>
-            <li><%= link_to product.name, product_path(product) %></li>
-          <% end %>
-        </ul>
-      <% end %>
-    </div>
+    <div class="card mb-3 bg-light">
+      <div class="card-body p-1">
+        <h4><%= promotion.name %></h4>
+        <p><%= promotion.description %></p>
+        <% if promotion.products.any? %>
+          <ul>
+            <% promotion.products.each do |product| %>
+              <li><%= link_to product.name, product_path(product) %></li>
+            <% end %>
+          </ul>
+        <% end %>
+      </div>
+    </div>  
     <% end %>
   </div>
 <% end %>

data/app/views/spree/products/_properties.html.erb

@@ -1,11 +1,18 @@
-<% unless @product_properties.blank? %>  
-  <h3 class="product-section-title"><%= Spree.t('properties')%></h3>
+<% unless @product_properties.blank? %>
+  <h3 class="product-section-title h4 mt-4">
+    <%= Spree.t('properties')%>
+  </h3>
+
   <table id="product-properties" class="table table-striped" data-hook>
     <tbody>
       <% @product_properties.each do |product_property| %>
         <% css_class = cycle('even', 'odd', name: "properties") %>
         <tr class="<%= css_class %>">
-          <td><strong><%= product_property.property.presentation %></strong></td>
+          <td>
+            <strong>
+              <%= product_property.property.presentation %>
+            </strong>
+          </td>
           <td><%= product_property.value %></td>
         </tr>
       <% end %>

data/app/views/spree/products/_thumbnails.html.erb

@@ -1,19 +1,17 @@
 <%# no need for thumbnails unless there is more than one image %>
 <% if (@product.images + @product.variant_images).uniq.size > 1 %>
-  <ul id="product-thumbnails" class="thumbnails list-inline" data-hook>
+  <ul id="product-thumbnails" class="thumbnails d-flex w-100 pl-0 my-4" data-hook>
     <% @product.images.each do |i| %>
-      <li class='tmb-all tmb-<%= i.viewable.id %>'>
-        <% img_tag = image_tag(main_app.url_for(i.url(:mini)), class: "thumbnail", alt: set_image_alt(i, :mini)) %>
-        <%= link_to(img_tag, main_app.url_for(i.url(:product))) %>
+      <li class='tmb-all mr-2 tmb-<%= i.viewable.id %>'>
+        <%= link_to(image_tag(main_app.url_for(i.url(:mini)), class: "img-thumbnail d-inline-block"), main_app.url_for(i.url(:product))) %>
       </li>
     <% end %>
 
     <% if @product.has_variants? %>
       <% @product.variant_images.each do |i| %>
         <% next if @product.images.include?(i) %>
-        <li class='vtmb tmb-<%= i.viewable.id %>'>
-          <% img_tag = image_tag(main_app.url_for(i.url(:mini)), class: "thumbnail", alt: set_image_alt(i, :mini)) %>
-          <%= link_to(img_tag, main_app.url_for(i.url(:product))) %>
+        <li class='vtmb mr-2 tmb-<%= i.viewable.id %>'>
+          <%= link_to(image_tag(main_app.url_for(i.url(:mini)), class: "img-thumbnail"), main_app.url_for(i.url(:product))) %>
         </li>
       <% end %>
     <% end %>

data/app/views/spree/products/show.html.erb

@@ -2,11 +2,11 @@
 
 <% cache cache_key_for_product do %>
   <div data-hook="product_show" class="row" itemscope itemtype="https://schema.org/Product">
-    <div class="col-md-4 col-sm-5" data-hook="product_left_part">
+    <div class="col-lg-4 col-md-5" data-hook="product_left_part">
       <div data-hook="product_left_part_wrap">
         <div id="product-images" data-hook="product_images">
-          <div id="main-image" class="panel panel-default" data-hook>
-            <div class="panel-body text-center">
+          <div id="main-image" class="card  " data-hook>
+            <div class="card-body text-center">
               <%= product_image(@product, itemprop: "image") %>
             </div>
           </div>
@@ -25,13 +25,13 @@
       </div>
     </div>
 
-    <div class="col-md-8 col-sm-7" data-hook="product_right_part">
+    <div class="col-lg-8 col-md-7" data-hook="product_right_part">
       <div data-hook="product_right_part_wrap">
         <div id="product-description" data-hook="product_description">
-          <h1 class="product-title" itemprop="name"><%= @product.name %></h1>
+          <h1 class="product-title mt-2" itemprop="name"><%= @product.name %></h1>
 
-          <div class="well" itemprop="description" data-hook="description">
-            <%= product_description(@product) %>
+          <div itemprop="description" data-hook="description">
+            <%= sanitize product_description(@product) %>
           </div>
 
           <div id="cart-form" data-hook="cart_form">
@@ -39,7 +39,7 @@
           </div>
         </div>
 
-        <div id="taxon-crumbs" class=" five " data-hook="product_taxons">
+        <div id="taxon-crumbs" class="mt-4" data-hook="product_taxons">
           <%= render partial: 'taxons' %>
         </div>
       </div>

data/app/views/spree/shared/_filters.html.erb

@@ -6,23 +6,43 @@
     <% filters.each do |filter| %>
       <% labels = filter[:labels] || filter[:conds].map {|m,c| [m,m]} %>
       <% next if labels.empty? %>
-      <div class="navigation" data-hook="navigation">
-        <h4 class="filter-title"> <%= filter[:name] %> </h4>
+      <div 
+        class="navigation mt-4"
+        data-hook="navigation"
+        aria-labelledby="products_search_wrapper"
+        role="group">
+
+        <h4 class="filter-title mt-0 h5" id="products_search_wrapper">
+          <%= filter[:name] %>
+        </h4>
+
         <ul class="list-group">
           <% labels.each do |nm,val| %>
             <% label = "#{filter[:name]}_#{nm}".gsub(/\s+/,'_') %>
             <li class="list-group-item">
-              <input type="checkbox"
-                     id="<%= label %>"
-                     name="search[<%= filter[:scope].to_s %>][]"
-                     value="<%= val %>"
-                     <%= params[:search].present? && params[:search][filter[:scope]] && params[:search][filter[:scope]].include?(val.to_s) ? "checked" : "" %> />
-              <label class="nowrap" for="<%= label %>"> <%= nm %> </label>
+              <div class="form-check">
+                <input
+                  aria-labelledby="products_search_wrapper"
+                  type="checkbox"
+                  class="form-check-input"
+                  id="<%= label %>"
+                  name="search[<%= filter[:scope].to_s %>][]"
+                  value="<%= val %>"
+                  <%= params[:search].present? &&
+                    params[:search][filter[:scope]] &&
+                    params[:search][filter[:scope]].include?(val.to_s) ?
+                      "checked" :
+                      "" %> />
+                <label class="nowrap form-check-label" for="<%= label %>">
+                  <%= nm %>
+                </label>
+              </div>
             </li>
           <% end %>
         </ul>
       </div>
     <% end %>
-    <%= submit_tag Spree.t(:search), name: nil, class: 'btn btn-primary' %>
+
+    <%= submit_tag Spree.t(:search), name: nil, class: 'mt-4 btn btn-primary' %>
   <% end %>
 <% end %>

data/app/views/spree/shared/_header.html.erb

@@ -1,8 +1,8 @@
 <div id="spree-header">
-  <header id="header" data-hook>
+  <header id="header" data-hook class="py-3">
     <div class="container">
       <div class="row">
-        <figure id="logo" class="col-md-4 col-sm-3" data-hook>
+        <figure id="logo" class="col-3 col-md-4" data-hook>
           <%= logo %>
         </figure>
         <%= render partial: 'spree/shared/nav_bar' %>

data/app/views/spree/shared/_login_bar.html.erb

@@ -1,6 +1,12 @@
 <% if spree_current_user %>
-  <li><%= link_to Spree.t(:my_account), spree.account_path %></li>
-  <li><%= link_to Spree.t(:logout), spree.logout_path %></li>
+  <li>
+    <%= link_to Spree.t(:my_account), spree.account_path %>
+  </li>
+  <li>
+    <%= link_to Spree.t(:logout), spree.logout_path %>
+  </li>
 <% else %>
-  <li id="link-to-login"><%= link_to Spree.t(:login), spree.login_path %></li>
+  <li id="link-to-login">
+    <%= link_to Spree.t(:login), spree.login_path %>
+  </li>
 <% end %>

data/app/views/spree/shared/_main_nav_bar.html.erb

@@ -1,16 +1,16 @@
-<nav class="col-md-12">
-  <div id="main-nav-bar" class="navbar">
-    <ul class="nav navbar-nav" data-hook>
-      <li id="home-link" data-hook><%= link_to Spree.t(:home), spree.root_path %></li>
-    </ul>
-    <ul class="nav navbar-nav navbar-right" data-hook>
-      <li id="link-to-cart" data-hook>
-        <noscript>
-          <%= link_to_cart %>
-        </noscript>
-        &nbsp;
-      </li>
-      <script>Spree.fetch_cart()</script>
-    </ul>
-  </div>
+<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' %>
+    </li>
+  </ul>
+  <ul class="nav navbar-right" data-hook>
+    <li id="link-to-cart" class="nav-item" data-hook>
+      <noscript>
+        <%= link_to_cart %>
+      </noscript>
+      &nbsp;
+    </li>
+    <script>Spree.fetch_cart()</script>
+  </ul>
 </nav>

data/app/views/spree/shared/_nav_bar.html.erb

@@ -1,5 +1,5 @@
-<nav class="navbar col-md-8 col-sm-9" id="top-nav-bar">
-  <ul id="nav-bar" class="nav navbar-nav navbar-right" data-hook>
+<nav class="navbar navbar-dark col-md-8 col-sm-9" id="top-nav-bar">
+  <ul id="nav-bar" class="nav align-items-center d-flex flex-column flex-sm-row navbar-right w-100 justify-content-start justify-content-md-end" data-hook>
     <li id="search-bar" data-hook>
       <%= render partial: 'spree/shared/search' %>
     </li>