Skip to content

Highlighted Features

Here are the latest highlights and features in eSales Lifestyle. To receive updates automatically, subscribe to our newsletter. For all updates to eSales Lifestyle, see the Full Changelog.

2020-12-08

Content

Content is a flexible and generic type of data, that can be searched for and ranked according to interest or newness. Typical entities that would be suitable to supply as content are for examples FAQs, magazine entries and inspirational articles.

Introducing content

Apptus eSales Lifestyle uses both user interactions and the provided content data, to determine how to rank content. Furthermore, multiple types of content can be added and used for separate purposes. For example, FAQs could be added as content to search in, while also adding the latest and greatest inspirational articles for presentation on the start page.

How to use

Supply the content items in the data feed.

Using the Web API

To create a new separate endpoint for search, e.g. a standalone FAQ search, use the Content Search Page. Content entities may also be included on the Search Page.

To retrieve content information, or list content according to newness or relevance, use either Content Information or the Landing Page. Some requests that should include content, requires the content lists to be specified in the request body in its Page configuration.

Using the Web components

Content functionality in the Web Components is currently limited to the content type link. This provides the equivalent support as Content links, but may now be provided as the new entity type. Both import formats are supported, but they must not be mixed.

2020-12-03

Apptus eSales Lifestyle

Apptus eSales Fashion has changed its name to eSales Lifestyle! Specialization within the fashion segment is still embraced to the core. However, the new name better reflects the fact that the product also caters for fashion retailers with an additional miscellaneous assortment within the Lifestyle sector.

Apptus eSales Lifestyle

How to use

No integration or configuration change is needed, all changes are backwards compatible.

Optional changes

Some endpoints, links, and fields have been updated with regards to the new name and can be changed to be aligned with the documentation. Note that this will have no effect other than the code being aligned with the documentation and is fully optional.

2020-11-30

Favourites

Apptus eSales Lifestyle now supports another type of personal input signal, favourites. Visitors can select and have their favourite products notified to eSales via either the Web Components or the Web API.

Introducing favourites

Furthermore, a new type of recommendation based on the selected favourites is also available. This is perfect to use for additional inspiration on for example a favourites page.

Favourites recommendations

How to use

Using the Web components

Enable the Favourites and customize the look and feel to your liking using the Theming API. To use the new algorithm for recommendations based on favourites, add a recommendation product list with the algorithm set to FAVORITES.

 <esales-recommendation-product-list
    zone-id="fav-recs-1"
    size="4"
    algorithm="FAVORITES"
    label="You might also like these">
 </esales-recommendation-product-list>

Note: Only a limited amount of favourite information will be stored in eSales for various use, hence external storage is needed for cross device favourite state handling. With the Web Components, state handling of selected favourites are made client side, but can be retrieved and set externally using esales.favorites, see the Library API. This can to be used upon visitor sign in, if the actual favourites should be accessible on multiple devices.

Using the Web API

When a visitor select a product as a favourite, send the Add favourite notification. When a visitor removes a favourite, send the Remove favourite notification.

To add the Favourites recommendation, supply a Page configuration including a Recommendation list in the page query. Set the algorithm to FAVORITES.

2020-11-17

Handpicked Style with recommendation

Retailers can now pinpoint exactly what to style a product with and have that provided as a recommendation area in eSales Lifestyle. Typically this enables end users to easier shop a whole look, and for example reflects all garments worn on the model image of the query product.

The handpicked Style with recommendation is the first step towards supporting automatic Style with recommendations, further enhancing the shopping experience of a visitor.

Handpicked products for recommendations

How to use

Supply the keys of the products to style the product with in the data feed for each applicable product.

<product key="1001-100">
    ...
    <style_with>1010-100|2152-200|1337-100|3105-0100</style_with>
</product>

Using the Web components

In a recommendation area, set the algorithm to STYLE_WITH and supply the product-key.

 <esales-recommendation-product-list
    zone-id="sw-recs-1"
    size="4"
    algorithm="STYLE_WITH"
    product-key="1001-100"
    label="Complete the outfit">
 </esales-recommendation-product-list>

