Magento PWA Studio Uzantısı Nasıl Oluşturulur
Yayınlanan: 2021-01-06İçindekiler
Normalde, doğrudan pwa-studio projesinde değişiklik yapmak istersiniz, ancak bu yaklaşım, uzantılar oluşturmak istiyorsanız ideal olmaktan uzaktır. Uzantılar için, bunları kolayca devre dışı bırakabilmek veya birden çok uzantıyı bir projeye kolaylıkla aktarabilmek istersiniz.
Bunun için oluşturulan proje içerisinde bir paket oluşturup JSON dosyasından içe aktarabiliriz. Neyse ki bu süreç, bir Magento sağlayıcısı olan Lars Roettig tarafından yayınlanan bir npm paketinin yardımıyla bizim için basitleştirildi: https://www.npmjs.com/package/@larsroettig/create-pwa-extension
Bu öğreticide, bir PWA Studio uzantısı oluşturmak için bu paketi kullanmayı deneyeceğiz.
1. Magento PWA Studio'yu kurun
Öncelikle bir PWA Studio projesi kurmamız gerekiyor. Buradaki kılavuzumuzu takip ederseniz bu oldukça kolaydır: Magento 2 PWA Studio Nasıl Kurulur
*Not : Sorular adımında bu soru için “ Proje oluşturduktan sonra iplik ile paket bağımlılıklarını yükleyin ” kurulum öğreticimizde olduğu gibi Evet yerine Hayır'ı seçmeniz gerekmektedir.
2. Yeni bir rota oluşturun
cd proje dizininize.
Bu komutu çalıştırın:
iplik oluşturmak @larsroettig/pwa-extension
Uzantı ile ilgili daha fazla bilgi isteyecektir:
Yine, “ Proje oluşturduktan sonra iplik ile paket bağımlılıklarını yükleyin ” sorusunda Hayır'ı seçmeyi unutmayın.
Oluşturulan dizini açın.
Artık intercept.js dosyasının oluşturulduğunu görebiliriz ve zaten overridemapping içerir.
Şimdi testextension/src/intercept.js içinde yeni bir rota oluşturmaya çalışalım.
/**
* Uzantı için özel engelleme dosyası
* Varsayılan olarak yalnızca @magento/pwa-buildpack hedefini kullanabilirsiniz.
*
* @magento/peregrine veya @magento/venia-ui'yi genişletmek istiyorsanız
* bunları package.json'ınızdaki peerDependencies'e eklemelisiniz
*
* @magento/venia-ui bileşenleri için üzerine yazma eklemek istiyorsanız, kullanabilirsiniz
* moduleOverrideWebpackPlugin ve componentOverrideMapping
**/
module.exports = hedefler => {
target.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
/**
* Derleme paketinin uzantımızı yüklemesine izin vermek için esModules ve cssModules'ı etkinleştirmemiz gerekiyor
* {@bağlantı 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({
isim: 'SimiCart Sayfası',
desen: '/simicart',
yol: '@simicart/testtextension/src/components/page1'
});
dönüş yollarıArray;
});
}; testextension/src/components/page1/index.js içinde yeni rota için bileşen oluşturun:
React'i 'react'ten içe aktar;
'@magento/venia-ui/lib/classify' adresinden {mergeClasses} dosyasını içe aktarın;
'prop-type'lardan {shape, string} içe aktarın;
varsayılanSınıfları './index.css' dosyasından içe aktarın;
const Sayfa1 = sahne => {
const sınıfları = mergeClasses(defaultClasses, props.classes);
dönüş (<div className={classes.root}>SimiCart</div>);
}
Sayfa1.propTypes = {
sınıflar: şekil({kök: string})
};
Sayfa1.defaultProps = {};
varsayılan Sayfa1'i dışa aktar;Paketi içe aktarmak için package.json'ı değiştirin:
"bağımlılıklar": {
"@magento/pwa-buildpack": "~7.0.0",
"@simicart/testtextension": "link:./@simicart/testtextension"
},Bundan sonra, yeni rotanın çalışıp çalışmadığını kontrol etmek için kurun ve izleyin.
iplik yükleme iplik izle
3. Bileşenleri geçersiz kılmak
Önceki bölümün ardından, bu bölüm projenizin mevcut görünümlerini geçersiz kılmakla ilgili olacaktır.
Önceki adımda oluşturulan projeden geçersiz testextension/src/componentOverrideMapping.js içine ekliyoruz:
/**
* Üzerine yazma için eşlemeler
* örnek: [`@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/testtextension/src/override/header.js'
}; Ardından, bu geçersiz kılma kodunu require testextension/src/intercept.js içine isteyin:
/**
* Uzantı için özel engelleme dosyası
* Varsayılan olarak yalnızca @magento/pwa-buildpack hedefini kullanabilirsiniz.
*
* @magento/peregrine veya @magento/venia-ui'yi genişletmek istiyorsanız
* bunları package.json'ınızdaki peerDependencies'e eklemelisiniz
*
* @magento/venia-ui bileşenleri için üzerine yazma eklemek istiyorsanız, kullanabilirsiniz
* moduleOverrideWebpackPlugin ve componentOverrideMapping
*/
const moduleOverrideWebpackPlugin = require('./moduleOverrideWebpackPlugin');
const componentOverrideMapping = require('./componentOverrideMapping')
module.exports = hedefler => {
target.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
/**
* Derleme paketinin uzantımızı yüklemesine izin vermek için esModules ve cssModules'ı etkinleştirmemiz gerekiyor
* {@bağlantı https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
*/
flags[targets.name] = { esModules: true, cssModules: true };
});
konsol.log(targets.of('@magento/pwa-buildpack'));
target.of('@magento/venia-ui').routes.tap(
routeArray => {
routeArray.push({
isim: 'SimiCartPage',
desen: '/simicart',
yol: '@simicart/testtextension/src/components/page1'
});
dönüş yollarıArray;
});
target.of('@magento/pwa-buildpack').webpackCompiler.tap(derleyici => {
yeni moduleOverrideWebpackPlugin(componentOverrideMapping).apply(derleyici);
})
};Ardından, venia-ui klasöründen başlık bileşenini geçersiz kılacağımız yeni bileşene kopyalayın. Ardından, yeni kopyaladığımız başlığa bir görünüm daha ekleyin:
SimiCartIcon'u './simicartIcon'dan içe aktarın; . . . <SimiCartIcon />
testextension/src/override/header.js içindeki tam kod:
React, { Suspense } 'tepkiden' içe aktar;
'prop-type'lardan içe { şekil, dize };
Logoyu '@magento/venia-ui/lib/components/Logo'dan içe aktarın;
sourceUrl'yi '@magento/peregrine/lib/util/makeUrl' konumundan içe aktarın;
'react-router-dom'dan { Link, Route } dosyasını içe aktarın;
AccountTrigger'ı '@magento/venia-ui/lib/components/Header/accountTrigger'dan içe aktarın;
CartTrigger'ı '@magento/venia-ui/lib/components/Header/cartTrigger'dan içe aktarın;
NavTrigger'ı '@magento/venia-ui/lib/components/Header/navTrigger'dan içe aktarın;
SearchTrigger'ı '@magento/venia-ui/lib/components/Header/searchTrigger'dan içe aktarın;
OnlineIndicator'ı '@magento/venia-ui/lib/components/Header/onlineIndicator'dan içe aktarın;
{ useHeader } dosyasını '@magento/peregrine/lib/talons/Header/useHeader'dan içe aktarın;
'@magento/venia-ui/lib/classify' adresinden { mergeClasses } dosyasını içe aktarın;
varsayılanSınıfları '@magento/venia-ui/lib/components/Header/header.css'den içe aktarın;
PageLoadingIndicator'ı '@magento/venia-ui/lib/components/PageLoadingIndicator'dan içe aktarın;
SimiCartIcon'u './simicartIcon'dan içe aktarın;
const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
const Başlık = sahne => {
sabit {
tanıtıcıAramaTetikleyiciTıkla,
olmuşturÇevrimdışı,
çevrimiçi,
aramaAçık,
isPageLoading
} = useHeader();
const sınıfları = mergeClasses(defaultClasses, props.classes);
const rootClass = searchOpen ? sınıflar.open : sınıflar.kapalı;
const searchBarFallback = (
<div className={classes.searchFallback}>
<div className={classes.input}>
<div className={classes.loader} />
</div>
</div>
);
const searchBar = searchOpen ? (
<Askıya alma yedeği={searchBarFallback}>
<Rota>
<SearchBar isOpen={searchOpen} />
</Rota>
</Gerilim>
) : hükümsüz;
const pageLoadingIndicator = isPageLoading ? (
<PageLoadingIndicator />
) : hükümsüz;
dönüş (
<header className={rootClass}>
<div className={classes.toolbar}>
<div className={classes.primaryActions}>
<NavTrigger />
</div>
{pageLoadingIndicator}
<Çevrimiçi Gösterge
hasBeenOffline={hasBeenOffline}
isOnline={isOnline}
/>
<Bağlantı adresi={resourceUrl('/')}>
<Logo sınıfları={{ logo: sınıflar.logo }} />
</Link>
<div className={classes.secondaryActions}>
<Arama Tetikleyici
aktif={searchOpen}
onClick={handleSearchTriggerClick}
/>
<Hesap Tetikleyici />
<SimiCartIcon />
<CartTetikleyici />
</div>
</div>
{arama çubuğu}
</header>
);
};
Header.propTypes = {
sınıflar: şekil({
kapalı: dize,
logo: dize,
açık: dize,
birincil Eylemler: dize,
ikincil Eylemler: dize,
araç çubuğu: dize
})
};
varsayılan Başlığı dışa aktar; Bu görünümü testextension/src/override/SimiCartIcon.js içinde oluşturalım:
React'i 'react'ten içe aktar;
Simgeyi '@magento/venia-ui/lib/components/Icon'dan içe aktar;
'react-feather'dan { FastForward } dosyasını içe aktarın;
sourceUrl'yi '@magento/peregrine/lib/util/makeUrl' konumundan içe aktarın;
'react-router-dom'dan { useHistory } dosyasını içe aktarın;
'prop-type'lardan içe { şekil, dize };
varsayılanSınıfları './SimiCartIcon.css' dosyasından içe aktarın;
'react-intl'den { FormattedMessage, useIntl } içe aktarın;
const SimiCartIcon = aksesuarlar => {
const sınıfları = defaultClasses;
const { formatMessage } = useIntl();
const geçmişi = useHistory();
dönüş (
<düğmesi
aria-label={formatMessage({
kimlik: "blog.bloglabel",
defaultMessage: 'Blog'
})}
className={classes.root}
onClick={() => history.push(resourceUrl('/simicart'))}
>
<Simge kaynağı={Hızlıİleri} />
<span className={classes.label}>
<FormattedMessage id={`Blog`} />
</span>
</button>
);
}
SimiCartIcon.propTypes = {
sınıflar: şekil({ kök: string })
};
SimiCartIcon.defaultProps = {};
varsayılan SimiCartIcon'u dışa aktar;Sonra stil verin:
.kök {
hizalama öğeleri: merkez;
imleç: işaretçi;
ekran: satır içi esnek;
haklı içerik: merkez;
satır yüksekliği: 1;
işaretçi olayları: otomatik;
metin hizalama: merkez;
boşluk: nowrap;
geçiş özelliği: renk;
geçiş süresi: 224ms;
geçiş-zamanlama-fonksiyonu: kübik-bezier(0, 0, 0.2, 1);
yükseklik: 3rem;
genişlik: 3rem;
}
.etiket {
görüntü yok;;
}
@medya (min-genişlik: 641 piksel) {
.kök {
genişlik: otomatik;
}
.etiket {
ekran: başlangıç;
kenar boşluğu-inline-start: 0.25rem;
}
}Sonuç:
Ve bu, eğitimimizi tamamlıyor. Herhangi bir kafa karıştırıcı kısım varsa bize herhangi bir soru sormaktan çekinmeyin ve bu öğreticinin yararlı olduğunu düşünüyorsanız, onu yararlı olarak derecelendirmeyi unutmayın!
Ek olarak, bir Magento PWA Studio uzantısını denemek isterseniz, Magento PWA Studio web sitenizin üstüne kurabileceğiniz ücretsiz ve açık kaynaklı eklenti modüllerimiz var.
Devamını oku:
Magento PWA Studio: Yararlı Bağlantılar ve Kaynaklar