[Addon] Twitter Typeahead Autocomplete Search for osC 2.3.4 (BS and nonBS)

[auzStar]

Support Thread for Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)

 

Report problems here.

 

Feedback and comments appreciated.

 

 

Download link:

http://addons.oscommerce.com/info/9351

 

 

cheers

Edited August 20, 2015 by auzStar

[♥John W]

Thanks for making this contribution.  It seems to install fine but in testing on my local machine it only comes up with "no matches".  Any ideas?

[♥John W]

It must be something else I've modified becaue I installed in on my stock BS and it works.  Again, thank you for making this.

[Guest]

Hi Dom

 

Great addon. Seems to work well.

 

Many thanks

 

Grandpa

[♥John W]

I figured out why mine wasn't working by looking at the autocomplete output directly and I think this may help other people.  If parse time or probably anything is enabled to output at the bottom it breaks the json encode string. 

[auzStar]

@@John W

@@grandpaj

 

Thanks for the feedback guys.

 

I've discovered there is a problem when there is no left or right columns (boxes). My original testing was done with columns on both sides.

What happens is that when a "product preview" is displayed all other content between header and footer disappers, but re-appears when you close the "product preview".

 

I found a solution and I'm just testing it now. Will post an update soon.

 

regards

Dominic

 

[♥John W]

Hi Dominic,

 

Mine works with no columns just fine.  However, if on a product page, it doesn't work at all.  Haven't explored why.

[auzStar]

Hi Dominic,

 

Mine works with no columns just fine.  However, if on a product page, it doesn't work at all.  Haven't explored why.

 

@@John W

 

Hi John,

 

Although you say it works fine with no columns, the "product preview" won't display/fit correctly when on a product info page where the Notifictaions and/or Social Bookmarks boxes appear. The "product preview" display should fit inside the content area and adjust accordingly between any boxes. I've fixed the problem and will be posting an update shortly.

 

When you say it won't work at all on a product page, you mean nothing appears when you type in the search bar? Is that correct?

[♥John W]

@@John W

 

When you say it won't work at all on a product page, you mean nothing appears when you type in the search bar? Is that correct?

Correct, it doesn't display at all.  I tried it on my stock BS site and see the same.

[auzStar]

@@John W

 

Correct, it doesn't display at all.  I tried it on my stock BS site and see the same.

 

Hi John,

 

I've tested in fairly recent BS Edge as well as older BS with a few add-ons. Just discovered thought that it doesn't work on the product page in Firefox v41. Works OK in IE11 and Google Chrome v44.

 

I'll see what the problem is in firefox. Which browser are you using? Can you see if you're getting any errors via the Developer Tools Console?

 

thanks

[auzStar]

@@John W

 

Have fixed the issue in firefox. I will post an update to the add-on shortly. Hopefully this fixes your issue as well John. This update will also correct the "product preview" display problem mention earlier.

 

cheers

[auzStar]

@@John W

@@grandpaj

 

Version 1.1 has now been added to the add-on to correct above issues

http://addons.oscommerce.com/info/9351

 

 

[Guest]

@@auzStar

 

Hi Dom works well in FF. GREAT.

 

many thanks

 

grandpa

[♥John W]

Hi Dom,

 

Yes, I am using FF and it does work perfectly now.  It's a nice contribution and your efforts are appreciated. 

[auzStar]

@@John W

@@grandpaj

 

 

Version 1.2 has been added to the add-on

http://addons.oscommerce.com/info/9351

 

NOTE:
only bs version has been upgraded to v1.2
no changes to nonbs version (still v1.1)

CHANGES IN v1.2 (bs only):
1. glyphicons changed to fontawesome icons in line with latest 234bs edge version.
2. Rectify an issue on mobile devices where suggestions menu closes unexpectedly when virtual keyboard is closed after typing.

5 files to replace if upgrading.
NO need to un-install/remove the module if upgrading.

If you only have version 1.0 of this addon installed there is no need to upgrade to v1.1 first.
You can upgrade to v1.2 from either v1.0 or v1.1

Bootstrap demo can be seen here:
http://www.auzcommerce.com.au/osc234bs_test/

 

cheers
 

[Guest]

@@auzStar

 

Thanks Dom

 

Cheers

 

Grandpa

[♥Moxamint]

I installed this add-on and it's working beautifully on my test site.  Thank you very much @@auzStar!

 

