Example: A user is on a category list page that has several products that all have different color options. He chooses a color on one product that nicely changes to the color he selected. Then clicks to go to its detail page. How can I pass that color attribute to the product detail page so that the user still sees the proper product color he originally selected? (by default, the product detail page shows the default product image(s) and you have to reselect your product color).

1 Answer 1


I came up with a solution that works for me. Might be kind of a hack, but it's working well. If others have better ways to accomplish, I would love to check it out. Passing product attributes from the category list to the a product detail page is important user experience. If the user is on a category list page and changes a product's color from black to blue, it's bad/confusing when they click to the details page and it's black again. Hopefully M2 will bake this type of a feature in with an upcoming release.

Here is my solution....

I made a 2-part update in my Magento_Swatches/web/js/swatch-renderer.js

Part 1 ) In the "_OnClick" function of the swatches, I add the color attribute to the product item's href url (I used the addParam script from a nice stackoverflow post: https://stackoverflow.com/questions/8902390/constructing-a-url-with-parameters-using-jquery). So now when a user clicks on a color swatch, the attribute gets placed on to the item's detail page url:

if ( $( 'body' ).hasClass('page-products') ) {
    var productUrl = this.element.parents('.product-item').find( "a" ).attr( "href");
    addParam("color", $this.attr('option-label'));

    function addParam(name, value) {
        var reg = new RegExp("([?&]" + name + "=)[^&]+", "");

        function add(sep) {
            productUrl += sep + name + "=" + encodeURIComponent(value);

        function change() {
            productUrl = productUrl.replace(reg, "$1" + encodeURIComponent(value));
        if (productUrl.indexOf("?") === -1) {
        } else {
            if (reg.test(productUrl)) {
            } else {

    this.element.parents('.product-item').find( "a" ).attr( "href", productUrl );

Part 2) On the "_onGalleryLoaded" function I get the parameter from the url (I used a great script that I found here: http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html) and then use jquery to emulate a click on the swatch:

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
$(".swatch-option.color[option-label="+ getUrlParameter('color') +"]").trigger("click");
  • Nice attempt. Throws an error if the attribute value contains spaces. Easy fix. +1 for saving me a little time. Commented Feb 22, 2018 at 19:55

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.