Elegant Auto-Completer – High Usability & User Experience in TomatoCart

The search functionality is significant for an online store. It should be easy and effective for a new customer to find the needed products in your store. An elegant auto-completer search feature with high usability and user experience will increase your sales. So I have improved the original TomatoCart auto-completer feature as follow:

Features:

– Make the dropped-down search list show quickly

– Add the product thumbnail in the dropped-down search list

– Add the product price and special price into the dropped-down search list

– Click on the product from the dropped-down search list to go to the product info page

– Add the Get More button in the dropped-down search list

– Add loading notification when customer enter the search keyword

main
– Add a configuration into admin panel > Configuration > Images to show the product image with mini or thumbnail group

thumbnail– Add the maximum search results setting for the auto completer under admin panel > configuration > configuration> maximum values

maximumLive Demo > http://translator.tomatocart.com/gdevelop/

How to integrate the elegant auto-completer into your store?

– For the store owner who are using the default glass gray template:

Step 1. Download the elegant-autocompleter-glass_gray.zip

Step 2. Unzip the package and copy the ext, includes and templates directories into your TomatoCart root directory. You need to override directories and files if your copy process request confirmation.

Step 3. Modify the templates/glass_gray/index.php to update the auto completer code as follow:

– Find the original code:

new TocAutoCompleter('keywords', {
      sessionName: '<?php echo $osC_Session->getName(); ?>',
      sessionId: '<?php echo $osC_Session->getID(); ?>',
      template: '<?php echo $osC_Template->getCode(); ?>'
});

– Replace it with the following code:

new TocAutoCompleter('keywords', {
      sessionName: '<?php echo $osC_Session->getName(); ?>',
      sessionId: '<?php echo $osC_Session->getID(); ?>',
      template: '<?php echo $osC_Template->getCode(); ?>',
      maxChoices: <?php echo defined('MAX_DISPLAY_AUTO_COMPLETER_RESULTS') ? MAX_DISPLAY_AUTO_COMPLETER_RESULTS : 10;?>,
      moreBtnText: '<?php echo $osC_Language->get('button_get_more'); ?>',
      imageGroup: '<?php echo defined('IMAGE_GROUP_AUTO_COMPLETER') ? IMAGE_GROUP_AUTO_COMPLETER : 'thumbnail'; ?>',
});

Step4. Modify the templates/glass_gray/stylesheet.css to add the new style for the auto-completer

– Find the original code and remove it:

/*auto_completer*/
ul.autocompleter-choices {
  display: block;
  color: #000000;
  background-color:#F3F3F3;
  border-left: 1px solid #8B8A8A;
  border-right: 1px solid #8B8A8A;
  border-top: 1px solid #D9D9D9;
  border-bottom: 1px solid #8B8A8A;  
}

ul.autocompleter-choices li{
  color: #616060;
}

ul.autocompleter-choices li.autocompleter-selected {
  background-color: #EAEAEA;
  color: #616060;
}

ul.autocompleter-choices li {
  white-space: normal;
  line-height: 22px;
  padding-left: 15px;
}

ul.autocompleter-choices span.autocompleter-queried, ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried {
  color: #616060;
}

–Find the following code:

.button {
  cursor: pointer;
}

–Replace it with the following code:

.button {
  cursor: pointer;
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  text-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 8px;
  text-decoration: none;
  margin: 5px;
}

