CODEWITHSUNDEEP
phpjavascriptjqueryopencart
user6030
user6030

Reputation: 31

How to add JavaScript dynamically in Opencart?

I want use a jQuery plugin in category.tpl. Put files in javascript/jquery directory. Now, how can use this plugin?

Upvotes: 0

Views: 13532

Answers (5)

Martin Zeitler
Martin Zeitler

Reputation: 76579

/* one can load JS like that: */    
if(file_exists('catalog/view/javascript/'.$this->config->get('config_template').'/script.js')) {
    $this->document->addScript('catalog/view/javascript/'.$this->config->get('config_template').'/script.js');
}

It is rather "the proper way" to use existing functions, than to add scripts manually into header.tpl.

As a hint, based upon the answer below - one could loop an array of filenames, in order to keep control over the loading order, which is often relevant while they might depend on each other.

Upvotes: 7

user1786647
user1786647

Reputation: 594

in config.php     
define('DIR_JAVASCRIPT', 'D:\wamp\www\opencart/view/javascript/your_dir/');


in header.tpl        
<?php
    if (is_dir(DIR_JAVASCRIPT)):
        if ($handle = opendir(DIR_JAVASCRIPT)):
                while (false !== ($file = readdir($handle))):   
                    if (preg_match('@\.js$@', $file)):                      
?>
    <script type="text/javascript" src="<?php echo 'view/javascript/your_dir/'.$file; ?>"></script>
<?php               
                    endif;
                endwhile;
            closedir($handle);
        endif;
    endif;
?>

Upvotes: -1

aceph ali
aceph ali

Reputation: 57

You'll need to include JS and CSS sources in Header View (/catalog/view/theme/[your theme]/template/common/header.tpl)

Upvotes: 0

jeeva
jeeva

Reputation: 1603

First paste your jquery files, css files and images in catalog/view/javascript/yourplugin folder. Then call the jquery plug in files in catalog/view/theme/yourtheme(default)/template/product/category.tpl file. For ex, YOur php code;.. ... ....

<script src="catalog/view/javascript/jquery/jquery-ui-min.js"></script>

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.anythingslider.js"></script>

<link rel="stylesheet" href="catalog/view/theme/default/stylesheet/anythingslider.css">

<script>

    // DOM Ready

    $(function(){

       $('#slider').anythingSlider();

       $('#slider1').anythingSlider();

       $('#slider2').anythingSlider();


   });

</script>

its for slider.. you can do your action in php (above the script).

Upvotes: 0

Per Salbark
Per Salbark

Reputation: 3645

I've never used OpenCart, but a quick google session tells me that you should include the plugin scripts (just like any other js) in a file called header.tpl.

Here is a part of an sample header.tpl-file I found:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>

Just add a the following line below the jQuery include so it looks like this:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/[PLUGIN FILE NAME].js"></script>

and you should be good to go.

Upvotes: 3

Related Questions