วิธีสร้างส่วนขยาย 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 ลงในไดเร็กทอรีโครงการของคุณ

เรียกใช้คำสั่งนี้:

 เส้นด้าย create @larsroettig/pwa-extension

จะขอข้อมูลเพิ่มเติมเกี่ยวกับส่วนขยาย:

อย่าลืมเลือก No ที่คำถาม " ติดตั้งการพึ่งพาแพ็คเกจด้วยไหมพรม หลังจากสร้างโครงการ "

เปิดไดเร็กทอรีที่สร้างขึ้น

ตอนนี้เราเห็นว่าไฟล์ 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 = เป้าหมาย => {
    targets.of ('@magento/pwa-buildpack').specialFeatures.tap (แฟล็ก => {
        /**
         * Wee จำเป็นต้องเปิดใช้งาน esModules และ cssModules เพื่อให้ build pack โหลดส่วนขยายของเราได้
         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}
         */
        แฟล็ก[targets.name] = { esModules: true, cssModules: true };
    });
    targets.of('@magento/venia-ui').routes.tap(
        routeArray => {
            routeArray.push({
                ชื่อ: 'SimiCart เพจ'
                รูปแบบ: '/simicart',
                เส้นทาง: '@simicart/testtextension/src/components/page1'
            });

            กลับเส้นทางอาร์เรย์;
        });
};

สร้างส่วนประกอบสำหรับเส้นทางใหม่ใน testextension/src/components/page1/index.js :

 นำเข้า React จาก 'react';
นำเข้า {mergeClasses} จาก '@magento/venia-ui/lib/classify';
นำเข้า {shape, string} จาก 'prop-types';
 
นำเข้า defaultClasses จาก './index.css';
 
const Page1 = อุปกรณ์ประกอบฉาก => {
    คลาส const = mergeClasses (defaultClasses, props.classes);
    ส่งคืน (<div className={classes.root}>SimiCart</div>);
}

Page1.propTypes = {
    คลาส: รูปร่าง ({ราก: สตริง})
};
Page1.defaultProps = {};
ส่งออกเริ่มต้น Page1;

แก้ไข package.json เพื่อนำเข้าแพ็คเกจ:

 "การพึ่งพา": {
    "@magento/pwa-buildpack": "~7.0.0",
    "@simicart/testtextension": "link:./@simicart/testtextension"
  },

หลังจากนั้น ติดตั้งและดูเพื่อตรวจสอบว่าเส้นทางใหม่ใช้งานได้หรือไม่

 ติดตั้งเส้นด้าย
นาฬิกาเส้นด้าย

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 = ต้องการ ('./moduleOverrideWebpackPlugin');
const componentOverrideMapping = ต้องการ ('./componentOverrideMapping')

module.exports = เป้าหมาย => {
    targets.of ('@magento/pwa-buildpack').specialFeatures.tap (แฟล็ก => {
        /**
         * Wee จำเป็นต้องเปิดใช้งาน esModules และ cssModules เพื่อให้ build pack โหลดส่วนขยายของเราได้
         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}
         */
        แฟล็ก[targets.name] = { esModules: true, cssModules: true };
    });

    console.log(targets.of('@magento/pwa-buildpack'));
    targets.of('@magento/venia-ui').routes.tap(
        routeArray => {
            routeArray.push({
                ชื่อ: 'SimiCartPage',
                รูปแบบ: '/simicart',
                เส้นทาง: '@simicart/testtextension/src/components/page1'
            });

            กลับเส้นทางอาร์เรย์;
        });
    targets.of ('@magento/pwa-buildpack').webpackCompiler.tap (คอมไพเลอร์ => {
        ใหม่ moduleOverrideWebpackPlugin(componentOverrideMapping).apply(คอมไพเลอร์);
    })
};

จากนั้นจากโฟลเดอร์ venia-ui ให้คัดลอกองค์ประกอบ ส่วนหัว ไปยังองค์ประกอบใหม่ที่เราจะแทนที่ จากนั้นเพิ่มมุมมองเพิ่มเติมในส่วนหัวที่เราเพิ่งคัดลอก:

 นำเข้า SimiCartIcon จาก './simicartIcon';
.
.
.
<SimiCartIcon />

รหัสเต็มใน testextension/src/override/header.js :

 นำเข้า React { Suspense } จาก 'react';
นำเข้า { รูปร่าง สตริง } จาก 'prop-types';

นำเข้าโลโก้จาก '@magento/venia-ui/lib/components/Logo';
นำเข้า resourceUrl จาก '@magento/peregrine/lib/util/makeUrl';
นำเข้า { ลิงก์ เส้นทาง } จาก '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';
นำเข้า defaultClasses จาก '@magento/venia-ui/lib/components/Header/header.css';
นำเข้า PageLoadingIndicator จาก '@magento/venia-ui/lib/components/PageLoadingIndicator';
นำเข้า SimiCartIcon จาก './simicartIcon';

const SearchBar = React.lazy(() => การนำเข้า ('@magento/venia-ui/lib/components/SearchBar'));

