2

I have an e-commerce that runs Magento but we do not have the access to both code and server.

We want to create a new page to add some features like countdowns and a form for emails, but even adding all the code in the "Content Area", it still doesn't work.

For example: if I add <script>test</script> on the CMS Page editor and save, when accessing the page, it will just show <script>test</script> as if it is just a text and won't do the action that was supposed to do (in my case, show a countdown). Even with the correct tags and everything else, it just appears to be a text that was written.

So, how do I create a page with HTML, CSS and Script that works correctly on CMS Pages on Magento?

Thanks in advance!

  • 3
    which magento version you are using? – Abhishek Panchal Aug 17 '17 at 20:33
2

Its seems like you are using <script> tag in wrong way. Because it doesn't print or alert anything if you write <script>test</script> in CMS page.

JS Fiddle https://jsfiddle.net/b8Lgvtap/

For javascript code

<script>
    var now = new Date();
    alert(now); // it will alert current date and time
    document.getElementById('countdown').innerHTML = 'current date and time - ' + now;
</script>

For HTML code

<div id="countdown">Count Down Start</div>

For style you can use <style> tag

<style>
 #countdown{ 
    display:inline;
    color: red !important; 
    font-size: 20px;
}
</style>
| improve this answer | |
  • Thanks, Abhishek! I've added your code directly on the CMS Page (just adjusted the CSS to be inline) and it worked! Now I just need to implement the counter to count from today to a specific date on the script. – magflok Aug 18 '17 at 12:22
  • please check this answer and JS fiddle code. I did the exactly same thing which you want. magento.stackexchange.com/questions/189201/countdown-timer/… - hope it helps :) please accept the answer of its useful :) – Abhishek Panchal Aug 18 '17 at 13:33
3

The solution to put your CSS, JS only in your cms page is to add a custom path css, js on it via xml like this :

Go to : admin CMS -> Pages -> Design -> XML Layout Updatethen add the code bellow

<reference name="head">
    <action method="addItem"><type>skin_js</type><name>js/filename.js</name></action> 
    <action method="addItem"><type>skin_css</type><name>css/filename.css</name><params/></action>
</reference>

enter image description here

Then you add your css code in skin/frontend/{your package}/{your theme}/css/filename.css

you add your js code in skin/frontend/{your package}/{your theme}/js/filename.js

| improve this answer | |
  • Hello, Prince! Thanks for your answer. As I said, I do not have access to add archives on the server. So this way is not possible for me. I need to found a way where I can do everything just in the CMS Page Editor or at least, call a JS that is uploaded on another server. – magflok Aug 18 '17 at 12:00
  • @magflok I gave you the best way to do that and according the standards of Magento, if you haven't access to your server it's another problem. – PЯINCƏ Aug 18 '17 at 14:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.