Refresh Anchor Tag on Each Click with Javascript

Question

I have an ecommerce site that, every time someone clicks on "Add to Pallet" (we call it a pallet instead of a cart) the page refreshes to the same page and positions itself to the div of that product (try it out here: http://www.boostliquidation.com/). This happens using this Javascript:

 $('input.returnLink').each(function(){
     $(this).attr('value',window.location.href + $(this).attr('data-skuhash'));
     });

And this anchor tag which is placed in a hidden input tag before the "Add to Cart" button:

<input type="hidden" value="back" name="return_to" class='returnLink' data-skuhash='#{%     for variant in product.variants %}{{variant.sku}}{% endfor %}' />

(The code in the {% %} is a language called Liquid used with Shopify websites).

This works fine... but only on the first product. It adds the SKU number preceded by a # in the address bar. If a user adds another product, it refreshes to the top of the page, because it amends the SKU number to the existing SKU number already showing in the address bar.

How can I get the products added after the first to replace the existing SKU with their own so they'll refresh back to the product and not back to the top of the page?

Instead of using $(this).attr("value", a value), you should try using $(this).val(a value) — Phil-R

tedski tedski · Accepted Answer · 2011-12-30T18:39:05

I'd probably try to use the string.replace()

var str = window.location.href;
var hash = $(this).attr('data-skuhash');

if (str.match('#\w\w+'){
   str.replace('#\w\w+', hash);
} else {
    str = str + hash;
}

Looks for any hashes on the end of the url, replaces if it finds one, adds one if it doesn't.

Refresh Anchor Tag on Each Click with Javascript

1 Answers