How to Create a new Talons in-Venia?

# PWA # Javascript

Pravin Prajapati · 21 Dec 2022

Step 1

Take a Reference Code from the Venia of Magento included in "node_modules" and Copy it
For Example it can be useHeader, useFooter, useCategoryList, etc...

Step 2

Create a talon folder in the Src folder
then create a sub folder in the name of the reference file
Now create a .js file in the name of the reference file name
For Example Src/talons/Header/useHeader.js

- talons/Breadcrumbs/useBreadcrumbs.js

- Then Paste the Copied Code into the created .js folder

export default  original => {
          return function useBreadcrumbs(props, …restArgs) {
                    const { categoryID } = proprs;
          }
}

Step 3

Create a new intercept file (if not available)
and paste the code given below

function localIntercept(targets) {
   const peregrineTargets = targets.of("@magento/peregrine");
   const talonsTargets = peregrineTargets.talons;
 
   talonsTargets.tap((talonsWrapperConfig) => {
       talonsWrapperConfig.Breadcrumbs.useBreadcrumbs.wraWith(require.resolve('./src/talons/Breadcrumbs/useBreadcrumbs'))
       talonsWrapperConfig.MagentoRoute.useMagentoRoute.wraWith(require.resolve('./src/talons/MagentoRoute/useMagentoRoute'))
   });
}

And at last write "module.exports = localIntercept, So your intercept file will be ready to work.
also do write your folder name and file name after the "talonWrapperConfig" and then provide the file path inside the parenthesis.

Email send us at hello@elightwalk.com

Table of contents

Pravin Prajapati

Full Stack Developer

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.

Most Visited Blog

Venia Step-Up: Elevate Your Storefront Experience

Venia Step-Up can take your storefront to new heights. Enhance your Magento PWA experience with features, customization possibilities, and a unified user experience. Investigate the next step in retail excellence.

After move to another server ScandiPWA theme is not responding.

Are you having problems with the ScandiPWA theme after a server migration? To maintain responsiveness and performance on Magento PWA storefront, use our simple guide to effectively troubleshoot.

How to display a child product’s attribute value at a configurable product’s grid panel?

Improve the setup of your Magento! Learn how to dynamically Show a child product's value in a customizable grid panel. Follow our step-by-step instructions for customization and increased product visibility.