Как создать расширение Magento PWA Studio
Опубликовано: 2021-01-06Оглавление
Обычно вы хотите вносить изменения непосредственно в проект pwa-studio , но этот подход далеко не идеален, если вы хотите создавать расширения. Для расширений вы хотите иметь возможность легко отключать их или иметь возможность легко импортировать несколько расширений в проект.
Для этого мы можем создать пакет внутри созданного проекта и импортировать обратно из файла JSON . К счастью, этот процесс был упрощен для нас с помощью пакета npm , выпущенного Ларсом Реттигом, сопровождающим Magento: https://www.npmjs.com/package/@larsroettig/create-pwa-extension.
В этом руководстве мы попробуем использовать этот пакет для создания расширения PWA Studio.
1. Установите Magento PWA Studio
Сначала нам нужно установить проект PWA Studio. Это довольно просто, если вы будете следовать нашему руководству здесь: Как настроить Magento 2 PWA Studio
*Примечание : на этапе вопросов для этого вопроса « Установить зависимости пакета с пряжей после создания проекта » вам нужно выбрать « Нет » вместо «Да», как в нашем руководстве по установке.
2. Создайте новый маршрут
cd в каталог вашего проекта.
Запустите эту команду:
пряжа создать @larsroettig/pwa-extension
Он запросит дополнительную информацию о расширении:
Опять же, не забудьте ответить « Нет » на вопрос « Установить зависимости пакета с пряжей после создания проекта ».
Откройте созданный каталог.
Теперь мы видим, что файл intercept.js создан и уже содержит overridemapping .
Теперь попробуем создать новый маршрут в testextension/src/intercept.js
/**
* Пользовательский файл перехвата для расширения
* По умолчанию вы можете использовать только цель @magento/pwa-buildpack.
*
* Если вы хотите расширить @magento/peregrine или @magento/venia-ui
* вы должны добавить их в peerDependencies вашего package.json
*
* Если вы хотите добавить перезапись для компонентов @magento/venia-ui, вы можете использовать
* moduleOverrideWebpackPlugin и componentOverrideMapping
**/
module.exports = цели => {
target.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
/**
* Нам нужно активировать esModules и cssModules, чтобы пакет сборки мог загрузить наше расширение.
* {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
*/
flags[targets.name] = { esModules: true, cssModules: true };
});
target.of('@magento/venia-ui').routes.tap(
массив маршрутов => {
routeArray.push({
имя: 'Страница SimCart',
шаблон: '/simicart',
путь: '@simicart/testextension/src/components/page1'
});
вернуть массив маршрутов;
});
}; Создайте компонент для нового маршрута в testextension/src/components/page1/index.js :
импортировать React из «реагировать»;
импортировать {mergeClasses} из '@magento/venia-ui/lib/classify';
импортировать {форму, строку} из 'prop-types';
импортировать классы по умолчанию из './index.css';
const Page1 = реквизит => {
константные классы = mergeClasses (классы по умолчанию, props.classes);
return (<div className={classes.root}>SimiCart</div>);
}
Page1.propTypes = {
классы: форма ({корень: строка})
};
Page1.defaultProps = {};
экспортировать страницу 1 по умолчанию;Измените package.json для импорта пакета:
"зависимости": {
"@magento/pwa-buildpack": "~7.0.0",
"@simicart/testextension": "ссылка:./@simicart/testextension"
},После чего установите и посмотрите, работает ли новый маршрут.
пряжа установить пряжа часы
3. Переопределение компонентов
Следуя предыдущей части, эта часть будет посвящена переопределению существующих представлений вашего проекта.
Из проекта, созданного на предыдущем шаге, мы добавляем наше переопределение в testextension/src/componentOverrideMapping.js :
/**
* Сопоставления для перезаписей
* пример: [`@magento/venia-ui/lib/components/Main/main.js`]: './lib/components/Main/main.js'
*/
module.exports = componentOverride = {
[`@magento/venia-ui/lib/components/Header/header.js`]: '@simicart/testextension/src/override/header.js'
}; Затем добавьте этот код переопределения в require testextension/src/intercept.js :
/**
* Пользовательский файл перехвата для расширения
* По умолчанию вы можете использовать только цель @magento/pwa-buildpack.
*
* Если вы хотите расширить @magento/peregrine или @magento/venia-ui
* вы должны добавить их в peerDependencies вашего package.json
*
* Если вы хотите добавить перезапись для компонентов @magento/venia-ui, вы можете использовать
* moduleOverrideWebpackPlugin и componentOverrideMapping
*/
const moduleOverrideWebpackPlugin = require('./moduleOverrideWebpackPlugin');
const componentOverrideMapping = require('./componentOverrideMapping')
module.exports = цели => {
target.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
/**
* Нам нужно активировать esModules и cssModules, чтобы пакет сборки мог загрузить наше расширение.
* {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
*/
flags[targets.name] = { esModules: true, cssModules: true };
});
console.log(targets.of('@magento/pwa-buildpack'));
target.of('@magento/venia-ui').routes.tap(
массив маршрутов => {
routeArray.push({
имя: 'SimiCartPage',
шаблон: '/simicart',
путь: '@simicart/testextension/src/components/page1'
});
вернуть массив маршрутов;
});
target.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
новый модульOverrideWebpackPlugin(componentOverrideMapping).apply(компилятор);
})
};Затем из папки venia-ui скопируйте компонент заголовка в новый компонент, который мы будем переопределять. Затем добавьте еще одно представление в заголовок, который мы только что скопировали:
импортировать SimiCartIcon из './simicartIcon'; . . . <SimiCartIcon />
Полный код в testextension/src/override/header.js :
импортировать React, {Suspense} из 'реагировать';
импортировать { shape, string } из 'prop-types';
импортировать логотип из '@magento/venia-ui/lib/components/Logo';
импортировать resourceUrl из '@magento/peregrine/lib/util/makeUrl';
импортировать {Link, Route} из 'react-router-dom';
импортировать AccountTrigger из '@magento/venia-ui/lib/components/Header/accountTrigger';
импортировать CartTrigger из '@magento/venia-ui/lib/components/Header/cartTrigger';
импортировать NavTrigger из '@magento/venia-ui/lib/components/Header/navTrigger';
импортировать SearchTrigger из '@magento/venia-ui/lib/components/Header/searchTrigger';
импортировать OnlineIndicator из '@magento/venia-ui/lib/components/Header/onlineIndicator';
импортировать {useHeader} из '@magento/peregrine/lib/talons/Header/useHeader';
импортировать {mergeClasses} из '@magento/venia-ui/lib/classify';
импортировать классы по умолчанию из '@magento/venia-ui/lib/components/Header/header.css';
импортировать PageLoadingIndicator из '@magento/venia-ui/lib/components/PageLoadingIndicator';
импортировать SimiCartIcon из './simicartIcon';
const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
const Заголовок = реквизит => {
константа {
дескрипторSearchTriggerClick,
былне в сети,
В сети,
поискОткрыть,
isPageLoading
} = использоватьЗаголовок();
константные классы = mergeClasses (классы по умолчанию, props.classes);
const rootClass = searchOpen ? классы.открытые : классы.закрытые;
константа searchBarFallback = (
<div className={classes.searchFallback}>
<div имя_класса={classes.input}>
<div className={classes.loader} />
</div>
</div>
);
const searchBar = searchOpen ? (
<Задержка приостановки={searchBarFallback}>
<Маршрут>
<SearchBar isOpen={searchOpen} />
</маршрут>
</приостановка>
) : нулевой;
const pageLoadingIndicator = isPageLoading ? (
<Индикатор загрузки страницы />
) : нулевой;
возвращаться (
<имя_заголовка_класса={rootClass}>
<div className={classes.toolbar}>
<div className={classes.primaryActions}>
<NavTrigger/>
</div>
{pageLoadingIndicator}
<индикатор онлайн
hasBeenOffline={hasBeenOffline}
isOnline={isOnline}
/>
<Ссылка на={resourceUrl('/')}>
<логотипы классов={{ логотип: классы.логотип }} />
</Ссылка>
<div className={classes.secondaryActions}>
<Триггер поиска
активный={поискОткрыть}
onClick={handleSearchTriggerClick}
/>
<Триггер учетной записи />
<SimiCartIcon />
<Триггер корзины />
</div>
</div>
{панель поиска}
</заголовок>
);
};
Заголовок.propTypes = {
классы: форма({
закрыто: строка,
логотип: строка,
открыть: строка,
первичные действия: строка,
вторичные действия: строка,
панель инструментов: строка
})
};
экспорт заголовка по умолчанию; Давайте создадим это представление в testextension/src/override/SimiCartIcon.js :
импортировать React из «реагировать»;
импортировать значок из '@magento/venia-ui/lib/components/Icon';
импортировать {FastForward} из 'реагировать-перо';
импортировать resourceUrl из '@magento/peregrine/lib/util/makeUrl';
import {useHistory} из 'react-router-dom';
импортировать { shape, string } из 'prop-types';
импортировать классы по умолчанию из './SimiCartIcon.css';
импортировать {FormattedMessage, useIntl} из 'React-Intl';
const SimiCartIcon = реквизит => {
константные классы = классы по умолчанию;
const {formatMessage} = useIntl();
постоянная история = useHistory();
возвращаться (
<кнопка
aria-label={formatMessage({
идентификатор: `blog.bloglabel`,
defaultMessage: 'Блог'
})}
className={классы.root}
onClick={() => history.push(resourceUrl('/simicart'))}
>
<Icon src={FastForward} />
<span className={classes.label}>
<FormattedMessage id={`Блог`} />
</span>
</кнопка>
);
}
SimiCartIcon.propTypes = {
классы: форма ({корень: строка})
};
SimiCartIcon.defaultProps = {};
экспортировать SimiCartIcon по умолчанию;Затем стилизуйте его:
.корень {
выравнивание элементов: по центру;
курсор: указатель;
дисплей: встроенный гибкий;
выравнивание содержимого: по центру;
высота строки: 1;
указатели-события: авто;
выравнивание текста: по центру;
пробел: nowrap;
свойство перехода: цвет;
продолжительность перехода: 224 мс;
функция времени перехода: кубический Безье (0, 0, 0,2, 1);
высота: 3рем;
ширина: 3рем;
}
.этикетка {
дисплей: нет;;
}
@media (минимальная ширина: 641px) {
.корень {
ширина: авто;
}
.этикетка {
дисплей: начальный;
margin-inline-start: 0,25 бэр;
}
}Результат:
На этом наш урок заканчивается. Не стесняйтесь задавать нам любые вопросы, если есть какая-то запутанная часть, и если вы считаете, что это руководство полезно, не забудьте оценить его как полезное!
Кроме того, если вы хотите попробовать расширение Magento PWA Studio, у нас есть бесплатные дополнительные модули с открытым исходным кодом, которые вы можете установить поверх своего веб-сайта Magento PWA Studio.
Читать далее:
Magento PWA Studio: полезные ссылки и ресурсы