The repo for Purrform's main BigCommerce store.
feat: update Diet Builder error handling and styling, and increment backend version to v6
+33
-17
+18
-12
assets/js/theme/custom/diet-builder.js
+18
-12
assets/js/theme/custom/diet-builder.js
···
299
299
this.container = document.getElementById('diet-builder');
300
300
if (!this.container) return;
301
301
302
-
// Resolve the GraphQL product fetch
303
-
try {
304
-
this.allProducts = await this.allProductsPromise;
305
-
} catch (err) {
306
-
this.allProducts = [];
307
-
}
308
-
309
302
this.renderAgeStep();
310
303
}
311
304
···
554
547
this.renderStep('Tell us about your cat', form);
555
548
}
556
549
557
-
submitAgeForm() {
550
+
async submitAgeForm() {
558
551
const catName = document.getElementById('cat-name').value.trim();
559
552
const day = parseInt(document.getElementById('dob-day').value, 10);
560
553
const month = parseInt(document.getElementById('dob-month').value, 10);
···
571
564
'p',
572
565
{
573
566
id: 'diet-builder-age-error',
574
-
className: 'diet-builder-age-form__error',
567
+
className:
568
+
'diet-builder-age-form__error diet-builder-inline-error',
575
569
},
576
570
'Our diet builder is designed for cats aged 4 months and older.',
577
571
);
···
609
603
this.state.activity = config.activity;
610
604
}
611
605
606
+
// Resolve the GraphQL product fetch if it hasn't completed yet
607
+
if (this.allProducts.length === 0) {
608
+
try {
609
+
this.allProducts = await this.allProductsPromise;
610
+
} catch (err) {
611
+
this.allProducts = [];
612
+
}
613
+
}
614
+
612
615
this.state.recommendedProducts = this.allProducts.filter((product) =>
613
616
product.categories.includes(ageGroup),
614
617
);
···
644
647
});
645
648
646
649
const errorMsg = el('p', {
647
-
className: 'diet-builder-weight__error',
650
+
className: 'diet-builder-weight__error diet-builder-inline-error',
648
651
});
649
652
650
653
const buttonGroup = el('div', {
···
844
847
});
845
848
const msg = el(
846
849
'p',
847
-
{ className: 'diet-builder-ingredients__description' },
850
+
{
851
+
className:
852
+
'diet-builder-ingredients__description diet-builder-inline-error',
853
+
},
848
854
'Unfortunately, no products match the combination of health conditions you selected. Please go back and adjust your selections.',
849
855
);
850
856
const backBtn = el(
···
993
999
994
1000
const limitMsg = el(
995
1001
'p',
996
-
{ className: 'diet-builder-health__limit-msg' },
1002
+
{ className: 'diet-builder-health__limit-msg diet-builder-inline-error' },
997
1003
'You can select a maximum of 2 health conditions. Deselect one to choose another.',
998
1004
);
999
1005
+14
-4
assets/scss/custom/pages/_diet-builder.scss
+14
-4
assets/scss/custom/pages/_diet-builder.scss
···
95
95
cursor: pointer;
96
96
}
97
97
98
-
.diet-builder-step:not(:has(.diet-builder-age-form)) {
99
-
animation: dbFadeUp 0.5s ease both;
100
-
}
101
-
102
98
.diet-builder-step__heading {
103
99
font-weight: 600;
104
100
color: var(--db-green);
···
716
712
color: #c0392b;
717
713
font-size: 0.875rem;
718
714
margin-top: 1rem;
715
+
width: fit-content;
716
+
margin-inline: auto;
719
717
}
720
718
721
719
.diet-builder-health__buttons {
···
937
935
justify-content: center;
938
936
text-decoration: none;
939
937
}
938
+
}
939
+
940
+
// ── Inline error message (shared across steps) ────────────────
941
+
.diet-builder-inline-error {
942
+
width: fit-content;
943
+
padding: 10px;
944
+
background-color: #f8d7da;
945
+
color: #721c24;
946
+
border-radius: 4px;
947
+
font-size: 14px;
948
+
margin-top: 1rem;
949
+
text-align: center;
940
950
}
941
951
942
952
// ── Error step ───────────────────────────────────────────────