Introduction

The Responsive Starter Store provides functionality that can automatically trigger a click on a specific clickable element on the rendered page. This functionality is for example required to retrigger the Add to Wish List interaction after an anonymous user has to log in to add a product to the wish list.

This functionality works via a URL hash/fragment navigation that is used as a selector for elements with that specific CSS class. Since this is a very generic approach, it can be used to trigger any clickable element on a page that can be selected via a CSS class by a matching URL fragment.

<server>/INTERSHOP/web/WFS/inSPIRED-inTRONICS_Business-Site/en_US/-/USD/ViewProduct-Start?SKU=201807181&CategoryName=videoconferencesystems&CatalogID=presentation-conferencing#share-label

This could lead to unintended interactions that might harm the security impression of the web site.

To still support the intended functionality it is not necessary to provide such a generic CSS class selector-based approach. Therefore, this functionality has been changed and requires adjustments in project customizations if the existing functionality was used intentionally.

Migration

The underlying functionality was changed in a_responsive/app_sf_responsive/staticfiles/cartridge/static/default/js/navigation.js.

Elements that should be clickable are usually given a specific CSS class, e.g. add-to-wishlist_THE-PRODUCT-SKU:

<button type="submit" class="btn add-to-wishlist <isprint value="#CssClass#"/> add-to-wishlist_<isprint value="#ProductBO:SKU#"/>"

With the changed functionality, such elements require a specific data-url-fragment-navigation attribute with the value used in the fragment navigation:

<button type="submit" class="btn add-to-wishlist <isprint value="#CssClass#"/>" data-url-fragment-navigation="add-to-wishlist_<isprint value="#ProductBO:SKU#"/>"

A marker to search for places in the ISML templates that build on this functionality is TargetURLFragment.