Dica: Extensão Vehicle Fits

 

Olá Pessoal!
Pesquisando sobre uma dúvida postada no Fórum da Comunidade Magento encontrei um módulo muito interessante e resolvi compartilhar. Vehicles Fits é uma extensão free que adiciona recursos a loja, criando atributos adicionais que serão usados posteriormente em um filtro personalizado. Ela foi feita com intuito de atuar no ramo automotivo, mas pode ser customizada da maneira que você quiser. Nessa postagem irei ensinar como instalar essa extensão e configurar.


1º Passo - Download e instalação

- Baixe a extensão no seguinte link:
http://vehiclefits.com/download

Obs: Aconselho baixar a versão mais recente, pois vários bugs são corrigidos.

- Descompacte o módulo e instale manualmente na sua loja;

- Renomeie o arquivo config.default.ini (app/code/local/Elite/Vaf) para config.ini;

- Abra o arquivo Mage.php (app)  e cole o seguinte código (logo no início do arquivo após <?php tag)

 require_once( 'code/local/Elite/Vaf/bootstrap.php' );

Obs: Isto deve ser repetido sempre que você atualizar Magento.

- Se o arquivo vf-install.php não estiver na raiz do seu Magento, copie ele de app/code/local/Elite e carregue-o no seu navegador:

Nessa parte você define que tabelas serão criadas no seu banco de dados e posteriormente serão cadastradas e exibidas no filtro. Você poderá criar quantas opções quiser e poderá alterá-las posteriormente. Após definir os níveis necessários, clique em Go, copie o código gerado, cole e execute na aba sql do seu phpMyAdmin (no banco de dados utilizado pela sua loja).

2º Passo - Correção de urls

Para que a extensão funcione perfeitamente é necessário fazer algumas alterações.

- No arquivo vaf.phtml (app/design/adminhtml/default/default/template/vf/catalog/product/tab), substitua o seguinte trecho:

<!-- start VAF -->
<script src="/skin/adminhtml/default/default/jquery-1.7.1.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
 jQuery.noConflict();
</script>
<script src="<?=Mage::getBaseUrl()?>vaf/ajax/js?unavailableSelections=<?=$this->unavailableSelections()?>" type="text/javascript" language="javascript"></script>
<script src="/skin/adminhtml/default/default/jquery.metadata.pack.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="/skin/adminhtml/default/default/multiTree.css" />
<!-- end VAF -->

Por esse:

<!-- start VAF -->
<script src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>skin/adminhtml/default/default/jquery-1.7.1.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
 jQuery.noConflict();
</script>
<script src="<?=Mage::getBaseUrl()?>vaf/ajax/js?unavailableSelections=<?=$this->unavailableSelections()?>" type="text/javascript" language="javascript"></script>
<script src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>skin/adminhtml/default/default/jquery.metadata.pack.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>skin/adminhtml/default/default/multiTree.css" />
<!-- end VAF -->

- No arquivo search.phtml (app/design/frontend/default/default/template/vf/vaf) substitua o seguinte código:

<!-- start VAF -->
<script src="/skin/adminhtml/default/default/jquery-1.7.1.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
 jQuery.noConflict();
</script>
<script src="/skin/adminhtml/default/default/jquery.metadata.pack.js" type="text/javascript" language="javascript"></script>
<script src="/skin/adminhtml/default/default/jquery.simplemodal-1.3.min.js" type="text/javascript" language="javascript"></script>
<script src="<?=Mage::getBaseUrl( Mage_Core_Model_Store::URL_TYPE_LINK, isset($_SERVER['HTTPS']) )?>vaf/ajax/js?front=1&loadingStrategy=<?=$this->loadingStrategy()?>&unavailableSelections=<?=$this->unavailableSelections()?>" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="/vafStyle.css.php" media="all" />
<!-- end VAF -->

Por esse:

<!-- start VAF -->
<script src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>skin/adminhtml/default/default/jquery-1.7.1.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" language="javascript">
 jQuery.noConflict();
</script>
<script src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>skin/adminhtml/default/default/jquery.metadata.pack.js" type="text/javascript" language="javascript"></script>
<script src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>skin/adminhtml/default/default/jquery.simplemodal-1.3.min.js" type="text/javascript" language="javascript"></script>
<script src="<?=Mage::getBaseUrl( Mage_Core_Model_Store::URL_TYPE_LINK, isset($_SERVER['HTTPS']) )?>vaf/ajax/js?front=1&loadingStrategy=<?=$this->loadingStrategy()?>&unavailableSelections=<?=$this->unavailableSelections()?>" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>vafStyle.css.php" media="all" />
<!-- end VAF -->


3º Passo - Cadastrar as opções no painel administrativo

Após instalar e configurar corretamente, você poderá notar que um menu será criado no painel administrativo.

Para cadastrar as opções vá em Vehicles -> Vehicles List -> Administrar e adicione quantas combinações desejar.

4º Passo - Associar as opções aos produtos

Para associar as opções criadas aos produtos, é necessário ir em Catálogo -> Gerenciar Produtos e editar (ou criar) o produto em questão. Clicar na guia Vehicles Fits

Selecionar o conjunto de opções desejadas e clicar em Add+

Depois é só selecionar a opção no campo abaixo e clicar em Salvar.

5º Passo - Layout e traduções

Existem diversas maneiras de adaptar o layout, então eu tentei manter o padrão do tema default, deixando-o assim:

- Tradução

Termo loading: pode ser traduzido direto no arquivo config.ini (app/code/local/Elite/Vaf), basta procurar o seguinte termo:

loadingText = 'loading'

- No arquivo search.phtml (app/design/frontend/default/default/template/vf/vaf) substitua o seguinte trecho (no começo do arquivo):

<div class="box vaf vaf-search">
    <div class="head"><h4><?=$this->getHeaderText()?></h4></div>

Por esse:

<div class="block block-search">
    <div class="block-title">
        <strong><span><?php echo $this->__('Buscar Veículos') ?></span></strong>
    </div>

Substitua todos os trechos que estão assim (termo clear):

<?=$this->getClearText()?>

Por esse:

<?php echo $this->__('Limpar') ?>

Procure e substitua as seguintes palavras para os termos desejados:

My Vehicle

Change

- Classes no css:

No arquivo styles.css (skin/frontend/default/SeuTema/css), acrescente as seguintes classes:

.block-search .content { padding:5px 10px; }
.block-search label { font-weight:bold; color:#666; display:block; margin-top:5px;}
.block-search select { width:100%;}
.block-search input { margin-top:10px;}


Não sei se consegui explicar de uma maneira compreensível por todos, mas acho que é isso.
Sei que toda a configuração é meio complicada, mas essa extensão é uma boa!
Qualquer dúvida quanto a extensão, deixe um comentário!
=)

Para mais instruções sobre as configurações: http://vehiclefits.com/vf-documentation/index.htm