The repo for Purrform's main BigCommerce store.
feat: update Diet Builder state management and enhance results step rendering
+62
-22
+57
-21
assets/js/theme/custom/diet-builder.js
+57
-21
assets/js/theme/custom/diet-builder.js
···
506
506
this.state.age = ageKey;
507
507
this.state.coef = config.coef;
508
508
this.state.meals = config.meals;
509
+
this.state.flow = config.flow;
509
510
510
511
if (config.activity !== null) {
511
512
this.state.activity = config.activity;
···
1079
1080
}
1080
1081
1081
1082
renderResultsStep() {
1083
+
const previewPayload = {
1084
+
catName: this.state.catName,
1085
+
calculatedRDA: this.state.calculatedRDA,
1086
+
recommendedProducts: this.state.recommendedProducts.map((p) => ({
1087
+
name: p.name,
1088
+
image: p.image,
1089
+
price: p.price,
1090
+
path: `https://www.purrform.co.uk${p.path}`,
1091
+
gramsPerDay: p.gramsPerDay,
1092
+
pricePerDay: p.pricePerDay,
1093
+
})),
1094
+
};
1095
+
1096
+
const backBtn = el(
1097
+
'button',
1098
+
{
1099
+
type: 'button',
1100
+
className: 'diet-builder-btn--secondary',
1101
+
onClick: () => this.renderIngredientsStep(this.state.flow),
1102
+
},
1103
+
'Back',
1104
+
);
1105
+
1082
1106
const content = el(
1083
-
'form',
1084
-
{ className: 'diet-builder-email-form' },
1107
+
'div',
1108
+
{ className: 'diet-builder-results-step' },
1085
1109
el(
1086
-
'label',
1087
-
{ htmlFor: 'diet-builder-email' },
1088
-
'Enter email to receive diet recommendations:',
1110
+
'form',
1111
+
{ className: 'diet-builder-email-form' },
1112
+
el(
1113
+
'label',
1114
+
{ htmlFor: 'diet-builder-email' },
1115
+
'Enter email to receive diet recommendations:',
1116
+
),
1117
+
el('input', {
1118
+
type: 'email',
1119
+
id: 'diet-builder-email',
1120
+
name: 'email',
1121
+
placeholder: 'your@email.com',
1122
+
required: true,
1123
+
}),
1124
+
el(
1125
+
'div',
1126
+
{ className: 'diet-builder-ingredients__buttons' },
1127
+
backBtn,
1128
+
el(
1129
+
'button',
1130
+
{
1131
+
type: 'submit',
1132
+
className: 'diet-builder-btn--primary',
1133
+
},
1134
+
'Submit',
1135
+
),
1136
+
),
1089
1137
),
1090
-
el('input', {
1091
-
type: 'email',
1092
-
id: 'diet-builder-email',
1093
-
name: 'email',
1094
-
placeholder: 'your@email.com',
1095
-
required: true,
1096
-
}),
1097
1138
el(
1098
-
'button',
1099
-
{ type: 'submit', className: 'diet-builder-btn--primary' },
1100
-
'Submit',
1139
+
'pre',
1140
+
{ className: 'diet-builder-results-step__debug' },
1141
+
JSON.stringify(previewPayload, null, 2),
1101
1142
),
1102
1143
);
1103
1144
1104
-
const form = content;
1145
+
const form = content.querySelector('form');
1105
1146
form.addEventListener('submit', (e) => {
1106
1147
e.preventDefault();
1107
1148
this.submitEmailForm(form);
···
1415
1456
},
1416
1457
'Start again',
1417
1458
),
1418
-
),
1419
-
el(
1420
-
'pre',
1421
-
{ className: 'diet-builder-success__debug' },
1422
-
JSON.stringify(this.state.payload, null, 2),
1423
1459
),
1424
1460
);
1425
1461
+4
assets/scss/custom/pages/_diet-builder.scss
+4
assets/scss/custom/pages/_diet-builder.scss