How to resolve the issue of URL is not navigating to PDP page when we click on image or name of Related items slider in PDP and cart

Some time In specifically iPhone, iPad and android devices the URL will not navigate when click on related items slider or similar sliders we can use this solution to resolve the issue.

Solution:

Sometime the issue accrued due to not using full URL instead we have used the extended URLs like “/test-item-1” , “/test-item-2” rather than using “https://www.domain-name.com/test-item-1”, “https://www.domain-name.com/test-item-2”.

Still the issue is not resolved after using the full URL add an event to navigate for the item pages, refer below solution.

Template: item_relations_related_item.tpl

<div itemprop="itemListElement" data-item-id="{{itemId}}" data-track-productlist-list="{{track_productlist_list}}" data-track-productlist-category="{{track_productlist_category}}" data-track-productlist-position="{{track_productlist_position}}" data-sku="{{sku}}">
	<div data-view="ItemThumbnail"></div>
	<a class="item-relations-related-item-thumbnail" data-url={{dataUrl}} data-action="navigateToItem">
        <img src="{{resizeImage thumbnail.url 'thumbnail'}}" alt="{{thumbnail.altimagetext}}"/>
	</a>
	<a data-url={{dataUrl}} data-action="navigateToItem" class="item-relations-related-item-title">
		<span itemprop="name">{{itemName}}</span>
	</a>
	<div class="item-relations-related-item-price" data-view="Item.Price">
	</div>

	{{#if showRating}}
		<div class="item-relations-related-item-rate" data-view="Global.StarRating">
		</div>
	{{/if}}
</div>

Javascript:

Modules: ‘ItemRelations.RelatedItem.View’ (ItemRelationsRelatedItemView)

_.extend(ItemRelationsRelatedItemView.prototype, {
				events: _.extend({},ItemRelationsRelatedItemView.prototype.event,{
					'click [ data-action="navigateToItem"]' : 'navigateToItem'
				}),
				navigateToItem :function (e) {
					const dataUrl = e.currentTarget.attributes['data-url'].value;
					Backbone.history.location.href = dataUrl;
				},
				getContext: _.wrap(ItemRelationsRelatedItemView.prototype.getContext, function (fn) {
					let context = fn.apply(this, _.toArray(arguments).slice(1));
					context.dataUrl = this.model.get('_url');
					return context;
				})
			});