Adding javascript into product item

Site URL: https://aqua-begonia-5k3p.squarespace.com/raffles/firestickamazon-fire-tv-stick-with-alexa-voice-remote-sawr4

To anyone who read this, 

Little bit stuck on a problem i have. If you look at the image i have attached i have a timer in the description box under the product which counts down, im trying to get this into the product item description where you can see a time left in bold. Now the ID keep changing so i cant use javascript to edit the id of the p tag, i have also tried to add a class name to the h3 tag with no joy either. Anyone else have an idea how to solve this. 

Basically i need my javascript timer to be above the participate button. 

Any help would be great.

Andy 

Which code did you use? Which id/class did you target?

Hey tuanphan, so the timer i have at the minute is targeting an ID using jquery, however the bold code that has a date i need this to time down. No the problem is what ever tag it has, its ID changes on each reload, and doesnt have a class name on it. 

I have done the count down file in the "Additional Tab" under the product item however i need this to work within the top right description and not the bottom. Hope this makes more sense. 

1 minute ago, Sozboss said:

Hey tuanphan, so the timer i have at the minute is targeting an ID using jquery, however the bold code that has a date i need this to time down. No the problem is what ever tag it has, its ID changes on each reload, and doesnt have a class name on it. 

I have done the count down file in the "Additional Tab" under the product item however i need this to work within the top right description and not the bottom. Hope this makes more sense. 

#yui will change

target #block-yui or #page or #collection

So this is all i have to go off, 

<div class="ProductItem-details-excerpt" data-content-field="excerpt" id="yui_3_17_2_1_1588077659003_437"><h3 style="white-space:pre-wrap;" id="yui_3_17_2_1_1588077659003_436">04/05/2020</h3></div>

So i inject this into the header

<script>
$( "#ProductItem-details-excerpt h3" ).addClass( "myClass yourClass" );
</script>

But nothing

1 minute ago, Sozboss said:

So this is all i have to go off, 

<div class="ProductItem-details-excerpt" data-content-field="excerpt" id="yui_3_17_2_1_1588077659003_437"><h3 style="white-space:pre-wrap;" id="yui_3_17_2_1_1588077659003_436">04/05/2020</h3></div>

 

So i inject this into the header

<script>
$( "#ProductItem-details-excerpt h3" ).addClass( "myClass yourClass" );
</script>

But nothing

It is CLASS, not ID

you need to use

$(".ProductItem-details-excerpt h3")

Apologies i re-typed it wrongly, i had it $(".ProductItem-details-excerpt h3") but still nothing. The h3 tag still shows up as <h3 style="white-space:pre-wrap;" id="yui_3_17_2_1_1588078305873_440">04/05/2020</h3>

I might add that im only using the free 14 day trial if this means anything

3 minutes ago, Sozboss said:

Apologies i re-typed it wrongly, i had it $(".ProductItem-details-excerpt h3") but still nothing. The h3 tag still shows up as <h3 style="white-space:pre-wrap;" id="yui_3_17_2_1_1588078305873_440">04/05/2020</h3>

I might add that im only using the free 14 day trial if this means anything

 

Have you declared jQuery library yet?

also, can you setup password & share link again? Your site is private

Got the class name to add onto the tag now, was referencing the library wrongly 

https://aqua-begonia-5k3p.squarespace.com/config/settings/site-visibility

Password: TestPage101

2 minutes ago, Sozboss said:

Yes i have added the library in. 

https://aqua-begonia-5k3p.squarespace.com/config/settings/site-visibility

Password: TestPage101

Can you post all code here?

--

4 minutes ago, tuanphan said:

Can you post all code here?

--

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(function () {
       $(".ProductItem-details-excerpt h3").addClass("test");
    });
</script>
<script>
// Set the date we're counting down to
var countDownDate = new Date("May 3, 2020 23:59:59").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementByClass("test").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementByClass("test").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

t seems complicated to me, not very familiar with JS.

You can also post this to some groups on FB.

• Squarespace Customization Resource Group. https://www.facebook.com/groups/squarespacecss/?ref=bookmarks
• Squarespace Community. https://www.facebook.com/groups/Squarespacecommunity/?ref=bookmarks