The store will not work correctly when cookies are disabled.
We use cookies to make your experience better.To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Privacy Policy.
Extensions are the best way to make changes to your PWA studio project. With the help of an extension, you can easily customise your online store without affecting your core code. Extensions offer flexibility and scalability in PWA studio projects.
Extensions are easy to install and update occasionally without any problem. You can customize your store on/off without disrupting core functionality, simplifying maintenance.
In this post we explain the method of creating an extension in the PWA studio. We learn in detail how to create an extension in Venia PWA studio.
At Magento PWA root
To create an extension in Magento PWA-Studio, you can follow these steps:
Create a folder named @<namespace>/<modulename> in the root directory of your PWA project.
In <modulename> folder, create the following files and directories:
1. package.json file
2. intercept.js file
3. src folder
Open the package.json file in the root directory of your Venia project.
Add your extension to the dependencies section, pointing to the local path of your extension:
{
"name": "@namespace/modulename",
"version": "0.0.1",
"publishConfig": {
"access": "public"
},
"description": "module description",
"main": "./intercept.js",
"scripts": {
"clean": ""
},
"repository": "github:magento/pwa-studio",
"license": "(OSL-3.0 OR AFL-3.0)",
"peerDependencies": {
"@magento/pwa-buildpack": "~9.0.0",
"@magento/venia-ui": "~7.0.0"
},
"pwa-studio": {
"targets": {
"intercept": "./intercept.js"
}
}
}
This allows PWA studio to recognise and use your extension while it is in development.
About intercept.js file
You directly interact with Targets and Targetables in the intercepted file to apply customizations. It exports a default function that accepts a TargetProvider parameter.
In src folder
you can create components queries and talons
Add your extension in the package.json file of Magento PWA root:
This step confirms that Venia trusts your extension and permits it to interact with the main PWA application.
Install Dependencies and Build
Open your terminal and fire commands
Run yarn install to install any dependencies required by your extension.
Finally, run yarn build to build your PWA project, including your extension.
By following these instructions, you can successfully integrate the extension into Venia PWA Studio, which allows you to add more functionality as needed.
Essence
We hope you found the information presented valuable and insightful in wrapping up our tutorial. We understand that learning new concepts can sometimes be challenging, so if any parts of the tutorial need clarification or you have any questions, please Contact us.
Furthermore, if you want to take your Magento PWA Studio website to the next level, we recommend checking out our collection of PWA Studio extensions. These extensions are designed to improve the functionality and performance of your Magento PWA Studio website.
Thank you for choosing to learn with Elightwalk, and our Magento developer team hopes to continue assisting you on your journey to success with Magento PWA Studio.
Expert in frontend and backend development, combining creativity with sharp technical knowledge. Passionate about keeping up with industry trends, he implements cutting-edge technologies, showcasing strong problem-solving skills and attention to detail in crafting innovative solutions.
Create a successful checkout UI extension for your Shopify store. The UI extension is an exciting opportunity to enhance the user experience to match your brand identity and streamline the checkout process. Let's embark on this journey to elevate your Shopify store's interface and create a more compelling online shopping environment.
A brief approach to building new Talons can help your Venia project. Enhance your Magento PWA shop's functionality and user experience by effortlessly integrating and customizing Talons.