Because my product images are all very large (800 x 800 pixels), I've been using 'KissIT Image Thumbnailer' to create thumbnails.  Dominic helped me customize this 'Twitter Typeahead Autocomplete Search' so that it uses tep_image() instead of HTML method to re-size product images shown in drop-down of the search result.  The following are code changes to achieve it:

 

In "catalog\ext\typeahead\js\ht-twitter-typeahead.js.php", find this code:

return "<div style='padding: 0px 10px 0px 5px;'><table border='0' width='100%' cellspacing='0' cellpadding='0'><tr><td valign='center' align='center' width='10%' style='padding-right: 6px;'><img src='"+data.image+"' width='40' height='' /></td>"+

replace with:

return "<div style='padding: 0px 10px 0px 5px;'><table border='0' width='100%' cellspacing='0' cellpadding='0'><tr><td valign='center' align='center' width='10%' style='padding-right: 6px;'>"+data.image+"</td>"+

In "catalog\ext\modules\header_tags\twitter_typeahead\autocomplete.php", find this code:

if (tep_not_null($results['products_image'])) {
  $results_array['img'] = DIR_WS_IMAGES . $results['products_image'];
} else {
  $results_array['img'] = (MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_DISPLAY_NO_IMAGE_ICON == 'true' ? DIR_WS_IMAGES . 'no_img.png' : '');
}

replace with:

if (tep_not_null($results['products_image'])) {
  $results_array['img'] = tep_image(DIR_WS_IMAGES . $results['products_image'], NULL, '40', '');
} else {
  $results_array['img'] = (MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_DISPLAY_NO_IMAGE_ICON == 'true' ? tep_image(DIR_WS_IMAGES . 'no_img.png', NULL, '40', '') : '');
}

Now the search result of 'Twitter Typeahead Autocomplete Search' will use thumbs created by 'KissIT Image Thumbnailer' instead of using the original product images.

 

For those who are interested in this lovely add-on, please PM me if you want to see it in action on my test site.

 

Cheers, Eddy

Edited October 26, 2015 by Moxamint

[♥raiwa]

Hello @@auzStar,

I just tried this great module and found an incompatibility with PayPal login. This in a standard store affects only the login page, however I'm using your modal login module and it affects all pages therefore.

I had to change the following in:
includes/modules/content/login/templates/paypal_login.php:
find:

<script type="text/javascript" src="https://www.paypalobjects.com/js/external/api.js"></script>
<script type="text/javascript">
paypal.use( ["login"], function(login) {
  login.render ({

<?php
  if ( OSCOM_APP_PAYPAL_LOGIN_STATUS == '0' ) {
    echo '    "authend": "sandbox",';
  }

  if ( OSCOM_APP_PAYPAL_LOGIN_THEME == 'Neutral' ) {
    echo '    "theme": "neutral",';
  }
?>

    "locale": "<?php echo $cm_paypal_login->_app->getDef('module_login_language_locale'); ?>",
    "appid": "<?php echo (OSCOM_APP_PAYPAL_LOGIN_STATUS == '1') ? OSCOM_APP_PAYPAL_LOGIN_LIVE_CLIENT_ID : OSCOM_APP_PAYPAL_LOGIN_SANDBOX_CLIENT_ID; ?>",
    "scopes": "<?php echo implode(' ', $use_scopes); ?>",
    "containerid": "PayPalLoginButton",
    "returnurl": "<?php echo str_replace('&', '&', tep_href_link(FILENAME_LOGIN, 'action=paypal_login', 'SSL', false)); ?>"
  });
});
</script>

Replace with:

$paypal_login_script = '<script type="text/javascript">
paypal.use( ["login"], function(login) {
  login.render ({
    "authend": "' . $authend . '",
    "theme": "' . $theme . '",
    "locale": "' . $cm_paypal_login->_app->getDef('module_login_language_locale') . '",
    "appid": "' . (OSCOM_APP_PAYPAL_LOGIN_STATUS == '1' ? OSCOM_APP_PAYPAL_LOGIN_LIVE_CLIENT_ID : OSCOM_APP_PAYPAL_LOGIN_SANDBOX_CLIENT_ID) . '",
    "scopes": "' . implode(' ', $use_scopes) . '",
    "containerid": "PayPalLoginButton",
    "returnurl": "' . str_replace('&', '&', tep_href_link(FILENAME_LOGIN, 'action=paypal_login', 'SSL', false)) . '"
  });
});
</script>' . "\n";

