backend_prod_layout

Apps » Shop-Script » Hooks

Triggered on the initial generation of the “Products” section’s HTML code, including tags <!DOCTYPE>, <HTML>, <HEAD>, and <BODY>, in the new interface (2.0). 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="box">{$top_message}</div>
HTML;

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

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