Using the Web API

Supply a Page configuration including a Recommendation list in the page query. Set the algorithm to STYLE_WITH and supply a productKey as a parameter to the Recommendation list.

Custom URL support

Facets, sort order, and other states are by default handled automatically by the Web Components. In some cases where SEO optimisation for faceted result pages are desired, custom URLs are needed. Apptus eSales Lifestyle now supports custom URL handling for Web Components using the new events write-url and read-url.

How to use

For usage information and example, see the Events API.

2020-11-06

API Library

The API Library, esales-lifestyle-api, is released. It is built on top of the HTTP API and it is designed to make it easy to communicate with eSales Lifestyle from a site, providing methods to make HTTP requests available in the Web API as well as TypeScript models of the response objects. The library also facilitates the generation and handling of session and customer keys.

How to use

The API Library is installed via npm. For more information, see API Library.

2020-09-28

Deep learning image analysis

Image analysis in eSales Lifestyle now additionally applies deep learning techniques, i.e. neural networks, to better understand imagery and product properties.

Image type analysis

Using neural networks, eSales Lifestyle automatically identifies how a product is depicted in the image, i.e. whether it is displayed on a model or as a cutout. This enables image consistency throughout the user experience without the need for manual tagging.

Colour analysis of model images

Through deep learning techniques the colour analysis can, additionally to cutout images, be applied to model imagery. This means that even if the product is shown on a model, the colours from the target product in that image can be extracted.

Colour analysis with neural networks - analysed

Shoe colour analysis

Colour analysis of shoes

Colour analysis of shoes now takes soles and shadows into account when extracting the colour. Using deep learning, insoles and soles are removed before colours are extracted from shoe cutout images.

2020-09-17

The next generation of Lifestyle Search is here!

The next generation of Lifestyle Search

Building on our semantic search engine, we have taken another huge leap. The semantic search intelligence has been extended both in terms of application and its knowledge base, now additionally considering product types, events, materials, as well as shapes.

NLP (Natural Language Processing) capabilities are made available though combining intelligent query analysis and making use of deeper knowledge of concept significance, relations, and hierarchies. This enables eSales Lifestyle Search to profile the visitor's search intent.

Key features

  • Intelligent prefix search, excluding irrelevant results relevant
  • Search result expansion
  • Multi-language search support
  • Automated conceptual synonyms
  • Hierarchical concept query analysis

With automatic classification of the data feed via text and image analysis, eSales Lifestyle feeds are broken down into highly structured data, ready to provide superior search capabilities. Try it for yourself, just bring your data and enjoy the new search experience.

How to use

It just works - you don't need any further integration or configuration to make this happen.

2020-08-11

Theming API V2

A whole new API for Theming is now available for eSales Lifestyle. Theming API V2 has been designed to allow for extensive customisability, enabling a huge variety of ways to adapt the look and feel of the Web Components.

The Theming API V2 has also been designed with a strong focus on ease of use for the integrating party. It supports CSS Shadow parts and comes with a shim for older browser support. This allows integrators to use a modern styling syntax of the eSales Lifestyle components that works with older browsers, right out of the box.

Sample theme 1

How to use

Styling of Web Components is supplied by the retailer through utilization of the Theming API V2. This is normally integrated by a front-end resource and can favourably be supplied as a separate stylesheet. A step-by-step guide of how to supply theming explains the steps and follows recommended best practices.

Automatic migration for existing clients

Any previously supplied styling using the old Theming API has been automatically been migrated to Theming API V2. If no theming adjustments are to be made, nothing needs to be done by the retailer at all.

To start using the new powers of Theming API V2, the process is similar to the one of a new client but with very minor changes due to the migrated stylesheet provided by Apptus. Please contact your success manager for assistance.

The new Theming API V2 also offers a brand new layout of the navigation assistant that uses styleable exposed parts.

Navigation assistant layout

How to use

Add the Navigation assistant trigger to the pages where it should be displayed, likely in the header of each page template. This will automatically open an interactive modal containing the categories that have been set up in the navigation configuration in Navigation tab in the Experience app.

