]> _ Git - pmi.git/commitdiff
Responsive fixes and general code cleanup. Done #2769 @2.5
authorStephen Cameron <stephen@cubedesigners.com>
Thu, 5 Sep 2019 17:57:24 +0000 (19:57 +0200)
committerStephen Cameron <stephen@cubedesigners.com>
Thu, 5 Sep 2019 17:57:24 +0000 (19:57 +0200)
app/Models/Product.php
app/Providers/AppServiceProvider.php
resources/js/components/CartItem.vue
resources/js/components/NumberInput.vue
resources/styles/components/cart.styl
resources/styles/components/form.styl
resources/views/pages/cart.blade.php
resources/views/partials/cart.blade.php
resources/views/partials/form.blade.php
resources/views/partials/header.blade.php

index dbede64a97d5c7b449d9b7c6b40ab01442b233ca..995ad63a94670ba8befd1c353b53618dcb5f90e0 100644 (file)
@@ -14,6 +14,7 @@ class Product extends CubistMagicPageModel
     protected static $_specifications = null;
     protected static $_productTypes = null;
     protected static $_specificationFields = null;
+    protected static $_cart_data;
 
     /**
      * @var array
@@ -349,25 +350,27 @@ class Product extends CubistMagicPageModel
      */
     public static function getCartData()
     {
-
-        $cart_items = session('cart_items', []);
-
-        $cart_data = [];
-        $products = self::with('media')->whereIn('id', array_keys($cart_items))->get();
-
-        foreach ($products as $product) {
-            $cart_data[] = [
-                'id' => $product->id,
-                'name' => $product->name,
-                'reference' => $product->reference,
-                'category' => $product->type->name,
-                'quantity' => $cart_items[$product->id],
-                'image' => $product->image,
-                'URL' => $product->url,
-            ];
+        if (!self::$_cart_data) {
+
+            $cart_items = session('cart_items', []);
+
+            self::$_cart_data = [];
+            $products = self::with('media')->whereIn('id', array_keys($cart_items))->get();
+
+            foreach ($products as $product) {
+                self::$_cart_data[] = [
+                    'id' => $product->id,
+                    'name' => $product->name,
+                    'reference' => $product->reference,
+                    'category' => $product->type->name,
+                    'quantity' => $cart_items[$product->id],
+                    'image' => $product->image,
+                    'URL' => $product->url,
+                ];
+            }
         }
 
-        return $cart_data;
+        return self::$_cart_data;
     }
 
 
index 7f873af21d98f2e00e3e13f65ae40c92e0672726..da285a9cbbe6d28386682aebc62f444d7b7b790c 100644 (file)
@@ -6,6 +6,7 @@ use Illuminate\Support\ServiceProvider;
 use Illuminate\Support\Facades\View;
 use Illuminate\Support\Facades\Blade;
 use Spatie\BladeX\Facades\BladeX;
+use App\Models\Product;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -31,6 +32,9 @@ class AppServiceProvider extends ServiceProvider
             $view_parts = explode('.', $view->getName());
             $view_name = end($view_parts);
             View::share('view_name', $view_name);
+
+            // Also share cart data with all views
+            View::share('cart_items', Product::getCartData());
         });
 
         try {
index a17280129b52af81198ce9f3936a896f6ff816b6..67d93fbd47138cc58b2c1096cad43e29d4e77ad8 100644 (file)
@@ -1,10 +1,10 @@
 <template>
     <div class="cart-item flex mb-1v text-base">
-        <a class="block border-gray-100 border-2 bg-center bg-contain bg-no-repeat flex-shrink-0"
+        <a class="cart-item-image block border-gray-100 border-2 bg-center bg-contain bg-no-repeat w-full xs:hidden"
            :href="item.URL"
-           :style="`background-image: url(${item.image}); width: 144px; height: 144px`">
+           :style="`background-image: url(${item.image});`">
         </a>
-        <div class="pl-6 leading-relaxed flex-grow">
+        <div class="pl-6 xs:pl-0 leading-relaxed flex-grow">
             <a :href="item.URL" class="block text-navy font-display">
 
                 <span class="text-grey-dark">{{ item.reference }}</span>
index 7f334da26f54769bb0d2c71c922687248846a0a2..4482c1c2a9428b91882d924a3a35e1f0a52b14ba 100644 (file)
             line-height: 1.5
             max-width: 100%
             min-height: 1.5em
-            min-width: 2.5em
+            min-width: 2em
             padding: 0.4375em 0.875em
             transition: border-color 0.15s
             width: 100%
             & > input
                 box-sizing: content-box
                 display: inline-block
-                width: 2.5em
+                width: 2em
                 padding: 0.4em 2.5em
 
         &--center
index 57de124dc54d0ee0a7126cca7a2013f31c1688f8..ef7c77078081fdba5c11f2d57cb91a6ac1e3bd02 100644 (file)
@@ -70,3 +70,9 @@
   .cart-quantity
     @apply bg-white
     max-width: 220px
+
+// Cart item
+.cart-item
+  &-image
+    max-width: 144px
+    max-height: @max-width
index a7d36f65c741081d6954662a9cbbbd3302b147fa..825a20f8f93ae1fc2c0b040c27ef39146ac80013 100644 (file)
@@ -1,11 +1,14 @@
-.ajax-form,.notajax-form
+.ajax-form, .notajax-form
 
   .fields
     grid-column-gap: 30px
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 
+    +below(500px)
+      grid-template-columns: auto
+
   .errormessage
-    color theme('colors.red')
+    color: theme('colors.red')
     font-weight: 300
     position: absolute
     right: 0
@@ -28,7 +31,7 @@
     display: block
 
     &:not(.half)
-      grid-column 1 / -1
+      grid-column: 1 / -1
 
   .textarea
     height 144px
     margin-bottom: 20px;
 
   .btn-custom
-    min-width 14rem
-    padding 1.125rem 3.375rem
+    min-width: 14rem
+    padding: 1.125rem 3.375rem
+
+    +below(500px)
+      min-width: unset
+      padding-left: 1.5em
+      padding-right: @padding-left
index 5cbd3d55d0690700621e7880a2d2f4737b6a66c3..c438b471673aeeb10fe63e6634fd86be0a774513 100644 (file)
@@ -8,7 +8,7 @@
         <div v-if="cartItemCount > 0">
 
             {{-- Columns set to auto because cart will disappear when quote form is sent, leaving just the confirmation message. --}}
-            <grid cols="auto">
+            <grid cols="auto" class="sm:grid-cols-1">
 
                 {{-- Nested divs to allow grey backgrounds of columns to match the height of their content instead of total height --}}
                 <div>
index f26cb44e35c841854f560ca3287ad22b981ac96e..a5d23d82f9fa39033c4e3554fafd5f37b3c39132 100644 (file)
@@ -1,5 +1,7 @@
 <span class="cart-header-title">{{ __('Ma sélection') }}</span>
 <span class="cart-header-icon-wrapper">
     @svg('icon-cart', 'cart-header-icon')
-    <span class="cart-header-count" v-html="cartItemCount"></span>
+    <span class="cart-header-count" v-html="cartItemCount">
+        {{ count($cart_items) }}
+    </span>
 </span>
index 83d493ab20b0cdcb52f14c4d43f03dac531c80c0..692c10d039ad9a3aa02a80c1356ff1b5801d1f5d 100644 (file)
             @if($page->get('form_intro'))
                 <div class="form-info text-navy mb-6">@markdown($page->get('form_intro'))</div>
             @endif
-            <form {!! $gaattrs !!} class="text-navy mailform" action="{{ $action ?? '/ajax/mailform' }}" method="post"
-                  data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}"
+            <form {!! $gaattrs !!}
+                  class="text-navy mailform"
+                  action="{{ $action ?? '/ajax/mailform' }}"
+                  method="post"
+                  data-confirmation="{{ $page->get('form_confirmation') ?? __('Votre message a bien été envoyé') }}"
                   novalidate>
                 @honeypot
