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.
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.
Can’t access Docker MySQL on my local setup
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:
To solve it you have to restart the app container. If this doesn’t help run the following command:
After rerun the command:
Where is the correct place to install a new font for the ScandiPWA?
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
ERROR: main.CRITICAL: Class …\App\Config\Initial\Reader\Proxy does not exist
Run the following command from Magento 2 root to resolve the issue:
How to bypass HTTPs on local?
Site can be opened with HTTP and HTTPs by default on local.
Newly added store is not working altough is shows up in the store switcher
Ensure that newly created stores are added to your Nginx configuration.
Does ScandiPWA plan to implement TypeScript?
The core will not migrate to TypeScript in a relatively long term. The extensions however - might be done in any language. This is because of the learning curve needed for TypeScript. We prefer simplier technology - most M2 developer are relatively unexperienced with JavaScript. The interfaces and some TypeScript based components might come with UI library in the future. It is important step for extensions, as there is a need to depend on some abstraction when writing an extension.
ERROR: no such file or directory, open ‘…/Scandiweb/pwa/package.json’
Run the following Magento command from the container:
If it fails please remove the folder app/design/frontend/Scandiweb/pwa
How to view real time code changes to the Theme?
Create a file with the same name in app/design and watch the following tutorial video to learn how to customize it.
How to modify the root.phtlm on my custom theme?
Change the file name of your index.production.phtml and change the path to it in webpack.
Can I extend constructors?
Of course! The magic __construct member functions are both overridable and pluggable into, just like any other member!
Chrome extensions don’t work.
You can run chrome with WEB security disabled.
dcf up -d —remove-orphans can’t bring frontend container up
Running the following command solves it:
After build just rerun the following command:
How ScandiPWA manages cache?
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.
Don’t see src folder changes immediatelly on update
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.
Content is not appearing on frontend after installing ScandiPWA in running Magento instance
Your server is not configured to execute PHP. Configure web server property.
How do I get public and private key from Magento marketplace?
ERROR: 413 Request Entity Too Large when uploading Slider images
Slider has 1 MB limit for images. Optimize image to be smaller than 1 MB. This will also boost your performance.
How do I recompile a file on the frontend?
Restart the frontend container.
How can I add an image to the splash screen?
To add an image to the splash screen you need to modify config/webmanifest.config.js file.
Can I use ScandiPWA theme only for mobile and tablet versions of the website?
You can do it by configuring NGINX. Additionally creating a separate store-view would help archive this.
How do I add icons to the header, for example, wishlist icon?
You need to extend the header component and add the new icon.
Can’t open a non-pwa page
All URLs that are PWA have to be configured in getBypassCacheHosts within scandipwa/source/src/sw/handler/UrlHandler.js file.
Example:
How can I add additional fields to the checkout?
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
Can’t add new menu items to menu
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.
Where do I change the stylesheet for menu items?
You change the stylesheet where the BEM (block) part is declared. If class starts with “Hello-Friends_isGood” then look for “Hello” component.
How do I create a multi-language website?
You can find information on multilanguage support here.
How can I add a new page to the router?
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).
How can you add CMS block identifiers in the header?
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.
Translation is not working even after rebuilding the theme
Make sure you have set up Magento locale correctly in your store.
ERROR: “Command make not found”
This command should be preinstalled. If it is not install the make command.
How can I implement autoslider?
You would have to make direct changes to the JS component and do custom implementation of this feature.
How can I call custom Magento modules with ScandiPWA theme?
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.
How can I add changes to index.js file under the app directory?
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.
How do I make some elements extendable (Accordion) just in mobile view?
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.
Cache clean command not working: bin/magento c:c
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.
ERROR: TypeError: this.state is null
State must be defined in constructor. Pass the state from container to component as prop and use the field in the component as porp.
How to add an additional reducer to the application via plugin?
You should intercept the function with the namespace Store/Index/configureStore
Then, do something like this:
How to add a translation for/by a plugin?
Easy - just put an additional translation file into your extension'sscandipwa/i18ndirectory! The naming convention for these files is the same as for the ones in themes. These additional files are merged with the big ones in the theme in order to produce a translation. In such a way, you can also add a whole new translation pack! The original values present in the theme will always override the custom ones provided by extensions.
import NewReducer from '../../store/New/New.Reducer';
const addReducer = (args, callback) => {
/** First of all, you should create the store itself. */
const store = callback(...args);
/** Then, inject all the reducers you need in your plugin. */
store.injectReducer('NewReducer', NewReducer);
/** And don't forget to return the new store to the application! */
return store;
}
