So guys i'm going to convert my current Magento site to PWA and idea is to duplicate current
front-end to new PWA theme.I'm going to override
the current Magento theme. now before we begin i need to create a public folder for my store assets
for my store, otherwise PWA studio uses the venia_static folder to store assets.
This is a PWA studio core module and I don't want to touch any core modules since we need to upgrade
the PWA studio at a later stage. To do that I'm going to create a new public directory. There is
a documentation for changing the static assets directory. create a public directory in your PWA
studio root and copy all your static assets. go to manifest.json file and change the data for your website.
Next go to template.html and change the icon links to your new public directory.
Next, exit your upward.yml file and save it and then open local_intercept.js file copy the code in the
documentation to local_intercept.js if you like to learn further what are the targets you can find
more details in PWA studio API reference section or event handling in React.
after you change local_intercept.js and run "yarn build" you can see there is an error saying targets not found.
because in our local_intercept.js the way we access the target object is not correct. modify the code
to include targets in your local_intercept.js and then run "yarn build" and that should fix the issue.
Create a components directory in src directory and copy footer, main,
app, and adaptor folders from linear UI library components.
I removed folders and files that I don't need and let's override
the imports. I've already cleaned the file. note the classify library import path when we override the import.
We need to change the path to full part from our footer modification directory.
Next, I've changed the app.js
in app library, main.js in main directory, and adapter.js in adapter library
and finally go to index.js in our src directory
and change the adapter path to our new adapter location
for css pwa studio uses tailwind css framework so we can use the tailwind and css module notations
for our footer design i'll add the link to both documentation
run yarn build and yarn watch and test the footer changes
and you can see the changes are now appearing
now so far we have some static changes
I need to call the footer block that I've use to show my logo and links from my Magento back-end
for this we are going to use PWA Studio cms block library. let's import the library and render it .
inside our links div element using the identifiers. build the project and run yarn watch you can see
our footer is now in good shape. that's it for this video please like the video and subscribe if
you like to get updates on hands-on development with Magento PWA studio and react developments