In this series we’ll walk you through building a robust e-commerce platform using Tweakwise, using industry best practises.

In the previous part, we set up the recommended data structure. In the second part, we'll explore what elements need to be built where and how.

In this guide:

• Suggestions
• Search
• Product overview
• Product detail
• Cart
• Checkout

Suggestions

Enhancing your webshop's search functionality with dynamic suggestions can greatly improve the user experience. This will allow users to see relevant suggestions in real-time as they type in the search bar.

Use the Suggestions guide as API reference.

Build

• Create a form with search input and button. Input should have type="search".
• When typing, execute the suggestions and product suggestions endpoints.
• Display the groups
  • SearchPhrase suggestions can go to the search page. See Suggestions.
  • Category suggestions should go to the specific category. See Category suggestions.
  • Facet suggestions. See Facet suggestions.
• Display the product suggestions. See Product suggestions. Clicking on a product should go to the specific product page.
• Submit of the form should navigate to the search page, with the entered term as search query.

Best practises

• Request Throttling / Debounce input events to prevent unnecessary requests.
• Cancel running requests: if the user is typing, make sure you only display the latest request.
• Save searchterms to the users storage that can be displayed if a user sets focus to the input (and no term has been entered). If there are no saved terms, display popular searched terms.

Search

The search page can be considered an extension of the lister page: the elements on screen are pretty similar, but we need a different routing approach to make sure the searchterm is kept in state.

Build

• Create a dedicated search page using Routing:
  • Execute navigation-search/grouped endpoint using the parameters in the router state.
• Check redirects & execute (see Tweakwise API - Redirects for API reference)
• Enrich the product data. Use the itemno in the items property to retrieve product information that is not returned by Tweakwise.
• Build the page structure: facets, products, sorting and ordering.
  • Display products (see Tweakwise API - Items for API reference).
  • Display facets, see Facets.
  • Display paging (see Tweakwise API - Sorting & paging for API reference)
  • Display sorting options (see Tweakwise API - Sorting & paging for API reference)
  • Display search banners on reserved spots, see Api - Search banners.

Measure

To be able to use personalisation:

• Collect search terms
• Collect product clicks

Facets

Our search and navigation responses contain facets: a structured information that help users refine the results by applying filters from product attributes.

The concept called facets. A facet is a group of filters, for example a brand facet contains multiple brand filters that can be enabled.

These are called facets. Display facets and filters. See Tweakwise API - Facets for API reference.

• Collapsibles: if facet.facetsettings.iscollapsible is true, the facet should be allowed to collapse/expand.
• Display different types of facets, based on the selectiontype:
  • checkbox: filter the product results with multi-select checkbox
  • link: filter results with single-select links
  • tree: filter results with single-select links in a hierarchy.
  • color: filter results using color swatches, see Color swatches
  • slider: filter results using linear slider, see Facets - Slider
• Limit number of displayed filters by default, see Facets - Limiting filters
• Search in filters: make it easier for the customer to find a specific filter. See Facets - search in filters
• Hints & tips: display inline help or inspiration. See Facets - Hints and tooltips
• Category tree, see Facets - Category tree
• Range slider, see Facets - Slider
• Bucket slider, see Facets - Bucket slider
• Color swatch, see Facets - Color swatch

To learn best practises around facets, go to Best practises: facets.

Product List

The product lister page has many names: collection page, product overview, category, catalog and many more. But ultimately, we all talk about the concept we call product lister pages.

Technically, the product lister page is similar to a search page without the search element.

Build

• Create a dedicated product lister page using Routing.
• Execute navigation/grouped endpoint using the parameters in the router state.
• Enrich the product data. Use the itemno in the items property to retrieve product information that is not returned by Tweakwise.
• Build the page structure: facets, products, sorting and ordering.
  • Display products (see Items for API reference).
  • Display facets, see Facets.
  • Display paging & sorting (see Sorting & paging for API reference)
  • Display non-products (visuals)
• Build the page state using the URL
  • Parse the current URL and convert it to a collection of key/value pairs. Keep this facet collection in memory.
  • If a filter is changed, the change can be applied to the facet collection.
  • If the facetcollection is changed, build a new URL. Use the browser History API's pushState to go to a new URL.
  • A change in URL should result in a new navigation request. Facets, products, sorting and ordering should be updated according to the response.

Measure

Implement:

• Collect product clicks

Product Detail

Up-selling and cross-selling on product pages are essential strategies for driving revenue and enhancing the shopping experience. With Recommendations you can show up-selling and cross-selling to a user.

Configure

• Create one or more upselling recommendation(s) with groupcode pdp-upsell
• Create one or more cross selling recommendation(s) with groupcode pdp-crosssell

Build

• Execute Grouped recommendations with the current productnumber and groupkey pdp-upsell to display upsell recommendations.

• Execute Grouped recommendations with the current productnumber and groupkey pdp-crosssell to display cross sell recommendations.

• Display the upsell recommendations on the product page.

• Display the cross sell recommendations on the product page.

In case of having more products than fit on one row, consider using a carousel, to be able to display more products or keep the amount of products flexible.

Measure

To be able to use personalisation or dynamic re-ranking:

• Collect product page views.
• Collect product clicks

Shoppingcart

It's also common and a best practise to display up- and cross selling in shopping cart pages.
Depending on preference there are different strategies:

• Display up- and cross selling based on the product that was last added to the cart
• Display up- and cross selling based on the entire contents of the cart. If you want to support this case, multiple calls should be done and the results concatenated and sorted by desired.

Configure

• Create one or more upselling recommendation(s) with groupcode cart-upsell
• Create one or more cross selling recommendation(s) with groupcode cart-crosssell

Build

• Execute Grouped recommendations with the current productnumber and groupkey cart-upsell to display upsell recommendations.

• Execute Grouped recommendations with the current productnumber and groupkey cart-crosssell to display cross sell recommendations.

• Display the upsell recommendations on the cart page.

• Display the cross sell recommendations on the cart page.

In case of having more products than fit on one row, consider using a carousel, to be able to display more products or keep the amount of products flexible.

Measure

To be able to use personalisation or dynamic re-ranking:

• Collect product page views.
• Collect product clicks

Checkout

To support personalization, analyze the overall performance of algorithm usage, builder componenets, filter templates and more, it is critical to implement purchase or transaction events.

Measure

• Collect purchases.