Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
MOD 4 tier vehicle filter for Caril BigCommerce theme
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>
@tvlgiao

This comment has been minimized.

Copy link
Owner Author

tvlgiao commented Nov 23, 2018

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.