Shop

source/_assets/js/app.js

@@ -1,4 +1,5 @@
 import Alpine from 'alpinejs';
-
+import morph from '@alpinejs/morph';
 
 window.Alpine = Alpine;
+Alpine.plugin(morph);

source/_assets/scss/_ecwid.scss

@@ -0,0 +1,230 @@
+
+
+.ecwid {
+  font-weight: var(--body-font-weight)!important;
+}
+
+.ec-footer {
+  display: none!important;
+}
+
+.ec-cart {
+  display: block!important;
+  //
+  > * {
+    padding: 0!important;
+    width: 100%!important;
+  }
+  //
+  //&__sidebar {
+  //
+  //}
+  //
+  &__body {
+    margin: 0 auto!important;
+    max-width: 600px!important;
+  }
+  //
+  &__summary {
+    width: auto!important;
+    margin-left: auto!important;
+  }
+  .page-title__name {
+    display: none;
+  }
+}
+
+.ec-cart-summary {
+  &__body:nth-child(2) {
+    display: none!important;
+  }
+  &__title {
+    text-transform: lowercase!important;
+  }
+  &__price {
+    color: var(--bs-primary)!important;
+  }
+}
+
+.ec-cart-item {
+  &__image {
+    display: flex;
+    align-items: center;
+  }
+  &__title {
+    font-weight: var(--body-font-weight) !important;
+    color: var(--bs-primary)!important;
+  }
+  &__price {
+    color: var(--bs-primary)!important;
+  }
+  &__wrap {
+    display: flex!important;
+    flex-direction: row!important;
+    align-items: center!important;
+  }
+  &__wrap-primary {
+    flex: 1 0 0!important;
+  }
+  &__wrap-secondary {
+    width:auto!important;
+    flex: 1 0 0!important;
+  }
+  &__control {
+    margin-right: .5rem!important;
+  }
+  &__control-inner {
+    color: red!important;
+  }
+}
+
+.ec-cart-shopping {
+  &__wrap {
+    display: none;
+  }
+}
+
+.form-control__button {
+  padding: .25rem .375rem!important;
+  min-height: auto!important;
+  border: 3px solid var(--bs-primary)!important;
+  background-color: white!important;
+  border-radius: 0!important;
+  color: var(--bs-primary)!important;
+  font-size: 1rem!important;
+  font-weight: 700!important;
+  text-transform: uppercase!important;
+}
+
+.grid-product {
+
+  &__wrap-inner {
+    height: 100%!important;
+  }
+
+  &__image {
+    order: 1!important;
+  }
+
+  &__sku {
+    order: 2!important;
+    color: var(--body-color)!important;
+    margin: .25rem 0!important;
+  }
+
+  &__title {
+    order: 3!important;
+    margin-top: 0!important;
+    margin-bottom: auto!important;
+  }
+
+  &__title-inner {
+    color: var(--bs-primary)!important;
+    font-weight: var(--headings-font-weight)!important;
+    font-size: var(--product-item-title-font-size)!important;
+    line-height: var(--headings-line-height);
+  }
+
+  &__price {
+    order: 4!important;
+  }
+
+  &__price-amount {
+    margin-top: 1rem!important;
+    padding: .25rem 0!important;
+    color: var(--bs-primary)!important;
+    font-size: .875rem!important;
+    font-weight: var(--body-font-weight)!important;
+    border-top: 1px solid var(--bs-primary)!important;
+    border-bottom: 1px solid var(--bs-primary)!important;
+  }
+}
+
+.product-details {
+  &__product-price-taxes {
+    display: none!important;
+  }
+  &__sidebar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  &__product-title {
+    width: 100%;
+    text-align: center!important;
+  }
+  &__product-price-row {
+    width: 33.33333%;
+    margin: 0!important;
+  }
+  &__product-price {
+    margin: 0!important;
+  }
+  &__product-options {
+    display: none;
+  }
+  &__action-panel {
+    width: 66.6666%;
+    margin: 0!important;
+    .product-details-module__content {
+      display: flex;
+      align-items: center;
+    }
+    .details-product-purchase__qty {
+      flex: 0 0 auto;
+      margin: 0!important;
+    }
+    .details-product-purchase__controls {
+      flex: 1 0 0;
+      margin: 0!important;
+    }
+  }
+  &__general-info {
+    width: 100%;
+    margin-top: 1.5rem!important;
+
+    .product-details-module__title {
+      display: none;
+    }
+  }
+}
+.details-product-price {
+  &__value {
+    color: var(--bs-primary)!important;
+    font-weight: var(--body-font-weight)!important;
+  }
+}
+
+.details-product-purchase {
+  &__place {
+    display: none!important;
+  }
+  &__qty-label {
+    display: none;
+  }
+  &__controls {
+    min-height: auto!important;
+    height: auto!important;
+  }
+  &__add-buttons button {
+    background-color: transparent!important;
+    color: var(--bs-primary)!important;
+    font-weight: var(--body-font-weight)!important;
+    font-size: 1.25rem!important;
+    text-transform: none!important;
+    border: 0!important;
+  }
+  &__checkout-controls {
+    display: none;
+  }
+}
+
+.details-gallery {
+  &__images-spacer {
+    height: 500px;
+  }
+  &__images{
+    background-color: #000!important;
+    padding: 3rem!important;
+  }
+}

