1

I need to redirect user to PDP page from PLP page not just on click of image or product name, but on click of whole card. As per w3 standards I can not write div within anchor otherwise I would have wrapped the card inside anchor tag. So I used js code to achieve it.

<script type='text/javascript'>
require([
        "jquery"
    ], function($){
        $('.product-item-link').click(function() {
        window.location.href = "<?= $escaper->escapeUrl($_product->getProductUrl()) ?>"
        });
    });
</script>

As the script is outside of the foreach loop, it does not work as expected. Is there any other way?

2
  • Which foreach loop? What do you mean by "does not work as expected?" Commented Jul 3 at 13:19
  • I mean foreach loop on PLP page. It redirects to some other PDP instead of respective PDP
    – Sejal Shah
    Commented Jul 3 at 13:23

1 Answer 1

1

You could change div to span with css display:block; and wrap it inside anchor tag and be compatible with w3 standards, personally I like this more than the JavaScript solution.


Alternatively, for your JS solution, in the loop you could add data attribute on the .product-item-link elements like e.g: data-url="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>" and then in your JavaScript function get that URL like:

<!-- html -->
<div class="product-item-link" data-url="http://your-url.com">(...)</div>
// with jQuery
var url = $('.product-item-link').data('url');
// with vanillaJS
var url = document.querySelector('.product-item-link').dataset.url;
// your code adjusted
require(["jquery"], function($){
    $('.product-item-link').click(function() {
        window.location.href = $(this).data('url');
    });
});

Even better, instead of creating a data-url attribute, get/add data-product-id attribute and construct the correct URL in the JavaScript yourself, but the idea is the same, you need to get some data from the div/html.

1
  • Thank you @nurgiel I added data-url="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>"
    – Sejal Shah
    Commented Jul 5 at 6:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.