<header>
  <esales-navigation-assistant-trigger></esales-navigation-assistant-trigger>
</header>

Use the Navigation assistant modal to provide custom slots in the navigation assistant.

List facet modes

Both the colour facet as well as the size facet now supports a list view in addition to the original grid view. This is controlled through custom properties in the new Theming API V2.

Colour facet modes

How to use

Settings for the facet modes are found in the Facets section of the new Theming API V2. The example below shows how to activate the list mode for both the colour and the size facet.

--ae-facet-size-mode: list;
--ae-facet-color-mode: list;

2020-07-08

Web API

An API accessing raw JSON data through HTTP queries, enabling server side integrations and fully flexible clients side integrations is now available! The Web API can be used for specific customized parts of the integration or it can be used as an alternative to Web Components all together.

  • Unlimited customization flexibility
  • Supports server side integrations
  • Can be used in native apps
  • Supports off-site usage

How to use

An integration using the Web API requires developer resources building the desired designs. For the full specification of the API, see Web API.

For more information about the two integration approaches and how to combine Web Components and the Web API, see Web Integration.

2020-05-20

Image tag prioritisation

With the introduction of custom image tags, products can now be showcased further than with more than just model and cutout images. Add any kind of tag to an image, or a set of images, and use those tags to prioritise the image selection.

In the example below, an image has received the tag Hero which is then set as the first prioritised image. Only the images with that same tag will show that image type, while the other images will rely on the next prioritised type.

Hero image used as prioritised image

How to use

Add available tags to images in the data feed with the tags attribute. For more information, see Advanced image imports.

<images>
    <image tags="Hero">
        <url>//cdn.esalesdrivensite.com/images/1001-100_model.jpg?preset=200x200</url>
    </image>
</images>

In the Settings tab in the Experience app, set the desired image prioritisation order with the imported tags.

Experience app setting of image type prioritisation

2020-04-14

Integration app

The Integration app is introduced to eSales Lifestyle. The app includes three different tabs:

  • Dashboard - A quick overview of the overall system status of eSales Lifestyle.
  • Logs - System logs for errors, warnings, and general information.
  • Credentials - Easy access to the cluster ID and API key.

Screenshot of Apptus eSales Integration app

How to use

Access to the Integration app must be set per user in the Admin app.

2020-03-24

Personal recommendations

Having personalised recommendations is now supported in eSales Lifestyle. Personal recommendations combine the history of actions made by each visitor, with multiple aspects of product relations. The product relations are based on both aggregated behavioural data as well as data similarities.

As for all product listing functionality in eSales Lifestyle, general product relevance such as newness or stock levels plays a part in the algorithm as well.

Personal recommendations

Personal recommendations are perfect to use on a start page or another landing page with a great variety of products, such as Sale. Personalising the start page allows a retailer to showcase the most relevant products on a truly individual level, as well as getting that personal touch across.

Both Personal recommendations and Top Product recommendations can be used on the same page. While the Personal recommendations predicts interest based on previous actions, the Top Product recommendations are great for encouraging exploration and to showcase what's trending.

Should the same product happen to be included in both recommendation listings, eSales Lifestyle will automatically deduplicate the products between the listings. This ensures maximum use of the limited screen real estate and not accidentally waste it on displaying the same product twice.

How to use

Personal recommendations are automatically personalised within a session or when reusing a browser. To enable cross device personalisation for logged in visitors, Visitor Identification must be properly integrated.

Add the Recommendation product list component on the page where it should be displayed, with the attribute algorithm set to PERSONAL. If filters are set, attributes targeted as filters must be present in the data feed.

 <esales-recommendation-product-list
     zone-id="sp1"
     size="8"
     carousel
     algorithm="PERSONAL"
     label="Recommendations for you">
 </esales-recommendation-product-list>

For a sample integration, see Live examples. Note that access to the live examples requires a password. Retailers should contact their appointed Apptus Success Manager to gain access to password protected content. Ensure to replace the webApiId and market in the example to test with your own data.

For the full component specification, see the Component API.

