Cara Membuat Ekstensi Magento PWA Studio
Diterbitkan: 2021-01-06Daftar Isi
Biasanya, Anda ingin membuat perubahan langsung pada proyek pwa-studio tetapi pendekatan ini, bagaimanapun, jauh dari ideal jika Anda ingin membuat ekstensi. Untuk ekstensi, Anda ingin dapat menonaktifkannya dengan mudah, atau dapat mengimpor beberapa ekstensi ke dalam proyek dengan mudah.
Untuk melakukannya, kita dapat membuat paket di dalam proyek yang dibuat dan mengimpor kembali dari file JSON . Untungnya, proses ini telah disederhanakan bagi kami dengan bantuan paket npm yang dirilis oleh Lars Roettig, pengelola Magento: https://www.npmjs.com/package/@larsroettig/create-pwa-extension
Dalam tutorial ini, kami akan mencoba menggunakan paket ini untuk membuat ekstensi PWA Studio.
1. Instal Magento PWA Studio
Pertama kita perlu menginstal proyek PWA Studio. Ini cukup mudah jika Anda mengikuti panduan kami di sini: Cara Mengatur Magento 2 PWA Studio
*Catatan : pada langkah pertanyaan, untuk pertanyaan ini " Instal dependensi paket dengan benang setelah membuat proyek " Anda harus memilih Tidak daripada Ya seperti dalam tutorial pengaturan kami.
2. Buat rute baru
cd ke direktori proyek Anda.
Jalankan perintah ini:
benang buat @larsroettig/pwa-extension
Ini akan meminta informasi lebih lanjut mengenai ekstensi:
Sekali lagi, ingatlah untuk memilih Tidak pada pertanyaan “ Instal dependensi paket dengan benang setelah membuat proyek ”.
Buka direktori yang dibuat.
Kita sekarang dapat melihat file intercept.js telah dibuat, dan itu sudah termasuk overridemapping .
Sekarang mari kita coba membuat rute baru di testextension/src/intercept.js
/**
* File intersep khusus untuk ekstensi
* Secara default Anda hanya dapat menggunakan target @magento/pwa-buildpack.
*
* Jika ingin memperpanjang @magento/peregrine atau @magento/venia-ui
* Anda harus menambahkannya ke peerDependencies ke package.json Anda
*
* Jika Anda ingin menambahkan penimpaan untuk komponen @magento/venia-ui, Anda dapat menggunakan
* moduleOverrideWebpackPlugin dan componentOverrideMapping
**/
module.exports = target => {
target.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
/**
* Kami perlu mengaktifkan esModules dan cssModules untuk memungkinkan build pack memuat ekstensi kami
* {@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 => {
routeArray.push({
nama: 'Halaman SimiCart',
pola: '/simicart',
jalur: '@simicart/testextension/src/components/page1'
});
kembali routeArray;
});
}; Buat komponen untuk rute baru di testextension/src/components/page1/index.js :
impor Bereaksi dari 'bereaksi';
impor {mergeClasses} dari '@magento/venia-ui/lib/classify';
import {shape, string} dari 'prop-types';
impor defaultClasses dari './index.css';
const Halaman1 = alat peraga => {
const class = mergeClasses(defaultClasses, props.classes);
return (<div className={classes.root}>SimiCart</div>);
}
Halaman1.propTypes = {
kelas: bentuk({root: string})
};
Laman1.defaultProps = {};
ekspor Halaman1 default;Ubah package.json untuk mengimpor paket:
"ketergantungan": {
"@magento/pwa-buildpack": "~7.0.0",
"@simicart/testextension": "link:./@simicart/testextension"
},Setelah itu, instal dan tonton untuk memeriksa apakah rute baru berfungsi.
pemasangan benang jam tangan benang
3. Mengganti komponen
Mengikuti bagian sebelumnya, bagian ini adalah tentang mengesampingkan tampilan proyek Anda yang sudah ada.
Dari proyek yang dibuat pada langkah sebelumnya, kami menambahkan override kami di testextension/src/componentOverrideMapping.js :
/**
* Pemetaan untuk ditimpa
* contoh: [`@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'
}; Kemudian require kode override ini ke testextension/src/intercept.js :
/**
* File intersep khusus untuk ekstensi
* Secara default Anda hanya dapat menggunakan target @magento/pwa-buildpack.
*
* Jika ingin memperpanjang @magento/peregrine atau @magento/venia-ui
* Anda harus menambahkannya ke peerDependencies ke package.json Anda
*
* Jika Anda ingin menambahkan penimpaan untuk komponen @magento/venia-ui, Anda dapat menggunakan
* moduleOverrideWebpackPlugin dan componentOverrideMapping
*/
const moduleOverrideWebpackPlugin = membutuhkan('./moduleOverrideWebpackPlugin');
const componentOverrideMapping = require('./componentOverrideMapping')
module.exports = target => {
target.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
/**
* Kami perlu mengaktifkan esModules dan cssModules untuk memungkinkan build pack memuat ekstensi kami
* {@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 => {
routeArray.push({
nama: 'SimiCartPage',
pola: '/simicart',
jalur: '@simicart/testextension/src/components/page1'
});
kembali routeArray;
});
target.of('@magento/pwa-buildpack').webpackCompiler.tap(compiler => {
modul baruOverrideWebpackPlugin(componentOverrideMapping).apply(compiler);
})
};Kemudian, dari folder venia-ui , salin komponen header ke dalam komponen baru yang akan kita override. Kemudian tambahkan satu tampilan lagi ke header yang baru saja kita salin:
impor SimiCartIcon dari './simicartIcon'; . . . <SimiCartIcon />
Kode lengkap di testextension/src/override/header.js :
import React, { Suspense } dari 'react';
import { bentuk, string } dari 'prop-types';
impor Logo dari '@magento/venia-ui/lib/components/Logo';
impor resourceUrl dari '@magento/peregrine/lib/util/makeUrl';
import { Tautan, Rute } dari 'react-router-dom';
impor AccountTrigger dari '@magento/venia-ui/lib/components/Header/accountTrigger';
impor CartTrigger dari '@magento/venia-ui/lib/components/Header/cartTrigger';
impor NavTrigger dari '@magento/venia-ui/lib/components/Header/navTrigger';
impor SearchTrigger dari '@magento/venia-ui/lib/components/Header/searchTrigger';
impor OnlineIndicator dari '@magento/venia-ui/lib/components/Header/onlineIndicator';
impor { useHeader } dari '@magento/peregrine/lib/talons/Header/useHeader';
impor {mergeClasses } dari '@magento/venia-ui/lib/classify';
impor defaultClasses dari '@magento/venia-ui/lib/components/Header/header.css';
impor PageLoadingIndicator dari '@magento/venia-ui/lib/components/PageLoadingIndicator';
impor SimiCartIcon dari './simicartIcon';
const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
const Header = alat peraga => {
konstan {
handleSearchTriggerClick,
telahOffline,
sedang on line,
cariBuka,
isPageLoading
} = useHeader();
const class = mergeClasses(defaultClasses, props.classes);
const rootClass = searchOpen ? class.open : class.close;
const searchBarFallback = (
<div className={classes.searchFallback}>
<div className={classes.input}>
<div className={classes.loader} />
</div>
</div>
);
const searchBar = searchOpen ? (
<Suspense fallback={searchBarFallback}>
<Rute>
<SearchBar isOpen={searchOpen} />
</Rute>
</Ketegangan>
) : nol;
const pageLoadingIndicator = isPageLoading ? (
<PageLoadingIndicator />
) : nol;
kembali (
<header className={rootClass}>
<div className={classes.toolbar}>
<div className={classes.primaryActions}>
<NavTrigger />
</div>
{pageLoadingIndicator}
<Indikator Daring
hasBeenOffline={hasBeenOffline}
isOnline={isOnline}
/>
<Tautan ke={resourceUrl('/')}>
<Logo class={{ logo: class.logo }} />
</Tautan>
<div className={classes.secondaryActions}>
<Pemicu Pencarian
aktif={searchOpen}
onClick={handleSearchTriggerClick}
/>
<Pemicu Akun />
<SimiCartIcon />
<Pemicu Keranjang />
</div>
</div>
{searchBar}
</header>
);
};
Header.propTypes = {
kelas: bentuk({
tertutup: tali,
logo: tali,
terbuka: tali,
tindakan utama: string,
tindakan sekunder: string,
bilah alat: string
})
};
ekspor tajuk default; Mari kita buat tampilan ini di testextension/src/override/SimiCartIcon.js :
impor Bereaksi dari 'bereaksi';
impor Ikon dari '@magento/venia-ui/lib/components/Icon';
import { FastForward } dari 'react-feather';
impor resourceUrl dari '@magento/peregrine/lib/util/makeUrl';
import { useHistory } dari 'react-router-dom';
import { bentuk, string } dari 'prop-types';
impor defaultClasses dari './SimiCartIcon.css';
import { FormattedMessage, useIntl } dari 'react-intl';
const SimiCartIcon = alat peraga => {
kelas const = kelas default;
const { formatMessage } = useIntl();
const sejarah = useHistory();
kembali (
<tombol
aria-label={formatMessage({
id: `blog.bloglabel`,
defaultMessage: 'Blog'
})}
className={classes.root}
onClick={() => history.push(resourceUrl('/simicart'))}
>
<Ikon src={Maju Cepat} />
<span className={classes.label}>
<FormattedMessage id={`Blog`} />
</span>
</tombol>
);
}
SimiCartIcon.propTypes = {
kelas: bentuk ({ root: string })
};
SimiCartIcon.defaultProps = {};
ekspor SimiCartIcon default;Kemudian gayakan:
.akar {
align-item: tengah;
kursor: penunjuk;
tampilan: inline-flex;
justify-content: pusat;
tinggi garis: 1;
pointer-acara: otomatis;
perataan teks: tengah;
spasi putih: nowrap;
properti transisi: warna;
durasi transisi: 224ms;
fungsi waktu transisi: kubik-bezier (0, 0, 0,2, 1);
tinggi: 3rem;
lebar: 3rem;
}
.label {
tampilan: tidak ada;;
}
@media (lebar minimum: 641px) {
.akar {
lebar: otomatis;
}
.label {
tampilan: inisial;
margin-inline-start: 0.25rem;
}
}Hasil:
Dan itu mengakhiri tutorial kami. Jangan ragu untuk memberi kami pertanyaan apa pun jika ada bagian yang membingungkan, dan jika menurut Anda tutorial ini bermanfaat, jangan lupa untuk menilainya sebagai membantu!
Selain itu, jika Anda ingin mencoba ekstensi Magento PWA Studio, kami memiliki modul tambahan gratis dan sumber terbuka yang dapat Anda instal di atas situs web Magento PWA Studio Anda.
Baca lebih banyak:
Magento PWA Studio: Tautan dan Sumber Berguna