$oscTemplate->addBlock('<script type="text/javascript" src="https://www.paypalobjects.com/js/external/api.js"></script>' . "\n", 'header_scripts');
$oscTemplate->addBlock($paypal_login_script, 'header_scripts');

This moves the paypal script before the search box and fixed it for me.

The problem is the external script:

<script type="text/javascript" src="https://www.paypalobjects.com/js/external/api.js"></script>

Maybe you can find a fix in your add-on or add a troubleshooting info to the instructions.

 

regards

Rainer

[auzStar]

Hi @@raiwa,

 

Sorry for the late reply. Have been on a bit of a break :).

 

Thanks for the info. Yes, I think that was a similar workaround we had to use for the Login Modal which had a similar issue.

 

Anyway, I'll look into it further as soon as I get a chance.

 

cheers

 

[auzStar]

New version has been added to the add-on:

http://addons.oscommerce.com/info/9351

 

This upgrade is mainly required if you use PayPal Login in your store (for either bs or non-bs).

 

NOTE:

bs version has been updraged to v1.3

non-bs version has been updraged to v1.2

 

CHANGES:

1. Changes due to PayPal Login script causing incompatibility issues.

2. Now using osCommerce tep_image() function to load images in suggestion list instead of hard coded html <img> tag.

 

3 files to replace if upgrading.

No need to remove/re-install the module.

 

BS version needs to be upto v1.2 to use the upgrade to v1.3 bs files, otherwise upload all files from the full package (no need to remove/re-install module).

Non-bs can use the upgrade to v1.2 non-bs files from any non-bs version of this add-on (no need to remove/re-install module).

 

If you have made changes to any of your current add-on files then please use a file comparing tool to compare files.

 

If using the Login Modal in the bootstrap version and you have also enabled PayPal Login, then apply the change as reported by @@raiwa above, but adding to "footer_scripts" as there are no "header_scripts" (probably meant "header_tags", but I found it works better using "footer_scripts").

 

Bootstrap demo can be seen here:

http://www.auzcommer.../osc234bs_test/

 

cheers

Edited November 12, 2015 by auzStar

[Guest]

Found an XSS vulnerability in file ht-twitter-typeahead.js.php

            return '<div><div style="padding: 0 10px 0px 10px; color: red;"><?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_NOTFOUND; ?><button id="menuclose" type="button" class="close notfound" aria-label="Close" title="<?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_CLOSE; ?>">×</button></div><?php echo (basename($PHP_SELF) != 'advanced_search.php' ? '<div style="padding: 0px 10px 5px 20px; font-size: 12px;"><span class="fa fa-angle-right" style="color: #747EBB;"></span> <a href="' . tep_href_link('advanced_search.php', 'keywords=\'+search_input.val()+\'', 'NONSSL', true, false) . '">' . MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_LINK_ADVANCED_SEARCH . '</a></div>' : ''); ?></div>';

            return '<div style="border-bottom: 1px solid #E9E7E7;"><div style="padding: 0 10px 0px 10px;"><span style="font-size: 14px; font-weight: bold;"><?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_HEADING; ?></span><span style="font-size: 12px; color: #5D5F61;"> ('+(suggestion_length > limit_list ? '<?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_HEADING_SHOWING; ?> '+limit_list+' <?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_HEADING_OF; ?> '+suggestion_length : '<?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_HEADING_TOTAL; ?> '+suggestion_length)+')</span><button id="menuclose" type="button" class="close found" aria-label="Close" title="<?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_CLOSE; ?>">×</button></div>'+
                   '<div style="padding: 0px 10px 5px 20px; font-size: 12px;">'+(suggestion_length > limit_list ? '<span class="fa fa-angle-right" style="color: #747EBB;"></span> <?php echo '<a href="' . tep_href_link('advanced_search_result.php', 'keywords=\'+search_input.val()+\'', $request_type, false) . '">' . MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_LINK_VIEW_ALL . '</a>'; ?><br />' : '')+'<?php echo (basename($PHP_SELF) != 'advanced_search.php' ? '<span class="fa fa-angle-right" style="color: #747EBB;"></span> <a href="' . tep_href_link('advanced_search.php', 'keywords=\'+search_input.val()+\'', 'NONSSL', true, false) . '">' . MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_LINK_ADVANCED_SEARCH . '</a>' : ''); ?></div></div>';

