Personalizzazione barra ricerca

[rgd]

Buongiorno, gestisco questo sito da poco più di due settimane.

 

Mi è capitato di dover modificare questa barra di ricerca per volontà del titolare, ma non riesco in alcun modo a trovare un modo per apportare le modifiche volute.

In particolare ho bisogno di migliorare il pulsante di ricerca, ovvero di far comparire la barra di ricerca solo quando il cliente clicca sulla lente di ingrandimento. E' possibile? Grazie

Il sito è questo

 

http://www.giorgiaejohns.it

[ariom]

ci ero girato intorno un po anch'io per riuscire ad ottenere quello che cerchi, puoi farlo con qualche piccola modifica ed un po di js nel tema ...

 

vai a tuo_tema/modules/blocksearch/blocksearch_top.tpl

<!-- Block search module TOP -->
<div id="search_block_top" class="">
    <form id="searchbox" method="get" action="{$link->getPageLink('search', null, null, null, false, null, true)|escape:'html':'UTF-8'}" >
    <input type="hidden" name="controller" value="search" />
    <input type="hidden" name="orderby" value="position" />
    <input type="hidden" name="orderway" value="desc" />
        <div id="search_top_wrapper" class="hidden">
	    <i class="hider"><strong>X</strong></i>
	    <input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="{l s='Search' mod='blocksearch'}" value="{$search_query|escape:'htmlall':'UTF-8'|stripslashes}" />
	    <button type="submit" name="submit_search" class="btn btn-default button-search">
		<span>{l s='Search' mod='blocksearch'}</span>
	    </button>
	</div>
	<button id="search_trigger" class="btn btn-default button-search">
	<span>{l s='Search' mod='blocksearch'}</span>
    </form>
</div>
<!-- /Block search module TOP -->

quindi vai a tuo_tema/js/modules/blocksearch/blocksearch.js

subito sotto la riva

var instantSearchQueries = [];

aggiungi il codice qui sotto
 

$(document).ready(function()
{
	$('#search_trigger').on('click', function (e){
		e.preventDefault()
		    $('#search_top_wrapper').toggleClass('hidden');
			$('#search_trigger').addClass('hidden');
	});

	$('.hider').on('click', function(e){
		e.preventDefault()
		    $('#search_top_wrapper').addClass('hidden');
			$('#search_trigger').removeClass('hidden');
	});

per ultimo, vai in tuo_tema/css/modules/blocksearch/blocksearch.css, non devi far altro che aggiungere le nuove classi (e modificare alcune di quelle esistenti) adattandole al tuo tema

 

fammi sapere ...