magento-layout-loader

Warning: This is a very early implementation. This API should be considered unstable.

The magento-layout-loader is a webpack loader that transforms JSX during compilation. It gives Magento modules and extensions the ability to inject or remove content blocks in a layout without modifying the theme source files.

Properties

Name	Description
`operation`	One of the supported types of operations.
`targetContainer`	The `data-mid` value of the `Container` to target.
`targetChild`	The `id` value of the `ContainerChild` to target within `targetContainer`.
`componentPath`	An absolute path pointing to a file containing a React component as the `default` export.

Supported operations

The following operation configuration values are supported:

removeContainer - removes a specific Container
removeChild - removes a specific ContainerChild in a specific Container
insertBefore - inserts a component before a specific ContainerChild in a Container
insertAfter - inserts a component after a specific ContainerChild in a Container

Examples

`removeContainer`

Example configuration:

{
    "operation": "removeContainer",
    "targetContainer": "any.container.id"
}

Affected code:

import React from 'react';

function render() {
    return (
        <div className="wrapper">
            The div below will be removed
            <div data-mid="any.container.id" />
        </div>
    );
}

`removeChild`

Example configuration:

{
    "operation": "removeChild",
    "targetContainer": "any.container.id",
    "targetChild": "container.child.id"
}

Affected code:

import React from 'react';
import { ContainerChild } from '@magento/peregrine';

function render() {
    return (
        <div className="wrapper" data-mid="any.container.id">
            The container below will be removed
            <ContainerChild
                id="container.child.id"
                render={() => <div>This content will be removed</div>}
            />
        </div>
    );
}

`insertBefore`

Example configuration:

{
    "operation": "insertBefore",
    "targetContainer": "any.container.id",
    "targetChild": "container.child.id",
    "componentPath": "/Absolute/path/to/a/component.js"
}

Affected code:

import React from 'react';
import { ContainerChild } from '@magento/peregrine';

function render() {
    return (
        <div className="wrapper" data-mid="any.container.id">
            <ContainerChild
                id="container.child.id"
                render={() => <div>Some Content</div>}
            />
        </div>
    );
}

`insertAfter`

Example configuration:

{
    "operation": "insertAfter",
    "targetContainer": "any.container.id",
    "targetChild": "container.child.id",
    "componentPath": "/Absolute/path/to/a/component.js"
}

Affected code:

import React from 'react';
import { ContainerChild } from '@magento/peregrine';

function render() {
    return (
        <div className="wrapper" data-mid="any.container.id">
            <ContainerChild
                id="container.child.id"
                render={() => <div>Some Content</div>}
            />
        </div>
    );
}

Edit this page on GitHub

Give us feedback