Cart recommendations

Cart recommendations are now available in eSales Lifestyle. Cart recommendations are based on multiple aspects of product relations between the cart content and the other products in a retailers catalogue. The product relations are based on both aggregated behavioural data as well as data similarities.

As for all product listing functionality in eSales Lifestyle, general product relevance such as newness or stock levels plays a part in the algorithm as well.

Cart recommendations

As the name indicates, this recommendation listing is well suited for a cart page. It can also be used, and displayed, in the moment when a client adds something new to their cart.

Cart recommendations, like other types of recommendation areas, supports combined usage on a page with automatic deduplication. The Cart recommendations also support filtering. For example, a price filter can be set to upsell products that will help the visitor get free shipping.

How to use

Add the Recommendation product list component on the page where it should be displayed, with the attribute algorithm set to CART. When this algorithm is used, the attribute cart must also be set, containing a comma-separated list of product keys.

The product keys must match the format provided in the data feed and the keys should reflect the content of the cart at request time. If filters are set, attributes targeted as filters must be present in the data feed.

 <esales-recommendation-product-list
     zone-id="sp1"
     size="8"
     carousel
     cart="P1,P2,P3"
     algorithm="CART"
     label="You might also like">
 </esales-recommendation-product-list>

For a sample integration, see Live examples. Note that access to the live examples requires a password. Retailers should contact their appointed Apptus Success Manager to gain access to password protected content. Ensure to replace the webApiId and market in the example to test with your own data.

For the full component specification, see the Component API.

2020-03-10

Links to product pages are dynamically created based on the interactions a visitor have with sizes in a size facet. When a visitor selects a size in a size facet in any listing, eSales Lifestyle will automatically take the visitor to a product page with that size already preselected when clicking on a product. This means that the product links in all product cards are also dynamic based on preselected sizes.

How to use

With a correct data feed, it just works! No further integration or configuration is needed to make this happen.

Note: Links at a variant level must be correctly provided in the data feed and include the size state.

2020-03-09

Recommendations for landing pages

Recommendations displaying the top products of a given selection are now available for all landing pages. Engage visitors through highlighting the best products of the newest collection on the start page, showcase a portion of an ongoing sale, or complement inspirational pages with the top products from a few selected sub categories.

Recommendation listing

The recommendation listing uses the same sophisticated relevance algorithm that is available for category pages. It determines the top products through product lifecycle analysis such as stock level changes and newness, customer behavioural insights including trend analysis through Apptus patented Top Seller algorithm (US Patent No. 10 528 577), the selected exposure strategy, and merchandising actions such as promotions or demotions.

The recommendation listings includes an option to provide a link to a page containing all products in the selection, for example a collection page or a category page. Due to the shared relevance algorithm, a visitor will have a consistent experience through out the user journey.

It is also possible to add multiple recommendation listings on the same page. Should the same product happen to be included in both selections, eSales Lifestyle will deduplicate the products between the listings automatically. This ensures maximum use of the limited screen real estate and not accidentally waste it on displaying the same product twice.

How to use

Add the Recommendation product list component on the page where it should be displayed, assigned with the desired filter. Attributes targeted as filters must be present in the data feed. The following example filters on the custom attribute collection with the value SUMMER_COLLECTION.

 <esales-recommendation-product-list
     zone-id="sp1"
     size="8"
     carousel
     data-custom.collection="SUMMER_COLLECTION"
     label="Summer is here!"
     showMoreLink="https://www.esalesdrivensite.com/summer-is-here">
 </esales-recommendation-product-list>

For a sample integration, see Live examples. Note that access to the live examples requires a password. Retailers should contact their appointed Apptus Success Manager to gain access to password protected content. Ensure to replace the webApiId and market in the example to test with your own data.

For the full component specification, see the Component API.

2020-03-06

Automatic data extraction for product recommendations

As another step towards a great end user experience through automation, eSales Lifestyle now extracts selected concepts from unstructured data. By applying the concepts as an additional input signal to our algorithms, it has been possible to raise the quality of the alternative recommendations significantly, and this without any additional work or data input from retailers.

