Skip to content

Commit fbe1d5d

Browse files
robinallezardRobin Morel
robinallezard
and
Robin Morel
authored
Slider sync with pse selector (#90)
* modal and addressCard * remove useless js file * reworks headerHighlight * fix modal controller * add action ton cancel button * modal and addressCard * remove useless js file * reworks headerHighlight * WIP * working with only one declinaison * slider working both sides * imporve js * add product img * hide unvailable pse * display only attr value available * add translations * add value in label mobile * change pse onMoved * format price because of locale * various fix product page * description and features in accordion * fix back to first combination * fix 500 with seo spider --------- Co-authored-by: Robin Morel <[email protected]>
1 parent e71777f commit fbe1d5d

File tree

72 files changed

+918
-1510
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+918
-1510
lines changed

‎account-addresses.html.twig

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
{% block javascripts %}
88
{{ parent() }}
9-
{{ encore_entry_script_tags('addresses') }}
109
{% endblock %}
1110

1211
{% block body %}
@@ -58,10 +57,6 @@
5857
address: address|merge({
5958
country
6059
}),
61-
attributesDelete: {
62-
'class': 'open-modal',
63-
'data-id': 'confirmDeleteAdresse'
64-
},
6560
classes: 'h-full'
6661
} %}
6762
</li>
@@ -92,46 +87,26 @@
9287
{% set deleteModalContent %}
9388
<div class='h4'>{{ 'Are you sure you want to delete this address ?'|trans }}</div>
9489
<div class='flex flex-col gap-4 mt-8 md:flex-row'>
95-
{% include '@components/Molecules/Button/Button.html.twig' with {
96-
text: 'Cancel'| trans,
97-
variant: 'secondary',
98-
fill: true,
99-
classes: 'close-button'
100-
} %}
101-
{% include '@components/Molecules/Button/Button.html.twig' with {
102-
text: 'Yes'| trans,
103-
fill: true,
104-
href: '#0',
105-
id:"DeleteAddressBtn"
106-
} %}
90+
<button type="button" class="Button Button--secondary Button--fill" data-action="modal#close">{{'Cancel'| trans}}</button>
91+
<a href="#" class="Button Button--fill" data-modal-target="confirm">{{'Yes'| trans}}</a>
10792
</div>
10893
{% endset %}
10994

11095
{% include '@components/Molecules/Modal/Modal.html.twig' with {
111-
name: 'confirmDeleteAdresse',
112-
content: deleteModalContent
113-
} %}
96+
name: 'confirmDeleteAddress',
97+
content: deleteModalContent
98+
} %}
11499

115100
{% set setDefaultModalContent %}
116101
<div class='h4'>{{ 'Are you sure you want to choose this address by default ?'|trans }}</div>
117102
<div class='flex flex-col gap-4 mt-8 md:flex-row'>
118-
{% include '@components/Molecules/Button/Button.html.twig' with {
119-
text: 'Cancel'| trans,
120-
variant: 'secondary',
121-
fill: true,
122-
classes: 'close-button'
123-
} %}
124-
{% include '@components/Molecules/Button/Button.html.twig' with {
125-
text: 'Yes'| trans,
126-
fill: true,
127-
href: '#0',
128-
id:"ConfirmDefaultAddressBtn"
129-
} %}
103+
<button type="button" class="Button Button--secondary Button--fill" data-action="modal#close">{{'Cancel'| trans}}</button>
104+
<a href="#" class="Button Button--fill" data-modal-target="confirm">{{'Yes'| trans}}</a>
130105
</div>
131106
{% endset %}
132107

133108
{% include '@components/Molecules/Modal/Modal.html.twig' with {
134-
name: 'confirmDefaultAdresse',
109+
name: 'confirmDefaultAdress',
135110
content: setDefaultModalContent
136111
} %}
137112
{% endblock %}

‎account-order.html.twig

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@
4949

