[TUTORIAL] Gerar Url Amigável Automaticamente

[TUTORIAL] Gerar Url Amigável Automaticamente#11823

Por David CHC - 15 Nov 2011, 12:17

- 15 Nov 2011, 12:17 #11823

Essa minha primeira contribuição.

Umas das coisas que sentia falta no opencart é criação de slug (url amigável) automático nos produtos, como o wordpress faz nos títulos posts. Por padrão, você tem que digitar manualmente. Claro que em certos momentos é até favorável, mas se podermos agilizar isso, será melhor. A versão que fiz foi a 1.5.1.3 . Então vamos lá:

Primeiro você precisa baixar um plugin do jQuery chamado stringToSlug. O Leo Caseiro adaptou esse plugin para tratar palavras com acentuação.

Depois de baixar, você vai descompactá-la, e colocar em :

Código: Selecionar todos

admin/view/javascript/jquery/

Agora vamos fazer umas modificações. A primeira é atribuir um id nos campos que irão recuperar o valor e atribuir o slug. Você modificará o arquivo product_form.tpl.

Código: Selecionar todos

admin/view/template/catalog/product_form.tpl

Procure primeiro por product_description (para facilitar utilize o localizador de seu editor ou IDE), encontrando, atribua o id product_description:

Código: Selecionar todos

<input type="text" id="product_description" name="product_description[<?php echo $language['language_id']; ?>][name]" size="100" value="<?php echo isset($product_description[$language['language_id']]) ? $product_description[$language['language_id']]['name'] : ''; ?>" />

Agora procure por keyword, e você fará o mesmo procedimento, atribuindo um id a ele (eu atribui uma largura para melhor visualizar, mas é opcional):

Código: Selecionar todos

<input type="text" id="keyword" style="width:80%" name="keyword" value="<?php echo $keyword; ?>" />

Agora vamos chamar o plugin e a configuração, você irá editar o arquivo header.tpl :

Código: Selecionar todos

admin/view/template/common/header.tpl

Adicione o plugin:

Código: Selecionar todos

<script type="text/javascript" src="view/javascript/jquery/jquery.stringToSlug.min.js"></script>

E depois da configuração (existe uma tag script aberta para confirmação de ações utilizando o jQuery, no caso irei adicionar nela, mas você pode fazer separadamente) :

Código: Selecionar todos

//verificamos de id produto existe
if($("#product_description").length > 0) {
		$("#product_description").stringToSlug({
			setEvents: 'blur',
			getPut: '#keyword',
			space: '-'
		});
}

Atribuindo script aberto, fica assim:

Código: Selecionar todos

<script type="text/javascript">
//-----------------------------------------
// Confirm Actions (delete, uninstall)
//-----------------------------------------
$(document).ready(function(){
	
    // Confirm Delete
    $('#form').submit(function(){
        if ($(this).attr('action').indexOf('delete',1) != -1) {
            if (!confirm ('<?php echo $text_confirm; ?>')) {
                return false;
            }
        }
    });
    	
    // Confirm Uninstall
    $('a').click(function(){
        if ($(this).attr('href') != null && $(this).attr('href').indexOf('uninstall',1) != -1) {
            if (!confirm ('<?php echo $text_confirm; ?>')) {
                return false;
            }
        }
    });

 //modificação
	if($("#product_description").length > 0) {
		$("#product_description").stringToSlug({
			setEvents: 'blur',
			getPut: '#keyword',
			space: '-'
		});
	}
	
});
</script>

Pronto, dessa maneira ele irá gerar automaticamente o slug do produto para você. Isso pode ser expandido para o fabricante, departamento. O procedimento seria basicamente o mesmo. Espero tenha ajudado.