How to extend grid with Javascript extensions #240
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@matks my first ps tutorial 😄 |
25 tasks
|
matks
reviewed
Apr 9, 2019
| # Extend a grid with Javascript extensions. Preparation | ||
| Javascript grid extensions supplements grid functionality and enhances user experience. |
There was a problem hiding this comment.
Suggested change
| Javascript grid extensions supplements grid functionality and enhances user experience. | |
| Javascript grid extensions supplement grid behavior and enhance user experience. |
matks
reviewed
Apr 9, 2019
| # Extend a grid with Javascript extensions. Preparation |
matks
reviewed
Apr 9, 2019
| BulkActionCheckboxExtension which enables interactive selection of bulk actions and so on. | ||
|
|
||
| In this tutorial we use an example of taxes grid to show how to use extensions. |
There was a problem hiding this comment.
Suggested change
| In this tutorial we use an example of taxes grid to show how to use extensions. | |
| In this tutorial we use a grid that display taxes items to show how to use extensions. |
matks
reviewed
Apr 9, 2019
| To start we will need to have a plain grid already created in php side | ||
| (you can find more docs about grid here https://devdocs.prestashop.com/1.7/development/components/grid). | ||
| After following some guides we should be ready. Our grid looks like this: |
There was a problem hiding this comment.
Suggested change
| After following some guides we should be ready. Our grid looks like this: | |
| After following the Grid documentation directions you should now have a fully working php grid. The twig template should look like this: |
matks
reviewed
Apr 9, 2019
| ``` | ||
| {{< figure src="../../img/taxes_grid.png" title="Taxes grid example" >}} | ||
| Although the grid looks complete, none of the actions are working yet. |
There was a problem hiding this comment.
Suggested change
| Although the grid looks complete, none of the actions are working yet. | |
| Although the grid looks complete, none of the actions are working yet because the javascript behavior is not enabled yet. |
matks
reviewed
Apr 9, 2019
| {{< figure src="../../img/taxes_grid.png" title="Taxes grid example" >}} | ||
| Although the grid looks complete, none of the actions are working yet. | ||
| To get started, create javascript file for your page and add entry in your webpack config. |
There was a problem hiding this comment.
There are 3 steps here, write it as a list then explain each step 😉
matks
reviewed
Apr 9, 2019
| For our example, index.js will land in `admin-dev/themes/new-theme/js/pages/tax/index.js`, then | ||
| we add an entry point in `admin-dev/themes/new-theme/.webpack/common.js`. | ||
| Don't forget to add your compiled file path to html script tag (same as with pagination bundle above). |
There was a problem hiding this comment.
I thought it's kinda from another topic. Like 'how to add javascript to html' 😄
matks
reviewed
Apr 9, 2019
| # Adding extensions | ||
|
|
||
| Lets open our index.js and start by importing Grid component from `admin-dev/themes/new-theme/js/components/grid/grid.js` |
There was a problem hiding this comment.
First show the code snippet, then explain what it does 😉
matks
reviewed
Apr 9, 2019
|
|
||
| ``` | ||
| import Grid from '../../components/grid/grid'; |
There was a problem hiding this comment.
add JS comments to explain sections
matks
reviewed
Apr 9, 2019
| }); | ||
| ``` | ||
| That's it, the last thing to do is to run the compiler and extensions should be working. |
There was a problem hiding this comment.
You need to guide the reader to the "compiler" section with npm commands
|
@matks addressed your comments |
|
Thank you @zuk3975 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added tutorial that explains how to use Javascript extensions for grid.