search_input.val() needs to be escaped.   I did the following: encodeURIComponent(search_input.val())

            return '<div><div style="padding: 0 10px 0px 10px; color: red;"><?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_NOTFOUND; ?><button id="menuclose" type="button" class="close notfound" aria-label="Close" title="<?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_CLOSE; ?>">×</button></div><?php echo (basename($PHP_SELF) != 'advanced_search.php' ? '<div style="padding: 0px 10px 5px 20px; font-size: 12px;"><span class="fa fa-angle-right" style="color: #747EBB;"></span> <a href="' . tep_href_link('advanced_search.php', 'keywords=\'+encodeURIComponent(search_input.val())+\'', 'NONSSL', true, false) . '">' . MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_LINK_ADVANCED_SEARCH . '</a></div>' : ''); ?></div>';

            return '<div style="border-bottom: 1px solid #E9E7E7;"><div style="padding: 0 10px 0px 10px;"><span style="font-size: 14px; font-weight: bold;"><?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_HEADING; ?></span><span style="font-size: 12px; color: #5D5F61;"> ('+(suggestion_length > limit_list ? '<?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_HEADING_SHOWING; ?> '+limit_list+' <?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_HEADING_OF; ?> '+suggestion_length : '<?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_HEADING_TOTAL; ?> '+suggestion_length)+')</span><button id="menuclose" type="button" class="close found" aria-label="Close" title="<?php echo MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_CLOSE; ?>">×</button></div>'+
                   '<div style="padding: 0px 10px 5px 20px; font-size: 12px;">'+(suggestion_length > limit_list ? '<span class="fa fa-angle-right" style="color: #747EBB;"></span> <?php echo '<a href="' . tep_href_link('advanced_search_result.php', 'keywords=\'+encodeURIComponent(search_input.val())+\'', $request_type, false) . '">' . MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_LINK_VIEW_ALL . '</a>'; ?><br />' : '')+'<?php echo (basename($PHP_SELF) != 'advanced_search.php' ? '<span class="fa fa-angle-right" style="color: #747EBB;"></span> <a href="' . tep_href_link('advanced_search.php', 'keywords=\'+encodeURIComponent(search_input.val())+\'', 'NONSSL', true, false) . '">' . MODULE_HEADER_TAGS_TWITTER_TYPEAHEAD_SUGGESTIONS_LINK_ADVANCED_SEARCH . '</a>' : ''); ?></div></div>';

[auzStar]

New version has been added to the add-on:
http://addons.oscommerce.com/info/9351
 
NOTE:
bs version has been updraged to v1.4
non-bs version has been updraged to v1.3
 

CHANGES: (BS and Non-bs)
1. fixed XSS vulnerability, thanks to @@marcello.

2. fix minor error/warning when installing module (error only shows in debug mode), thanks to @@marcello.

3. added options to regulate the rate of server requests while user types in the search box.

 

CHANGES: (Non-bs only)
revert back to standard naming format of table names and file names in some files.

 

NOTE: for both BS or Non-bs versions, you need to un-install the module from admin first.

 

BS version needs to be upto v1.3 to use the upgrade to v1.4 bs files, otherwise upload all files from the full package.
Non-bs can use the upgrade to v1.3 non-bs files from ANY non-bs version of this add-on.
 
If you have made changes to any of your current add-on files then please use a file comparing tool to compare files.
 
Bootstrap demo can be seen here:
http://www.auzcommer.../osc234bs_test/
 
cheers

 

[presentemusical]

I use accent on the site , the search error " NULL" , where I could fix this ?

 

 

[auzStar]

I use accent on the site , the search error " NULL" , where I could fix this ?

 

@@presentemusical

 

What is accent? Can you provide more details please? If you mean you're using a different language other than English, the documentation does state that this add-on has only been tested in English. If you provide more details I might be able to help.

 

What is the product text that is missing where NULL appears? Can you provide a link to the website?

 

cheers

[Guest]

@@auzStar

Hi Dom

 

Many thanks for the upgrade.

 

I notice that I seem to be missing the  > show all results  text in the drop down menu, the  > go to advanced search  shows. Everything else appears just fine.

Not sure what I may have done to cause this.

 

Chheers

 

Grandpa