-                <input type="hidden" value="{{$page->get('id')}}" name="page">
+                <input type="hidden" value="{{ $page->get('id') }}" name="page">
 
                 {!! $extra_fields ?? '' !!}
 
                 <div class="fields grid">
                     @foreach($page->get('form') as $field)
                         @php
-                            $required=$field['mandatory']?' required':'';
-                            $asx=$field['mandatory']?' *':'';
+                            $required = $field['mandatory'] ? ' required' : '';
+                            $asx = $field['mandatory'] ? ' *' : '';
                         @endphp
                         <label class="form-input">
                             @switch($field['type'])
                                 @case('name')
-                                {{__('Nom')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                             {!! $required !!}  name="name">
+                                    {{ __('Nom')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="name">
                                 @break
 
                                 @case('firstname')
-                                {{__('Prénom')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                {!! $required !!}  name="firstname">
+                                    {{ __('Prénom')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="firstname">
                                 @break
 
                                 @case('company')
-                                {{__('Société')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                 {!! $required !!}  name="company">
+                                    {{ __('Société')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="company">
                                 @break
 
                                 @case('email')
-                                {{__('E-mail')}}{{$asx}} <input class="py-3 mt-3" type="email"
-                                                                {!! $required !!}  name="email">
+                                    {{ __('E-mail')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="email" {!! $required !!}  name="email">
                                 @break
 
                                 @case('ref')
-                                {{__('Référence')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                   {!! $required !!}  name="ref">
+                                    {{ __('Référence')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="ref">
                                 @break
 
                                 @case('sku')
-                                {{__('Numéro de série')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                         {!! $required !!}  name="sku">
+                                    {{ __('Numéro de série')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="sku">
                                 @break
 
                                 @case('subject')
-                                {{__('Sujet')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                               {!! $required !!}  name="subject">
+                                    {{ __('Sujet')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="subject">
                                 @break
 
                                 @case('message')
-                                {{__('Message')}}{{$asx}} <textarea class="py-3 textarea mt-3" type="text"
-                                                                    {!! $required !!}  name="message"></textarea>
+                                    {{ __('Message')}}{{ $asx}}
+                                    <textarea class="py-3 textarea mt-3" type="text" {!! $required !!}  name="message"></textarea>
                                 @break
                             @endswitch
                         </label>
                 <div class="form-endmessage my-6 text-grey-dark text-sm">
                     @markdown($global->get('form_privacy'))
                 </div>
-                <div class="form-footer flex justify-between items-center xs:flex-col-reverse">
-                    <span
-                        class="form-required-legend text-grey-dark xs:self-start xs:mt-5">*{{__('Champs obligatoires')}}</span>
-                    <button type="submit" class="form-submit-button btn btn-custom xs:w-full"
-                            data-sending="{{__('Envoi en cours')}}">{{ $page->get('form_button_text', __('Envoyer')) }}</button>
+                <div class="form-footer flex flex-wrap-reverse justify-between items-center">
+                    <span class="form-required-legend inline-block my-4 mr-3 text-grey-dark xs:self-start xs:mt-5">
+                        *{{ __('Champs obligatoires')}}
+                    </span>
+                    <button type="submit"
+                            class="form-submit-button btn btn-custom xs:w-full"
+                            data-sending="{{ __('Envoi en cours')}}">
+                        {{ $page->get('form_button_text', __('Envoyer')) }}
+                    </button>
                 </div>
             </form>
         </div>
index 347e8d6bfc3a9f369e7c380917e06e91db722514..9d4b275a3d3261233f3d661671bb0adc85231bd0 100644 (file)
@@ -15,6 +15,7 @@
 
         <nav id="menu" class="nav mx-auto flex items-center">
             @include('partials.nav')
+            {{-- Todo: consider inverting the portal so the hidden search form is put in the portal instead of the icon (to avoid loading delay on icon) --}}
             <portal-target name="nav-search-toggle" slim></portal-target>
         </nav>