Development
Last updated
Last updated
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 .
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 .
You can also compare two tags using .
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.
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.
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:
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:
Site can be opened with HTTP and HTTPs by default on local.
Ensure that newly created stores are added to your Nginx configuration.
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.
Run the following Magento command from the container:
If it fails please remove the folder app/design/frontend/Scandiweb/pwa
Change the file name of your index.production.phtml and change the path to it in webpack.
Of course! The magic __construct member functions are both overridable and pluggable into, just like any other member!
You can run chrome with WEB security disabled.
Running the following command solves it:
After build just rerun the following command:
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
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.
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 to 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.
Example:
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.
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).
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.
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.
You should intercept the function with the namespace Store/Index/configureStore
Then, do something like this:
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.
Create a file with the same name in app/design and watch the following to learn how to customize it.
Follow the steps provided in .
You can find information on multilanguage support .
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 .
Please see how works and how you can use it to create reusable ScandiPWA theme extensions.