.button:hover {
	background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.button.squre {
	border-radius: 0;
	-webkit-border-radius: 0;
  -moz-border-radius: 0;
}

.button.medium {
	font-size: 14px;
  padding: 8px 10px;
}

Step4. Add the language definition for the auto-completer

– Go to admin panel > definitions > languages and to click the general group. Then, please add the following definition:

Language Key: button_get_more

Language Value: Get More

Step5. If you need the configurations for maximum results and image group, you have to run the following sql:

INSERT INTO toc_configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Search Results In Auto Completer ', 'MAX_DISPLAY_AUTO_COMPLETER_RESULTS', '10', 'Maximum number of search results in auto completer', '3', '19', now());
INSERT INTO toc_configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Image Group Of Auto Completer', 'IMAGE_GROUP_AUTO_COMPLETER', 'thumbnail', 'The image group of the auto completer search list', '4', '9', now());

Note:

– Please replace the toc_ prefix with your own prefix

– If you don’t add the above two configurations, the default value for the maximum results is 10 and the default image group is thumbnail.

————————————————————————————————

– For the store owner who are using the bootstrap template:

Step 1. Download the elegant-autocompleter-boostrap.zip

Step 2. Unzip the package and copy the ext, includes and templates directories into your TomatoCart root directory. You need to override directories and files if your copy process request confirmation.

Step 3. Modify the templates/bootstrap/index.php to update the auto completer code as follow:

– Find the original code:

new TocAutoCompleter('keywords', {
      sessionName: '<?php echo $osC_Session->getName(); ?>',
      sessionId: '<?php echo $osC_Session->getID(); ?>',
      template: '<?php echo $osC_Template->getCode(); ?>'
});

– Replace it with the following code:

new TocAutoCompleter('keywords', {
      sessionName: '<?php echo $osC_Session->getName(); ?>',
      sessionId: '<?php echo $osC_Session->getID(); ?>',
      template: '<?php echo $osC_Template->getCode(); ?>',
      maxChoices: <?php echo defined('MAX_DISPLAY_AUTO_COMPLETER_RESULTS') ? MAX_DISPLAY_AUTO_COMPLETER_RESULTS : 10;?>,
      moreBtnText: '<?php echo $osC_Language->get('button_get_more'); ?>',
      imageGroup: '<?php echo defined('IMAGE_GROUP_AUTO_COMPLETER') ? IMAGE_GROUP_AUTO_COMPLETER : 'thumbnail'; ?>',
});

Step4. Modify the templates/bootstrap/stylesheet.css to add the new style for the auto-completer

– Find the original code

 /* Auto Complete */ 
 ul.autocompleter-choices{position: absolute;margin: 0;padding: 0;list-style: none;border: 1px solid #CCCCCC;background-color: #FFFFFF;text-align: left;z-index: 50;border-radius: 3px 3px 3px 3px;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
 ul.autocompleter-choices li{position: relative;margin: -2px 0 0 0;padding: 0.2em 1.5em 0.2em 1em;display: block;float: none !important;cursor: pointer;font-weight: normal;white-space: nowrap;font-size: 13px;line-height: 28px;color: #000000;}
 ul.autocompleter-choices li.autocompleter-selected{background-color: #444; color: #ffffff}
 ul.autocompleter-choices span.autocompleter-queried{display: inline;float: none;font-weight: bold;margin: 0;padding: 0;color: #6D7B94;}
 ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried{color: #6D7B94;}

– replace it with the following code

ul.autocompleter-choices div.details {margin-top:10px;}

–Find the following code:

.button {
  cursor: pointer;
}

–Replace it with the following code:

.button {
  cursor: pointer;
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  text-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 5px 8px;
  text-decoration: none;
  margin: 5px;
}

.button:hover {
	background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

.button.squre {
	border-radius: 0;
	-webkit-border-radius: 0;
  -moz-border-radius: 0;
}

.button.medium {
	font-size: 14px;
  padding: 8px 10px;
}

Step4. Add the language definition for the auto-completer

– Go to admin panel > definitions > languages and to click the general group. Then, please add the following definition:

Language Key: button_get_more

Language Value: Get More

Step5. If you need the configurations for maximum results and image group, you have to run the following sql:

INSERT INTO toc_configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Search Results In Auto Completer ', 'MAX_DISPLAY_AUTO_COMPLETER_RESULTS', '10', 'Maximum number of search results in auto completer', '3', '19', now());
INSERT INTO toc_configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) VALUES ('Image Group Of Auto Completer', 'IMAGE_GROUP_AUTO_COMPLETER', 'thumbnail', 'The image group of the auto completer search list', '4', '9', now());

Note:

— Please replace the toc_ prefix with your own prefix

 – If you don’t add the above two configurations, the default value for the maximum results is 10 and the default image group is thumbnail.

Done. Enjoy it.

If you can’t do the integration by yourself, please contact us via the email support@tomatocart.com

Looking for quality TomatoCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

Your email address will not be published. Required fields are marked *


3 + 4 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>