0

I just removed the whole question so I can start from scratch.

var redirectURL = decodeURIComponent(window.location.href);
if (redirectURL.includes("men")) {
  alert('Mens');
  $('#imageDiv').css("background", "url('https://mydomainname.com/wp-content/uploads/2023/04/STORE2.png')");  
} 
else if (redirectURL.includes("women")) {
  alert('Womens');  
  $('#imageDiv').css("background", "url('https://mydomainname.com/wp-content/uploads/2023/04/STORE.png')");     
}
#imageDiv{
  background: url(https://mydomainname.com/wp-content/uploads/2023/04/compressed-Recovered.png);
    width: 100px;
    height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="imageDiv"></div>

This is not working as desired. The alerts show as they should but the image is not changing. THis is loading at the bottom of my page.

Answer:

var redirectURL = decodeURIComponent(window.location.href);
if (redirectURL.includes("men")) {
  const imageDiv = document.getElementById('imageDiv');
  imageDiv.dataset.style = "men";
} 
else if (redirectURL.includes("women")) {
  const imageDiv = document.getElementById('imageDiv');
  imageDiv.dataset.style = "women";
   
}
2
  • is men and women include as a path in the url?
    – Developer
    May 18 at 20:14
  • 1
    I got it sorted out. Thank you for the help everyone
    – Diamond D
    May 18 at 20:54

3 Answers 3

0

I would consider avoiding parsing the path unless you must. Does something like below work as expected?

`if (window.location.pathname.includes('women')) {
    image.src = 'women-url';
} else {
    image.src = 'men-url';
}`
0

Seeing your problem, the following solution occurs to me

in html

<div id='banner'>...<div/>

in css

#banner[data-selection='womans'] {
  background: url(...)
}

#banner[data-selection='mans'] {
  background: url(...)
}

in javascript

const ctrlText = window.location.pathname.includes('womens');
const banner = document.getElementById('banner');
if (ctrlText) {
  banner.dataset.selection = ctrlText.toLowerCase();
} else {
  banner.dataset.selection = 'mens';
}

although personally and whenever you can, it would be better if the default div or img are manipulated in the layout from the backend.

0

You can use data attributes to store the "style" that you want to refer to. Then use CSS selectors to target the data attribute. Also you would want to start with searching for WOMEN, because WOMEN includes the word MEN.

So searching for Men if the URL contains Women it would still return true.

const imageDiv = document.getElementById('imageDiv');
imageDiv.dataset.style = (window.location.pathname.includes('womens')) ? "womens" : "mens"
#imageDiv{height:300px;}

#imageDiv[data-style='womens'] {
  background: url('https://fakeimg.pl/600x400?text=WOMEN')
}

#imageDiv[data-style='mens'] {
  background: url('https://fakeimg.pl/600x400?text=MEN')
}
<div id='imageDiv'><div/>

5
  • I cannot seem to get this to work on my site. Working in JS fiddle but some reason not in wordpress.
    – Diamond D
    May 18 at 20:25
  • @DiamondD is there any errors in the console?
    – imvain2
    May 18 at 20:27
  • no errors. Could it be cache?
    – Diamond D
    May 18 at 20:32
  • There are so many reasons why its not working in your website. Cache is a great place to start.
    – imvain2
    May 18 at 20:33
  • I got it to work by combining some answers. I will post in my question
    – Diamond D
    May 18 at 20:53

Your Answer

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

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