Octane

Back-End, Front-End
Client: Octane
Website: octane.fi
Close X

Building this spare parts selection tool was a very interesting project. I got all the needed data in a CSV format from the supplier and imported it into the database MYSQL to make it available for web use. Some Javascript in the Front-end, mostly for interactions and Ajax calls, but all the work is done in the back-end with PHP getting the data from the database. The user will only see the products compatible with the chosen motorbike upon selection and the products’s page shows the compatibility for more clarity. Also the stock quantity is kept up-to-date with a cronjob running nightly.

octane1

octane2

octane3

Below a small snippet of the front-end, the heavy work is obviously in the back-end. Ajax calls to PHP pages communicating with a MySQL database.


/**
	* Octane.fi
	* Author: Federico Di Rosa
	* Website: federicodirosa.com
	*/

jQuery(document).ready(function($) {
	OCTANE.init();
});

var OCTANE = {
	init: function(){
		this.showHideSelectors();
		this.sparePartsSelectors();
	},
	showHideSelectors: function() {
		$('#varaosat .main-category').on('click', function( event ){
			event.preventDefault();
			if ($(this).hasClass('model_selected') || $(this).hasClass('coming-soon'))
				return;
			$(this).addClass('open');
			$(this).next('form').find('.dropdowns-wrap').show();
			if ($(this).hasClass('open'))
				return;
			$(this).next('form').find('.see-all.submit').hide();
		});
	},
	sparePartsSelectors: function(){
		var brand_selector = '.spare-parts-brand';
		var model_selector = '.spare-parts-model';
		var year_selector = '.spare-parts-year';
		var subcategories = 'subcategories';

		if (!$(brand_selector).length || !$(model_selector).length || !$(year_selector).length)
			return;

		$('.spare-parts-selection').find(model_selector).next().fadeTo(0,0.5);
		$('.spare-parts-selection').find(year_selector).next().fadeTo(0,0.5);

		$(brand_selector).on('change', function(){
			if ($(this).val()) {
				OCTANE.ajaxCall( { brand: $(this).val(), subcategories: $(this).parents('.spare-parts-selection').first().find('input[name="'+subcategories+'"]').val() }, 'load-models.php', $(this).parents('.spare-parts-selection').first().find(model_selector) );
				$(this).parents('.spare-parts-selection').first().find(model_selector).html('');
				$(this).parents('.spare-parts-selection').first().find(year_selector).html('');
				$(this).parents('.spare-parts-selection').first().find(year_selector).trigger("chosen:updated");
				$(this).parents('.spare-parts-selection').first().find('.see-all').hide();
				$(this).parents('.spare-parts-selection').first().find(year_selector).next().fadeTo(0,0.5);
				$(this).parents('.spare-parts-selection').first().find(model_selector).next().fadeTo(0,1);
			}
		});

		$(model_selector).on('change', function(){
			if ($(this).val()) {
				OCTANE.ajaxCall( { brand: $(this).parents('.spare-parts-selection').first().find(brand_selector).val(), model: $(this).val(), subcategories: $(this).parents('.spare-parts-selection').first().find('input[name="'+subcategories+'"]').val() }, 'load-years.php', $(this).parents('.spare-parts-selection').first().find(year_selector) );
				$(this).parents('.spare-parts-selection').first().find('.see-all').hide();
				$(this).parents('.spare-parts-selection').first().find(year_selector).next().fadeTo(0,1);
			}
		});

		$(year_selector).on('change', function(){
			if ($(this).val())
				$(this).parents('.spare-parts-selection').first().find('.see-all').show();
		});
	},
	ajaxCall: function( data_object, url, target ){
		var ajax = $.ajax({
			type: 'POST',
			cache: false,
			url: url,
			data: data_object
		});

		ajax.done(function( data ) {
			target.html( data );
			target.trigger("chosen:updated");
		});

		ajax.fail(function( jqXHR, textStatus ) {
			alert( "Request failed: " + textStatus );
		});
	}
};