Developer forum

Forum » Templates » InstantSearch Inline Styling

InstantSearch Inline Styling

E-mail notifications
Peter Greve Assentorp
Reply
Posted on 12/07/2011 15:01:09
Hi Developers!

I'm currently trying to edit the styling for the eCom module 'Varekatalog' (Instant Search).

The problem is that the suggestions which instant search outputs, are absolute positioned with inline styling in the instantSearch.min.js file.

The file is located in the folder /Admin/Content/JsLib/dw/InstantSearch.min.js which i don't have access to. I have tried to download the file and place it in another folder, but that didn't work either.

So does anybody have any other suggestions on how to solve this?

Thanks!
Peter.

Replies

 
Pavel Volgarev
Posted on 12/07/2011 15:23:55
Reply
Hi Peter,

What are you trying to achieve? Do you have a screenshot where we can see the problem?

-- Pavel 
 
Peter Greve Assentorp
Posted on 12/07/2011 15:30:46
Reply


Screenshot of the problem.
 
Pavel Volgarev
Posted on 12/07/2011 16:45:26
Reply
Hi Peter,

The reason why the styles are inline is because the system calculates the offset of the text box (relative to the document) and adjusts the position of the suggestion box so it can appear right below it.

Of course this won't work in all cases (with a complex layout) so there is a way for you to override these styles:

  1. Find the template where you have a JavaScript block initializing the Instant Search functionality (it's either one of the "advanced" search templates or the free text search filter template).
  2. Find the call to "setEnableSuggestions" method and modify it by subscribing to "complete" event:
Dynamicweb.Frontend.InstantSearch.setEnableSuggestions('txFreeTextQuery', true, {
    boxID: 'divSuggestions',               // An ID of the suggestions box template
    onComplete: function(sender, args) {   // A function that is called after suggestions are retrieved.
        // Overriding the position of the suggestion box
        document.getElementById('divSuggestions').style.left = '100px';
    }
});

Hope this helps.

-- Pavel 
 
Peter Greve Assentorp
Posted on 13/07/2011 09:22:06
Reply
Exactly what I needed Pavel.

Thank you so much, have a great day!

/Peter.

 

You must be logged in to post in the forum