OpenCart：从控制器添加内联JS代码及头部添加的实现方法

Hey there! Let's break down each of your questions about adding inline JS in OpenCart 3.0 step by step:

1. Adding Inline JS from Catalog Controllers via the Event System #

OpenCart's event system lets you hook into core processes without modifying core files—perfect for adding inline JS cleanly. Here's how to do it:

Step 1: Register the Event #

First, register an event that triggers before the header loads (so your JS gets added to the document). You can do this in your extension's install method (e.g., in catalog/controller/extension/module/your_module.php):

public function install() {
    // Register event to hook into header rendering
    $this->model_setting_event->addEvent(
        'custom_catalog_inline_js', 
        'catalog/view/common/header/before', 
        'extension/module/your_module/add_inline_catalog_js'
    );
}

Step 2: Create the Event Callback #

Next, add the callback method in the same controller to inject your inline JS:

public function add_inline_catalog_js(&$route, &$data) {
    // Your inline JavaScript code
    $inline_js = "
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Inline JS loaded via Catalog event system!');
            // Add your custom logic here
        });
    ";

    // Add the inline script to the document's header
    $this->document->addScript($inline_js, 'text/javascript', 'header');
}

Step 3: Uninstall Cleanup (Optional but Recommended) #

Don't forget to remove the event when your extension is uninstalled:

public function uninstall() {
    $this->model_setting_event->deleteEvent('custom_catalog_inline_js');
}

2. Adding Inline JS from Admin & Catalog Module Controllers #

You can directly inject inline JS from both admin and catalog module controllers without using the event system—great for controller-specific scripts.

Admin Module Controller Example #

In your admin module controller (e.g., admin/controller/extension/module/your_module.php), add this to your main method (like index()):

public function index() {
    // Load admin styles, language, etc. (existing code)
    $this->load->language('extension/module/your_module');
    $this->document->setTitle($this->language->get('heading_title'));

    // Add your inline JS
    $inline_admin_js = "
        $('#button-save').on('click', function() {
            alert('Saving changes from admin inline JS!');
        });
    ";

    // Add to footer (or 'header' if you need it loaded earlier)
    $this->document->addScript($inline_admin_js, 'text/javascript', 'footer');

    // Rest of your controller code...
}

Catalog Module Controller Example #

Similarly, in your catalog module controller (e.g., catalog/controller/extension/module/your_module.php):

public function index() {
    // Load language, data, etc. (existing code)
    $this->load->language('extension/module/your_module');

    // Add inline JS for the frontend
    $inline_catalog_js = "
        $('.featured-product').hover(function() {
            $(this).toggleClass('product-hover');
        });
    ";

    // Add to footer (adjust to 'header' if needed)
    $this->document->addScript($inline_catalog_js, 'text/javascript', 'footer');

    // Pass data to template...
    $data['products'] = $this->getProducts();
    return $this->load->view('extension/module/your_module', $data);
}

3. Can You Add Inline JS to the Page Header? #

Absolutely! There are a few reliable ways to do this:

• Via Event System: As shown in question 1, just set the third parameter of addScript() to 'header' instead of 'footer'. This adds your inline JS to the document's header section.
• Directly from Controllers: In any admin or catalog controller, use $this->document->addScript($inline_js, 'text/javascript', 'header') to inject the script directly into the header.
• Template Edits (Not Recommended): You could manually add <script> tags directly to your theme's common/header.twig file, but this bypasses OpenCart's MVC structure and makes updates harder. Stick to controller/event methods for maintainability.

内容的提问来源于stack exchange，提问作者rameez.hashmi