Jump to content
Tactical Parts

Inserting script into CMS pages

Recommended Posts

I am trying to insert a simple javascript based counter onto a single CMS page.

This is the script code:

<div data-type="countdown" data-id="1441323" class="tickcounter" style="width: 100%; position: relative; padding-bottom: 25%"><a href="//www.tickcounter.com/countdown/1441323/my-countdown" title="My countdown">My countdown</a><a href="//www.tickcounter.com/" title="Countdown">Countdown</a></div><script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>

And if you need an idea of what the counter looks like: https://www.tickcounter.com/

However, when trying to save the CMS page, the editor wipes out the code section entirely.

Is there a way to make this work? Some kind of workaround?
 

Share this post


Link to post
Share on other sites

There is not, not from the back office. What people usually do it add it directly to cms.tpl, using a condition like

{if $cms->id == whateverID}
// your code
{/if}

That way it won't be added to all cms pages, but just the one with that specific id

Share this post


Link to post
Share on other sites

This worked, however it places the counter at the top of the page. I need to move it elsewhere within the CMS - what would be the best way to accomplish this?

Share this post


Link to post
Share on other sites

If you need it inside, you could try with a string replace on the cms "content". To be honest, I am not sure it's gonna work. What does the script look like? If it targets a div you can just remove it from the snippet and add the div only inside the cms page

Share this post


Link to post
Share on other sites

Here is the code snippet that's inserted into CMS.tpl:
 

{if $cms->id == 13}
	<div data-type="countup" data-id="130101" class="tickcounter" style="width: 650px; height: 162px; margin: 0 auto"><a href="//www.tickcounter.com/countup/130101/number-of-days-without-a-cyma-piston-failure" title="Number of days without a CYMA piston failure">Number of days without a CYMA piston failure</a><a href="//www.tickcounter.com/countup" title="Countup">Countup</a></div>
	<script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));		</script>        
{/if}

This does work, but it inserts the counter to the very top of the CMS page without me inputting any code into the CMS HTML editor.

I tried using just this section of the code inserted into the CMS HTML editor under the desired section:

<div data-type="countup" data-id="130101" class="tickcounter" style="width: 650px; height: 162px; margin: 0 auto"><a href="//www.tickcounter.com/countup/130101/number-of-days-without-a-cyma-piston-failure" title="Number of days without a CYMA piston failure">Number of days without a CYMA piston failure</a><a href="//www.tickcounter.com/countup" title="Countup">Countup</a></div>

But it appears to break the script...

I also tried using just this:

<div data-type="countup" data-id="130101" class="tickcounter" style="width: 650px; height: 162px; margin: 0 auto">

But this flags an error where the site supplying the code requires that I leave their web address inserted.

I suspect what I really need is just a simple bit of javascript code or a module that does the same function as this counter, but hosted on my server. 

I'd also like it to have a second function of showing how many units are in service. I just thought it would be cool to have a section on this page that covers how durable this particular part has been based on number of units in service and tracked data. This is the counter if you need an idea of how it looks / works: https://www.tickcounter.com/countup/130101/number-of-days-without-a-cyma-piston-failure

Share this post


Link to post
Share on other sites

I've just done a simple try, just to test if your code works, and it doesn't for me but, I changed to this one and "voilà".... {if $cms.id == 13} HOLA {/if}    ---->(change 13 for your CMS page ID).

Now I need to print out a list of all thumbnails of subcategories from a category.
Any help in this will be appreciated.

PS version 1.7.5.1

 

Thanks.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More