Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding javascript into product item


Sozboss

Question

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 

 

screencapture-aqua-begonia-5k3p-squarespace-config-2020-04-28-13_04_33.png

Link to comment
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

11 answers to this question

Recommended Posts

  • 0

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. 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0
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")

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

 

Link to comment
  • 0
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

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

--

image.thumb.png.8b6507c6e0f7147d1b35e3a2012b1d11.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
4 minutes ago, tuanphan said:

Can you post all code here?

--

image.thumb.png.8b6507c6e0f7147d1b35e3a2012b1d11.png

<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>

Link to comment
  • 0

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

You can also post this to some groups on FB.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...