كيفية إنشاء ملحق Magento PWA Studio

عادة ، قد ترغب في إجراء تغييرات مباشرة على مشروع pwa-studio ولكن هذا النهج بعيد كل البعد عن المثالية إذا كنت ترغب في إنشاء ملحقات. بالنسبة للإضافات ، تريد أن تكون قادرًا على تعطيلها بسهولة ، أو أن تكون قادرًا على استيراد امتدادات متعددة إلى مشروع بسهولة.

للقيام بذلك ، يمكننا إنشاء حزمة داخل المشروع الذي تم إنشاؤه واستيرادها مرة أخرى من ملف JSON . لحسن الحظ ، تم تبسيط هذه العملية بالنسبة لنا بمساعدة حزمة npm تم إصدارها بواسطة Lars Roettig ، مشرف صيانة 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 [target.name] = {esModules: true، cssModules: true}؛
    }) ؛
    target.of ('@ magento / venia-ui').
        routeArray => {
            routeArray.push ({
                الاسم: "صفحة SimiCart" ،
                نمط: '/ simicart' ،
                المسار: "@ simicart / testextension / src / element / page1"
            }) ؛

            مسارات العودة
        }) ؛
} ؛

قم بإنشاء مكون للمسار الجديد في testextension/src/components/page1/index.js :

 استيراد رد فعل من "رد فعل" ؛
استيراد {mergeClasses} من "@ magento / venia-ui / lib / classify" ؛
استيراد {شكل ، سلسلة} من "أنواع العناصر" ؛
 
استيراد الفئات الافتراضية من "./index.css" ؛
 
const Page1 = props => {
    فئات const = mergeClasses (defaultClasses ، props.classes) ؛
    return (<div className = {class.root}> SimiCart </div>) ؛
}

Page1.propTypes = {
    الفئات: الشكل ({root: string})
} ؛
Page1.defaultProps = {} ،
تصدير الصفحة 1 الافتراضية ؛

عدل package.json لاستيراد الحزمة:

 "التبعيات": {
    "@ magento / pwa-buildpack": "~ 7.0.0"،
    "@ simicart / testextension": "الرابط: ./simicart / testextension"
  } ،

بعد ذلك ، قم بالتثبيت والمشاهدة للتحقق مما إذا كان المسار الجديد يعمل.

 تثبيت الغزل
مشاهدة الغزل

3. تجاوز المكونات

بعد الجزء السابق ، سيكون هذا الجزء حول تجاوز طرق العرض الحالية لمشروعك.

من المشروع الذي تم إنشاؤه في الخطوة السابقة ، نضيف تجاوزنا في testextension/src/componentOverrideMapping.js :

 / **
 * تعيينات للكتابة فوق
 * مثال: ["@ magento / venia-ui / lib / مكونات / Main / main.js`]: './lib/components/Main/main.js'
 * /
module.exports = componentOverride = {
    ["@ magento / venia-ui / lib / مكونات / 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 = تتطلب ('./ moduleOverrideWebpackPlugin') ؛
const componentOverrideMapping = يتطلب ('./ 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 [target.name] = {esModules: true، cssModules: true}؛
    }) ؛

    console.log (target.of ('@ magento / pwa-buildpack')) ؛
    target.of ('@ magento / venia-ui').
        routeArray => {
            routeArray.push ({
                الاسم: "SimiCartPage" ،
                نمط: '/ simicart' ،
                المسار: "@ simicart / testextension / src / element / page1"
            }) ؛

            مسارات العودة
        }) ؛
    target.of ('@ magento / pwa-buildpack'). webpackCompiler.tap (مترجم => {
        moduleOverrideWebpackPlugin الجديد (componentOverrideMapping) .apply (مترجم) ؛
    })
} ؛

بعد ذلك ، من مجلد venia-ui ، انسخ مكون الرأس إلى المكون الجديد الذي سنتجاوزه. ثم أضف عرضًا آخر في الرأس قمنا بنسخه للتو:

 استيراد SimiCartIcon من "./simicartIcon" ؛
.
.
.
<SimiCartIcon />

الكود الكامل في testextension/src/override/header.js :

 استيراد React ، {Suspense} من "رد فعل" ؛
استيراد {شكل ، سلسلة} من "أنواع العناصر" ؛

استيراد الشعار من "@ magento / venia-ui / lib / Components / Logo" ؛
استيراد ResourceUrl من "@ magento / peregrine / lib / util / makeUrl" ؛
استيراد {Link، Route} من 'React-router-dom'؛

استيراد AccountTigger من "@ 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 / element / Header / searchTrigger" ؛
استيراد OnlineIndicator من "@ magento / venia-ui / lib / المكونات / Header / onlineIndicator" ؛
استيراد {useHeader} من '@ magento / peregrine / lib / talons / Header / useHeader'؛

استيراد {mergeClasses} من "@ magento / venia-ui / lib / classify" ؛
استيراد defaultClasses من "@ magento / venia-ui / lib / component / Header / header.css" ؛
استيراد PageLoadingIndicator من "@ magento / venia-ui / lib / component / PageLoadingIndicator" ؛
استيراد SimiCartIcon من "./simicartIcon" ؛

const SearchBar = React.lazy (() => استيراد ('@ magento / venia-ui / lib / المكونات / SearchBar')) ؛

