Secondary Make Model Year Setup

You can add secondary snippits in addition to the original make-model-year to add further navigation options to your collection page
make-model-year-filters

	<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-h').html(makeOPTIONS);
	}
	});


	});
	</script>

view raw make-model-year-filters hosted with ❤ by GitHub

make-model-year-horizantal


	<ul class="mmy-horizontal">
	<!-- start -->
	<li>
	<select class="input-make-h">
	<option value="0">-- SELECT MAKE --</option>
	</select>
	</li>
	<!-- start -->
	<li>
	<div class="wrapper-model-h">
	<select class="input-model-h">
	<option value="0">-- SELECT MODEL --</option>
	</select>
	</div>
	</li>
	<!-- start -->
	<li>
	<div class="wrapper-trim-h">
	<select class="input-trim-h">
	<option value="0">-- SELECT TRIM --</option>
	</select>
	</div>
	</li>
	<!-- start -->
	<li>
	<div class="wrapper-years-h">
	<select class="input-years-h">
	<option value="0">-- SELECT YEARS --</option>
	</select>
	</div>
	</li>
	</ul>


	<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-h').html(makeOPTIONS);
	}
	});
	$('.input-make-h').change(function(){

	$.getJSON(appDomain + '/vendor_models/json_vendor_models.json?vendor_id='+$('.input-make-h').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-h').html(makeOPTIONS);
	}
	});

	$('.wrapper-model-h').slideDown();
	});
	$('.input-model-h').change(function(){
	$.getJSON(appDomain + '/model_trims/json_model_trims.json?model_id='+$('.input-model-h').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-h').html(makeTRIMS);
	}
	});

	$('.wrapper-trim-h').slideDown();
	});

	$('.input-trim-h').change(function(){
	$('.input-years-h').html('<option value="0">-- SELECT YEAR(S) --</option>');

	$.getJSON(appDomain + '/trim_years/json_trim_years.json?trim_id='+$('.input-trim-h').val()+'&shop='+shopDomain, function(datax){
	if(datax != ''){
	var makeYEARS = '<option value="0">-- SELECT YEAR(S) --</option>';

	$.each(datax, function(){
	var vendorTEXT = convertToSlug($('.input-make-h option:selected').text());
	var modelTEXT = convertToSlug($('.input-model-h option:selected').text());
	var trimTEXT = convertToSlug($('.input-trim-h 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-h').html(makeYEARS);
	}
	});

	$('.wrapper-years-h').slideDown();
	});
	$('.input-years-h').change(function(){
	window.location = $(this).val();
	});
	});
	</script>

view raw make-model-year-horizantal hosted with ❤ by GitHub

make-model-year-product-tags

	<div>

	<strong>Year:</strong>
	<span class="mmy_year">{% for tag in product.tags %}{% if tag contains ':' %}{% assign mmy = tag \| split: ':' %}{{ mmy[3] }},{% endif %}{% endfor %}</span>

	</div>
	<div>
	<strong>Make:</strong>
	<span class="mmy_make">{% for tag in product.tags %}{% if tag contains ':' %}{% assign mmy = tag \| split: ':' %}{{ mmy[0] }},{% endif %}{% endfor %}</span>

	</div>
	<div>
	<strong>Model:</strong>
	<span class="mmy_model">{% for tag in product.tags %}{% if tag contains ':' %}{% assign mmy = tag \| split: ':' %}{{ mmy[1] }},{% endif %}{% endfor %}</span>

	</div>
	<div>
	<strong>Body:</strong>
	<span class="mmy_body">{% for tag in product.tags %}{% if tag contains ':' %}{% assign mmy = tag \| split: ':' %}{{ mmy[2] }},{% endif %}{% endfor %}</span>

	</div>

	<script>
	jQuery(document).ready(function(){
	function cleanMMY(div_class){
	data = $('.'+div_class).html();
	arr = $.unique(data.split(','));
	arr.sort();
	data = arr.join(",");

	if ( data.charAt( 0 ) == ',' ){
	data = data.substring(1);
	}

	data = data.replace("-", " "); // clean up
	data = data.replace(",", ", "); // clean up

	$('.'+div_class).html(data);
	}

	cleanMMY('mmy_make');
	cleanMMY('mmy_model');
	cleanMMY('mmy_body');
	cleanMMY('mmy_year');


	});

	</script>

view raw make-model-year-product-tags hosted with ❤ by GitHub

make-model-year-related-products

	{% assign product_id = product.id %}
	{% for tag in product.tags %}
	{% if tag contains ':' %}
	{% assign mmytag = tag %}
	{% endif %}
	{% endfor %}


	{% if mmytag %}
	{% assign col = 'all' %}

	<div class="related-wrapper">
	<div class="container main content" style="padding: 60px 0 !important;">

	<div class="{% if settings.product_sidebar %}twelve offset-by-four{% else %}sixteen{% endif %} columns">
	<h4 class="title center">{{ settings.related_products_title }}</h4>
	</div>

	{% for product in collections[col].all_products %}

	{% if product.tags contains mmytag and product.id != product_id %}

	{% include 'product-thumbnail' with product-loop %}

	{% if products_per_row == "2" %}
	{% cycle '', new_row %}
	{% elsif products_per_row == "3" %}
	{% cycle '', '', new_row %}
	{% elsif products_per_row == "4" %}
	{% cycle '', '', '', new_row %}
	{% endif %}


	{% endif %}

	{% comment %}
	{% assign counter = 0 %}
	{% for product in collection.products %}
	{% if product.tags contains mmytag and counter < 6 %}
	<a href="{{ product.url \| within: collection }}">{{ product.title }}</a>
	{% assign counter = counter \| plus: 1 %}
	{% endif %}
	{% endfor %}
	{% endcomment %}

	{% endfor %}

	</div>
	</div>

	{% else %}


	<div class="related-wrapper">
	<div class="container main content" style="padding: 60px 0 !important;">
	{% if settings.display_related_products %}
	{% capture limit %}{{ settings.products_per_row \| plus: 1 }}{% endcapture %}



	{% if col and collections[col].all_products_count > 0 %}
	<div class="{% if settings.product_sidebar %}twelve offset-by-four{% else %}sixteen{% endif %} columns">
	<h4 class="title center">{{ settings.related_products_title }}</h4>
	</div>

	{% assign skip_product = product %}
	{% assign products = collections[col].products %}
	{% assign products_per_row = settings.products_per_row %}
	<div class="{% if settings.product_sidebar %}twelve offset-by-four{% else %}sixteen{% endif %} columns">
	{% include 'product-loop' with settings.product_sidebar %}
	</div>
	{% endif %}

	{% endif %}
	</div>
	</div>
	{% endif %}

view raw make-model-year-related-products hosted with ❤ by GitHub

make-model-year-sidebar

	<a href="/collections/all"><i class="fa fa-refresh"></i> Reset Filters</a>
	<ul class="mmy_make_model_sidebar blog_list toggle_list"></ul>

	<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
	var vendor_id = this.id;
	var current_tags = '';

	{% for tag in current_tags %}
	current_tags += '{{ tag }}+';
	{% endfor %}

	var current_collection = '{{collection.url}}';
	if(current_collection === ''){
	current_collection = '/collections/all';
	}

	$.getJSON(appDomain + '/vendors/json_vendors.json?shop='+shopDomain, function(data){
	if(data != ''){
	var makeOPTIONS = '';
	$.each(data, function(){
	vendor_id = this.id

	var vendor_name = convertToSlug(this.vendor);

	if(current_tags.toLowerCase().indexOf(vendor_name) >= 0){
	var current_tagsx = current_tags.replace(convertToSlug(vendor_name)+'-', ""); // clean up
	current_tagsx = current_tagsx.replace(convertToSlug(vendor_name), ""); // clean up
	$('.mmy_make_model_sidebar').append('<li><span class="tag_selected"><a href="'+current_collection+'/'+current_tagsx+'"><i class="fa fa-times"></i></a> '+this.vendor+'</span><br /><ul class="mmy-sidebar-'+vendor_id+'" data-slug="'+vendor_name+'"></ul></li>');
	}else{
	$('.mmy_make_model_sidebar').append('<li><strong><a href="'+current_collection+'/'+convertToSlug(vendor_name)+'+'+current_tags+'">'+this.vendor+'</a></strong><ul class="mmy-sidebar-'+vendor_id+'" data-slug="'+vendor_name+'"></ul></li>');
	}
	// start models =====================
	$.getJSON(appDomain + '/vendor_models/json_vendor_models.json?vendor_id='+this.id+'&shop='+shopDomain, function(datax){
	if(datax != ''){
	$.each(datax, function(){

	var make_name = $('.mmy-sidebar-'+this.vendor_id).data('slug');
	var model_name = convertToSlug(this.name);
	var make_model = make_name +'-'+ model_name;

	var slug = $('.mmy-sidebar-'+this.vendor_id).data('slug')+'-'+convertToSlug(this.name);
	console.log(current_tags);
	if(current_tags.toLowerCase().indexOf(model_name) >= 0){
	//var current_tagsx = current_tags.replace(model_name, ""); // clean up
	var current_tagsx = current_tags.replace(make_name+'-'+model_name+'+', '');
	//var current_tagsx = current_tagsx.replace(make_name, make_name);
	// clean up
	$('.mmy-sidebar-'+this.vendor_id).append('<li><span class="tag_selected"><a href="'+current_collection+'/'+current_tagsx+'"><i class="fa fa-times"></i></a> '+this.name+'</span></li>');
	}else{
	$('.mmy-sidebar-'+this.vendor_id).append('<li><a href="'+current_collection+'/'+make_model+'+'+current_tags+'">'+this.name+'</a></li>');
	}

	});
	}
	});
	// end models =======================
	});
	}
	});


	});
	</script>