const Header = อุปกรณ์ประกอบฉาก => {
    const {
        จัดการSearchTriggerClick,
        hasBeenออฟไลน์,
        ออนไลน์,
        ค้นหาเปิด,
        isPageLoading
    } = useHeader();

    คลาส const = mergeClasses (defaultClasses, props.classes);
    const rootClass = searchOpen ? class.open : class.closed;
     const searchBarFallback = (
        <div className={classes.searchFallback}>
            <div className={classes.input}>
                <div className={classes.loader} />
            </div>
        </div>
    );
    const searchBar = ค้นหาเปิด ? (
        <Suspense fallback={searchBarFallback}>
            <เส้นทาง>
                <SearchBar isOpen={searchOpen} />
            </เส้นทาง>
        </ใจจดใจจ่อ>
    ) : โมฆะ;
    const pageLoadingIndicator = isPageLoading ? (
        <PageLoadingIndicator />
    ) : โมฆะ;
 
    กลับ (
        <header className={rootClass}>
            <div className={classes.toolbar}>
                <div className={classes.primaryActions}>
                    <NavTrigger />
                </div>
                {pageLoadingIndicator}
                <ตัวบ่งชี้ออนไลน์
                    hasBeenOffline={hasBeenOffline}
                    isOnline={isOnline}
                />
                <Link to={resourceUrl('/')}>
                    <คลาสโลโก้={{ โลโก้: class.logo }} />
                </Link>
                <div className={classes.secondaryActions}>
                    <SearchTrigger
                        ใช้งานอยู่={ค้นหาเปิด}
                        onClick={จัดการSearchTriggerClick}
                    />
                    <AccountTrigger />
                    <SimiCartIcon />
                    <CartTrigger />
                </div>
            </div>
            {แถบค้นหา}
        </header>
    );
};

Header.propTypes = {
    คลาส: รูปร่าง ({
        ปิด: สตริง,
        โลโก้: สตริง,
        เปิด: สตริง,
        การดำเนินการหลัก: สตริง,
        SecondaryActions: สตริง,
        แถบเครื่องมือ: string
    })
};
 
ส่งออกส่วนหัวเริ่มต้น;

มาสร้างมุมมองนี้ใน testextension/src/override/SimiCartIcon.js :

 นำเข้า React จาก 'react';
นำเข้าไอคอนจาก '@magento/venia-ui/lib/components/Icon';
นำเข้า { FastForward } จาก 'react-feather';
นำเข้า resourceUrl จาก '@magento/peregrine/lib/util/makeUrl';
นำเข้า { useHistory } จาก 'react-router-dom';
นำเข้า { รูปร่าง สตริง } จาก 'prop-types';

นำเข้า defaultClasses จาก './SimiCartIcon.css';
นำเข้า { FormattedMessage, useIntl } จาก 'react-intl';

const SimiCartIcon = อุปกรณ์ประกอบฉาก => {
    คลาส const = defaultClasses;
    const { formatMessage } = useIntl ();
    ประวัติ const = useHistory();

    กลับ (
        <ปุ่ม
            aria-label={รูปแบบข้อความ({
                id: `blog.bloglabel',
                defaultMessage: 'บล็อก'
            })}
            className={classes.root}
            onClick={() => history.push(resourceUrl('/simicart'))}
        >
            <ไอคอน src={กรอไปข้างหน้า} />
            <span className={classes.label}>
                <FormattedMessage id={`Blog`} />
            </span>
        </button>
    );
}
 
SimiCartIcon.propTypes = {
    คลาส: รูปร่าง ({ รูท: สตริง })
};
SimiCartIcon.defaultProps = {};
ส่งออกเริ่มต้น SimiCartIcon;

จากนั้นจัดรูปแบบ:

 .root {
    จัดรายการ: ศูนย์;
    เคอร์เซอร์: ตัวชี้;
    จอแสดงผล: อินไลน์ดิ้น;
    ปรับเนื้อหา: ศูนย์;
    ความสูงของเส้น: 1;
    ตัวชี้เหตุการณ์: อัตโนมัติ;
    จัดข้อความ: ศูนย์;
    พื้นที่สีขาว: nowrap;
    คุณสมบัติการเปลี่ยนแปลง: สี;
    ระยะเวลาการเปลี่ยนภาพ: 224ms;
    การเปลี่ยนแปลงเวลาฟังก์ชั่น: ลูกบาศก์ bezier (0, 0, 0.2, 1);
    ความสูง: 3rem;
    ความกว้าง: 3rem;
}

.ฉลาก {
    แสดง: ไม่มี;;
}

@media (ความกว้างต่ำสุด: 641px) {
    .root {
        ความกว้าง: อัตโนมัติ;
    }
    .ฉลาก {
        แสดง: เริ่มต้น;
        ระยะขอบอินไลน์เริ่มต้น: 0.25rem;
    }
}

ผลลัพธ์:

และนั่นเป็นการสรุปบทช่วยสอนของเรา อย่าลังเลที่จะถามคำถามใด ๆ หากมีส่วนที่สับสน และถ้าคุณคิดว่าบทช่วยสอนนี้มีประโยชน์ อย่าลืมให้คะแนนว่าเป็นประโยชน์!

นอกจากนี้ หากคุณรู้สึกอยากลองใช้ส่วนขยาย Magento PWA Studio เรามีโมดูลเสริมแบบโอเพนซอร์สฟรี ซึ่งคุณสามารถติดตั้งที่ด้านบนของเว็บไซต์ Magento PWA Studio ได้

อ่านเพิ่มเติม:

Magento PWA Studio: ลิงค์และแหล่งข้อมูลที่เป็นประโยชน์