backend_prod_layout

Triggered on the initial generation of the revamped “Products” section’s HTML code including tags <!DOCTYPE>, <HTML>, <HEAD>, and <BODY>. In this hook’s handler, it is convenient to add plugin’s CSS and JavaScript files using methods addCss() and addJs(). In JavaScript code, you may register handlers for the events wa_loaded and wa_before_load.

Shop-Script

Input (passed by reference)

$params['product'] shopProduct Current product’s properties object.
… your plugin code …

Output

{$backend_prod_layout.head}

HTML code of custom content to be added to the section.

{$backend_prod_layout.top}

HTML code of custom content to be added to the page top.

{$backend_prod_layout.bottom}

HTML code of custom content to be added to the page bottom.

Shop-Script

Plugin code example

PHP

public function backendProdLayout($params)
{

    $this->addCss('css/myplugin.css');
    $this->addJs('js/myplugin.js');
    /** @var shopProduct $product */
    $product = $params['product'];

    $head = <<<HTML
        <script>
            $(function () {
                var \$wrapper = $("#wa-app");

                \$wrapper.on('wa_before_load', function (event, params) {
                    console.log('Page content reload via AJAX initiated by a user.');
                });

                \$wrapper.on('wa_loaded', function (event, params) {
                    console.log('Product editor content loaded. Product ID is {$product->id}.');
                });
            });

        </script>
HTML;

    $top_message = _wp('My plugin’s message at the very top.');
    $top = <<<HTML
        <div class="block">{$top_message}</div>
HTML;

    $bottom_message = _wp('My plugin’s message at the very bottom.');
    $bottom = <<<HTML
        <div class="block">{$bottom_message}</div>
HTML;

    return [
        'head' => $head,
        'top' => $top,
        'bottom' => $bottom,
    ];
}