--- /dev/null
+<?php
+
+
+namespace App\Templates;
+
+
+class Cart extends Base
+{
+ public function getName()
+ {
+ return 'Ma sélection';
+ }
+
+ public function init()
+ {
+ parent::init();
+
+ $this->removeField('intro');
+
+ $this->addField(['name' => 'page_heading',
+ 'type' => 'Text',
+ 'label' => 'Titre de la page',
+ 'tab' => 'Contenus']);
+
+ // Enable form
+ $this->addForm();
+ }
+}
require('./menu');
window.Vue = require('vue');
+window.eventBus = new Vue();
import PortalVue from 'portal-vue';
Vue.use(PortalVue);
items: {}, // Populated from data attribute on root element so we can pass data from PHP
},
- beforeMount: function () {
+ beforeMount() {
this.items = JSON.parse(this.$el.dataset.cartItems);
},
+ mounted() {
+ eventBus.$on('update-item-quantity', update => {
+ const index = this.items.findIndex((item) => item.id == update.id);
+ this.items[index].quantity = update.quantity;
+ });
+
+ eventBus.$on('delete-item', id => {
+ const index = this.items.findIndex((item) => item.id == id);
+ this.items.splice(index, 1);
+ });
+ },
+
computed: {
cartItemCount() {
// Todo: See if this should count just number of items or make a sum of all quantities? What is more useful? The sum of quantities can be found using map/reduce functions but this needs to be adapted for the object structure using Object.keys as the source.
},
methods: {
- // Todo: find a better way to structure this with Vue
+
openCart() {
document.body.classList.add('cart-open');
},
closeCart() {
document.body.classList.remove('cart-open');
},
- updateItemQuantity(update) {
- this.items[update.id].quantity = update.quantity;
- }
}
<template>
<div class="cart-wrapper">
- <cart-item v-for="item in items" :key="item.id" :item="item" @update-item-quantity="updateItemQuantity"></cart-item>
+ <cart-item v-for="item in items" :key="item.id" :item="item"></cart-item>
</div>
</template>
},
methods: {
- // Todo: consider event bus to avoid having to pass this up through all the levels?
- updateItemQuantity(update) {
- this.$emit('update-item-quantity', update)
- },
}
}
</script>
<br>
{{ item.name }}
</div>
- <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between">
+ <div class="cart-quantity bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between">
<span class="mr-2">Quantité</span>
<number-input :value="item.quantity" :min="1" inline center controls @change="updateQuantity"></number-input>
</div>
- <a href="#" class="cart-delete-item text-red" @click.prevent="deleteItem">
+ <a href="#" class="cart-delete-item text-red block" @click.prevent="deleteItem">
Supprimer
</a>
</div>
methods: {
updateQuantity(newValue, oldValue) {
- this.$emit('update-item-quantity', {
+ eventBus.$emit('update-item-quantity', {
id: this.item.id,
quantity: newValue,
});
},
deleteItem() {
- this.$emit('deleteItem', this.item.id);
+ eventBus.$emit('delete-item', this.item.id);
}
}
}
z-index: 15
background-color: theme('colors.navy')
opacity: 0.1
+
+// Main cart page view
+.cart-page
+ .cart-quantity
+ @apply bg-white inline-flex
if (config('features.quote')) {
//#### Generate temporary cart data
$cart_items = [];
- for ($i = 1; $i <= 6; $i++) {
+ for ($i = 0; $i < 6; $i++) {
$cart_items[$i] = [
- 'id' => $i,
+ 'id' => $i + 1,
'quantity' => rand(1, 15),
'name' => 'Modèle '. rand(1000, 1500),
'category' => 'Capteur de force',
--- /dev/null
+@extends('layouts/app')
+
+@section('content')
+
+ <content class="pb-3v">
+ <text-block :title="$page->page_heading" />
+
+ {{-- Columns set to auto because cart will disappear when quote form is sent, leaving just the confirmation message. --}}
+ <grid cols="auto">
+
+ {{-- Nested divs to allow grey backgrounds of columns to match the height of their content instead of total height --}}
+ <div v-if="cartItemCount > 0">
+ <cart :items='items' class="cart-page bg-grey-100 p-1v"></cart>
+ </div>
+
+ <div>
+ <div class="bg-grey-100 p-1v">
+ @form
+ </div>
+ </div>
+
+ </grid>
+
+ </content>
+
+@endsection
-<span class="cart-header-title">My Selection</span>
+<span class="cart-header-title">{{ __('Ma sélection') }}</span>
<span class="cart-header-icon" v-html="cartItemCount"></span>
@endpush
<div id="contact-form">
- <div class="ajax-form flex flex-col">
+ <div class="ajax-form flex flex-col max-w-half">
@if($page->get('form_intro'))
<p class="form-info text-navy">{{$page->get('form_intro')}}</p>
@endif
</a>
</div>
<div class="cart-header-popout-content text-navy font-body p-1v pb-0">
- <cart :items='items' @update-item-quantity="updateItemQuantity"></cart>
+ <cart :items='items'></cart>
+ <div v-if="cartItemCount == 0" class="pb-1v">
+ {{ __("Vous n'avez encore rien sélectionné") }}
+ </div>
</div>
- <div class="cart-header-popout-footer bg-grey-100 p-1v">
- <link-button class="block text-center">Obtenir un devis</link-button>
+ <div class="cart-header-popout-footer bg-grey-100 p-1v" v-if="cartItemCount > 0">
+ <link-button class="block text-center" :href="$nav->getHrefByName('cart')">
+ {{ __('Obtenir un devis') }}
+ </link-button>
</div>
</div>
@endif
'body': ['Muli', 'sans-serif'], // Main blocks of text
},
maxWidth: {
+ 'half': '768px', // Half a full-width content area
'text': '480px' // Or 30rem?
},
padding: {
projects / pmi.git / commitdiff