https://www.cbd.fr/themes/child-alysum/assets/js/combination-modal.js?v=1790061811

1$(document).ready(() => {
2  // Cache frequently used elements
3  const $body = $('body');
4  const $overlay = $('#modalCombinationProductOverlay');
5  const $modal = $('#modalCombinationProduct');
6
7  const formatPriceCombination = (combination) => {
8    const price = Number(combination.real_price);
9    const original_price = Number(combination.real_price_no_discount);
10    let formatted_price = '';
11    if (original_price > price) {
12        formatted_price = '<span class="original_price">' + original_price.toLocaleString('fr-FR', {
13            style: 'currency',
14            currency: 'EUR',
15        }) + '</span> ';
16    }
17    formatted_price = formatted_price + price.toLocaleString('fr-FR', {
18      style: 'currency',
19      currency: 'EUR',
20    });
21    /*if (original_price > price) {
22        formatted_price = formatted_price + ' • PROMO';
23    }*/
24    return formatted_price;
25  };
26
27  const addOosLabel = (quantity) => (Number(quantity) <= 0 ? ' • Rupture de stock' : '');
28
29  const closeCombinationsModal = () => {
30    $overlay.removeClass('active');
31    $modal.removeClass('active');
32    $body.removeClass('combinations-modal-active');
33    //$('.modal-backdrop').remove();
34  };
35
36  $(document).on('click', '.options-count', (event) => {
37    event.preventDefault();
38    event.stopPropagation();
39
40    $(event.currentTarget).parent().find('.see-details').trigger('click');
41  });
42
43  $(document).on('click', '.sticky-add-to-cart.see-details', (event) => {
44    event.preventDefault();
45    event.stopPropagation();
46    return false;
47  });
48
49  $(document).on('click', '.btn-add-to-cart[data-action="submit"]', (event) => {
50      $('button.btn-add-to-cart').trigger('click');
51  });
52
53  $(document).on('click', '.see-details', (event) => {
54    event.preventDefault();
55    event.stopPropagation();
56
57    $body.addClass('combinations-modal-active');
58
59    const $target = $(event.currentTarget);
60    const img = $target.data('image');
61    const name = $target.data('name');
62    const combinations = $target.data('combinations') || [];
63
64    $('.product-combination-image').html(`<img src="${img}" alt="${name}">`);
65    $('.product-combination-name').text(name);
66
67    const $select = $modal.find('select');
68    const $ul = $modal.find('.mobile-selector');
69
70    $select.empty();
71    $ul.empty();
72
73    let defaultOn = 0;
74
75    for (const combination of combinations) {
76      if (combination.default_on) {
77        defaultOn = combination.id_product_attribute;
78      }
79
80      const optionHtml = `
81        <option

82          data-quantity="${combination.quantity}"
83          data-price="${combination.real_price}"
84          data-minimal-quantity="${combination.minimal_quantity}"
85          data-product="${combination.id_product}"
86          value="${combination.id_product_attribute}"
87        >
88          ${combination.attribute_designation} • ${formatPriceCombination(combination)}${addOosLabel(combination.quantity)}
89        </option>`;
90
91      $select.append(optionHtml);
92
93      const liHtml = `
94        <li class="product-combination-option" data-id="${combination.id_product_attribute}">
95          <span class="attribute-designation">${combination.attribute_designation}${addOosLabel(combination.quantity)}</span>
96          <span class="price-box">
97            <span class="attribute-price">${formatPriceCombination(combination)}</span>
98            <span class="radio-box"></span>
99          </span>
100        </li>`;
101      $ul.append(liHtml);
102    }
103
104    let selected_combination_index = null;
105    let $target_container = $(event.target).parent().parent();
106    if ($(event.target).hasClass('btn-text')) {
107        $target_container = $target_container.parent();
108    }
109    if ($target_container.hasClass('sticky-add-to-cart')) {
110        selected_combination_index = $('input[id^="attribute"]:checked').parent().index();
111    }
112
113    if (selected_combination_index) {
114        $ul.find('li').eq(selected_combination_index).addClass('selected');
115        $select.val($ul.find('li').eq(selected_combination_index).data('id')).trigger('change');
116    } else {
117        $select.val(defaultOn).trigger('change');
118        $ul.find(`li[data-id="${defaultOn}"]`).addClass('selected');
119    }
120
121    $overlay.addClass('active');
122    $modal.addClass('active');
123  });
124
125  $(document).on('change', '#modalCombinationProduct select', (event) => {
126    event.preventDefault();
127    event.stopPropagation();
128
129    const $current = $(event.currentTarget);
130    const $selected = $current.find('option:selected');
131    const quantity = Number($selected.data('quantity'));
132
133    const $button = $modal.find('form button');
134    $button.prop('disabled', quantity <= 0).toggleClass('disabled', quantity <= 0);
135
136    $modal.find('input[name="id_product"]').val($selected.data('product'));
137    $modal.find('input[name="id_product_attribute"]').val($current.val());
138    $modal.find('input[name="qty"]').val($selected.data('minimal-quantity'));
139    $modal.find('.combination-price').text($selected.data('price').toLocaleString('fr-FR', {
140        style: 'currency',
141        currency: 'EUR',
142    }));
143  });
144
145  $(document).on('click', '#modalCombinationProduct ul.mobile-selector li', (event) => {
146      event.preventDefault();
147      event.stopPropagation();
148
149      $modal.find('select').val($(event.currentTarget).data('id')).trigger('change');
150      $('#modalCombinationProduct ul.mobile-selector li').removeClass('selected');
151      $(event.currentTarget).addClass('selected');
152  });
153
154  $(document).on('click', '#modalCombinationProductOverlay', (event) => {
155    event.preventDefault();
156    event.stopPropagation();
157
158    closeCombinationsModal();
159  });
160
161  $(document).on('click', '#modalCombinationProduct .close-modal', (event) => {
162    event.preventDefault();
163    event.stopPropagation();
164
165    closeCombinationsModal();
166  });
167
168  $(document).on('keydown', (event) => {
169    if (event.key === 'Escape') {
170      closeCombinationsModal();
171    }
172  });
173
174  prestashop.on('updateCart', () => {
175    closeCombinationsModal();
176  });
177});