Plugin jQuery para criar urls amigáveis (friendly url)

2011-06-28 Wender Lima Javascript

Estou customizando uma loja virtual pra minha esposa(www.modababy.com.br) e queria que todas as publicações dela tivessem urls amigáveis pra melhorar o SEO da loja, só que como se já não bastasse ser um saco ficar cadastrando produtos, ela ainda tem que colocar manualmente essas urls, e o sistema não faz nem questão de saber se essa url já foi usada… =/
Daí eu fiz um plugin jQuery muito simples que pega o valor de um campo e coloca em outro campo já convertido, ainda não é a melhor coisa do mundo, mas vocês ainda podem ajudar a melhorar, por isso vou disponibilizar aqui pra vocês também

Este é o plugin:

(function($){
	$.fn.friendly = function(to){
		//Divide o valor atual em array
		var curr = $(to).val().split('-');
		/*
		Verifico se o primeiro item é vazio, se sim,
		eu coloco o timestamp, se não, eu verifico se
		o último valor não é um número, se não for, eu
		mantenho sem timestamp, se for um número, eu mantenho
		o número, assim evita-se 404 pelo Robô do google e afins
		*/
		var ts = curr[0]==''?'-'+Math.round(((new Date()).getTime()-Date.UTC(1970,0,1))/1000):(isNaN(curr[curr.length-1])?'':'-'+curr[curr.length-1]);
		/*
		A conversão ocorre basicamente aqui, onde no final eu
		concateno com o timestamp
		*/
		$(to).val($(this).val().replace(/\s/g, '-').replace(/[^\w/-]/g, '').toLowerCase()+ts);
	};
})(jQuery);

Repare que coloquei uma variável “ts” que gera um timestamp, fiz isso para o meu caso onde o sistema não valida se a url amigável já existe, colocando um timestamp no final ele nunca vai se repetir e não faz diferença para o SEO

Como funciona?
Funciona assim… no primeiro seletor, você coloca o elemento de onde você quer o texto, e dentro do friendly, você coloca o seletor de onde você quer que o texo apareça
Ex:

$('#tab_general input[name^=product_description][name*=name]').friendly('#tab_data input[name=keyword]');

Pra que ele atualize pra cada palavra digitada, você precisa associar a um evento no elemento, no meu caso eu fiz isso aqui:

$('#tab_general input[name^=product_description][name*=name]').bind('keyup', function(){
        $(this).friendly('#tab_data input[name=keyword]');
    })

No keyup do campo, eu atualizo o segundo campo

Espero que seja útil

friendly-url, jQuery, plugin, seo,