If you have not found an answer to your issue here, but happened to resolve it on your own / with help of the community - please open a pull-request, or an issue with solution details.
Alternatively, write to us in Slack.
Use “withRouter” to check for the URL and check if the new URL is different from the previous one.
All the important changes with each release are listed in GitHub under the GitHub Release important notes section.
You can also compare two tags using GitHub compare functionality.
General advice for easier upgrade process is to extend the code and keep the pure override count low. Extend original classes in overrides, do not copy them.
Theme doesn’t work if the index.php configured is not in the pub folder resulting in 404 error when requesting resources
ScandiPWA does not support installation in non /pub folder. Magento 2 also recommends installing it under /pub folder.
You can access Docker MySQL on your local setup with credentials from .application file and using 3307 port.
ERROR: Connection to Redis redis:6379 failed after 2 failures.Last Error: (0) phpnetworkgetaddresses: getaddrinfo failed: Name or service not known
This can happen after running the following command:
magento scandipwa:theme:bootstrap Scandiweb/pwa
To solve it you have to restart the app container. If this doesn’t help run the following command:
docker run -it -e COMPOSER_AUTH --entrypoint /bin/bash APP_CONTAINER_NAME
After rerun the command:
magento scandipwa:theme:bootstrap Scandiweb/pwa"
Fonts should be installed in the theme public folder and in index.development.html
Before that you must create a file with a different name as it is always taken from vendor:
- Rename the index file
- Change webpack import for it
- Add your new fonts there
Run the following command from Magento 2 root to resolve the issue:
rm -rf generated && magento c:f && chmod -R 777
Site can be opened with HTTP and HTTPs by default on local.
Ensure that newly created stores are added to your Nginx configuration.
Run the following Magento command from the container:
If it fails please remove the folder app/design/frontend/Scandiweb/pwa
Create a file with the same name in app/design and watch the following tutorial video to learn how to customize it.
Change the file name of your index.production.phtml and change the path to it in webpack.
Changes in constructor at this momemnt irrevertable. While we are working on making them extendable please override them completly.
You can run chrome with WEB security disabled.
Running the following command solves it:
After build just rerun the following command:
dcf up -d --remove-orphans
- Utilizes default Magento 2 cache control mechanism over X-Magento-Tags-Pattern header.
- Provides AddTagsToResponsePlugin to add entity headers to each GraphQl cacheable response.
- Utilizes custom Cache entity (singleton), to gather all entities, that were loaded during current request.
- Flush happens based on default cache_flush events for most entities.
- CMS pages has own event observers to track response/flush.
Make sure -f docker-compose.local.yml is included
Copying /abstract/_icons.scss file in custom pwa folder and changing menu icon didn’t affect to the site.
Replace main.scss and replace it. After import original files from vendor and your custom file.
Your server is not configured to execute PHP. Configure web server property.
Follow the steps provided in the offical Magento Developer Docs.
Slider has 1 MB limit for images. Optimize image to be smaller than 1 MB. This will also boost your performance.
Restart the frontend container.
To add an image to the splash screen you need modify config/webmanifest.config.js file.
You can do it by configuring NGINX. Additionally creating a separate store-view would help archive this.
You need to extend the header component and add the new icon.
All URLs that are PWA have to be configured in getBypassCacheHosts within scandipwa/source/src/sw/handler/UrlHandler.js file.
'(?!^.*admin)', // Magento Admin. '(?!^.*default/inipay/std/test)', //
To add additional fields in the checkout:
- Override and extend CheckoutAddressForm component (CheckoutAddressForm.component.js) method filedMap in the front end
- The key you add must be a key matching GraphQL schema defined field key you plan to send to BE
- On backend create a new Magento module, add new field to schema - the child field of input AddressInput
- If that does not work add a resolver to the field and save the value of the field in quote
Pay attention to the root parent item and make sure your root structure looks something like this: root < rootitem < men, women, kids, etc.
You need to create a new item to be on root.
You change the stylesheet where the BEM (block) part is declared. If class starts with “Hello-Friends_isGood” then look for “Hello” component.
You can find information on multilanguage support here.
Follow these steps to add a new page to the router:
- Add it from constructor.
- Make sure you export everything just like the original class did.
- Import everything you plan to reuse (make sure to not import the default export).
You need to add them into the router as well because the request is proceessed there. currently the page is responsible for block loading not the CMS block itself. Add CMS block to getCmsBlocksToRequests() in the index.js (the main router). See the template for this file in override in docs.
Make sure you have set up Magento locale correctly in your store.
This command should be preinstalled. If it is not install the make command.
You would have to make direct changes to the JS component and do custom implementation of this feature.
If the module interacts with Frontend then you will have to implement ScandiPWA compatibility for it. Backend only modules work out of the box without any additional work.
Please see how Plugin Mechanism works and how you can use it to create reusable ScandiPWA theme extensions.
Index.js file has to be renamed before you can make overrides within it. Afterwards make sure to change the file name to the new one in the webpack configuration.
The best way would be to create a Magento widget with title and field for content. Alternatively, you can parse all elements to make them extendable.
You should never run commands from your host machine if you are using Docker. You should run it from the container using the in app command.
State must be defined in constructor. Pass the state from container to component as prop and use the field in the component as porp.