Build front end

In this sprint we will utilise Algolia’s libraries to build a front end based on the mock ups we have already created. Once you have completed the tasks below you are able to move onto the next sprint.

Build front end image
Team members

Depending on the size of your company, some of these roles may be the same person. This sprint it is important we identify these roles and get in contact with them.

Project Manager

Planning and project oversight


Front End Engineers

Build application and visual and interactive elements

Shopify Integration

Shopify setup

Requirements

Recommended integration

Using Shopify templating

No customisation required (Styling can be customised)

Use the bundled InstantSearch library via the plugin 

Using Shopify templating

Customisation required (Adding and removing widgets)

Use the bundled InstantSearch library via the plugin and edit this in the Shopify theme editor

Custom Storefront or headless Shopify

Customisation required (Adding and removing widgets)

If you’re using a custom storefront or headless Shopify you can use instantsearch directly in your codebase

Magento

Magento Set up

Requirements

Recommended Integrations

Standard Magento

No customisation required (Styling can be customised)

You can enable the autocomplete menu, category page and results page directly from the plug in

Standard Magento

Customisation required (Adding and removing widgets)

To customise the results page, category page or autocomplete you will need to install the customAlgolia extension and override the templates or add front-end events

Headless Magento

Customisation required (Adding and removing widgets)

If you’re using headless Magento you can use instantsearch directly in your codebase

Salesforce Commerce Cloud

SFCC set up

Requirements

Recommended integration

Standard SFCC

Customisation required (Adding and removing widgets)

You can customize an InstantSearch implementation using the SFCC cartridge.

SFCC Headless

No customisation required (Styling can be customised)

You can connect your frontend to headless SFCC using Algolia’s boilerplate, a React front-end, or Mobify.

If you are not using the above integrations, and for any Search Results or Category Page implementation, we recommend to use InstantSearch in conjunction with Autocomplete, as it improves both developer and user experience.  InstantSearch is available in the following flavors:

InstantSearch is made up of widgets which you can customize the styling. If you want to change the HTML of a widget, we recommend that you use a connector so that the state of the query can be preserved, if a connector does not extend enough, a custom widget can be created. Follow the building the search UI track to learn more.

algolia autocomplete

Autocomplete

For an autocomplete experience and Query Suggestions, the autocomplete.js is the way to go, specially on mobile where real estate is limited. An autocomplete is made of sources and plug-ins, where plug-ins can add a source and react to state changes. 

Algolia Recommend

Recommend Library

Recommend is a JavaScript UI library for Algolia Recommend product  to display recommendations on your site. Recommend exposes two UI components, one for each Algolia Recommend model: Frequently Bought Together Related Products

You can easily bootstrap an InstantSearch implementation using create-instantsearch-app. If you want to have a play first check out the readme for sandboxes and the getting started guide.

Autocomplete

Autocomplete

To get started with Autocomplete.js, read about the core concepts to learn more about underlying principles, like sources and state. Then try out the playground where you can fork a basic implementation and play around. Once you are ready you can install the library and get started.

Sending events is required to unlock click and conversion analytics and advanced Algolia. While you are developing your front end, this is an optimal opportunity to implement events. Don’t forget to use your planning documents from the Design UI sprint.

Integrations

Ruby

Segment

If you are using Algolia’s supported events then you need to add Algolia related information including the queryID, index and the objectID. Then you can add the Algolia destination to the segment dashboard. If you aren’t using the supported events already, you can implement them, or use our insights library as detailed above.

google tag manager

Google Tag Manager

First, Import the official Algolia Search Insights template, then you can setup Tags to send events to Algolia’s insights API. After this, leverage your existing click and conversion Triggers (or create new ones).

mParticle logo

mParticle

If you are already tracking events with mParticle, leverage our official Algolia Insights integration available on the mParticle catalog to forward your existing events. 

Insights Middleware

If you are using InstantSearch with JS and Vue and want to send events from here the best option is the insights middleware

autocomplete

Autocomplete

Algolia supports sending events directly from your autocomplete and you can enable this via a plugin.

API Clients

If you implement using API Clients: 

  • If you aren’t using InstantSearch and want to send events from the front end, the insights library is the best way to go. 
  • You can use any of the API clients to send events from your back end.