Automatic data extraction

A lot of effort is often put into product categorisation and grouping. However, many times the categorisation lacks the necessary structure for it to be utilised in an optimal way.

For example, in the case of alternative recommendations, an item on sale might not be a great alternative to another simply because both are on sale. The same is applicable for products that have been grouped together as hats & scarves, knitted, or happens to belong to the same handpicked summer collection. Their externally provided grouping seldom provides the necessary segmentation nor granularity needed to provide insights for what makes suitable alternative recommendations.

A lot of resources are often spent on creating product content, but providing it in a truly structured manner is tedious at best. For many retailers it is simply insurmountable. Through automatically extracting important concepts, eSales Lifestyle is able to utilise these content creation efforts as if it was structured data.

By combining these automatically extracted insights with behavioural data and knowledge about the product lifecycle, visitors will now receive even better recommendations.

How to use

It just works! No further integration or configuration is needed to make this happen.

2020-02-24

Custom prices

Custom prices within a market is now an available feature in eSales Lifestyle. It can be used to show prices of the product assortment in local currencies, or to handle member or VIP prices.

Custom local prices

It can for example easily be integrated with external currency providers and is suitable for retailers supporting shipping to multiple locations, but not fully supporting different markets.

Custom prices are fully compatible with price filtering and sorting, and prices will automatically be updated and rendered in both product listings and in price filters.

How to use

Supply custom prices in the data feed for each applicable product. A price must be tied to an identifier, the price id.

<custom_prices>
    <price id="EUR">
        <selling_price>9.99</selling_price>
        <list_price>12.99</list_price>
    </price>
</custom_prices>

When initiating the script, the applicable price identifier should be provided. This must match a provided price id in the product feed. If the price should be displayed using a different currency symbol, this must also be provided in the script. This is for example applicable when using custom prices to display prices in local currencies, while not necessary if used to display other prices e.g. VIP prices or the default list price.

priceId: EUR
currencySymbol: '€ '
currencyBefore: true

Keeping the state of which price identifiers that are applicable to different clients, such as selected currencies, is assumed to be stored externally.

Note that products lacking price information for a given price id will be omitted from all results, when that price id is specified in the script initialisation.

2020-02-10

Vertical facets

Facets now supports a vertical layout as well as exploded values, meaning displaying values immediately on page load without the visitor having to expand or click on any specific facet. With these new facet options in combination with custom layouts, facets could for example be positioned the side of the product listing or within a drawer.

Expanded vertical facets example

How to use

Vertical facets are available in custom layouts where the Facet list component is used on the page as a separate component. Use the attributes vertical and exploded respectively to get the desired behaviour. The following example will result in vertical facets with exploded facet values.

<esales-facet-list vertical exploded></esales-facet-list>

For a sample integration of a search page using vertical exploded facets, see Live examples. Note that access to the live examples requires a password. Retailers should contact their appointed Apptus Success Manager to gain access to password protected content. Ensure to replace the webApiId and market in the example to test with your own data.

For the full component specification, see the Component API.

Custom layouts

As a step towards making eSales Lifestyle more flexible, the web components have been split up in to smaller, fully cooperative, elements. For example, the Search results component have been split into the separate components for the search header, the facets, the product sorting, and the product listing.

Custom layouts - Search results page example

This allows retailers to easily create a customized layout while fully retaining the functionality and cross component interaction. The all including top level components are still a great choice for a site, but the new smaller components allows for the different parts to be positioned individually. For example having centred facets, sticky facets, or facet toggles are now possible.

Custom layouts - Navigation page example

How to use

Replace the top level components, the Search results component or the Navigation page component, with the smaller new components that constitute the pages, with placement according to a desired layout. The following example uses the new smaller components instead of the Navigation page component.

<div class="header">
    <div class="category-header">
        <esales-category-title></esales-category-title>
        <esales-breadcrumbs></esales-breadcrumbs>
    </div>
    <div class="filter">
        <esales-facet-list></esales-facet-list>
        <esales-sort-by></esales-sort-by>
    </div>
