How to add right a custom CSS & Javascript code

Solved
Highlighted
Shopify Partner
87 10 13

Hey, Dayton you are a genius !!

yes, I want to learn how did you do 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
Highlighted
Trailblazer
192 33 50

1. download this n save to your computer : https://code.jquery.com/jquery-2.2.3.min.js

1 Like
Highlighted
Trailblazer
192 33 50

2. upload this file you just downloaded to your theme as asset.The name after you upload shd appear as jquery-2.2.3.min.js

1 Like
Highlighted
Trailblazer
192 33 50

3. add this line to your theme.liquid at <head> section

 

 {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }}

Captureline.jpg

1 Like
Highlighted
Trailblazer
192 33 50

4. create a snippet called timer.liquid n paste the below code in it.

<style>
  canvas {
  width: 900px;
  height: 200px;
  display: block;
  position: relative;
  background: #666;
  margin: 40px auto;
}
  
  
</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
    },
    '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
Trailblazer
192 33 50

5. use this line to position the timer

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

You will find positioning the timer is not easy.That is why i said it is not a strong timer.

0 Likes
Highlighted
Shopify Partner
87 10 13

Hi, Dayton, the timer didn't show on the collection page and the product page, and on mobile, the code makes this:

IMG_20200407_225159.jpg

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 50

Hi there,

 

You wld realise the timer does not have any html markup.That makes it very difficult to position.

It is used for one-page announcement purpose.So only recommend for that use only.To embed on specific spot i recommend find a timer that has html markup.

 

If it doesn't show on collection page or product page you can try see whether the last line of code is embedded properly or not.

 

this 

{% include 'timer' %}

 

0 Likes
Highlighted
Shopify Partner
87 10 13

What is a HTML markup, and how I can see if a code is embedded properly or not??

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