spree_frontend 3.7.13 → 4.0.0.beta

data/app/views/spree/checkout/edit.html.erb

@@ -3,11 +3,11 @@
 <div id="checkout" data-hook>
   <%= render partial: 'spree/shared/error_messages', locals: { target: @order } %>
 
-  <div class="row" data-hook="checkout_header">
-    <div class="col-sm-3">
-      <h1 data-hook="checkout_title"><%= Spree.t(:checkout) %></h1>
+  <div class="row align-items-center" data-hook="checkout_header">
+    <div class="col-md-3 mb-4">
+      <h1 class="mb-0" data-hook="checkout_title"><%= Spree.t(:checkout) %></h1>
     </div>
-    <div class="col-sm-9" data-hook="checkout_progress">
+    <div class="col-md-9 mb-4" data-hook="checkout_progress">
       <%= checkout_progress %>
     </div>
   </div>
@@ -16,8 +16,8 @@
     <div class="<%= if @order.state != 'confirm' then 'col-md-9' else 'col-md-12' end %>" data-hook="checkout_form_wrapper">
       <%= form_for @order, url: update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}" } do |form| %>
         <% if @order.state == 'address' || !@order.email? %>
-          <div class="panel panel-default">
-            <div class="panel-body">
+          <div class="card card-default mb-4">
+            <div class="card-body">
               <div class="form-group">
                 <%= form.label :email %>
                 <%= form.email_field :email, class: 'form-control', required: true %>

data/app/views/spree/checkout/payment/_gateway.html.erb

@@ -1,42 +1,50 @@
-<div class="well clearfix">
-  <%= image_tag 'credit_cards/credit_card.gif', id: 'credit-card-image', class: 'pull-right', width: '170', height: '28' %>
-  <% param_prefix = "payment_source[#{payment_method.id}]" %>
+<div class="card mt-4 w-100">
+  <div class="card-body">
+    <%= image_tag 'credit_cards/credit_card.gif',
+      id: 'credit-card-image',
+      width: '170',
+      height: '28',
+      class: 'position-absolute',
+      style: 'right: 1rem' %>
 
-  <p class="field">
-    <%= label_tag "name_on_card_#{payment_method.id}" do %>
-      <%= Spree.t(:name_on_card) %><abbr class="required" title="required">*</abbr>
-    <% end %>
-    <%= text_field_tag "#{param_prefix}[name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "name_on_card_#{payment_method.id}", class: 'form-control required'} %>
-  </p>
+    <% param_prefix = "payment_source[#{payment_method.id}]" %>
 
-  <p class="field" data-hook="card_number">
-    <%= label_tag "card_number" do %>
-      <%= Spree.t(:card_number) %><abbr class="required" title="required">*</abbr>
-    <% end %>
-    <% options_hash = Rails.env.production? ? {autocomplete: 'off'} : {} %>
-    <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(id: 'card_number', class: 'form-control required cardNumber', size: 19, maxlength: 19, autocomplete: "off") %>
-    &nbsp;
-    <span id="card_type" style="display:none;">
-      ( <span id="looks_like" ><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
-        <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
-      )
-    </span>
-  </p>
-  <div class="row">
-    <div class="col-md-8 field" data-hook="card_expiration">
-      <%= label_tag "card_expiry" do %>
-        <%= Spree.t(:expiration) %><abbr class="required" title="required">*</abbr>
+    <p class="field">
+      <%= label_tag "name_on_card_#{payment_method.id}" do %>
+        <%= Spree.t(:name_on_card) %><abbr class="required" title="required">*</abbr>
       <% end %>
-      <%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: "form-control required cardExpiry", placeholder: "MM / YY" %>
-    </div>
-    <div class="col-md-4 field" data-hook="card_code">
-      <%= label_tag "card_code" do %>
-        <%= Spree.t(:card_code) %><abbr class="required" title="required">*</abbr>
+      <%= text_field_tag "#{param_prefix}[name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "name_on_card_#{payment_method.id}", class: 'form-control required'} %>
+    </p>
+
+    <p class="field" data-hook="card_number">
+      <%= label_tag "card_number" do %>
+        <%= Spree.t(:card_number) %><abbr class="required" title="required">*</abbr>
       <% end %>