view raw make-model-year-sidebar hosted with ❤ by GitHub

you include these make-model-year-horizantal and make-model-year-sidebar in your collection template just as you did with the original make model year
make-model-year-related-products goes in your product template
These snippits will also need a secondary scss file that must be included in the main template
In your themes under edit html there is a section called asset
Click on Add a New Asset and name it make-model-year

	/*
	.fancybox-overlay {
	background: #fff !important;
	}
	.fancybox-opened .fancybox-skin {
	background: url({{ 'white_carbon.png' \| asset_url \| img_path }});
	box-shadow: none !important;
	}
	*/

	.parallaxParent {
	height: 100vh;
	overflow: hidden;
	}
	.parallaxParent > * {
	height: 200%;
	position: relative;
	top: -100%;
	}

	h4, .h4, h4.title a, h6.title {
	border-top: 0px !Important;
	border-bottom: 0px !Important;
	}

	/* QUICK LIST ============*/
	.split-list ul:first-child{
	padding-left: 0px;
	}
	.split-list ul{
	float: left;
	padding-left: 20px;
	box-sizing: border-box;
	}
	.split-list li{
	padding-right: 20px;
	box-sizing: border-box;
	}

	.cart_page_image img {
	border: 1px solid #ccc;
	}

	.full-img {
	width: 100%;
	margin-bottom: -9px;
	}

	/* PRODUCT */

	.related-wrapper {
	background: url({{ 'white_carbon.png' \| asset_url \| img_path }});
	}

	/* COLLECTION */
	.sold_out {
	clear: both;
	font-size: 16px;
	font-weight: normal;
	text-align: center !important;
	float: none;
	width: 100% !important;
	box-sizing: border-box;
	padding: 20px;

	margin-bottom: 20px;
	}
	.toggle-div {
	display: none;
	}
	.go_toggle {
	text-transform: uppercase;
	font-size: 14px;
	text-decoration: none;
	padding: 3px;
	}

	.tag_selected {
	background: #004990;
	color: #fff;
	padding: 3px 6px 3px 6px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	}

	.tag_selected a, .tag_selected a:hover, .tag_selected a:visited{
	display: inline;
	color: #fff;
	border: 0px;
	}

	.breadcrumb {
	color: #c7e2ff;
	text-transform: uppercase !important;
	}

	.collection-product {
	box-sizing: border-box;
	border: 1px solid #ccc;
	background: #fff;
	padding: 10px;
	}

	.collection-image {
	position: relative;
	margin-bottom: 10px;
	}
	.collection-title {
	position: absolute;
	z-index: 100;
	top: 40%;
	text-align: center;
	font-weight: 900;
	font-size: 32px;
	width: 100%;
	color: #fff;
	text-transform: uppercase;
	}

	.collection-title span {
	font-size: 12px;
	}
	.thumbnail .info {
	text-align: center !important;
	border-top: 1px solid #ccc;
	padding: 20px 0;
	}

	.thumbnail .info .title {
	box-sizing: border-box;
	padding: 0 20%;
	text-transform: uppercase;
	}

	.thumbnail .info .price {
	padding-top: 10px;
	margin-top: 10px;
	font-size: 28px;
	}

	.thumbnail .quick_shop {
	display: none;
	padding: 5px 0;
	background-color: #004990;
	position: absolute;
	width: 100px;
	font-size: 12px;
	right: 0;
	text-align: center;
	color: #fff;
	opacity: 1;
	box-sizing: border-box;
	border-radius: 0;
	border-left: 7px solid #fff;
	border-bottom: 7px solid #fff;
	top: 0px;
	}

	.div.container div.breadcrumb span {
	color: #ff0000;
	}

	/* ABOUT */
	.about-intro {
	margin-top: 73px;
	position: relative;
	margin-bottom: -10px;
	}

	.img-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,70,144,.7);
	margin-top: -5px;
	}

	.about-title {
	color: #fff;
	font-size: 52px;
	line-height: 52px;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
	position: absolute;
	top: 40%;
	left: 0;
	width: 100%;
	}

	.about-title-img {
	max-width: 100%;
	width: 100%;
	}

	.about-intro-strong {
	font-size: 18px;
	font-weight: 900;
	padding-bottom: 100px;
	color: #fff;
	}

	.align-text-left {
	text-align: left !important;
	}

	.fiber-bg {
	background: url({{ 'real_cf.png' \| asset_url \| img_path }});
	}

	.about-001 {
	background: #fff;
	padding: 50px 0;
	border-top: 0px solid #ccc;
	}

	.about-001 h1 {
	line-height: 100%;
	padding-top: 0;
	position: relative;
	top: -4px;
	}

	.about-001-left {
	float: left;
	width: 50%;
	padding: 30px;
	box-sizing: border-box;
	font-size: 18px;
	}
	.about-001-right {
	float: left;
	width: 50%;
	}

	.about-001-right-x {
	float: left;
	width: 50%;
	padding: 0 30px 30px;
	box-sizing: border-box;
	font-size: 18px;
	}
	.about-001-left-x {
	float: left;
	width: 50%;
	}

	.about-001-img {

	}

	.header {

	}

	.left-nav {
	padding-top: 5px;
	}

	.nav-divider {
	color: #c7e2ff;

	&:last-child {
	color: #fff;
	}
	}
	.nav-divider:last-child {
	color: #fff;
	}

	.main {
	padding-top: 100px !important;
	}

	.float-right {
	float: right;
	}


	.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
	.footer-menu li {
	float: left !important;
	margin-right: 20px;
	}
	.footer-menu li:last-child {
	margin-right: 0px;
	}
	.footer-menu li a {
	color: #fff !important;
	text-decoration: none;
	text-transform: uppercase;

	}


	/* BLOG */
	.blog-slider-wrapper {
	border: 1px solid #ccc;
	box-sizing: border-box;
	padding: 5px;
	}
	.blog-slider-divider {
	min-height: 5px;
	background: #000;
	max-width: 50px;
	margin: 20px auto 20px auto;
	}
	.blog-slider-img {
	max-height: 285px;
	overflow: hidden;
	}
	.blog-slider-img img{
	width: 100%;
	}

	.blog-slider-info {
	text-align: center;
	box-sizing: border-box;
	padding: 0 50px;
	}

	.blog-list-left {
	width: 25%; float: left;
	}

	.blog-list-left img {
	border: 1px solid #ccc;
	padding: 2px;
	box-sizing: border-box;
	}

	.blog-list-right {
	width: 75%; float: left; padding-left: 20px; box-sizing: border-box;
	}
	.blog_list li a{
	text-transform: uppercase;
	}

	/* HOME MMY */
	.home-mmy {
	padding: 20px 50px 60px;
	box-sizing: border-box;
	background: url({{ 'real_cf.png' \| asset_url \| img_path }});
	}
	.home-mmy-title {
	text-align: center;
	padding: 40px 0 40px 0;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
	font-size: 32px;
	line-height: 32px;
	}

	.mmy-horizontal {
	padding: 0;
	margin: 0;
	list-style: none;
	}

	.mmy-horizontal li {
	float: left;
	width: 25%;
	padding: 10px;
	box-sizing: border-box;
	}


	.go-mmy-wrapper {
	text-align: center;
	padding: 20px 0;
	}

	.go-mmy {
	padding: 10px 40px;
	background: #fff;
	border: 2px solid #fff;
	color: #000;
	font-weight: 900;
	font-size: 18px;
	}

	.go-mmy:hover {
	background: none;
	color: #fff;
	}

	.home-blog-left {
	width: 25%;
	float: left;
	margin-left: 0px;
	}

	.home-blog-right {
	width: 75%; float: left; margin-left: 0px;
	}


	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {

	.container .column.thumbnail, .container .columns.thumbnail {
	min-width: 100%;
	}

	.container div.thumbnail.odd {
	margin-left: 0px;
	}

	.main {
	padding-top: 20px !important;
	}

	.about-title {
	font-size: 22px;
	line-height: 22px;
	}

	.about-intro-strong {
	text-align: center;
	}

	.about-001-left, .about-001-right, .about-001-left-x, .about-001-right-x {
	min-width: 100%;
	padding: 0 10px 0 10px;
	}
	.about-001-left img, .about-001-right img, .about-001-left-x img, .about-001-right-x img {
	width: 95%;
	}
	.about-001-right {
	display: none;
	}

	.mmy-horizontal li {
	float: none;
	width: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}

	#parallax1 {
	display: none;
	}

	.home-blog-left {
	width: 100%;
	float: none;
	margin-left: 0px;
	}

	.thumbnail .info .price {
	padding-top: 0px;
	margin-top: 0px;
	font-size: 18px;
	}

	.thumbnail .info .title {
	box-sizing: border-box;
	padding: 0%;
	text-transform: uppercase;
	font-size: 12px;
	}

	.home-blog-right {
	width: 100%; float: none; margin-left: 0px;
	}

	.footer-menu {
	text-align: center;
	}
	.footer-menu li {
	float: none !Important;
	display: inline;
	}
	.credits {
	text-align: center;
	}
	.footer-menu.float-right {
	float: none !Important;
	}
	}

view raw make-model-year-scss hosted with ❤ by GitHub

then go to your theme.liquid file under layout and add this {{ 'make-model-year.scss.css' | asset_url | stylesheet_tag }} in the head
Your navigation options should now be available

Secondary Make Model Year Setup

Login

Reset your password

Create Account