babyewok Posted June 14, 2011 Share Posted June 14, 2011 I have put the quick search block in the right hand column and have had to manually add jquery.autocomplete.js and jquery.autocomplete.css to the header.tpl as when I put the block in the right column only, it doesn't automatically add these to the header.Anyway, although not ideal, that is not my real issue: I would like to know how to make the ajax autocomplete results box align to the right of the search box rather than the left as when the quick search block is in the rigtht column, the autocomplete results disappear off the page. Ideally, I would like this to be conditional on the search blcok being in the right column in case my client decides to move it to the left column again.Any ideas? Link to comment Share on other sites More sharing options...
babyewok Posted June 28, 2011 Author Share Posted June 28, 2011 Does anyone have any idea why jquery.autocomplete.js and jquery.autocomplete.css are not added to the header when the quick search block is only in the right column? If it is in only the left column, then these are added to the header as they should be. Link to comment Share on other sites More sharing options...
babyewok Posted August 25, 2011 Author Share Posted August 25, 2011 I have a feeling it is due to: Tools::addCSS in the php file not working because while the top and left column hooks are within header.tpl where the <head> tage resides, the right column hook is in the footer. Any ideas? Link to comment Share on other sites More sharing options...
wbomar Posted January 1, 2012 Share Posted January 1, 2012 I've found a way, but you would edit a core js file. /js/jquery/jquery.autocomplete.js near line 700: var offset = $(input).offset(); element.css({ width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width(), top: offset.top + input.offsetHeight, // EDIT: Align instant_search to the right // left: offset.left left: offset.left + $(input).outerWidth() - (typeof options.width == "string" || options.width > 0 ? options.width : $(input).width()) }).show(); I've made a new 'left" assignment that is equal to the left offset of the query input field (original method) PLUS the outerWidth() of the query input field MINUS the width of the .ac_results box (calculation acquired from the 'width' assignment). If there is a way to do this that does not require me editting a core file, please share in a reply to this post. Link to comment Share on other sites More sharing options...
Christian Lescuyer Posted January 25, 2012 Share Posted January 25, 2012 I've looked for a way that doesn't require editing a core file. It's possible, but it's so much work I don't think its worth it. Recent versions of jQuery include autocomplete (the obsolete version in Prestashop uses a plugin). This autocomplete includes a nice position option which does exactly what we need: position: { my: "right top", at: "right bottom" }, For this to work, you have to: Load a recent version of jQuery in place of 1.4.4 Rewrite the blocksearch template Style the search div Fair enough, but there's one catch. To cleanly load jQuery 1.7.1 in place of 1.4.4, you have to override the FrontController,like this: <?php class FrontController extends FrontControllerCore { public function setMedia() { global $js_files; parent::setMedia(); $index = array_search(_PS_JS_DIR_ . 'jquery/jquery-1.4.4.min.js', $js_files); if ($index !== false) { array_splice($js_files, $index, 1); } $index = array_search(_PS_JS_DIR_ . 'jquery/jquery-ui-1.8.10.custom.min.js', $js_files); if ($index !== false) { array_splice($js_files, $index, 1); } } } The catch is that, though you don't modify a core file, you will have to update your override each time Prestashop update their jQuery version. Added to the not inconsiderable work of writing and maintaining the .autocomplete part in blocksearch.tpl (example below), I don't think it's worth it. $("#search_query_block") .autocomplete({ source: function(request, response) { $.ajax({ url: "/search.php?ajaxSearch=1&id_lang={/literal}{$cookie->id_lang}{literal}", dataType: "json", data: { q: request.term }, success: function(data) { //map the data into a response that will be understood by the autocomplete widget response($.map(data, function(item) { return { label: item.cname + ' * <b>' + item.pname + '</b>', value: item.product_link } })); } }); }, select: function(event, ui) { window.location = ui.item.value; return false; }, minLength: 3, position: { my: "right top", at: "right bottom" }, html: true }) So I'll be using your hack. Thanks wbomar. Xtian Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now