backend_prod

Allows adding of custom content to new product editor pages including the sidebar and the main page content. In JavaScript code, you can register event handlers for elements contained within the container with the '#wa-app' selector, except for that container itself — event handlers for the container should be registered with the use of the backend_prod_layout hook.

Shop-Script

Input (passed by reference)

$params['product'] shopProduct Product properties object.
$params['section_id'] string Identifier of the current part of the “Products” section. E.g., 'product' corresponding to the single product page. In the future more parts are planned; e.g., to manage various product lists, which will have other identifiers.
… your plugin code …

Output

{$backend_prod.header}

HTML code of custom content to be added to the top right corner of product editor pages.

{$backend_prod.bottom}

HTML code of custom content to be added at the bottom of product editor pages.

{$backend_prod.sidebar_item}

HTML code of custom <li> elements at the end of the “Editing” section of the product editor’s main menu.

Shop-Script

Plugin code example

PHP

public function backendProd($params)
{
    /** @var shopProduct $product */
    $product = $params['product'];
    $wa_app_url = wa()->getAppUrl('shop', true);

    // See 'custom_routing' event's description to add support for such URLs.
    $sidebar_item_url = "{$wa_app_url}products/{$product->id}/myplugin/";
    $sidebar_item_text = _wp('My plugin');
    $sidebar_item_hint = _wp('My plugin’s info');

    $sidebar_item = <<<HTML
        <li>
            <a href="{$sidebar_item_url}">
                <span>{$sidebar_item_text}</span>
                <span class="count">
                    <span class="wa-tooltip bottom-left" data-title="{$sidebar_item_hint}">
                        <i class="s-icon fas fa-question-circle"></i>
                    </span>
                </span>
            </a>
        </li>
HTML;

    $section_id = $params['section_id'];

    $bottom = <<<HTML
        <script>
        $(function () {
            console.log('My plugin works!', 'The section ID is "{$section_id}".');
        });
        </script>
HTML;

    $header_button_text = _wp('My plugin’s button');
    $header_button_message = _wp('My plugin’s message!');

    $header = <<<HTML
        <div class="s-details">
            <button onclick="alert('{$header_button_message}');">{$header_button_text}</button>
        </div>
HTML;

    return [
        'sidebar_item' => $sidebar_item,
        'bottom' => $bottom,
        'header' => $header,
    ];
}