$id = $request->input('id');
$quantity = $request->input('quantity', 1);
- // Cart items stored as an array with IDs as keys and quantities as values
+ $ref = $request->input('ref') ?? '';
+ $price = $request->input('price') ?? '';
+
// Get existing session or an empty array
$cart_items = $request->session()->get('cart_items', []);
+ $ga = [];
$ga['add'] = [];
$ga['remove'] = [];
$needs_update = false;
+ $product = Product::find($id);
+ $currentItem = false;
+ if($product) {
+ $currentItem = array_filter($cart_items, function ($n) use ($ref) {
+ return $n['ref'] === $ref;
+ });
+ $currentIndex = key($currentItem);
+ }
+
switch ($request->input('action')) {
case 'add':
// If the item already exists in the cart, increment the quantity
- if (isset($cart_items[$id])) {
- $cart_items[$id] += $quantity;
- } else {
- $cart_items[$id] = $quantity;
+ if ($currentItem) {
+ $cart_items[$currentIndex]['quantity'] += $quantity;
+ }else {
+ $cart_items[] = [
+ 'id' => $product->id,
+ 'name' => $product->name,
+ 'reference' => $product->reference,
+ 'category' => $product->type->name,
+ 'quantity' => $quantity,
+ 'image' => $product->image,
+ 'URL' => $product->url,
+ 'price' => $price,
+ 'ref' => $ref
+ ];
+ $currentIndex = array_key_last($cart_items);
}
- $ga['add'][$id] = $quantity;
+ $ga['add'][$currentIndex]['quantity'] = $quantity;
$needs_update = true;
break;
case 'update':
- if (!isset($cart_items[$id])) {
- $ga['add'][$id] = $quantity;
+ if (!$currentItem) {
+ $currentIndex = array_key_last($cart_items);
+ $ga['add'][$currentIndex]['quantity'] = $quantity;
} else {
- if ($cart_items[$id] < $quantity) {
- $ga['add'][$id] = $quantity - $cart_items[$id];
- } else if ($cart_items[$id] > $quantity) {
- $ga['remove'][$id] = $cart_items[$id] - $quantity;
+ if ($cart_items[$currentIndex]['quantity'] < $quantity) {
+ $ga['add'][$currentIndex]['quantity'] = $quantity - $cart_items[$currentIndex]['quantity'];
+ } else if ($cart_items[$currentIndex]['quantity'] > $quantity) {
+ $ga['remove'][$currentIndex]['quantity'] = $cart_items[$currentIndex]['quantity'] - $quantity;
}
}
+
if ($quantity <= 0) {
$needs_update = true;
}
- $cart_items[$id] = $quantity;
+ $cart_items[$currentIndex]['quantity'] = $quantity;
+ //$cart_items[$currentIndex]['price'] = $price;
break;
case 'delete':
- if (isset($cart_items[$id])) {
- $ga['remove'][$id] = $cart_items[$id];
- unset($cart_items[$id]);
+ if ($currentItem) {
+ $ga['remove'][$currentIndex] = $cart_items[$currentIndex];
+ unset($cart_items[$currentIndex]);
}
$needs_update = true;
break;
}
+ $cart_items = array_values($cart_items);
+
// Save back to the session
$request->session()->put('cart_items', $cart_items);
$data['locale'] = 'fr';
$data['products'] = [];
$productsMessage = ['Produits : (reférence : quantité)'];
- foreach ($cartData as $id => $quantity) {
- $data['products'][] = ['id' => $id, 'reference' => $products[$id]['reference'], 'name' => $products[$id]['name'], 'quantity' => $quantity];
- $productsMessage[] = $products[$id]['reference'] . ' : ' . $quantity;
+ foreach ($cartData as $id => $_data) {
+ $data['products'][] = ['id' => $id, 'reference' => $products[$id]['reference'], 'name' => $products[$id]['name'], 'quantity' => $_data['quantity']];
+ $productsMessage[] = $products[$id]['reference'] . ' : ' . $_data['quantity'];
}
$data['products'] = json_encode($data['products']);
unset($data['page']);
self::$_cart_data = [];
if (count($cart_items) > 0) {
+ self::$_cart_data = $cart_items;
+ //$products = self::with('media')->whereIn('id', array_keys($cart_items))->get();
- $products = self::with('media')->whereIn('id', array_keys($cart_items))->get();
-
- foreach ($products as $product) {
+ /*foreach ($cart_items 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,
+ 'id' => $product['id'],
+ 'name' => $product['name'],
+ 'reference' => $product['reference'],
+ 'category' => $product['category'],
+ 'quantity' => $product['quantity'],
+ 'image' => $product['image'],
+ 'URL' => $product['URL'],
+ 'price' => $product['price'],
+ 'ref' => $product['ref']
];
- }
+ }*/
}
}
mounted() {
eventBus.$on('add-item', data => {
data.action = 'add';
+ data.ref = this.ref;
+ data.price = this.price;
this.saveCart(data);
});
this.saveCart(data);
});
- eventBus.$on('delete-item', id => {
+ eventBus.$on('delete-item', data => {
this.saveCart({
action: 'delete',
- id: id
+ id: data.id,
+ ref: data.ref
});
});
+ this.ref = this.$refs.refProduct?.dataset.ref
this.price = this.$refs.optprice ?.dataset.default
this.statusText = this.$refs.statusConfig ?.dataset.incomplete
},
cartData() {
return JSON.stringify(this.items.reduce((obj, item) => Object.assign(obj, {[item.id]: item.quantity}), {}));
+ },
+
+ cartItemHasPriceCount() {
+ return this.items.length ? this.items.filter(n => n.price !== "").length : 0
+ },
+
+ total() {
+ let prices = this.items.map(item => item.price * item.quantity)
+ return this.items.length ? prices.reduce((init, current) => init + current) : false
}
},
// Google analytics cart events
var idToName = {};
- root.items.forEach(function (i) {
- idToName[i.id] = i.reference;
+ root.items.forEach(function (i, index) {
+ idToName[index] = i.ref;
});
- for (var id in response.data.ga.add) {
- let quantity = response.data.ga.add[id];
+ for (var id = 0; id < response.data.ga.add.length; id++) {
+ let quantity = response.data.ga.add[id]['quantity'];
cubistga.addToCart(id, idToName[id], quantity);
}
- for (var id in response.data.ga.remove) {
- let quantity = response.data.ga.remove[id];
+ for (var id = 0; id < response.data.ga.add.length; id++) {
+ let quantity = response.data.ga.remove[id].quantity;
cubistga.removeFromCart(id, idToName[id], quantity);
}
})
*
*/
changePrice() {
- let options = [];
+ let options = [],
+ placeholder = '';
+
const selectOptions = document.querySelectorAll(".opt-select")
selectOptions.forEach(function(e, i) {
+ let nextIndex = i+1
options.push(e.selectedOptions[0])
+ let r = e.selectedOptions[0].dataset.ref;
+ placeholder += r ? r : '-'
+ placeholder += selectOptions[nextIndex] ? '/' : ''
})
let prices = options.map(opt => parseFloat(opt.dataset.price)).filter(n => !isNaN(n)),
let total = prices.reduce((init, current) => init + current)
- this.ref = refs
+ this.ref = this.$refs.refProduct.dataset.ref+'/'+placeholder
this.price = total + parseFloat(this.$refs.optprice.dataset.default)
}
},
$(document).on('click', 'button.cart-add', function () {
$(this).addClass('btn-no-hover').addClass('bg-navy');
- $(this).find('.add').addClass('opacity-0');
- $(this).find('.added').show();
+ $(this).find('.add').addClass('hidden');
+ $(this).find('.added').removeClass('hidden').addClass('inline-flex');
var id = parseInt($(this).attr('data-product-id'));
eventBus.$emit('add-item', {
id: id,
quantity: 1,
});
+
+ clearTimeout(time);
+ let time = setTimeout(() => {
+ $(this).addClass('btn-no-hover').removeClass('bg-navy');
+ $(this).find('.add').removeClass('hidden');
+ $(this).find('.added').removeClass('inline-flex').addClass('hidden');
+ }, 2000)
});
<template>
<div class="cart-wrapper">
- <cart-item v-for="item in items" :key="item.id" :item="item" :sendevents="sendevents"></cart-item>
+ <cart-item v-for="(item,key) in items" :key="key" :item="item" :sendevents="sendevents"></cart-item>
</div>
</template>
<div class="cart-item-text 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>
+ <span class="text-grey-dark" v-if="item.ref">{{ item.ref }}</span>
+ <span class="text-grey-dark" v-else>{{ item.reference }}</span>
<br>
{{ item.name }}
</a>
<span class="mr-2">Quantité</span>
<number-input v-model="item.quantity" :min="1" inline center controls></number-input>
</div>
+ <div v-if="item.price">
+ <span>{{ price }}€ HT</span>
+ </div>
<a href="#" class="cart-delete-item text-red" @click.prevent="deleteItem">
Supprimer
</a>
}
eventBus.$emit('update-item', {
id: this.item.id,
+ ref: this.item.ref,
+ price: this.price,
quantity: newValue,
});
}
},
+ computed: {
+ price() {
+ return this.item.price * this.item.quantity
+ }
+ },
+
methods: {
deleteItem() {
- eventBus.$emit('delete-item', this.item.id);
+ eventBus.$emit('delete-item', {id: this.item.id, ref: this.item.ref} );
}
}
}
&-content
// Fill available height if needed. Footer of popout is 139px tall
- max-height: calc(100vh - var(--header-height) - 139px)
+ max-height: calc(100vh - var(--header-height) - 309px)
transition: max-height var(--transition-duration)
overflow-y: auto
{{ __('Ajouter à ma sélection') }}
@endif
</span>
- <span class="added absolute top-0 left-0 w-full h-full flex items-center justify-ce hidden" style="top:-2px">
- @svg('tick', 'w-4 mr-3 mt-1 inline absolute left-0') <span>{{ __('Produit ajouté') }}</span>
+ <span class="added top-0 left-0 w-full h-full inline-flex items-center justify-center hidden" style="top:-2px;">
+ @svg('tick', 'w-4 mr-3 inline left-0') <span>{{ __('Produit ajouté') }}</span>
</span>
</span>
</button>
</div>
</div>
<div class="opt-infos mb-8">
- <div class="opt-ref" v-cloak v-if="ref">{{ __('Référence') }} : <span id="opt-ref">@{{ ref }}</span></div>
+ <div class="opt-ref" v-cloak>{{ __('Référence') }} : <span ref="refProduct" data-ref="{{ $product->reference }}">@{{ ref }}</span></div>
<div class="opt-price">
{{ __('Prix unitaire') }} :
- <span id="opt-price" ref="optprice" v-cloak data-default="{{ $product->basic_selling_price }}">@{{ price }}</span>{{ "€ ".__('HT') }}
+ <span ref="optprice" v-cloak data-default="{{ $product->basic_selling_price }}">@{{ price }}</span>{{ "€ ".__('HT') }}
</div>
<div class="opt-statut">{{ __('Statut') }} :
- <span id="opt-statut" v-cloak :class="{ 'text-green' : statusConfig }" ref="statusConfig" data-incomplete="{{ __('La configuration est incomplète') }}" data-completed="{{ __('La configuration est complète') }}">
+ <span v-cloak :class="{ 'text-green' : statusConfig }" ref="statusConfig" data-incomplete="{{ __('La configuration est incomplète') }}" data-completed="{{ __('La configuration est complète') }}">
@{{ statusText }}
</span>
</div>
-<span class="cart-header-title">{{ __('Ma sélection') }}</span>
+<span class="cart-header-title">{{ __('Mon panier') }}</span>
<span class="header-icon-wrapper cart-header-icon-wrapper">
@svg('icon-cart', 'cart-header-icon header-icon')
<span class="cart-header-count" v-html="cartItemCount">
<div class="cart-header-popout">
<div class="cart-header-popout-title flex justify-between items-center px-1v">
<span>
- {{ __('Ma sélection') }}
+ {{ __('Mon panier') }}
</span>
<a href="#" class="close-cart-popout text-white hover:text-primary" @click.prevent="closeCart">
{{ __("Vous n'avez encore rien sélectionné") }}
</div>
</div>
- <div class="cart-header-popout-footer" v-if="cartItemCount > 0">
+ <div class="cart-header-popout-footer" v-cloak v-if="cartItemCount > 0 && cartItemCount !== cartItemHasPriceCount">
<link-button class="block text-center" :href="$nav->getHrefByName('cart')">
{{ __('Obtenir un devis') }}
</link-button>
</div>
+ <div class="cart-header-popout-footer" v-cloak v-else-if="cartItemCount > 0 && cartItemCount === cartItemHasPriceCount">
+ <div class="cart-total text-navy text-center mb-5 text-2xl">
+ {{__('Total'). ':' }} @{{ total }}€ HT
+ </div>
+ <link-button class="block text-center" :href="$nav->getHrefByName('cart')">
+ {{ __('Valider la commande') }}
+ </link-button>
+ <div class="text-center">
+ <a href="" class="animated-underline mt-5 inline-block w-100">{{ __('Obtenir un devis officiel') }}</a><br>
+ <a href="" class="animated-underline mt-5 inline-block">{{ __('Enregistrer ce panier') }}</a>
+ </div>
+ </div>
</div>
@endif