Integración mediante el snippet de Impresee
Este documento describe cómo integrar el snippet de Impresee en tu tienda en línea, junto con todas las opciones que se pueden utilizar para configurarlo.
Lo esencial
El snippet de Impresee es un pequeño código en Javascript que tiene todo lo necesario para integrar los servicios de búsqueda de Impresee en cualquier e-commerce. Incluye las siguientes funcionalidades:
- Canvas de dibujo
- Opción para cargar imágenes desde el sistema de archivos o directamente desde la cámara
- Un modal que muestra la imagen cargada, y que permite cortarla
- Ejecuta búsquedas visuales
- Ejecuta búsqueda instantáneas
- Muestra resultados de búsqueda
- Pantalla de búsqueda instantánea
- Modo de búsqueda completa, con filtros, ordenamiento y opciones de paginamiento
El snippet funciona cargando todo el código necesario para realizar las búsquedas visuales y por texto en el navegador. Para operar, capturará los clics en los botones configurados para activar cada tipo de búsqueda.
Integración
El snippet debe integrarse en cualquier vista de la tienda en línea donde se habilitarán las funciones de Impresee. Generalmente basta con agregar el código al lado de la barra de búsqueda. Además, los botones que activan cada tipo de búsqueda deben agregarse al sitio (esto debe hacerse sólo si la búsqueda por texto está deshabilitada, en caso contrario es opcional). A continuación se muestra un ejemplo de cómo podría verse el snippet:
_wssee es una variable javascript que contiene la configuración de Impresee, la cual está disponible a nivel de ventana. Las propiedades de este objeto indican qué tipo de servicios de búsqueda se habilitarán y cómo se mostrarán los resultados. Este objeto cuenta con diferentes llaves que te permitirán personalizar el proceso de búsqueda y los resultados. Sólo se requiere una llave, setup. El valor asignado a setup es un objeto que describe cómo se activará la búsqueda, sus aplicaciones Impresee y otras cosas como el color principal de los resultados y el contenedor de la grilla de resultados. Para habilitar el servicio de búsqueda por imagen, debe incluir una clave photoButton (la clase CSS del botón que activará la búsqueda visual) y una llave photoApp (su aplicación de búsqueda por imagen de Impresee) en setup. Para habilitar el servicio de búsqueda por dibujo, debe incluir una llave sketchButton (la clase CSS del botón que activará la búsqueda por boceto) y una sketchApp (su aplicación de búsqueda por dibujo de Impresee) en setup. Por ejemplo, supongamos que tienes dos botones como se muestra a continuación y deseas configurar la búsqueda por imagen y la búsqueda por dibujo.
Lo que debes hacer es crear _wssee, y asignar la llave setup cómo se muestra abajo, incluyendo las llaves para photo y sketch
Configuración
Opciones generales
La variable setup acepta opciones extra, las que permiten personalizar cómo se muestran los resultados, su disposición y más:
| Option | Description | Type | Default | Example |
|--------------------------|----------------------------------------------------------------------------------------------------------------------------------------|-------------|---------------------------|-------------------------------------------------------------|
| `loadAfterPageRender` | Indicates whether the code should be loaded before, or after the whole site loads (useful when search buttons are created dynamically) | `boolean` | `false` | `true` |
| `container` | Selector of the DOM element that'll contain the search results | `string` | `null` | `.container` |
| `mainColor` | Main color of the search interface, which can be seen on the buttons | hex value | `#9CD333` | #999999 |
| `afterLoadResults` | Function that is called after results are added into the DOM | `function` | `function(searchType) {}` | `function(searchType) { console.log('results'); }` |
| `beforeLoadResults` | Function that is called before results are added into the DOM | `function` | `function(searchType) {}` | `function(searchType) { console.log('before results'); }` |
| `onSearchFailed` | Function called when a search fails | `function` | `function() {}` | `function() { console.log('search failed'); }` |
| `onCloseResults` | Function called when results are closed | `function` | `function() {}` | `function() { console.log('search closed'); }` |
| `addSearchDataToUrl` | Add search related data to the URL, this allows reloading the search when refreshing the webpage | `boolean` | `false` | `true` |
| `onlyCameraAsInput` | Used in mobile devices to only allow the usage of images only taken directly from the camera | `boolean` | `false` | `true` |
| `disableImageCrop` | Used to disable the image crop screen. When true, the user is no loner given the option to crop the query | `boolean` | `false` | `true` |
| `numberFractionDigits` | Number of fraction digits to be included in prices | `int` | `2` | `0` |
| `decimalSeparator` | Char used to separate fraction digits from the whole number | `char` | `,` | `.` |
| `thousandsSeparator` | Char used to separate thousands from the whole number | `char` | `.` | `,` |
| `currencySymbolAtTheEnd` | Indicates whether the currency symbol should be at the back of the price or not | `boolean` | `false` | `true` |
| `colorOnSale` | Color of the "On Sale" label that appears when products are on sale | `hex value` | `#FF0000` | `#9CD333` |
| `useDetection` | Indicate whether to sue detection or not (Note: use true ONLY if you selected fashion & apparel) | `bool` | `false` | `true` |
| `displayOnSaleProducts` | Show "On sale" sign on products with a discount | `bool` | `true` | `false` |
| `currencySymbolAtTheEnd` | Place currency symbol at the end of the price (right side) | `bool` | `false` | `true` |
| `customGoogleAnalytics` | Google analytics code, used to register search events | `string` | `` | `UA-XXXXX-Y` |Búsqueda por texto
Para configurar y habilitar la búsqueda por texto o la función de búsqueda instantánea, también debe incluir una llave searchByText , la que tiene 3 campos obligatorios:
useText: booleano que indica si la búsqueda instantánea estará habilitada o no en el sitio (por ejemplo, true)searchBarSelector: selector del input que corresponde a la barra de búsqueda del sitio, donde los usuarios pueden escribir (por ejemplo #searchbar)fullTextSearchContainerSelector: selector del contenedor de los resultados de búsqueda. Estos resultados contienen filtros, paginación y más (por ejemplo #root)
La llave searchByText también incluye campos opcionales, descritos abajo:
| Option | Description | Type | Default | Example |
|-----------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|---------------------------|-------------------------------------------------------------------------|
| `searchDelayMilis` | The delay in milliseconds between the latest user input and the execution of the search result. | `int` | `300` | `100` |
| `pressSeeAll` | Function that is executed when the user presses the "see all results buttons" or presses enter on the search input | `function` | `function (queryText) {}` | `function(queryText) { window.location.href = "?IText=" + queryText; }` |
| `onCloseResults` | Function that is executed when the user closes the full results screen | `function ` | `function () {}` | `function () { console.log('closing results') }` |
| `onOpenDropDownResults` | Function that is executed when the Instant Search dropdown appears, that is when a user clicks on the search bar | `function ` | `function () {}` | `function () { console.log('opening dropdown') }` |
| `onCloseResults` | Function that is executed when the Instant Search dropdown is closed | `function` | `function () {}` | `function () { console.log('closing dropdown') }` |
| `fullTextSearchContainerSelector` | Selector of the DOM element that will contain the search results grid | `string` | `null` | `.container` |
| `computeTopFromElement` | Selector of the DOM element to be used when position the search results grid vertically (usually it should be to site's header) | `string` | `null` | `header` |
| `instantFull` | Tells the snippet to load the results from the full search without reloading the site (we recommend to set this option to true and use the `computeTopFromElement` to locate the grid in a nice position) | `bool` | `false` | `true` |
| `useButtonAsSearchBar` | Displays a button in the lower left corner of the site, which will work as a search bar. Recommended for sites with no search bar | `bool` | `false` | `true` |
| `useText` | Use search by text feature | `bool` | `true` | `false` |
| `searchBarSelector` | Search bar selector | `string` | `[name=q]` | `[name=q],input[name=s]` |
| `buttonSearchBarLocation` | Position of the floating button. Possible values: BOTTOM_LEFT, TOP_LEFT, MIDDLE_LEFT, BOTTOM_RIGHT, TOP_RIGHT, MIDDLE_RIGHT | `string` | `BOTTOM_LEFT` | `TOP_RIGHT` |
Nota: Los resultados de búsqueda completos se cargarán cuando el fragmento de Impresee encuentre un parámetro de consulta IText. Es por eso que recomendamos configurar la función pressSeeAll en
Etiquetas
El objeto _wssee también tiene una llave opcional texts, que corresponde a un objeto, que permite la personalización de etiquetas textuales que aparecen en pantalla, canvas, pantalla de recorte, entre otros.
Con esto _wssee se puede ver como sigue:
Las llaves disponibles para texts se muestran abajo:
| Key | Description | Default |
|------------------------------|----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------|
| `searchResultsTitle` | Title of the grid that contains the search results | Search results |
| `searchButtonLabel` | Label of any search button | Search |
| `oops` | Surprise exclamation used when an error occurs | Oops ... |
| `error` | Header of the error screen | We didn't expect this at all. |
| `errorDescription` | Message displayed on the error screen | It seems our system is overheating, please try again later. |
| `dragAndDropImageTitle` | Header of the drag and drop image screen | Drag & Drop an image or just click here |
| `dragAndDropImageMessage` | Message displayed on the drag and drop image screen | Upload the image you'd like to use to search |
| `customSelectionSearchLabel` | Message displayed when re-cropping a query | Custom search |
| `startWriting` | Message displayed before the user starts typing in the Instant Search dropdown | Start typing to search |
| `currencySymbol` | Currency symbol used when displaying prices | $ |
| `searchByPhoto` | Search by photo label that appears on the Instant Search dropdown | Search by photo |
| `searchBySketch` | Search by drawing label that appears on the Instant Search dropdown | Search by drawing |
| `seeAllResults` | See all results label that appears on the Instant Search dropdown after results are painted on the screen | See all results |
| `noMatchingResult` | Text that appears when no results match | We couldn't find any results for: |
| `onSale` | On sale label used on products that are on sale | On sale |
| `resultsTitleforTextSearch` | Header for the full text search results screen (Desktop) | Search results for |
| `numberResultsTitle` | Header that displays the number of results (Desktop). If you decide to modify this text, please keep the placeholder ({1}) | Displaying {1} results |
| `resultsTitleForMobile` | Header for the full text search results screen (Mobile) If you decide to modify this text, please keep the placeholders | Displaying {1} results for \"{2}\" |
| `filtersTitle` | Header for the filter column (Mobile) | Filters |
| `clearFilters` | Clear filters button label | Clear filters |
| `sortBy` | Sort by select label | Sort by |
| `applyFilters` | Apply filters button label (Mobile only) | Apply |
| `tryAgainWhenNoResults` | Label that motivates users to keep searching when no results match | Why don't you try drawing or taking a picture of what you want? |Hints
- La clase CSS
ImpreseeHidese puede utilizar para ocultar elementos. Un detalle interesante es que cuando se cierran los resultados de la búsqueda, nuestro sistema encontrará todos los elementos con esta clase y eliminará la clase de ellos. Esto le permite ocultar ciertos elementos al mostrar los resultados. Esto puede resultar útil cuando se utiliza la opcióncontainer. - Si decides utilizar la clase
ImpreseeHidete recomendamos que utilices las funcionesbeforeLoadResultsoafterLoadResultspara localizar los objetos a ocultar. También puedes agregar la claseImpreseeHidea esos elementos dentro de cualquiera de estas funciones. - The
beforeLoadResultsyafterLoadResultsreceive the search type as a parameter, this means that you can customize the look and feel of Instant search, search by sketch and search by photo separately. The search types of these kinds of search are:- Instant search:
instant search - Full search by text:
text - Search by photo:
photo - Search by drawing:
sketch
- Instant search:
- Si decides insertar los resultados de la búsqueda en algún lugar de su sitio, toma en cuenta que esto podría fallar si el contenedor oculta el contenido desbordado (CSS
overflow:hidden). Puedes usar la funciónbeforeLoadResultspara modificar el comportamiento de desbordamiento del contenedor y luego puede usar la funciónonCloseResults. funcionar para que vuelva a la normalidad.
Si tienes alguna pregunta sobre la integración a través de este snippet, comunícate con support@impresee.com