5050
{% include '@components/Organisms/SummaryCard/SummaryCard.html.twig' with {
5151
nbArticles: order.orderProducts|length,
52-
subTotal: order.totalAmountWithoutTaxes|format_currency('EUR', locale: 'fr'),
53-
total: order.totalAmountWithTaxesAfterDiscount|format_currency('EUR', locale: 'fr'),
54-
tax: (order.totalAmount - order.totalAmountWithoutTaxes)|format_currency('EUR', locale: 'fr'),
52+
subTotal: order.totalAmountWithoutTaxes|format_currency('EUR', locale: lang_code),
53+
total: order.totalAmountWithTaxesAfterDiscount|format_currency('EUR', locale: lang_code),
54+
tax: (order.totalAmount - order.totalAmountWithoutTaxes)|format_currency('EUR', locale: lang_code),
5555
delivery: order.postage + order.postageTax,
5656
noGiftCard: true,
5757
noPromo: true} %}

‎account.html.twig

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
{% block javascripts %}
88
{{ parent() }}
9-
{{ encore_entry_script_tags('account') }}
109
{% endblock %}
1110

1211
{% block body %}

‎assets/app.js

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,8 @@ import '@components/base.css';
1010

1111
import './bootstrap.js';
1212

13-
import { quantityButton } from '@components/Molecules/Button/button';
14-
import { ModalFunction } from '@components/Molecules/Modal/Modal';
15-
import headerButtonProfileFunction from '@components/Molecules/HeaderButton/HeaderButtonProfile';
16-
17-
import StepsFunction from '@components/Molecules/Step/Steps.js';
18-
1913
function main() {
2014
document.body.classList.remove('no-js');
21-
22-
quantityButton();
23-
StepsFunction();
24-
ModalFunction();
25-
headerButtonProfileFunction();
2615
}
2716