-      <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(id: 'card_code', class: 'form-control required cardCode', size: 5) %>
-      <%= link_to Spree.t(:what_is_this), spree.cvv_path, target: :blank, "data-hook" => "cvv_link", id: "cvv_link" %>
+      <% options_hash = Rails.env.production? ? {autocomplete: 'off'} : {} %>
+      <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(id: 'card_number', class: 'form-control required cardNumber', size: 19, maxlength: 19, autocomplete: "off") %>
+      &nbsp;
+      <span id="card_type" style="display:none;">
+        ( <span id="looks_like" ><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
+          <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
+        )
+      </span>
+    </p>
+    <div class="row">
+      <div class="col-md-8 field" data-hook="card_expiration">
+        <%= label_tag "card_expiry" do %>
+          <%= Spree.t(:expiration) %><abbr class="required" title="required">*</abbr>
+        <% end %>
+        <%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: "form-control required cardExpiry", placeholder: "MM / YY" %>
+      </div>
+      <div class="col-md-4 field" data-hook="card_code">
+        <%= label_tag "card_code" do %>
+          <%= Spree.t(:card_code) %><abbr class="required" title="required">*</abbr>
+        <% end %>
+        <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(id: 'card_code', class: 'form-control required cardCode', size: 5) %>
+        <%= link_to Spree.t(:what_is_this), spree.cvv_path, target: :blank, "data-hook" => "cvv_link", id: "cvv_link" %>
+      </div>
     </div>
-  </div>
 
-  <%= hidden_field_tag "#{param_prefix}[cc_type]", '', id: "cc_type", class: 'ccType' %>
+    <%= hidden_field_tag "#{param_prefix}[cc_type]", '', id: "cc_type", class: 'ccType' %>
+  </div>
 </div>

data/app/views/spree/layouts/spree_application.html.erb

@@ -16,10 +16,13 @@
 
         <%= render partial: 'spree/shared/sidebar' if content_for? :sidebar %>
 
-        <div id="content" class="<%= !content_for?(:sidebar) ? "col-sm-12" : "col-sm-8 col-md-9" %>" data-hook>
+        <main
+          id="content"
+          class="mt-4 <%= !content_for?(:sidebar) ? "col-sm-12" : "col-sm-12 col-md-9" %>"
+          data-hook>
           <%= flash_messages %>
           <%= yield %>
-        </div>
+        </main>
 
         <%= yield :templates %>
       </div>

data/app/views/spree/orders/_form.html.erb

@@ -1,28 +1,41 @@
 <%= render partial: 'spree/shared/error_messages', locals: { target: @order } %>
-<table class="table" id="cart-detail" data-hook>
-  <thead>
-    <tr class="active" data-hook="cart_items_headers">
-      <th class="cart-item-description-header" colspan="2"><%= Spree.t(:item) %></th>
-      <th class="cart-item-price-header"><%= Spree.t(:price) %></th>
-      <th class="cart-item-quantity-header"><%= Spree.t(:qty) %></th>
-      <th class="cart-item-total-header"><%= Spree.t(:total) %></th>
-      <th class="cart-item-delete-header"></th>
-    </tr>
-  </thead>
-  <tbody id="line_items" data-hook>
-    <%= render partial: 'spree/orders/line_item', collection: order_form.object.line_items, locals: { order_form: order_form } %>
-  </tbody>
-  <% if @order.adjustments.nonzero.exists? || @order.line_item_adjustments.nonzero.exists? || @order.shipment_adjustments.nonzero.exists? || @order.shipments.any? %>
-    <tr class="cart-subtotal">
-      <td colspan="4" align='right'><h5><%= Spree.t(:cart_subtotal, count: @order.line_items.sum(:quantity)) %></h5></td>
-      <td colspan><h5><%= order_form.object.display_item_total %></h5></td>
+
+<div class="table-responsive">
+  <table class="table" id="cart-detail" data-hook>
+    <thead>
+      <tr class="active" data-hook="cart_items_headers">
+        <th class="cart-item-description-header" colspan="2"><%= Spree.t(:item) %></th>
+        <th class="cart-item-price-header"><%= Spree.t(:price) %></th>
+        <th class="cart-item-quantity-header"><%= Spree.t(:qty) %></th>
+        <th class="cart-item-total-header"><%= Spree.t(:total) %></th>
+        <th class="cart-item-delete-header"></th>
+      </tr>
+    </thead>
+    <tbody id="line_items" data-hook>
+      <%= render partial: 'spree/orders/line_item', collection: order_form.object.line_items, locals: { order_form: order_form } %>
+    </tbody>
+    <% if @order.adjustments.nonzero.exists? || @order.line_item_adjustments.nonzero.exists? || @order.shipment_adjustments.nonzero.exists? || @order.shipments.any? %>
+      <tr class="cart-subtotal">
+        <td colspan="4" align='right'><h5><%= Spree.t(:cart_subtotal, count: @order.line_items.sum(:quantity)) %></h5></td>
+        <td colspan>
+          <h5>
+            <%= order_form.object.display_item_total %>
+          </h5>
+        </td>
+        <td></td>
+      </tr>
+      <%= render "spree/orders/adjustments" %>
+    <% end %>
+    <tr class="table-warning cart-total">
+      <td colspan="4" align='right' class="align-middle">
+        <h5 class="mb-0">
+          <%= Spree.t(:total) %>
+        </h5>
+      </td>
+      <td class="lead" colspan>
+        <%= order_form.object.display_total %>
+      </td>
       <td></td>
     </tr>
