MOD 4 tier vehicle filter for Caril BigCommerce theme

caril-4tier-vehicle-filter.diff

diff --git a/assets/js/caril/vehicle-filter.js b/assets/js/caril/vehicle-filter.js
index 5b8f20e..9fc35e2 100644
--- a/assets/js/caril/vehicle-filter.js
+++ b/assets/js/caril/vehicle-filter.js
@@ -9,6 +9,7 @@ export default function (context) {
     const $make = $form.find('[name=make]');
     const $year = $form.find('[name=year]');
     const $model = $form.find('[name=model]');
+    const $tier4 = $form.find('[name=tier4]');
 
     function populateMake() {
         $make.find('option').slice(1).remove();
@@ -40,6 +41,17 @@ export default function (context) {
         }
     }
 
+    function populateTier4() {
+        if ($model.val()) {
+            const model = context.carilVehicleFilterCategories[$make.val()].children[$year.val()].children[$model.val()];
+            if (typeof model.children === 'object') {
+                model.children.forEach((tier4, i) => {
+                    $tier4.append(`<option value="${i}">${tier4.name}</option>`);
+                });
+            }
+        }
+    }
+
     function selectMake(makeIdx) {
         $make.val(makeIdx);
     }
@@ -52,6 +64,10 @@ export default function (context) {
         $model.val(modelIdx);
     }
 
+    function selectTier4(tier4Idx) {
+        $tier4.val(tier4Idx);
+    }
+
     populateMake();
 
     // Pre-select selects on current category page
@@ -82,6 +98,21 @@ export default function (context) {
 
                                 populateModel();
                                 selectModel(modelIdx);
+                            } else if (typeof model.children === 'object') {
+                                model.children.forEach((tier4, tier4Idx) => {
+                                    if (parseInt(tier4.id, 10) === context.carilVehicleFilterCurrentCategoryId) {
+                                        selectMake(makeIdx);
+        
+                                        populateYear();
+                                        selectYear(yearIdx);
+        
+                                        populateModel();
+                                        selectModel(modelIdx);
+        
+                                        populateTier4();
+                                        selectTier4(tier4Idx);
+                                    }
+                                });
                             }
                         });
                     }
@@ -106,6 +137,12 @@ export default function (context) {
         populateModel();
     });
 
+    $model.on('change', () => {
+        $tier4.find('option').slice(1).remove();
+
+        populateTier4();
+    });
+
     $form.on('submit', (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -120,6 +157,10 @@ export default function (context) {
 
                 if ($model.val()) {
                     url = context.carilVehicleFilterCategories[$make.val()].children[$year.val()].children[$model.val()].url;
+
+                    if ($tier4.val()) {
+                        url = context.carilVehicleFilterCategories[$make.val()].children[$year.val()].children[$model.val()].children[$tier4.val()].url;
+                    }
                 }
             }
         } else {
diff --git a/config.json b/config.json
index 12f2957..9dd302d 100644
--- a/config.json
+++ b/config.json
@@ -1,5 +1,5 @@
 {
-  "name": "Caril",
+  "name": "Caril-VF4Tier",
   "version": "1.2.0",
   "meta": {
     "price": 19500,
diff --git a/lang/en.json b/lang/en.json
index cf539f9..7b51fbd 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -1343,8 +1343,9 @@
             "select_year": "Select Catergory",
             "model": "Model",
             "select_model": "Select Model",
+            "tier4": "Tier4",
+            "select_tier4": "Select Tier4",
             "search": "Find my part"
-            
         }
     },
     "instagram": {
diff --git a/templates/components/common/header.html b/templates/components/common/header.html
index f8a14d0..b130700 100644
--- a/templates/components/common/header.html
+++ b/templates/components/common/header.html
@@ -73,6 +73,12 @@
                                 <option value="">{{lang 'caril.vehicle_filter.select_model'}}</option>
                             </select>
                         </div>
+                        <div class="form-field">
+                            <label class="form-label" for="carilVehicleFilter_tier4">{{lang 'caril.vehicle_filter.tier4'}}</label>
+                            <select class="form-select" id="carilVehicleFilter_tier4" name="tier4" data-label="{{lang 'caril.vehicle_filter.tier4'}}">
+                                <option value="">{{lang 'caril.vehicle_filter.select_tier4'}}</option>
+                            </select>
+                        </div>
                         <div class="form-actions">
                             <input class="button button--primary" type="submit" value="{{lang 'caril.vehicle_filter.search'}}">
                         </div>

Apply the patch by running below comment in the theme folder:

patch -p1 . < caril-4tier-vehicle-filter.diff