How to add right a custom CSS & Javascript code

Solved
Highlighted
Shopify Partner
87 10 13

Hi, 

 

I am trying to add a countdown timer that only has CSS and js. I added all the custom code In a new file on the Snippets section in a Narrative theme

 

The file is called countdown-timer.liquid, and I'm trying to add the countdown timer with this code {% include 'countdown-timer.liquid'%}. But I don't know how to correctly add this custom code on the snippets file, I found the code on this page (click here).

 

I'll appreciate any help.

 

 

 

 

Was useful? then please like and accept as solution
Not really sure how to improve your store? Ask us at porrasc940@gmail.com
0 Likes
Highlighted
Trailblazer
192 33 46
{% include 'countdown-timer' %}

I think you need to leave out '.liquid'

1 Like
Highlighted
Shopify Partner
87 10 13

It did not fix

Was useful? then please like and accept as solution
Not really sure how to improve your store? Ask us at porrasc940@gmail.com
0 Likes
Highlighted
Shopify Partner
87 10 13

I think is on the snippet file:

I hope you can find out what is wrong, or just what I have to add to start the countdown timer.

 

<style>

{width: 100%
  {height: 100%
    {margin: 0

 

 display:table
      
<style>
canvas{
  width: 900px
  {height: 200px
  {display: block
  {position: relative
  {background: transparent
  {margin: 40px auto
  }
  
{
  background: #000
  {background-image: url()
  {background-position: top center
  {background-size: cover
  {color: #fff
  {margin: 0
  {padding: 0
  {overflow: hidden
  {display: table-cell
  {vertical-align: middle
  text-align: center
}
</style>




<script>
var ringer = {
  //countdown_to: "10/31/2014",
  countdown_to: "10/31/2020",
  rings: {
    'DAYS': { 
      s: 86400000, // mseconds in a day,
      max: 365
    },
    'HOURS': {
      s: 3600000, // mseconds per hour,
      max: 24
    },
    'MINUTES': {
      s: 60000, // mseconds per minute
      max: 60
    },
    'SECONDS': {
      s: 1000,
      max: 60
  
    }
   },
  r_count: 5,
  r_spacing: 10, // px
  r_size: 100, // px
  r_thickness: 2, // px
  update_interval: 11, // ms
    
    
  init: function(){
   
    $r = ringer;
    $r.cvs = document.createElement('canvas'); 
    
    $r.size = { 
      w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)), 
      h: ($r.r_size + $r.r_thickness) 
    };
    


    $r.cvs.setAttribute('width',$r.size.w);           
    $r.cvs.setAttribute('height',$r.size.h);
    $r.ctx = $r.cvs.getContext('2d');
    $(document.body).append($r.cvs);
    $r.cvs = $($r.cvs);    
    $r.ctx.textAlign = 'center';
    $r.actual_size = $r.r_size + $r.r_thickness;
    $r.countdown_to_time = new Date($r.countdown_to).getTime();
    $r.cvs.css({ width: $r.size.w+"px", height: $r.size.h+"px" });
    $r.go();
  },
  ctx: null,
  go: function(){
    var idx=0;
    
    $r.time = (new Date().getTime()) - $r.countdown_to_time;
    
    
    for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);      
    
    setTimeout($r.go,$r.update_interval);
  },
  unit: function(idx,label,ring) {
    var x,y, value, ring_secs = ring.s;
    value = parseFloat($r.time/ring_secs);
    $r.time-=Math.round(parseInt(value)) * ring_secs;
    value = Math.abs(value);
    
    x = ($r.r_size*.5 + $r.r_thickness*.5);
    x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness));
    y = $r.r_size*.5;
    y += $r.r_thickness*.5;

    
    // calculate arc end angle
    var degrees = 360-(value / ring.max) * 360.0;
    var endAngle = degrees * (Math.PI / 180);
    
    $r.ctx.save();

    $r.ctx.translate(x,y);
    $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size);

    // first circle
    $r.ctx.strokeStyle = "rgba(128,128,128,0.2)";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();
   
    // second circle
    $r.ctx.strokeStyle = "rgba(953, 28, 12, 0.9)";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();
    
    // label
    $r.ctx.fillStyle = "#ffffff";
   
    $r.ctx.font = '12px Helvetica';
    $r.ctx.fillText(label, 0, 23);
    $r.ctx.fillText(label, 0, 23);   
    
    $r.ctx.font = 'bold 40px Helvetica';
    $r.ctx.fillText(Math.floor(value), 0, 10);
    
    $r.ctx.restore();
  }
}

ringer.init();
</script>

 

Was useful? then please like and accept as solution
Not really sure how to improve your store? Ask us at porrasc940@gmail.com
0 Likes
Highlighted
Trailblazer
192 33 46
canvas {
  width: 900px;
  height: 200px;
  display: block;
  position: relative;
  background: #666;
  margin: 40px auto;
}

Hi there,you put this at the bottom of your theme.scss file

0 Likes
Highlighted
Trailblazer
192 33 46

Then create a snippet called timer.liquid and copy below code n paste in there.

<script>

var ringer = {
  //countdown_to: "10/31/2014",
  countdown_to: "10/31/2020",
  rings: {
    'DAYS': { 
      s: 86400000, // mseconds in a day,
      max: 365
    },
    'HOURS': {
      s: 3600000, // mseconds per hour,
      max: 24
    },
    'MINUTES': {
      s: 60000, // mseconds per minute
      max: 60
    },
    'SECONDS': {
      s: 1000,
      max: 60
    },
    'MICROSEC': {
      s: 10,
      max: 100
    }
   },
  r_count: 5,
  r_spacing: 10, // px
  r_size: 100, // px
  r_thickness: 2, // px
  update_interval: 11, // ms
    
    
  init: function(){
   
    $r = ringer;
    $r.cvs = document.createElement('canvas'); 
    
    $r.size = { 
      w: ($r.r_size + $r.r_thickness) * $r.r_count + ($r.r_spacing*($r.r_count-1)), 
      h: ($r.r_size + $r.r_thickness) 
    };
    


    $r.cvs.setAttribute('width',$r.size.w);           
    $r.cvs.setAttribute('height',$r.size.h);
    $r.ctx = $r.cvs.getContext('2d');
    $(document.body).append($r.cvs);
    $r.cvs = $($r.cvs);    
    $r.ctx.textAlign = 'center';
    $r.actual_size = $r.r_size + $r.r_thickness;
    $r.countdown_to_time = new Date($r.countdown_to).getTime();
    $r.cvs.css({ width: $r.size.w+"px", height: $r.size.h+"px" });
    $r.go();
  },
  ctx: null,
  go: function(){
    var idx=0;
    
    $r.time = (new Date().getTime()) - $r.countdown_to_time;
    
    
    for(var r_key in $r.rings) $r.unit(idx++,r_key,$r.rings[r_key]);      
    
    setTimeout($r.go,$r.update_interval);
  },
  unit: function(idx,label,ring) {
    var x,y, value, ring_secs = ring.s;
    value = parseFloat($r.time/ring_secs);
    $r.time-=Math.round(parseInt(value)) * ring_secs;
    value = Math.abs(value);
    
    x = ($r.r_size*.5 + $r.r_thickness*.5);
    x +=+(idx*($r.r_size+$r.r_spacing+$r.r_thickness));
    y = $r.r_size*.5;
    y += $r.r_thickness*.5;

    
    // calculate arc end angle
    var degrees = 360-(value / ring.max) * 360.0;
    var endAngle = degrees * (Math.PI / 180);
    
    $r.ctx.save();

    $r.ctx.translate(x,y);
    $r.ctx.clearRect($r.actual_size*-0.5,$r.actual_size*-0.5,$r.actual_size,$r.actual_size);

    // first circle
    $r.ctx.strokeStyle = "rgba(128,128,128,0.2)";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,2 * Math.PI, 2);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();
   
    // second circle
    $r.ctx.strokeStyle = "rgba(253, 128, 1, 0.9)";
    $r.ctx.beginPath();
    $r.ctx.arc(0,0,$r.r_size/2,0,endAngle, 1);
    $r.ctx.lineWidth =$r.r_thickness;
    $r.ctx.stroke();
    
    // label
    $r.ctx.fillStyle = "#ffffff";
   
    $r.ctx.font = '12px Helvetica';
    $r.ctx.fillText(label, 0, 23);
    $r.ctx.fillText(label, 0, 23);   
    
    $r.ctx.font = 'bold 40px Helvetica';
    $r.ctx.fillText(Math.floor(value), 0, 10);
    
    $r.ctx.restore();
  }
}

ringer.init();
  
</script>
  

 

0 Likes
Highlighted
Trailblazer
192 33 46
{% include 'timer' %}

Then use the above line to put the timer at where you want.

You may need to adjust the css.

0 Likes
Highlighted
Shopify Partner
87 10 13

 

 

Was useful? then please like and accept as solution
Not really sure how to improve your store? Ask us at porrasc940@gmail.com
0 Likes
Highlighted
Trailblazer
192 33 46

Putting the css in the timer.liquid is a problem i found.

It is tested working so it depends on which place you put the code.

If you willing can pm me for an access to your theme.I can do for you free.

0 Likes
Highlighted
Shopify Partner
87 10 13

What do you mean " it depends on which place you put the code."

 

the {% include 'timer' %}  or the css? because I did exactly what you post it

Was useful? then please like and accept as solution
Not really sure how to improve your store? Ask us at porrasc940@gmail.com
0 Likes