-    <%= render "spree/orders/adjustments" %>
-  <% end %>
-  <tr class="warning cart-total">
-    <td colspan="4" align='right'><h5><%= Spree.t(:total) %></h5></td>
-    <td class="lead" colspan><%= order_form.object.display_total %></td>
-    <td></td>
-  </tr>
-</table>
+  </table>
+</div>

data/app/views/spree/orders/edit.html.erb

@@ -1,12 +1,14 @@
 <% @body_id = 'cart' %>
 
-<div data-hook="cart_container">
+<div data-hook="cart_container" class="col-12">
   <h1><%= Spree.t(:shopping_cart) %></h1>
 
   <% if @order.line_items.empty? %>
     <div data-hook="empty_cart">
       <div class="alert alert-info"><%= Spree.t(:your_cart_is_empty) %></div>
-      <p><%= link_to Spree.t(:continue_shopping), products_path, class: 'btn btn-default' %></p>
+      <p>
+        <%= link_to Spree.t(:continue_shopping), products_path, class: 'btn btn-outline-secondary' %>
+      </p>
     </div>
   <% else %>
     <div data-hook="outside_cart_form">
@@ -17,34 +19,38 @@
             <%= render partial: 'form', locals: { order_form: order_form } %>
           </div>
 
-          <div class="links col-md-3 navbar-form pull-right text-right" data-hook="cart_buttons">
-            <div class="form-group">
-              <%= button_tag class: 'btn btn-primary', id: 'update-button' do %>
-                <%= Spree.t(:update) %>
-              <% end %>
-              <%= button_tag class: 'btn btn-lg btn-success', id: 'checkout-link', name: 'checkout' do %>
-                <%= Spree.t(:checkout) %>
-              <% end %>
-            </div>
-          </div>
+          <div class="row">
+            <% if Spree::Frontend::Config[:coupon_codes_enabled] %>
+              <div class='col-md-6 form-inline' data-hook='coupon_code'>
+                <%= order_form.label :coupon_code, class: 'mr-2' %>
+                <div class="input-group">
+                  <%= order_form.text_field :coupon_code, size: '30', class: 'form-control' %>
+                  <div class="input-group-append">
+                    <%= button_tag Spree.t(:coupon_code_apply), class: 'btn btn-outline-secondary' %>
+                  </div>
+                </div>
+              </div>
+            <% end %>
 
-          <% if Spree::Frontend::Config[:coupon_codes_enabled] %>
-            <div class='col-md-6 form-inline pull-right' data-hook='coupon_code'>
-              <label>
-                <%= order_form.label :coupon_code %>
-                <%= order_form.text_field :coupon_code, size: '30', class: 'form-control' %>
-                <%= button_tag Spree.t(:coupon_code_apply), class: 'btn btn-default' %>
-              </label>
+            <div class="links col-md-6 d-flex justify-content-end" data-hook="cart_buttons">
+              <div class="form-group">
+                <%= button_tag class: 'btn btn-primary', id: 'update-button' do %>
+                  <%= Spree.t(:update) %>
+                <% end %>
+                <%= button_tag class: 'btn btn-lg btn-success', id: 'checkout-link', name: 'checkout' do %>
+                  <%= Spree.t(:checkout) %>
+                <% end %>
+              </div>
             </div>
-          <% end %>
+          </div>
         </div>
       <% end %>
     </div>
 
-    <div id="empty-cart" class="col-md-3 pull-left" data-hook>
+    <div id="empty-cart" class="mt-4" data-hook>
       <%= form_tag empty_cart_path, method: :put do %>
         <p id="clear_cart_link" data-hook>
-          <%= submit_tag Spree.t(:empty_cart), class: 'btn btn-default' %>
+          <%= submit_tag Spree.t(:empty_cart), class: 'btn btn-outline-secondary' %>
           <%= Spree.t(:or) %>
           <%= link_to Spree.t(:continue_shopping), products_path, class: 'continue' %>
         </p>

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

@@ -1,7 +1,8 @@
 <fieldset id="order_summary" data-hook>
   <h1><%= accurate_title %></h1>
+
   <% if order_just_completed?(@order) %>
-    <strong><%= Spree.t(:thank_you_for_your_order) %></strong>
+    <p><strong><%= Spree.t(:thank_you_for_your_order) %></strong></p>
   <% end %>
 
   <div id="order" data-hook>

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 %>