رأس const = props => {
    مقدار ثابت {
        انقر فوق الزر
        hasBeenOffline ،
        متصل،
        البحث
        isPageLoading
    } = useHeader () ،

    فئات const = mergeClasses (defaultClasses ، props.classes) ؛
    const rootClass = searchOpen؟ class.open: classes.closed
     const searchBarFallback = (
        <div className = {class.searchFallback}>
            <div className = {class.input}>
                <div className = {class.loader} />
            </div>
        </div>
    ) ؛
    const searchBar = searchOpen؟ (
        <احتياطي التشويق = {searchBarFallback}>
            <المسار>
                <SearchBar isOpen = {searchOpen} />
            </Route>
        </Suspense>
    ) : لا شيء؛
    const pageLoadingIndicator = isPageLoading؟ (
        <PageLoadingIndicator />
    ) : لا شيء؛
 
    إرجاع (
        <header className = {rootClass}>
            <div className = {classes.toolbar}>
                <div className = {class.primaryActions}>
                    <NavTrigger />
                </div>
                {pageLoadingIndicator}
                <OnlineIndicator
                    hasBeenOffline = {hasBeenOffline}
                    isOnline = {isOnline}
                />
                <ارتباط إلى = {ResourceUrl ('/')}>
                    <Logo class = {{logo: classes.logo}} />
                </Link>
                <div className = {class.secondaryActions}>
                    <محرك البحث
                        نشط = {searchOpen}
                        onClick = {handleSearchTriggerClick}
                    />
                    <AccountTigger />
                    <SimiCartIcon />
                    <CartTrigger />
                </div>
            </div>
            {شريط البحث}
        </header>
    ) ؛
} ؛

Header.propTypes = {
    الفئات: الشكل ({
        مغلق: سلسلة ،
        الشعار: سلسلة ،
        فتح: سلسلة ،
        الإجراءات الأولية: سلسلة ،
        الإجراءات الثانوية: سلسلة ،
        شريط الأدوات: سلسلة
    })
} ؛
 
تصدير رأس افتراضي ؛

لنقم بإنشاء هذا العرض في testextension/src/override/SimiCartIcon.js :

 استيراد رد فعل من "رد فعل" ؛
استيراد أيقونة من "@ magento / venia-ui / lib / element / Icon" ؛
استيراد {FastForward} من "ريشة رد الفعل" ؛
استيراد ResourceUrl من "@ magento / peregrine / lib / util / makeUrl" ؛
استيراد {useHistory} من "رد فعل جهاز التوجيه-dom" ؛
استيراد {شكل ، سلسلة} من "أنواع العناصر" ؛

استيراد defaultClasses من "./SimiCartIcon.css" ؛
استيراد {FormattedMessage، useIntl} من 'رد فعل intl'؛

const SimiCartIcon = props => {
    فئات const = defaultClasses ؛
    const {formatMessage} = useIntl () ،
    تاريخ const = useHistory () ؛

    إرجاع (
        <زر
            aria-label = {formatMessage ({
                المعرّف: `blog.bloglabel` ،
                defaultMessage: "مدونة"
            })}
            className = {class.root}
            onClick = {() => history.push (ResourceUrl ('/ simicart'))}
        >
            <Icon src = {FastForward} />
            <span className = {class.label}>
                <FormattedMessage id = {`Blog`} />
            </ span>
        </button>
    ) ؛
}
 
SimiCartIcon.propTypes = {
    الفئات: الشكل ({root: string})
} ؛
SimiCartIcon.defaultProps = {} ،
تصدير SimiCartIcon الافتراضي ؛

ثم صممها:

 .جذر {
    محاذاة العناصر: مركز ؛
    المؤشر: المؤشر.
    عرض: مضمنة المرن ؛
    تبرير المحتوى: مركز ؛
    ارتفاع الخط: 1 ؛
    أحداث المؤشر: تلقائي ؛
    محاذاة النص: مركز ؛
    مسافة بيضاء: نوراراب.
    خاصية الانتقال: اللون ؛
    مدة الانتقال: 224 مللي ثانية ؛
    وظيفة توقيت الانتقال: مكعب بيزير (0 ، 0 ، 0.2 ، 1) ؛
    الارتفاع: 3 ريم.
    العرض: 3ريم ؛
}

.ضع الكلمة المناسبة {
    عرض لا شيء؛؛
}

media (الحد الأدنى للعرض: 641 بكسل) {
    .جذر {
        العرض: تلقائي ؛
    }
    .ضع الكلمة المناسبة {
        العرض: الأولي ؛
        هامش مضمنة البداية: 0.25rem ؛
    }
}

النتائج:

وهذا يختتم برنامجنا التعليمي. لا تتردد في طرح أي سؤال علينا إذا كان هناك أي جزء محير ، وإذا كنت تعتقد أن هذا البرنامج التعليمي مفيد ، فلا تنسَ تقييمه على أنه مفيد!

بالإضافة إلى ذلك ، إذا كنت ترغب في تجربة امتداد Magento PWA Studio ، فلدينا وحدات إضافية مجانية ومفتوحة المصدر يمكنك تثبيتها أعلى موقع Magento PWA Studio على الويب.

اقرأ أكثر:

Magento PWA Studio: روابط وموارد مفيدة