</div>
<div class="main">
    <esales-navigation-tree></esales-navigation-tree>
    <esales-primary-product-list></esales-primary-product-list>
</div>

The full specification can be found in the Component API.

2020-01-23

Email recommendations

Email Recommendations is an add-on for Apptus eSales Lifestyle clients that provides personalised recommendations within emails to customers.

Email Recommendations

Email Recommendations includes several powerful features for customisation in an easy to use interface in the Apptus Email app.

  • Create custom product display templates for both desktop and mobile devices.
  • Define products to be included or excluded for each campaign.
  • Choose recommendation types per campaign.
  • Test and preview templates and campaigns with real data.
  • Smart image caching.
  • View campaign statistics.

How to use

Retailers can contact their appointed Customer Success Manager about availability and pricing. Visitor Identification must be properly integrated before use. Read more about Email Service Provider requirements and the setup and Get Started!

2020-01-14

Custom icons

Custom font icons

It is now possible to use custom font icons in the web components. This allows retailers to further change the look and feel towards their branding. An external .woff-file containting the font glyphs can be used to change the iconography and replace all or any icons used.

How to use

Create a .woff-file containing the desired icons according to the custom font icon specification, see Theming API. Add the full path to the .woff-file to the script used for the esales.init function, see Script Initialisation.

// init-esales-lifestyle.js
esales.init({
...
iconUrl: 'https://cdn.esalesdrivensite.com/custom-icons.woff',
...
});

2019-11-18

Mobile image performance enhancement

Page speed and reduced data consumption is an important factor, especially for visitors on mobile devices. To increase the performance and reduce the overall data usage for a visitor it is now possible to supply images in multiple image sizes. The eSales Lifestyle components will automatically use the best suited image resolution for the current context by utilising the native browser support for handling multiple image resolutions.

How to use

Supply images in all suitable formats in the Images section of the products in the data feed.

<images>
    <image type="model">
        <url width="200">//cdn.esalesdrivensite.com/images/123-B_model.jpg?preset=200x200</url>
        <url width="600">//cdn.esalesdrivensite.com/images/123-B_model.jpg?preset=600x600</url>
    </image>
</images>

SEO meta data

SEO meta data - Canonical tags, dynamic page title and meta description

A navigation page can be reached through multiple URL paths. To ensure that search engines reward and score the navigation page properly even though multiple pages display the same content, automatic canonical URL generation is now supported.

Further more, support for generating and setting specific page titles as well as meta descriptions for category pages is now available.

How to use

Enabling of automated canonical URLs and dynamic page titles are managed in the Settings tab in the Experience app. Meta descriptions and specific page titles can be set for each category in the Navigation tab in the Experience app.

The footer slot in the Navigation assistant component supports a new attribute, fixed, that fixates the position of the slot at the bottom of the Navigation assistant. This can for example be used to have links to pages for store locations and contact information visible at all times.

How to use

Add the additional attribute fixed with the value true to the footer slot. For more information, see Slots for the Navigation assistant.

<header>
    <nav>...</nav>
    <esales-navigation-assistant>
        ...
        <span slot="footer" fixed="true">Fixed at the bottom.</span>
    </esales-navigation-assistant>
</header>

2019-10-10

Product life cycle

The trend and behaviour analysis part of the product ranking in eSales Lifestyle has become even more sophisticated. It now understands concepts that affects the product life cycle, such as a product being put on sale or becoming out of stock. This affects multiple areas of ranking, that is search results, category listings, phrase suggestions, product suggestions, alternative recommendations, complementary recommendations, and facet relevance.

Product life cycle based product ranking

Extensive product life cycle analysis and research has enabled eSales Lifestyle to a greater understanding of how purchasing trends tie together with a product's current state in its life cycle. For example, eSales Lifestyle understands that a high performing product on sale doesn't necessarily keep selling well when the sale is over. Another example is that it understands that out of stock products don't sell well because they can't be purchased rather than them being unpopular. It might even be that high popularity caused some products to quickly become out of stock in the first place.

