Skip to content

Commit 8306f0f

Browse files
FranceBeFranceBe
authored
Clean css rules so widget is isolated with no impact on merchant style (#197)
1 parent 6818305 commit 8306f0f

8 files changed

Lines changed: 165 additions & 15 deletions

File tree

‎examples/basic.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
</div>
2020
<div class="menu">
2121
<a href="./multiple.html">Multiple widgets</a>
22+
<a href="./customized-style.html">Customized style</a>
2223
</div>
2324
<div class="main">
2425
<div class="image">

‎examples/customized-style.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Alma Widgets basic example</title>
7+
8+
<link rel="stylesheet" href="./style.css" />
9+
<link rel="stylesheet" href="../dist/widgets.css" />
10+
<!-- <link
11+
rel="stylesheet"
12+
href="https://cdn.jsdelivr.net/npm/@alma/widgets@4.x/dist/widgets.min.css"
13+
/> -->
14+
</head>
15+
<body>
16+
<div class="body">
17+
<div>
18+
<img src="../src/assets/alma.svg" class="alma-logo" alt="alma" />
19+
</div>
20+
<div class="menu">
21+
<a href="./multiple.html">Multiple widgets</a>
22+
<a href="./basic.html">Basic page</a>
23+
</div>
24+
<div class="main">
25+
<div class="image">
26+
<img src="./sac-a-main.jpeg" alt="product" />
27+
</div>
28+
29+
<div>
30+
<div class="product">
31+
<h1>Sac à main</h1>
32+
<!-- Generating html tags that matches style from style.css to ensure the widget's css does not impact the site's style.
33+
In this example file, it is made to be obvious and not pretty see style sheet-->
34+
<button>Fake button</button>
35+
<p> The button above should be red with border blue, and the paragraph has a red border and a margin bottom set to 16px. </p>
36+
<p> Those are style from style.css which is the main style of the page (like the merchant website style) and should not be impacted by the widget style. </p>
37+
<select onchange="renderPaymentPlans()" id="quantity">
38+
<option value="1">1</option>
39+
<option value="2">2</option>
40+
<option value="3">3</option>
41+
<option value="10">10</option>
42+
</select>
43+
<h3>450 €</h3>
44+
<span>This widget should be displayed to respect our design without being impacted by merchant style :</span>
45+
<div id="alma-widget-payment-plans"></div>
46+
<br />
47+
<span>This widget should be displayed to respect the override made in the style.css file, as a merchant would do to customize our widget :</span>
48+
<div id="alma-widget-payment-plans-custom"></div>
49+
<div class="add-to-cart">
50+
<button>Ajouter au panier</button>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
<script src="../dist/widgets.umd.js"></script>
57+
<!-- <script src="https://cdn.jsdelivr.net/npm/@alma/widgets@4.x/dist/widgets.umd.js"></script> -->
58+
59+
<script>
60+
var widgets = Alma.Widgets.initialize('11gKoO333vEXacMNMUMUSc4c4g68g2Les4', Alma.ApiMode.TEST)
61+
function renderPaymentPlans() {
62+
var purchaseAmount = 450 * 100 * document.getElementById('quantity').value
63+
widgets.add(Alma.Widgets.PaymentPlans, {
64+
container: '#alma-widget-payment-plans',
65+
locale: 'fr',
66+
purchaseAmount,
67+
transitionDelay: 1500,
68+
})
69+
}
70+
function renderPaymentPlansCustom() {
71+
var purchaseAmount = 450 * 100 * document.getElementById('quantity').value
72+
widgets.add(Alma.Widgets.PaymentPlans, {
73+
container: '#alma-widget-payment-plans-custom',
74+
locale: 'fr',
75+
purchaseAmount,
76+
monochrome: false,
77+
transitionDelay: 1500,
78+
})
79+
}
80+
renderPaymentPlans()
81+
renderPaymentPlansCustom()
82+
83+
84+
</script>
85+
</body>
86+
</html>

‎examples/style.css‎

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,31 @@ body {
77
font-family: Helvetica, Arial, 'Segoe UI', sans-serif;
88
background-color: #edf6fd;
99
margin: 0;
10+
padding-bottom: 50px;
11+
font-size: 16px;
12+
}
13+
14+
h1,
15+
h3 {
16+
margin: 16px 0;
17+
}
18+
19+
/* Simulate fake button style to ensure it does not impact the widget's button */
20+
button {
21+
background-color: red;
22+
padding: 10px;
23+
border: 3px solid blue;
24+
margin: 6px;
25+
}
26+
27+
p {
28+
margin-bottom: 16px;
29+
border: 1px solid red;
30+
}
31+
32+
span {
33+
margin-bottom: 10px;
34+
display: block;
1035
}
1136

1237
.alma-logo {
@@ -89,15 +114,29 @@ body {
89114
color: #00425d;
90115
}
91116

92-
h1,
93-
h3 {
94-
margin: 16px 0;
117+
/* Customize widget as a merchant would do */
118+
@media screen and (prefers-reduced-motion: reduce) {
119+
#alma-widget-payment-plans-custom .alma-payment-plans-eligibility-options button {
120+
cursor: pointer;
121+
background: white;
122+
color: deeppink;
123+
transition: none;
124+
}
95125
}
96126

97-
/* Simulate fake button style to ensure it does not impact the widget's button */
98-
button {
99-
background-color: red;
100-
padding: 25px;
101-
border: 3px solid blue;
102-
margin: 16px;
127+
#alma-widget-payment-plans-custom .alma-payment-plans-eligibility-options button {
128+
cursor: pointer;
129+
background: white;
130+
color: deeppink;
131+
transition: transform;
132+
border-radius: 100%;
133+
width: 30px;
134+
height: 30px;
135+
padding: 0;
136+
}
137+
138+
#alma-widget-payment-plans-custom .alma-payment-plans-eligibility-options button.alma-payment-plans-active-option {
139+
background: deeppink;
140+
color: white;
141+
border: 1px solid deeppink;
103142
}

‎src/Widgets/EligibilityModal/components/EligibilityPlansButtons/EligibilityPlansButtons.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
@media screen and (prefers-reduced-motion: reduce) {
1313
.buttons > button {
14+
/* Limit impact on button custom css from external css file */
1415
all: unset;
1516
display: initial;
1617
height: 50px;
@@ -30,6 +31,7 @@
3031
}
3132

3233
.buttons > button {
34+
/* Limit impact on button custom css from external css file */
3335
all: unset;
3436
display: initial;
3537
height: 50px;
@@ -59,6 +61,12 @@
5961
border: 0;
6062
}
6163

64+
/* Limit impact on span custom css from external css file */
65+
.buttons span {
66+
border: none;
67+
display: unset;
68+
}
69+
6270
.textButton {
6371
margin: 32px;
6472
}

‎src/Widgets/EligibilityModal/components/Title/Title.module.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
h2.title,
12
.title {
3+
all: unset;
24
font-family: 'Argent', sans-serif;
35
font-weight: 600;
46
font-size: var(--font-medium);
57
line-height: 130%;
68
text-align: center;
79
margin: 0 0 24px 0;
10+
text-decoration: none;
11+
color: var(--off-black);
812
}
913

1014
@media (min-width: 800px) {
15+
h2.title,
1116
.title {
1217
font-size: var(--font-large);
1318
}

‎src/Widgets/PaymentPlans/PaymentPlans.module.css‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
@media screen and (prefers-reduced-motion: reduce) {
2929
.planButton {
3030
all: unset;
31+
font-family: 'Venn', sans-serif;
3132
border: none;
3233
background: transparent;
3334
cursor: pointer;
3435
transition: none;
35-
font-family: 'Venn', sans-serif;
3636
color: var(--off-black);
3737
border-radius: 4px;
3838
font-weight: 700;
@@ -43,18 +43,19 @@
4343
align-items: center;
4444
height: 24px;
4545
min-width: 24px;
46-
padding: 2px 10px; /* The 4px is made for Deferred plans */
47-
margin: 0;
46+
padding: 2px 10px;
4847
}
4948
}
5049

5150
.planButton {
51+
/* Limit impact on button custom css from external css file */
5252
all: unset;
53+
font-family: 'Venn', sans-serif;
5354
border: none;
5455
background: transparent;
5556
cursor: pointer;
5657
transition: all 0.2s ease;
57-
font-family: 'Venn', sans-serif;
58+
padding: 2px 10px;
5859
color: var(--off-black);
5960
border-radius: 4px;
6061
font-weight: 700;
@@ -65,7 +66,6 @@
6566
align-items: center;
6667
height: 24px;
6768
min-width: 24px;
68-
padding: 2px 10px; /* The 4px is made for Deferred plans */
6969
}
7070

7171
.planButton:hover {
@@ -84,7 +84,7 @@
8484
outline-offset: 2px;
8585
}
8686

87-
.plan.notEligible {
87+
.planButton.notEligible {
8888
cursor: not-allowed;
8989
opacity: 0.6;
9090
}
@@ -125,12 +125,18 @@
125125
}
126126

127127
.info {
128+
font-family: 'Venn', sans-serif;
128129
font-size: var(--font-x-small);
129130
line-height: 16px;
130131
color: var(--dark-gray);
131132
text-align: center;
132133
}
133134

135+
.info p {
136+
/* Limit impact on p custom css from external css file */
137+
all: unset;
138+
}
139+
134140
/* Live region for screen reader announcements */
135141
.announceText {
136142
position: absolute;
@@ -171,6 +177,7 @@
171177
* have global button styles that could interfere.
172178
*/
173179
.knowMore {
180+
/* Limit impact on button custom css from external css file */
174181
all: unset;
175182
display: flex;
176183
gap: 6px;

‎src/Widgets/PaymentPlans/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,7 @@ const PaymentPlanWidget: FunctionComponent<Props> = ({
283283
{/* Main widget container with proper landmark structure for RGAA 12.6 */}
284284
<main
285285
role="main"
286+
id="alma-widget-payment-plans-main-container"
286287
aria-label={intl.formatMessage({
287288
id: 'accessibility.payment-widget.main.aria-label',
288289
defaultMessage: 'Sélection des options de paiement Alma',

‎src/components/Installments/TotalBlock/TotalBlock.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
}
99

1010
.container p {
11+
/* Limit impact on p custom css from external css file */
12+
border: none;
13+
padding: 0;
1114
margin: 6px 0;
1215
}
1316

0 commit comments

Comments
 (0)