General
In this blog we will learn how to embed an interactive jBart search box in your Drupal Site based on the content of your site.
Install The jBart Drupal Module
Install the jBart module in drupal from jbart module at drupal.org. Unzip from the dropbox link to sites/all/modules
Define a Drupal Xml Feed for jBart
- Goto Administer -> Site Building -> Views. Click 'Add'. View Name - 'SearchBox'. Next.
- Choose 'View Display' As 'Feed'. Click 'Add Display'
- Set View Style to 'jBart - Xml Feed'. Click 'Update'
- Set View 'Items to display' to 1000. Click 'Update'
- Add the fields 'Node: Title' and 'Node: Path'
- Add more fields you want to show in the search box. (E.g., 'Content: CoverImage', and other relevant CCK or E-commerce fields)
- Set Path to 'SearchBox.xml'. Update
- Save the view and click preview
- Copy the feed url. (E.g. http://localhost/drupal/?q=SearchBox.xml) to your clipboard
- Goto jBart Studio to build the search box using the sample data
Define The jBart Search Box
- At jBart Studio choose 'New searchbox widget'
- Set the widget name to 'SearchBox'
- Paste the url into the 'Feed' field
- If your site is not available at the Internet (localhost) copy the xml of the feed into the 'Xml' field. To get the xml feed goto the feed url, use the browser's 'view source' option (Ctrl-U) and Copy the content to the clipboard
- Click 'Embed in yoursite'
- Copy the embed html content to your clipboard
- Click 'OK' to save the widget
Embed a Search Widget as a Block
- In your Drupal Site goto 'Administer -> Blocks -> Add Block'
- Name the block 'jBartSearch' and 'Search' as a title, paste the html form 'Embed Widget' into its body. Set Input format to 'Full HTML'
- In the 'Blocks' page drag 'jBartSearch' to the top and set its region to 'Left SideBar'
- Save Blocks
Customize The jBart Widget - Fix Image and Text
- In jBart Studio and click 'Easy Customize'
- Pick the 'Search' textbox and click. The 'Edit Field Search' dialog will open
- If you have an image field, set 'Item Image' to '%@my-image-att-name%'
- Set 'Item Extra Text' to the other fields you have (E.g. %@price% - %@copies% copies)
- Set 'Item Link' to '%@path%'
- Un-check 'Open in a new tab'
- Click 'OK' and 'Save' on the jBart Studio panel
- Refresh your drupal page and check again the search box
Customize The jBart Widget - Change Css
- In jBart Studio and click 'Customize'
- In the application tree at the left pane, pick 'Application -> Pages -> searchbox'
- In the page structure choose: searchbox -> search
- In the 'Add Feature' field click 'css', choose it and click Enter
- Inside the 'css' section set 'OnElement' to 'Content' and set the inline textbox to '-webkit-box-shadow: 0 0 5px 5px#888;-moz-box-shadow: 0 0 5px 5px #888;'
- Click refresh to see how it affects the preview
- Click 'Save' on the jBart Studio panel
- Refresh your drupal page