The newness of products is another facet of a product's life cycle that has been enhanced further. New products needs increased exposure to acquire a correct evaluation of their popularity, but exploratory exposure comes at the cost of exploiting the insights of how they perform. Meaning unpopular new products shouldn't keep taking up screen real estate that can be better used by popular products once they've had the chance to prove themselves. eSales Lifestyle caters for this through greater initial exposure of new products with especially reactive and clever ranking of this segment to avoid overexposure.

Combining these product data insights with trend sensitivity in a clever way, allows eSales Lifestyle to adapt even faster.

How to use

It just works! No further integration or configuration is needed to make this happen.

2019-09-23

SEO preamble texts

SEO preamble texts

Preamble texts to display above the facets in each category can be added in the Experience app. Texts are displayed in both desktop and mobile view. Longer texts are truncated but can be expanded by a visitor by tapping or clicking an expand label, here with the text VIEW MORE. The preamble expand label can be localised in the Localisation tab in the Experience app. The preamble text feature itself does not require any actions by developers to be used.

How to use

Preamble text can be added and edited in the SEO section for each category in the Navigation tab in the Experience app.

Recommendations carousels

Recommendations carousels

The Recommendation component now supports product carousels for both desktop and mobile devices. This is done with the addition of the attribute carousel to the component. An additional attribute, breakpoint, can be added with a pixel value that determines when the carousel scroll arrows are to be either outside or inside of the carousel. The default value is 1050.

How to use

Add the attribute carousel to a Recommendation component. The following example illustrates an alternative recommendation carousel with a window breakpoint of 1200 pixels.

<esales-recommendation zone-id="sp2" size="8" carousel breakpoint="1200" type="ALTERNATIVE" label="Similar items"></esales-recommendation>

For more information, see Product Page Integration.

Out of stock visualisation

Out of stock visualisation

The visualisation of products that are out of stock, but still are to be displayed according to the Out of stock options, has been improved. Product groups where all variants of a product in the group are out of stock will have the product image dimmed with a diagonal line across it. Product groups where all variants of all products are out of stock will have the image completely dimmed with no variants shown, and with a label indicating that the product is sold out. The label can be localised in the Localisation tab in the Experience app.

How to use

Visual enhancement is applied automatically for displayed out of stock products. Note that out of stock visibility is configurable and that the effects only can be seen if out of stock products are displayed.

2019-08-26

Performance improvements

The component script will now dynamically load required polyfills only when necessary. This way, modern browsers that already has the functionality built-in will no longer need to load and run this code. The files esales-lifestyle-polyfills.js and esales-lifestyle-polyfills.es5js are deprecated and can safely be removed.

The modern JavaScript bundle, esales-lifestyle.js, have been improved together with the script initialisation. The updates will allow modern browsers to use this bundle, resulting in better performing and less code.

With both improvements above active at the same time, the total script size delivered to a modern browser will be reduced by ~42%. In Lighthouse page audits a ~20-25% reduction is observed in First Contentful Paint, Speed Index, Time to Interactive, and more.

Performance improvements may vary

The performance test was made using Lighthouse with the Device setting Mobile and the Throttling setting Simulated Slow 4G, 4x CPU Slowdown. The test was executed without any other scripts on the test page other than the Search results component.

The implementation of scripts on a site may block the eSales Lifestyle script with synchronous scripts. Note that older browsers, such as Internet Explorer 11, will download approximately the same amount of code as before. For more information about performance improvements using differential loading, see Dive Deeper.

How to use

Remove the polyfill scripts esales-lifestyle-polyfills.js and/or esales-lifestyle-polyfills.es5js and update the script initialization snippet.

2019-06-25

Size filters

Size filters example

It is now possible to create product selections based on size. This is particularly useful when highlighting size oriented selections, such as Curves or Petite. For example, a category Petite can be created with the product filter to include only products sold in smaller sizes. Similar to other categories, the autocomplete and search will automatically pick up the category title or other connected search terms and utilize them appropriately.

How to use

When creating product selections such as promotions, demotions, or categories in the apps, Size is available as a filter option.

Out of stock options

Example of changes using the Out of stock options

