• Add <style> and <script> in Magento static block

    12.6k Views Asked by At

    I have a static block (Identifier is mega_menu)

    It has some code like this:

    <ul class="dropdown-menu" role="menu">
         <li data-submenu-id="submenu-patas">
             <div id="submenu-patas" class="popover">
                <h3 class="popover-title">Patas</h3>
                <div class="popover-content"><img src="img/patas.png"></div>
             </div>
         </li>
         <li data-submenu-id="submenu-snub-nosed">
             <div id="submenu-snub-nosed" class="popover">
                <h3 class="popover-title">Golden Snub-Nosed</h3>
                <div class="popover-content"><img src="img/snub-nosed.png"></div>
             </div>
         </li>
    </ul>
    

    In the normal html file (from where I got this code) there are some styles and it's references like this:

    <link href="css/bootstrap.css" rel="stylesheet">  --<--Reference
    <style>
      body {
        padding-top: 60px;
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">  --<--Reference
    <style>
        .navbar .popover {
            width: 400px;
            -webkit-border-top-left-radius: 0px;
            -webkit-border-bottom-left-radius: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            overflow: hidden;
        }
    </style>
    

    And also some scripts and it's references like this:

    <script src="../jquery.menu-aim.js" type="text/javascript"></script> --<Reference
    <script src="js/bootstrap.min.js" type="text/javascript"></script> --<--Reference
    <script>
        var $menu = $(".dropdown-menu");
        .
        .
        .
        $(document).click(function() {
            // Simply hide the submenu on any click. Again, this is just a hacked
            // together menu/submenu structure to show the use of jQuery-menu-aim.
            $(".popover").css("display", "none");
            $("a.maintainHover").removeClass("maintainHover");
        });
    </script>
    

    So my question is:

    Can I these styles and scripts directly in static block?
    If no how can I add these styles and script with work for particular static block (e.g. mega_menu here)?

    PS: Magento noob here

    1

    There are 1 best solutions below

    5
    Keyur Shah On BEST ANSWER

    call phtml file from static block

    {{block type="core/template" template="page/html/YOUR_FILE_NAME.phtml"}}
    

    and write your code in YOUR_FILE_NAME.phtml