Skip to main content
Buyerquest Community

Visual Search Uses Images to Locate Products

BuyerQuest enables the ability for a buyer to click on a image to locate items for purchase. This capability leverages the power of static blocks, home page widgets, and code to provide increased speed of item selection for busy buyers.

Visual Search Available on Home Page

BuyerQuest is pleased to announce the latest Home Page Widget, focused on improving the "speed to selection" for Users to find the right product that they need.

The Visual Search Home Page Widget combines the ease of shopping by categories with  powerful search capabilities and search tools.

A common use case might be for purchasing Uniforms for employees - instead of having users try to search for 'shirts' or 'polos' or some other term, you can instead show them an image of a model employee and just have them click directly on the part of the image that is displaying the item needed (in this example they would click on the shirt in the image).

Video - Visual Search Uses Images to Locate Products 

Watch the video below to learn the details of this powerful image-based search strategy.

Setting up Visual Search

Visual Search leverages standard Static Block and Home Page Widget capability.

  1. Create a new Static Block and copy the HTML and JavaScript code below.
  2. Update the HTML 'img' code to point to the Image that is appropriate for your site and use cases.
  3. Update the HTML 'map' code to use the coordinates that are appropriate for your site and use cases.  A site like https://www.image-map.net/ is recommended to assist with this effort.  As shown in the example below, you should set the coordinates so that they correspond to the area of the image that is logical (i.e. by clicking on the 'shirt', it takes the User to the 'shirt' shopping experience).
  4. Update the HTML 'href' within the map code to point to the corresponding landing pages for each of the image areas.  These links might point to a given search term (i.e. 'shirts'), or to a CMS Landing Page, or a product tag, or even a specific product - whatever meets the needs of your use cases.
  5. Save the Static Block and update the Home Page Widgets to point to this Static Block. 

Example Screenshot Used for Visual Search 

image.png

Example Code for Visual Search Home Page Widget Static Block 

<div>
<h2>Uniforms - Click on image area to order</h2>
<p><img src="http://mischiefmanagedsl.net/wp-content/uploads/MM_uniformguidelabels-1024x1024.bmp" alt="Uniforms" usemap="#imagemap" /> 

//Replace the Map detail information that is specific to your image
<map name="imagemap"> 
<area title="Shirts" shape="poly" coords="278,225,280,475,715,485,688,139" href="https://demo.buyerquest.net/demo/search/?q=shirt" alt="Shirt" target="" />
 
<area title="Pants" shape="poly" coords="282,478,295,871,651,906,642,488" href="https://demo.buyerquest.net/demo/search/?q=apron" alt="Apron" target="" />
 
<area title="Shoes" shape="poly" coords="350,880,350,1001,654,1014,653,909" href="https://demo.buyerquest.net/demo/search/?q=shoes" alt="Shoes" target="" />
</map>
</p>
</div>

//Do not change the code below - copy as-is
<script type="text/javascript">// <![CDATA[
!function(){"use strict";function a(){function a(){function a(a,d){function e(a){var d=1===(f=1-f)?"width":"height";return c[d]+Math.floor(Number(a)*b[d])}var f=0;j[d].coords=a.split(",").map(e).join(",")}var b={width:l.width/l.naturalWidth,height:l.height/l.naturalHeight},c={width:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-top"),10)};k.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(m),m=setTimeout(a,250)}function d(){l.width===l.naturalWidth&&l.height===l.naturalHeight||a()}function e(){l.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof i._resize}function g(a){return document.querySelector('img[usemap="'+a+'"]')}function h(){j=i.getElementsByTagName("area"),k=Array.prototype.map.call(j,b),l=g("#"+i.name)||g(i.name),i._resize=a}var i=this,j=null,k=null,l=null,m=null;f()?i._resize():(h(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();

        $('map').imageMapResize();
// ]]></script>

JavaScript Raw File available here: https://github.com/davidjbradshaw/im...tree/master/js 

See the Documentation Topics:

Content Management (CMS) for Static Blocks
UI Management - Home Page Widgets