It is now possible to control the visibility and placements of products and variants that are out of stock with the Out of stock section in the Settings tab in the Experience app.

Option Description
Display out of stock sizes in product card The size is visible in the product card when enabled, but with a strike-through effect applied on the text. The size is not visible when disabled.

Can be useful to be disabled if a large portion of the product catalogue has a large number of sizes, and many sizes are out of stock.
Display out of stock products in product list When enabled, products are visible but with the text defined for Out of stock displayed. The text is defined in the Product cards section in the Localisation tab in the Experience app. Products that are out of stock are not visible in product lists when disabled.

It is generally recommended to keep products out of stock displayed in product listings as visitors may be confused when not finding products they've previously interacted with.
Display out of stock products in product card Products that are out of stock are visible in the product card when enabled.
Products that are out of stock are not visible in the product card when disabled.

Can be useful to be disabled if a large portion of the product catalogue has a large variety of colour, and many colours are out of stock.

How to use

Enable or disable options in the Out of stock section in the Settings tab in the Experience app. It is recommended to preview the resulting changes before publishing the settings.

Display name support for attribute values

Display name support of attribute values

Since all attribute values used for product selections must be based on stable values, there are occasions where a merchandiser may have to work with system generated numbers. Support for display names of attribute values have been added to facilitate working with product selections with unintelligible values. This means that the product selection remains stable, while it is possible to work with readable names in the apps.

How to use

Supply display names in the data feed for values where identifiers are not human friendly. The following illustrates the syntax of the category Jackets with an external id 361: <category name="Jackets">361</category>.

2019-06-14

Filterable list component

Deprecated feature

The Filterable list component is deprecated and replaced by the Recommendation product list component. For more information, see Recommendations for landing pages.

Pre-filtered products with the Filterable list component

A new component, Filterable list, is now available. It contains a pre-filtered product list with connected facets. Unlike the Search results component and the Navigation page component, this component does not require neither a search phrase nor a particular page route to be used. It is a product listing that can be used on any page that is independent from the navigation structure and the search functions.

An example of where this could be of interest is on a unique collection page, decorated with a custom title and lots of imagery. A product listing targeting that specific collection would be suitable to use here.

2019-06-12

Size cleaning

Size cleaning example

Size cleaning example

Size cleaning is a feature that automatically extracts and interprets size information from uncurated size values that are provided in mixed formats the data feed. This enables a much cleaner set of values within the size facet without the need of any manual curation of the data feed. This feature is not needed if the data feed already contain purely curated values.

Size cleaning uses several methods to curate values including:

  • Splitting values such as XS/S to XS and S respectively for the size facet while maintaining the correct presentation in the product card.
  • Combining values such as One Size, one size, and O.S under a common value by selecting the most common representation for the product card.
  • Splitting of multiple sizes provided in different formats such as M=44/46.
  • Automatic separation of formats.

How to use

Size cleaning is enabled by default. The feature can be disabled in the Size cleaning section Settings tab in the Experience app. It is recommended to preview the resulting changes to the facets before publishing the settings.

2019-06-11

Localisation interface update

Experience app - Localisation - Home

The view for localising texts has been improved by a clearer user interface for input fields including recommended text lengths, a table of contents to easier find values to localize, and a visualization of colours in the interface.

2019-06-10

Quick buy button

Themeable Quick buy button

Support for adding a quick buy button to the product cards have been added. The image above shows the default visuals of the button but it can be themed to a different look using the Theming API. The button will provide an event with information of the product that was targeted. This button can also be used to enable quick view or similar modal functionality, and the text of the button can be localized using the Localisation tab in the Experience app.

How to use

  1. Enable the button by specifying --ae-product-quick-buy-position in the theme stylesheet.
  2. (Optional) Style the part button-quick-buy in the theme stylesheet.
  3. Integrate the desired modal functionality upon a triggered event.

Subscribe

The eSales Lifestyle Changelog Newsletter is changing platforms. Sign-up will be available again in January 2021.


Last update: January 13, 2021
×
Copyright

This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.

CLOSE