source/_assets/scss/_root.scss

@@ -0,0 +1,10 @@
+
+
+:root {
+  --body-color: #222;
+  --body-font-weight: 700;
+  --headings-font-weight: 600;
+  --headings-line-height: 1.1;
+
+  --product-item-title-font-size: 2.5rem;
+}

source/_assets/scss/_variables.scss

@@ -0,0 +1,9 @@
+
+$primary: #0000fe;
+
+$container-max-widths: (
+  sm: 540px,
+  md: 684px,
+  lg: 924px,
+  xl: 1164px
+);

source/_assets/scss/app.scss

@@ -1,14 +1,21 @@
+@import "variables";
+@import "root";
 @import '~bootstrap/scss/bootstrap';
+@import "ecwid";
 
 
 body {
-  background: #0000fe;
-  color:#fff;
-  font-family: Helvetica, Arial, sans-serif;
+  color:  var(--body-color);
+  //font-family: Arial, sans-serif;
+  font-weight: var(--body-font-weight);
+}
+
+h1 {
+  font-size: 2.5rem!important;
+  color: var(--bs-primary)!important;
 }
 
 a {
-  color: #fff;
   text-decoration: underline;
 }
 

source/_components/cart-button.blade.php

@@ -0,0 +1,23 @@
+
+
+<div x-data="cartButton()">
+    <span x-show="count" x-text="count"></span>
+    <a href="#!/~/cart">
+        <img src="/assets/images/cart.png" alt="">
+    </a>
+</div>
+
+@push('script')
+    <script>
+        function cartButton() {
+            return {
+                count: 0,
+                init() {
+                    Ecwid.OnCartChanged.add(cart => {
+                        this.count = cart.productsQuantity;
+                    });
+                }
+            }
+        }
+    </script>
+@endpush

source/_components/header.blade.php

@@ -1,16 +1,12 @@
 <header class="mt-3 pt-4">
     <div class="row">
-        <div class="col-md-3 col-6">
-            <h1><strong>TCPC</strong></h1>
+        <div class="col">
+            <a href="/">
+                T C P C
+            </a>
         </div>
-        <div class="col-md-3 col-6">
-            <h4 class="text-right text-md-center">éditions</h4>
-        </div>
-        <div class="col-md-3 d-none d-md-block">
-            <h4 class="text-center"><em>bientôt</em></h4>
-        </div>
-        <div class="col-md-3 d-none d-md-block">
-            <h4 class="text-right"><a href="mailto:contact@tcpc.fr">contact</a></h4>
+        <div class="col-auto">
+            <x-cart-button />
         </div>
     </div>
 </header>

source/_layouts/default.blade.php

@@ -3,7 +3,7 @@
 @section('body')
     <div class="container d-flex flex-column min-vh-100">
         <x-header />
-        <main class="flex-fill">
+        <main class="flex-fill py-5">
             @yield('main')
         </main>
         <x-footer />