jQuery: Add Class on page load for specific URL path

Question

I have a specific product page within Shopify (although this could certainly apply to any URL with a variant selected by default in the URL query. I'd like it when this page loads, a class is immediately added to one of the div's upon load.

Basically, it's looking for a URL that contains this variant in the URL. So I suppose I could just shorten it to just ?variant=12345 instead. Maybe not?

I'm trying this jQuery script but it's just not working. What might be the proper solution here?

$(document).ready(function() {

var url = window.location.pathname;
if (url.indexOf('/products/my-product?variant=12345') !== -1) {
  $(".sales-widget").addClass('sales-on');
}

Does this answer your question? Get url path and add class active on li — Sridhar
– Sridhar, Commented Nov 18, 2022 at 5:45

samnoon · Accepted Answer · 2022-11-18 05:39:16Z

1

To take parameters in URI, you need to use both `location.pathname` and `location.search` as following:

var url = (window.location.pathname + window.location.search).substr(1);

See this example:

$(document).ready(function() {

  var url = (window.location.pathname + window.location.search).substr(1);
  if (url.indexOf('/products/my-product?variant=12345') !== -1) {
    $(".sales-widget").addClass('sales-on');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Nov 18, 2022 at 5:39

samnoon

1,8032 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery: Add Class on page load for specific URL path

1 Answer 1

To take parameters in URI, you need to use both `location.pathname` and `location.search` as following:

See this example:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

To take parameters in URI, you need to use both location.pathname and location.search as following:

See this example:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

To take parameters in URI, you need to use both `location.pathname` and `location.search` as following: