The repo for Purrform's main BigCommerce store.
feat: enhance Diet Builder navigation
+28
-2
+13
assets/js/theme/custom/diet-builder.js
+13
assets/js/theme/custom/diet-builder.js
···
731
731
// ── Step 6: Ingredients ──────────────────────────────────────────
732
732
733
733
renderIngredientsStep(flow) {
734
+
// Restore products to pre-ingredient-filter state when re-entering this step
735
+
if (this.state.productsBeforeIngredientFilter) {
736
+
this.state.recommendedProducts = [
737
+
...this.state.productsBeforeIngredientFilter,
738
+
];
739
+
this.state.productsBeforeIngredientFilter = null;
740
+
}
741
+
734
742
// If health conditions wiped out all products, show an error and let
735
743
// the user go back to health conditions with a clean slate.
736
744
if (this.state.recommendedProducts.length === 0) {
···
1043
1051
const { total, kcal } = calculateRDA(catWeight, activity, coef);
1044
1052
this.state.calculatedRDA = total;
1045
1053
this.state.kcal = kcal;
1054
+
1055
+
// Snapshot products before ingredient filter so we can restore on back navigation
1056
+
this.state.productsBeforeIngredientFilter = [
1057
+
...this.state.recommendedProducts,
1058
+
];
1046
1059
1047
1060
// Filter out products containing any unwanted ingredients
1048
1061
if (this.state.unwantedIngredients.length > 0) {
+14
-1
assets/scss/custom/pages/_diet-builder.scss
+14
-1
assets/scss/custom/pages/_diet-builder.scss
···
77
77
z-index: 1;
78
78
}
79
79
80
-
.diet-builder-step {
80
+
.diet-builder-age-form button {
81
+
opacity: 0.4;
82
+
pointer-events: none;
83
+
cursor: not-allowed;
84
+
}
85
+
86
+
/* enable only when NO invalid inputs exist */
87
+
.diet-builder-age-form:not(:has(:invalid)) button {
88
+
opacity: 1;
89
+
pointer-events: auto;
90
+
cursor: pointer;
91
+
}
92
+
93
+
.diet-builder-step:not(:has(.diet-builder-age-form)) {
81
94
animation: dbFadeUp 0.5s ease both;
82
95
}
83
96