♻️ refactor(FlowReserve.js): Utilise sessionStorage au lieu de localStorage.
 feat(FlowAddToCart.js): Utilise sessionStorage pour les dates de réservation.
 feat(FlowDatePicker.js): Utilise sessionStorage pour conserver les dates.
```
This commit is contained in:
Serreau Jovann
2026-02-05 12:19:34 +01:00
parent ff67f1fc68
commit a6eadda5fe
3 changed files with 23 additions and 23 deletions

View File

@@ -16,7 +16,7 @@ export class FlowAddToCart extends HTMLElement {
async addToCart() {
// 1. Check Dates
const dates = JSON.parse(localStorage.getItem('reservation_dates') || '{}');
const dates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
if (!dates.start || !dates.end) {
// Open Date Picker if no dates
document.dispatchEvent(new CustomEvent('open-date-picker'));
@@ -45,25 +45,25 @@ export class FlowAddToCart extends HTMLElement {
if (data.dispo) {
// 4. Add to Cart
const list = JSON.parse(localStorage.getItem('pl_list') || '[]');
const list = JSON.parse(sessionStorage.getItem('pl_list') || '[]');
// --- Save Options ---
const selectedOptions = Array.from(document.querySelectorAll('.product-option-checkbox:checked'))
.map(cb => cb.value);
const allOptions = JSON.parse(localStorage.getItem('pl_options') || '{}'); console.log(selectedOptions);
const allOptions = JSON.parse(sessionStorage.getItem('pl_options') || '{}'); console.log(selectedOptions);
if (selectedOptions.length > 0) {
allOptions[this.productId] = selectedOptions;
} else {
delete allOptions[this.productId];
}
localStorage.setItem('pl_options', JSON.stringify(allOptions));
sessionStorage.setItem('pl_options', JSON.stringify(allOptions));
// --------------------
if (!list.includes(this.productId)) {
list.push(this.productId);
localStorage.setItem('pl_list', JSON.stringify(list));
sessionStorage.setItem('pl_list', JSON.stringify(list));
window.dispatchEvent(new CustomEvent('cart:updated'));
}

View File

@@ -17,8 +17,8 @@ export class FlowDatePicker extends HTMLElement {
// Listen for global open event
document.addEventListener('open-date-picker', () => this.openModal());
// Update header if dates exist in localStorage
const storedDates = JSON.parse(localStorage.getItem('reservation_dates') || '{}');
// Update header if dates exist in sessionStorage
const storedDates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
if (storedDates.start && storedDates.end) {
const headerDisplay = document.getElementById('header-date-display');
if (headerDisplay) {
@@ -63,8 +63,8 @@ export class FlowDatePicker extends HTMLElement {
ensureModalExists() {
if (document.getElementById(this.modalId)) return;
// Recuperation des dates du localStorage
const storedDates = JSON.parse(localStorage.getItem('reservation_dates') || '{}');
// Recuperation des dates du sessionStorage
const storedDates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
const defaultStart = storedDates.start || '';
const defaultEnd = storedDates.end || '';
@@ -134,7 +134,7 @@ export class FlowDatePicker extends HTMLElement {
const endInput = modal.querySelector('#end_date');
const saveToLocalStorage = () => {
localStorage.setItem('reservation_dates', JSON.stringify({
sessionStorage.setItem('reservation_dates', JSON.stringify({
start: startInput.value,
end: endInput.value
}));

View File

@@ -45,7 +45,7 @@ export class FlowReserve extends HTMLAnchorElement {
getList() {
try {
return JSON.parse(localStorage.getItem(this.storageKey) || '[]');
return JSON.parse(sessionStorage.getItem(this.storageKey) || '[]');
} catch (e) {
return [];
}
@@ -53,7 +53,7 @@ export class FlowReserve extends HTMLAnchorElement {
getOptions() {
try {
return JSON.parse(localStorage.getItem('pl_options') || '{}');
return JSON.parse(sessionStorage.getItem('pl_options') || '{}');
} catch (e) {
return {};
}
@@ -62,13 +62,13 @@ export class FlowReserve extends HTMLAnchorElement {
removeFromList(id) {
let list = this.getList();
list = list.filter(itemId => itemId.toString() !== id.toString());
localStorage.setItem(this.storageKey, JSON.stringify(list));
sessionStorage.setItem(this.storageKey, JSON.stringify(list));
// Remove options for this product
const options = this.getOptions();
if (options[id]) {
delete options[id];
localStorage.setItem('pl_options', JSON.stringify(options));
sessionStorage.setItem('pl_options', JSON.stringify(options));
}
window.dispatchEvent(new CustomEvent('cart:updated'));
@@ -123,9 +123,9 @@ export class FlowReserve extends HTMLAnchorElement {
let dates = { start: null, end: null };
try {
dates = JSON.parse(localStorage.getItem('reservation_dates') || '{}');
dates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
} catch (e) {
console.warn('Invalid reservation dates in localStorage for availability check');
console.warn('Invalid reservation dates in sessionStorage for availability check');
}
try {
@@ -151,7 +151,7 @@ export class FlowReserve extends HTMLAnchorElement {
currentList = currentList.filter(id => !data.unavailable_products_ids.includes(parseInt(id)) && !data.unavailable_products_ids.includes(String(id)));
if (currentList.length !== initialLength) {
localStorage.setItem(this.storageKey, JSON.stringify(currentList));
sessionStorage.setItem(this.storageKey, JSON.stringify(currentList));
window.dispatchEvent(new CustomEvent('cart:updated'));
console.warn('Produits indisponibles retirés du panier:', data.unavailable_products_ids);
// Force refresh to update UI immediately
@@ -229,12 +229,12 @@ export class FlowReserve extends HTMLAnchorElement {
const ids = this.getList();
const options = this.getOptions();
// Retrieve dates from localStorage
// Retrieve dates from sessionStorage
let dates = { start: null, end: null };
try {
dates = JSON.parse(localStorage.getItem('reservation_dates') || '{}');
dates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
} catch (e) {
console.warn('Invalid reservation dates in localStorage');
console.warn('Invalid reservation dates in sessionStorage');
}
if (ids.length === 0) {
@@ -282,7 +282,7 @@ export class FlowReserve extends HTMLAnchorElement {
currentList = currentList.filter(id => !data.unavailable_products_ids.includes(parseInt(id)) && !data.unavailable_products_ids.includes(String(id))); // Handle string/int types
if (currentList.length !== initialLength) {
localStorage.setItem(this.storageKey, JSON.stringify(currentList));
sessionStorage.setItem(this.storageKey, JSON.stringify(currentList));
window.dispatchEvent(new CustomEvent('cart:updated'));
// We don't recurse here to avoid infinite loops, but the UI will update next time or we could just use the returned 'products' which already excludes them.
console.warn('Certains produits ont été retirés car ils n\'existent plus:', data.unavailable_products_ids);
@@ -433,9 +433,9 @@ export class FlowReserve extends HTMLAnchorElement {
const options = this.getOptions();
let dates = { start: null, end: null };
try {
dates = JSON.parse(localStorage.getItem('reservation_dates') || '{}');
dates = JSON.parse(sessionStorage.getItem('reservation_dates') || '{}');
} catch (error) {
console.warn('Invalid reservation dates in localStorage');
console.warn('Invalid reservation dates in sessionStorage');
}
try {