2817
document.addEventListener('DOMContentLoaded', () => {

‎assets/controllers/address_card_controller.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
3+
class AddressCardController extends Controller {
4+
static outlets = ['modal'];
5+
6+
openModal(e) {
7+
const modal = this.findModal(e.currentTarget.dataset.modal);
8+
9+
if (modal) {
10+
modal.confirmTarget.href = e.currentTarget.dataset.confirm;
11+
12+
this.findModal(e.currentTarget.dataset.modal).open(e);
13+
}
14+
}
15+
16+
findModal(id) {
17+
return this.modalOutlets.find(({ element }) => element.id === id);
18+
}
19+
}
20+
21+
export default AddressCardController;

‎assets/controllers/drawer_controller.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,13 @@ class DrawerController extends Controller {
1717

1818
toggleOverlay(open) {
1919
if (open) {
20-
const overlay = document.createElement('div');
21-
overlay.classList.add('MobileDrawer-overlay');
22-
overlay.addEventListener('click', () => this.close());
23-
return this.element.appendChild(overlay);
20+
if (!this.element.querySelector('.MobileDrawer-overlay')) {
21+
const overlay = document.createElement('div');
22+
overlay.classList.add('MobileDrawer-overlay');
23+
overlay.addEventListener('click', () => this.close());
24+
return this.element.appendChild(overlay);
25+
}
26+
return;
2427
}
2528

2629
document.querySelector('.MobileDrawer-overlay')?.remove();

‎assets/controllers/gallery_controller.js

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎assets/controllers/modal_controller.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
3+
class ModalController extends Controller {
4+
static targets = ['confirm'];
5+
6+
initialize() {
7+
window.addEventListener('modal:open', () => this.open());
8+
}
9+
10+
open() {
11+
this.element.showModal();
12+
}
13+
close() {
14+
this.element.close();
15+
}
16+
}
17+
18+
export default ModalController;

‎assets/controllers/pickup_controller.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,5 @@ export default class extends Controller<HTMLFormElement> {
1717
pickupPointClick(pickup: PickupLocationType): void {
1818
console.log({ pickup });
1919
this.component.action('pickupPointClick', { pickup });
20-
}
20+
}
2121
}

‎assets/controllers/product_controller.js

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
import Splide from '@splidejs/splide';
3+
import '@splidejs/splide/css/core';
4+
import { getComponent } from '@symfony/ux-live-component';
5+
6+
class ProductController extends Controller {
7+
static targets = ['slide', 'slider', 'thumbnail', 'thumblist', 'productImg'];
8+
9+
static values = {
10+
currentPseId: Number
11+
};
12+
13+
async initialize() {
14+
this.component = await getComponent(this.element);
15+
16+
window.addEventListener('change:pse', (e) => {
17+
let currentThumb = this.thumbnailTargets.find((thumb) =>
18+
thumb.dataset.pseId?.split(',').includes(e.detail.pseId.toString())
19+
);
20+
21+
if (!currentThumb) {
22+
currentThumb = this.productImgTarget;
23+
}
24+
25+
this.goToSlide(currentThumb);
26+
});
27+
}
28+
29+
connect() {
30+
this.initSlider();
31+
}
32+
33+
disconnect() {
34+
this.main?.destroy();
35+
this.main = null;
36+
}
37+
38+
initSlider() {
39+
if (this.main || this.slideTargets.length <= 1) return;
40+
41+
this.main = new Splide(this.sliderTarget, {
42+
pagination: false,
43+
destroy: this.slideTargets.length <= 1,
44+
drag: false,
45+
breakpoints: {
46+
768: {
47+
pagination: true,
48+
arrows: false,
49+
drag: true
50+
}
51+
}
52+
});
53+
54+
this.thumbnailTargets.forEach((thumbnail) => {
55+
thumbnail.addEventListener('click', () => {
56+
this.goToSlide(thumbnail);
57+
});
58+
});
59+
60+
this.main.mount();
61+
this.main.on('moved', (index) => this.onSliderMove(index));
62+
}
63+
64+
onSliderMove(index) {
65+
const slide = this.slideTargets[index];
66+
const pseIds = slide?.dataset?.pseIds.split(',').map((p) => parseInt(p));
67+
68+
if (pseIds.length && !pseIds.includes(this.currentPseIdValue)) {
69+
this.component.action('updateCurrentPseFromId', {
70+
pseIds: slide?.dataset?.pseIds
71+
});
72+
}
73+
74+
this.manageActiveClass(index);
75+
}
76+
77+
goToSlide(thumbnail) {
78+
this.main?.go(parseInt(thumbnail.dataset.index));
79+
this.manageActiveClass(thumbnail.dataset.index);
80+
this.scrollToCurrentThumbnail(thumbnail);
81+
}
82+
83+
manageActiveClass(index) {
84+
this.thumbnailTargets.forEach((thumbnail, i) => {
85+
thumbnail.parentNode.classList.toggle('is-active', parseInt(index) === i);
86+
});
87+
}
88+
89+
scrollToCurrentThumbnail(thumbnail) {
90+
this.thumblistTarget.scrollTo({
91+
top: thumbnail.offsetTop,
92+
behavior: 'smooth'
93+
});
94+
}
95+
}
96+
97+
export default ProductController;

‎assets/controllers/profile_controller.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
3+
class ProfileController extends Controller {
4+
static targets = ['dropdown'];
5+
6+
toggle() {
7+
this.dropdownTarget.classList.toggle('active');
8+
}
9+
}
10+
11+
export default ProfileController;

‎assets/css/mobileDrawer.css

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,16 @@
2929
}
3030

3131
&-header {
32-
position: absolute;
33-
top: 0;
34-
right: 0;
35-
padding: rem-convert(10px);
3632
}
33+
3734
&-close {
3835
width: rem-convert(38px);
3936
height: rem-convert(38px);
37+
position: absolute;
38+
top: 0;
39+
right: 0;
40+
padding: rem-convert(10px);
41+
box-sizing: content-box;
4042
}
4143

4244
/* Navigation au clavier */
@@ -52,3 +54,18 @@
5254
background-color: var(--black);
5355
}
5456
}
57+
58+
body.locked {
59+
&:has(.MobileDrawer.is-open.sm\:reset-drawer) {
60+
@apply sm:overflow-auto;
61+
}
62+
&:has(.MobileDrawer.is-open.md\:reset-drawer) {
63+
@apply md:overflow-auto;
64+
}
65+
&:has(.MobileDrawer.is-open.lg\:reset-drawer) {
66+
@apply lg:overflow-auto;
67+
}
68+
&:has(.MobileDrawer.is-open.xl\:reset-drawer) {
69+
@apply xl:overflow-auto;
70+
}
71+
}

‎assets/css/pages/product.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,13 @@
8484
.FilterPill {
8585
display: block;
8686
border: none;
87-
87+
width: 100%;
88+
text-align: left;
8889
&:hover {
8990
background-color: white;
9091
}
91-
&:has(:checked) {
92+
&:has(:checked),
93+
&.active {
9294
background-color: white;
9395
background-image: url('/assets/icons/checkmark.svg');
9496
background-repeat: no-repeat;

0 commit comments

Comments
 (0)