Make Model Year Setup
- Go to your shopify apps admin page
- in a separate tab go to http://make-model-year.herokuapp.com/ and enter your shop url and click install
- once you are in the Vendors page click on New Vendor in the top right corner
- Enter your vendor name and click Create Vendor
- Once your first vendor is created click on models on the same line as the corresponding vendor
- Click on New Vendor Model in the Top right to create a product for your vendor, otherwise click on Vendors to go back
- In the New Model Page Add a product under Name or you can add multiple products at once under Bulk Add
- Once finished adding the models click on vendors in the top right to go to trim at the top right to further specify the product
- You can add trims just as you did with models
- You can also add years after each of the trims
- You add these just like models and trims
- Repeat steps 3-11 for each new Vendor
- Back in your admin page go to Online Store > Themes
- In your Themes page click on the … button in the top right and then click on Edit HTML/CSS
- Under Snippits on the left sidebar click on Add a new snippet called search-make-model
- search-make-model.liquid is now under snippets
- in search-make-model.liquid enter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="make-model-search" style="padding: 20px;"> | |
| <p style="font-weight: bold; text-align: center;">Shop By Make & Model</p> | |
| <select class="input-make"> | |
| <option value="0">-- SELECT MAKE --</option> | |
| </select> | |
| <div class="wrapper-model"> | |
| <select class="input-model-glock input-model"> | |
| <option value="0">-- SELECT MODEL --</option> | |
| </select> | |
| </div> | |
| <div class="wrapper-trim"> | |
| <select class="input-model-glock input-trim"> | |
| <option value="0">-- SELECT TRIM --</option> | |
| </select> | |
| </div> | |
| <div class="wrapper-years"> | |
| <select class="input-model-glock input-years"> | |
| <option value="0">-- SELECT YEARS --</option> | |
| </select> | |
| </div> | |
| <script> | |
| $(document).ready(function(){ | |
| var currentMAKE = ''; | |
| function convertToSlug(Text){ | |
| return Text | |
| .toLowerCase() | |
| .replace(/ /g,'-') | |
| .replace(/[^\w-]+/g,'') | |
| ; | |
| } | |
| var appDomain = 'http://make-model-year.herokuapp.com'; | |
| var shopDomain = '{{ shop.permanent_domain }}'; | |
| // load data | |
| $.getJSON(appDomain + '/vendors/json_vendors.json?shop='+shopDomain, function(data){ | |
| if(data != ''){ | |
| var makeOPTIONS = '<option value="0">-- SELECT MAKE --</option>'; | |
| $.each(data, function(){ | |
| makeOPTIONS += '<option value="'+this.id+'" data-name="'+this.vendor+'">'+this.vendor+'</option>'; | |
| }); | |
| $('.input-make').html(makeOPTIONS); | |
| } | |
| }); | |
| $('.input-make').change(function(){ | |
| $.getJSON(appDomain + '/vendor_models/json_vendor_models.json?vendor_id='+$('.input-make').val()+'&shop='+shopDomain, function(datax){ | |
| if(datax != ''){ | |
| var makeOPTIONS = '<option value="0">-- SELECT MODEL --</option>'; | |
| $.each(datax, function(){ | |
| makeOPTIONS += '<option value="'+this.id+'">'+this.name+'</option>'; | |
| }); | |
| $('.input-model').html(makeOPTIONS); | |
| } | |
| }); | |
| $('.wrapper-model').slideDown(); | |
| }); | |
| $('.input-model').change(function(){ | |
| $.getJSON(appDomain + '/model_trims/json_model_trims.json?model_id='+$('.input-model').val()+'&shop='+shopDomain, function(datax){ | |
| if(datax != ''){ | |
| var makeTRIMS = '<option value="0">-- SELECT TRIM --</option>'; | |
| $.each(datax, function(){ | |
| makeTRIMS += '<option value="'+this.id+'">'+this.name+'</option>'; | |
| }); | |
| $('.input-trim').html(makeTRIMS); | |
| } | |
| }); | |
| $('.wrapper-trim').slideDown(); | |
| }); | |
| $('.input-trim').change(function(){ | |
| $('.input-years').html('<option value="0">-- SELECT YEAR(S) --</option>'); | |
| $.getJSON(appDomain + '/trim_years/json_trim_years.json?trim_id='+$('.input-trim').val()+'&shop='+shopDomain, function(datax){ | |
| if(datax != ''){ | |
| var makeYEARS = '<option value="0">-- SELECT YEAR(S) --</option>'; | |
| $.each(datax, function(){ | |
| var vendorTEXT = convertToSlug($('.input-make option:selected').text()); | |
| var modelTEXT = convertToSlug($('.input-model option:selected').text()); | |
| var trimTEXT = convertToSlug($('.input-trim option:selected').text()); | |
| var yearTEXT = convertToSlug(this.name); | |
| var tagURL = '/collections/all/' + vendorTEXT+':'+modelTEXT+':'+trimTEXT+':'+yearTEXT; | |
| //alert(vendorTEXT+'-'+tagURL); | |
| makeYEARS += '<option value="'+tagURL+'">'+this.name+'</option>'; | |
| }); | |
| $('.input-years').html(makeYEARS); | |
| } | |
| }); | |
| $('.wrapper-years').slideDown(); | |
| }); | |
| $('.input-years').change(function(){ | |
| window.location = $(this).val(); | |
| }); | |
| }); | |
| </script> | |
| </div> |
- Once you save the code go through the templates and add {% include 'make-model-year' %} to whichever template section you want to place the dropdown
- now that make-model is set up create collections in the admin page by going to products> collections
- Click on add collection at top right
- In the title section add the title with (name of Vendor) (name of Model) (trim) (year) repeat steps 16 -18 until all vendor products are listed.
- Then add each product by going to products> products
- Click add product at the top right and assign them to the proper collections by entering (name of Vendor) (name of Model) (trim) (year) under collection in the right sidebar.
- Repeat for each product and you are finished.
