├── CLI-commands.md ├── README.md ├── _module.less ├── assets ├── PDFs │ ├── M2CPFED - 1. Themes _ Design Config.pdf │ ├── M2CPFED - 2. Layout XML _ Templates.pdf │ ├── M2CPFED - 3. Page Layouts _ LESS _ Deploy.pdf │ ├── M2CPFED - 4. Javascript - RequireJS _ jQuery.pdf │ ├── M2CPFED - 5. Knockout _ UI components.pdf │ └── M2CPFED - 6. Translations _ Customisations.pdf ├── debug-knockout.jpg └── luma-icons.png ├── certification ├── M2CPFED - 1. Themes _ Design Config.pdf ├── M2CPFED - 2. Layout XML _ Templates.pdf ├── M2CPFED - 3. Page Layouts _ LESS _ Deploy.pdf ├── M2CPFED - 4. Javascript - RequireJS _ jQuery.pdf ├── M2CPFED - 5. Knockout _ UI components.pdf ├── M2CPFED - 6. Translations _ Customisations.pdf └── M2_Certified_Professional_Front_End_Developer_Study_Guide.pdf ├── curly-braces-variable.md ├── gitignore ├── image-snippets ├── admin-config-dev.jpg ├── clean-vs-flush-cache.jpg ├── modes.png └── upgrade-composer.jpg ├── javascript.md ├── knockout.md ├── phtml.md ├── tips&tricks.md ├── top-must-have-magento2-extensions.md ├── ui-ux ├── button-size.jpg ├── chips.jpg ├── dialog-box.jpg ├── fab-button.jpg ├── icon-button.jpg ├── input.jpg ├── navbar.jpg ├── navbar2.jpg ├── navigation.jpg └── svtion-bar.jpg ├── widgety-m2-luma.pdf └── xml.md /CLI-commands.md: -------------------------------------------------------------------------------- 1 | # Useful Magento 2 CLI commands 2 | 3 | **Deploy Mode Functions:** 4 | ``` 5 | php bin/magento deploy:mode:show 6 | php bin/magento deploy:mode:set developer ( default | production | developer ) 7 | php bin/magento deploy:mode:set production --skip-compilation 8 | 9 | php bin/magento maintenance:disable 10 | php bin/magento maintenance:enable 11 | php bin/magento maintenance:enable --ip=192.0.0.1 --ip=192.0.0.2 (for all clients except this IPs) 12 | php bin/magento maintenance:enable --ip=none (to clear the list of IPs) 13 | ``` 14 | 15 | **CSS and JS config for development** 16 | ``` 17 | php bin/magento config:set dev/js/enable_js_bundling 0 18 | php bin/magento config:set dev/js/merge_files 0 19 | php bin/magento config:set dev/js/minify_files 0 20 | php bin/magento config:set dev/css/merge_css_files 0 21 | php bin/magento config:set dev/css/minify_files 0 22 | php bin/magento config:set dev/static/sign 0 23 | 24 | php bin/magento config:set --scope="stores" --scope-code="default" dev/js/minify_files 0 25 | ``` 26 | 27 | **Cache Operations:** 28 | ``` 29 | php bin/magento cache:status 30 | php bin/magento c:f ( cache:flush } 31 | php bin/magento c:c ( cache:clean } 32 | php bin/magento cache:disable full_page layout block_html translate 33 | ``` 34 | **Default Cache types:** 35 | ``` 36 | config 37 | layout 38 | block_html 39 | collections 40 | reflection 41 | db_ddl 42 | compiled_config 43 | eav 44 | customer_notification 45 | config_integration 46 | config_integration_api 47 | full_page 48 | config_webservice 49 | translate 50 | vertex 51 | ``` 52 | 53 | **Module oprations (check current status / disable module / enable module):** 54 | ``` 55 | php bin/magento module:status 56 | php bin/magento module:disable VENDOR_MODULENAME 57 | php bin/magento module:enable VENDOR_MODULENAME 58 | php bin/magento module:uninstall VENDOR_MODULENAME (if installed by Composer) 59 | ``` 60 | 61 | **Setup Upgrade / Setup Compile / Static Content Deploy:** 62 | ``` 63 | php -d memory_limit=2048M bin/magento setup:upgrade 64 | php -d memory_limit=2048M bin/magento setup:di:compile 65 | php -d memory_limit=2048M bin/magento setup:static-content:deploy 66 | php bin/magento setup:static-content:deploy pl_PL -f 67 | php bin/magento setup:static-content:deploy pl_PL --theme Vendor/theme --no-html-minify -f 68 | php bin/magento setup:static-content:deploy pl_PL en_US en_GB --jobs 20 69 | 70 | ``` 71 | for debug files generation in developer mode: 72 | ``` 73 | php bin/magento setup:static-content:deploy -v 74 | php bin/magento setup:static-content:deploy -vv 75 | php bin/magento setup:static-content:deploy -vvv 76 | ``` 77 | 78 | **Setup config:** 79 | ``` 80 | php bin/magento setup:store-config:set --base-url="http://project.dev/" 81 | php bin/magento setup:store-config:set --base-url-secure="https://project.dev/" 82 | 83 | php bin/magento config:set admin/security/session_lifetime 604800 ( 86400 = 1 day / 604800 = 7 days / 31536000 = 1 year / etc ) 84 | php bin/magento config:set admin/security/password_is_forced 0 85 | ``` 86 | 87 | **Indexer ( Reindex | Reset ):** 88 | ``` 89 | php bin/magento indexer:reset 90 | php -d memory_limit=2048M bin/magento indexer:reindex 91 | 92 | php bin/magento indexer:status 93 | php bin/magento indexer:reset cataloginventory_stock 94 | php bin/magento indexer:reindex cataloginventory_stock 95 | ``` 96 | 97 | **Generate a translation package for a definite module** 98 | ``` 99 | php bin/magento i18n:collect-phrases --output="app/code/Module/Vendor/i18n/pl_PL.csv" app/code/Module/Vendor 100 | php bin/magento i18n:collect-phrases --output="app/design/frontend//Module/Vendor/i18n/pl_PL.csv" --magento (This option adds themes or modules to each line in the dictionary.) 101 | ``` 102 | 103 | **Catalog Images Resize:** 104 | ``` 105 | php bin/magento catalog:image:resize 106 | ``` 107 | 108 | **For admin** 109 | ``` 110 | php bin/magento admin:user:create 111 | php bin/magento config:set admin/security/password_lifetime 0 112 | php bin/magento config:set admin/security/password_is_forced 0 113 | php bin/magento info:adminuri 114 | php bin/magento admin:user:unlock USERNAME 115 | ``` 116 | 117 | **Get list of all available commands** 118 | ``` 119 | php bin/magento list 120 | php bin/magento help 121 | ``` 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My Magento 2 awesome resources :star_struck: 2 | 3 | ### :point_right: My [XML snippets](https://github.com/jq91/magento2-handy-snippets/blob/master/xml.md) 4 | ### :point_right: My [.phtml template snippets](https://github.com/jq91/magento2-handy-snippets/blob/master/phtml.md) 5 | ### :point_right: My [_module.less base file](https://github.com/jq91/magento2-handy-snippets/blob/master/_module.less) 6 | ### :point_right: My [javascript snippets](https://github.com/jq91/magento2-handy-snippets/blob/master/javascript.md) 7 | ### :point_right: My [Knockout snippets](https://github.com/jq91/magento2-handy-snippets/blob/master/knockout.md) 8 | ### :point_right: My [{{variable}} snippets list](https://github.com/jq91/magento2-handy-snippets/blob/master/curly-braces-variable.md) 9 | ### :point_right: My [CLI - command line list](https://github.com/jq91/magento2-handy-snippets/blob/master/CLI-commands.md) 10 | ### :point_right: My [theme Azkarra for Magento 2.x - optimized for Core Web Vitals and SEO](https://github.com/dev-jq/Azkarra-Magento2-Theme-for-Core-Web-Vitals-and-SEO) 11 | ### :point_right: My [local developement environment for Magento 2 based on Lando and WSL2](https://github.com/dev-jq/magento2-lando-wsl2) 12 | ### :point_right: My [recommendations for Magento 2 FREE & PAID modules](https://github.com/jq91/magento2-handy-snippets/blob/master/top-must-have-magento2-extensions.md) 13 | ### :point_right: My [impoved Polish Language Pack for Magento 2.x](https://github.com/jq91/magento2-improved-polish-language-pack) 14 | ### :point_right: My [polish translations for 3rd party modules](https://github.com/dev-jq/magento2-pl-translations-for-3rd-party-modules) 15 | ### :point_right: My [Tips & Tricks](https://github.com/jq91/magento2-handy-snippets/blob/master/tips%26tricks.md) 16 | ### :point_right: Preparation for Magento certification - [PDFs](https://github.com/jq91/magento2-handy-snippets/tree/master/certification) 17 | ### :point_right: Best practice [.gitignore file ](https://github.com/jq91/magento2-handy-snippets/blob/master/gitignore) by @jissereitsma 18 | ### :point_right: Magento 2 supported [software versions compatibility](https://github.com/dev-jq/magento2-versions-compatibility) 19 | 20 | # Or see my Magento 2 bookmarks :star_struck: 21 | 22 | ## :trophy: Pro Magento Devs: 23 | :black_medium_small_square: [mage2pro](https://github.com/mage2pro) 24 | 25 | :black_medium_small_square: [magefan](https://github.com/magefan) 26 | 27 | :black_medium_small_square: [MagePsycho](https://github.com/MagePsycho) 28 | 29 | :black_medium_small_square: [redchamps](https://github.com/redchamps) 30 | 31 | :black_medium_small_square: [vijayrami](https://github.com/vijayrami) 32 | 33 | :black_medium_small_square: [nans](https://github.com/nans) 34 | 35 | :black_medium_small_square: [DominicWatts](https://github.com/DominicWatts) 36 | 37 | 38 | ## :man_student: Certification: 39 | 40 | :black_medium_small_square: [Quizes: front-end developer certification practiceexam](https://www.goconqr.com/p/15702242/question/8855829-magento-2-front-end-developer-certification-practice-exam-quizzes) :star: 41 | 42 | :black_medium_small_square: [Training PDFs resources](https://github.com/fisheye-academy/m2cpfed-training) :star: 43 | 44 | :black_medium_small_square: [goconqr.com/en/tags/magento+2](https://www.goconqr.com/en/tags/magento+2) 45 | 46 | :black_medium_small_square: [firebearstudio: How to Pass the Magento 2 Certification](https://firebearstudio.com/blog/how-to-pass-the-magento-2-certification.html) 47 | 48 | 49 | ## :writing_hand: Blogs: 50 | 51 | :black_medium_small_square: [aureatelabs.com](https://aureatelabs.com/blog/tag/magento-2/) :star: 52 | 53 | :black_medium_small_square: [dhairvi.com](https://www.dhairvi.com/category/magento2/) :star: 54 | 55 | :black_medium_small_square: [rakeshjesadiya.com](https://www.rakeshjesadiya.com/category/magento-2/) 56 | 57 | :black_medium_small_square: [magezon.com](https://blog.magezon.com/magento-tips-and-news/magento-2-tutorials/) :star: 58 | 59 | :black_medium_small_square: [magevision.com](https://www.magevision.com/blog) 60 | 61 | :black_medium_small_square: [webguru.pt](https://webguru.pt/category/magento-2/) 62 | 63 | :black_medium_small_square: [vijaymrami.blogspot.com](http://vijaymrami.blogspot.com) :star: 64 | 65 | :black_medium_small_square: [extensionsninjas.com](https://extensionsninjas.com/magento-2-tutorials.html) 66 | 67 | :black_medium_small_square: [mageprince.com](https://mageprince.com/blog/category/magento2/) :star: 68 | 69 | :black_medium_small_square: [jason.codes](https://jason.codes) 70 | 71 | :black_medium_small_square: [inchoo.net](https://inchoo.net/magento-2/) 72 | 73 | :black_medium_small_square: [codextblog.com](https://www.codextblog.com/category/magento-2/) :star: 74 | 75 | :black_medium_small_square: [meetanshi.com](https://meetanshi.com/blog/) :star: 76 | 77 | :black_medium_small_square: [webkul.com](https://webkul.com/blog/dev/) :star: 78 | 79 | :black_medium_small_square: [magefan.com](https://magefan.com/blog/magento-2-development) 80 | 81 | :black_medium_small_square: [magecomp.com](https://magecomp.com/blog/category/magento-2/) :star: 82 | 83 | :black_medium_small_square: [alanstorm.com](https://alanstorm.com/category/magento-2/) 84 | 85 | :black_medium_small_square: [chapagain.com](https://blog.chapagain.com.np/category/magento/magento-2/) :star: 86 | 87 | :black_medium_small_square: [scommerce-mage.com](https://www.scommerce-mage.com/blog/) 88 | 89 | :black_medium_small_square: [fooman.com](https://fooman.com/blog/tag:Magento2) 90 | 91 | :black_medium_small_square: [firebearstudio.com](https://firebearstudio.com/blog/the-ultimate-magento-2-tutorial.html) 92 | 93 | :black_medium_small_square: [michiel-gerritsen.com](https://www.michiel-gerritsen.com/) 94 | 95 | :black_medium_small_square: [pandagroup.co](https://pandagroup.co/blog/category/dev-notes) 96 | 97 | :black_medium_small_square: [qaisarsatti.com](https://blog.qaisarsatti.com/magento_2/) 98 | 99 | :black_medium_small_square: [magenest.com](https://store.magenest.com/blog/technical-guidelines/) :star: 100 | 101 | :black_medium_small_square: [mobecls.com](https://mobecls.com/category/magento-development/) 102 | 103 | :black_medium_small_square: [onilab.com](https://onilab.com/blog/) 104 | 105 | :black_medium_small_square: [mage.training](https://mage.training/blog/tag/magento-2/) 106 | 107 | :black_medium_small_square: [bsscommerce.com](https://bsscommerce.com/blog/category/magento-tutorial/) 108 | 109 | :black_medium_small_square: [magebrew.com](https://magebrew.com/blog/category/magento-2/) 110 | 111 | :black_medium_small_square: [wishusucess.com](http://www.wishusucess.com/category/e-commerce-platform/magento-2-ecommerce/) 112 | 113 | :black_medium_small_square: [codedecorator.com](https://www.codedecorator.com/blog) :star: 114 | 115 | :black_medium_small_square: [justwebdevelopment.com](https://www.justwebdevelopment.com/blog/category/magento2/) 116 | 117 | :black_medium_small_square: [rohanhapani.com](https://www.rohanhapani.com/category/magento/magento-2/) 118 | 119 | :black_medium_small_square: [shahednasser.com](https://blog.shahednasser.com/tag/magento) 120 | 121 | :black_medium_small_square: [M.academy](https://m.academy/blog/) 122 | 123 | :black_medium_small_square: [aureatelabs.com](https://aureatelabs.com/category/magento-2/) 124 | 125 | :black_medium_small_square: [blog.magepsycho.com](https://blog.magepsycho.com) :star: 126 | 127 | :black_medium_small_square: [olegnax.com](https://olegnax.com/category/magento-2/) 128 | 129 | :black_medium_small_square: [tigren.com](https://www.tigren.com/blog/) 130 | 131 | ## :office: Companies: 132 | 133 | :black_medium_small_square: https://github.com/orgs/swissup/repositories 134 | 135 | :black_medium_small_square: https://github.com/orgs/magepow/repositories 136 | 137 | :black_medium_small_square: https://github.com/orgs/magepal/repositories 138 | 139 | :black_medium_small_square: https://github.com/orgs/magespecialist/repositories 140 | 141 | :black_medium_small_square: https://github.com/orgs/magesuite/repositories 142 | 143 | :black_medium_small_square: https://github.com/orgs/Vendic/repositories 144 | 145 | :black_medium_small_square: https://github.com/orgs/yireo-training/repositories :star: 146 | 147 | :black_medium_small_square: https://github.com/orgs/Smile-SA/repositories 148 | 149 | :black_medium_small_square: https://github.com/orgs/EaDesgin/repositories 150 | 151 | :black_medium_small_square: https://github.com/orgs/extdn/repositories 152 | 153 | :black_medium_small_square: https://github.com/orgs/integer-net/repositories 154 | 155 | :black_medium_small_square: https://github.com/orgs/AmpersandHQ/repositories 156 | 157 | :black_medium_small_square: https://github.com/orgs/magento-hackathon/repositories 158 | 159 | :black_medium_small_square: https://github.com/orgs/elgentos/repositories 160 | 161 | :black_medium_small_square: https://github.com/orgs/Siteation/repositories 162 | 163 | :black_medium_small_square: https://github.com/orgs/mage2pro/repositories 164 | 165 | :black_medium_small_square: https://github.com/orgs/bitExpert/repositories 166 | 167 | :black_medium_small_square: https://github.com/orgs/EcomDev/repositories 168 | 169 | :black_medium_small_square: https://github.com/orgs/mavenecommerce/repositories 170 | 171 | :black_medium_small_square: https://github.com/orgs/dnafactory/repositories 172 | 173 | :black_medium_small_square: https://github.com/orgs/sitewards/repositories 174 | 175 | :black_medium_small_square: https://github.com/orgs/customgento/repositories 176 | 177 | :black_medium_small_square: https://github.com/orgs/flancer32/repositories 178 | 179 | :black_medium_small_square: https://github.com/orgs/lizardmedia/repositories 180 | 181 | :black_medium_small_square: https://github.com/orgs/Magenerds/repositories 182 | 183 | :black_medium_small_square: https://github.com/AmastyLtd-zz?tab=repositories 184 | 185 | :black_medium_small_square: https://github.com/orgs/experius/repositories 186 | 187 | :black_medium_small_square: https://github.com/orgs/magemojo/repositories 188 | 189 | :black_medium_small_square: https://github.com/orgs/ebizmarts/repositories 190 | 191 | :black_medium_small_square: https://github.com/orgs/stenikgroup/repositories 192 | 193 | :black_medium_small_square: https://github.com/orgs/hungersoft/repositories 194 | 195 | :black_medium_small_square: https://github.com/orgs/bitbull-team/repositories 196 | 197 | :black_medium_small_square: https://github.com/orgs/comwrap/repositories 198 | 199 | :black_medium_small_square: https://github.com/orgs/Sebwite/repositories 200 | 201 | :black_medium_small_square: https://github.com/orgs/weprovide/repositories 202 | 203 | 204 | ## :free: Free M2 modules (companies): 205 | 206 | :black_medium_small_square: https://www.magezon.com/magento-2-extensions/free-extensions.html 207 | 208 | :black_medium_small_square: https://bsscommerce.com/magento-2-extensions/free.html 209 | 210 | :black_medium_small_square: https://www.weltpixel.com/magento2-extensions.html#wpx-free-extensions 211 | 212 | :black_medium_small_square: https://meetanshi.com/free-magento-extensions.html 213 | 214 | :black_medium_small_square: https://www.magevision.com/free-extensions 215 | 216 | :black_medium_small_square: https://amasty.com/free-magento-2-extensions.html 217 | 218 | :black_medium_small_square: https://www.ulmod.com/magento2-extensions/free-extensions.html 219 | 220 | :black_medium_small_square: https://www.codedecorator.com/freebies.html 221 | 222 | :black_medium_small_square: https://www.bubbleshop.net/magento-extensions/free.html 223 | 224 | :black_medium_small_square: https://magecomp.com/free-magento-extensions.html 225 | 226 | :black_medium_small_square: https://www.tigren.com/magento-2-extensions 227 | 228 | 229 | ## :rocket: other Magento lists: 230 | 231 | :black_medium_small_square: [@liuosio star list](https://github.com/stars/aliuosio/lists/magento) 232 | 233 | :black_medium_small_square: [@GrimLink list "magento-stuff-i-like"](https://github.com/stars/GrimLink/lists/magento-stuff-i-like) 234 | 235 | ## :rocket: Find more on GitHub: 236 | :black_medium_small_square: [Topic: Magento 2](https://github.com/topics/magento2) 237 | 238 | :black_medium_small_square: [Search for: Magento 2 Certified Developers](https://github.com/search?o=desc&q=Magento+2+Certified+Developer&s=&type=Users) 239 | -------------------------------------------------------------------------------- /_module.less: -------------------------------------------------------------------------------- 1 | // media all (styles-m.css) 2 | & when (@media-common = true) { 3 | 4 | } 5 | 6 | // only mobile-small: maximum 479px 7 | .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) { 8 | 9 | } 10 | 11 | // only mobile-all: maximum 767px 12 | .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) { 13 | 14 | } 15 | 16 | // minimum 768px 17 | .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) { 18 | 19 | } 20 | 21 | // minimum 1024px 22 | .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) { 23 | 24 | } 25 | 26 | // minimum 1440px 27 | .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) { 28 | 29 | } 30 | 31 | // non-mobile breakpoint in media all (styles-m.css) 32 | & when (@media-common = true) { 33 | 34 | // custom: maximum 1023px 35 | @media screen and (max-width: @screen__l) { 36 | 37 | } 38 | 39 | } 40 | 41 | // media large (styles-l.css) 42 | & when (@media-common = false) { 43 | 44 | // e.g. non-standard Magento breakpoint 45 | @media screen and (min-width: 1200px) { 46 | 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /assets/PDFs/M2CPFED - 1. Themes _ Design Config.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/assets/PDFs/M2CPFED - 1. Themes _ Design Config.pdf -------------------------------------------------------------------------------- /assets/PDFs/M2CPFED - 2. Layout XML _ Templates.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/assets/PDFs/M2CPFED - 2. Layout XML _ Templates.pdf -------------------------------------------------------------------------------- /assets/PDFs/M2CPFED - 3. Page Layouts _ LESS _ Deploy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/assets/PDFs/M2CPFED - 3. Page Layouts _ LESS _ Deploy.pdf -------------------------------------------------------------------------------- /assets/PDFs/M2CPFED - 4. Javascript - RequireJS _ jQuery.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/assets/PDFs/M2CPFED - 4. Javascript - RequireJS _ jQuery.pdf -------------------------------------------------------------------------------- /assets/PDFs/M2CPFED - 5. Knockout _ UI components.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/assets/PDFs/M2CPFED - 5. Knockout _ UI components.pdf -------------------------------------------------------------------------------- /assets/PDFs/M2CPFED - 6. Translations _ Customisations.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/assets/PDFs/M2CPFED - 6. Translations _ Customisations.pdf -------------------------------------------------------------------------------- /assets/debug-knockout.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/assets/debug-knockout.jpg -------------------------------------------------------------------------------- /assets/luma-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/assets/luma-icons.png -------------------------------------------------------------------------------- /certification/M2CPFED - 1. Themes _ Design Config.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/certification/M2CPFED - 1. Themes _ Design Config.pdf -------------------------------------------------------------------------------- /certification/M2CPFED - 2. Layout XML _ Templates.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/certification/M2CPFED - 2. Layout XML _ Templates.pdf -------------------------------------------------------------------------------- /certification/M2CPFED - 3. Page Layouts _ LESS _ Deploy.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/certification/M2CPFED - 3. Page Layouts _ LESS _ Deploy.pdf -------------------------------------------------------------------------------- /certification/M2CPFED - 4. Javascript - RequireJS _ jQuery.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/certification/M2CPFED - 4. Javascript - RequireJS _ jQuery.pdf -------------------------------------------------------------------------------- /certification/M2CPFED - 5. Knockout _ UI components.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/certification/M2CPFED - 5. Knockout _ UI components.pdf -------------------------------------------------------------------------------- /certification/M2CPFED - 6. Translations _ Customisations.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/certification/M2CPFED - 6. Translations _ Customisations.pdf -------------------------------------------------------------------------------- /certification/M2_Certified_Professional_Front_End_Developer_Study_Guide.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/certification/M2_Certified_Professional_Front_End_Developer_Study_Guide.pdf -------------------------------------------------------------------------------- /curly-braces-variable.md: -------------------------------------------------------------------------------- 1 | ## Custom Variable 2 | `{{CustomVar code='my_custom_variable'}}` 3 | 4 | ## Store URL 5 | `{{store url='customer/account'}}` - with slash at the end 6 | 7 | `{{store direct_url='contact-us'}}` - without slash at the end 8 | 9 | ## Media URL 10 | `{{media url='wysiwyg/your-image.jpg'}}` 11 | `{{view url='images/logo.svg'}}` 12 | `{{view url='Magento_Theme::images/logo.svg'}}` 13 | 14 | ## Block ID 15 | `{{block class="Magento\Cms\Block\Block" block_id="block_identifier"}}` 16 | 17 | `{{block class="Magento\Framework\View\Element\Template" name="custom.template.block" template="Magento_Cms::custom.phtml"}}` 18 | 19 | `{{block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml"}}` 20 | 21 | `{{block type="catalog/product_list" category_id="22" template="catalog/product/list.phtml"}}` 22 | 23 | ## Widget 24 | `{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="10"}}` 25 | 26 | `{{widget type="catalog/product_widget_new" display_type="new_products" products_count="10" template="catalog/product/widget/new/content/new_grid.phtml"}}` 27 | 28 | `{{widget type="catalog/product_widget_link" anchor_text="My Product Link" title="My Product Link" template="catalog/product/widgetlink/link_block.phtml" id_path="product/31"}}` 29 | 30 | ## Store Contact Information Variables 31 | Base Secure URL `{{config path='web/secure/base_url'}}` 32 | 33 | General Contact Email `{{config path='trans_email/ident_general/email'}}` 34 | 35 | ## New Account Template Variables 36 | Customer Account URL `{{var this.getUrl($store, ‘customer/account/’)}}` 37 | 38 | Customer Email `{{var customer.email}}` 39 | 40 | ## New Order Template Variables 41 | Order ID `{{var order.increment_id}}` 42 | 43 | Payment Details `{{var payment_html|raw}}` 44 | 45 | Shipping Description `{{var order.getShippingDescription()}}` 46 | 47 | ## Email Template Variables 48 | Email Logo Image URL `{{var logo_url}}` 49 | 50 | Email Logo Image Width `{{var logo_width}}` 51 | 52 | ``` 53 | – For registration: 54 | {{var customer}} 55 | 56 | {{var customer.ID}} 57 | 58 | {{var customer.email}} 59 | 60 | {{var customer.firstname}} 61 | 62 | {{var customer.lastname}} 63 | 64 | {{var customer.name}} 65 | 66 | {{var customer.password}} 67 | 68 | {{var customer.created_in}} Store Name 69 | 70 | {{var customer.dob}} Date of Birth 71 | 72 | {{var customer.password_hash}} 73 | 74 | {{var customer.prefix}} 75 | 76 | {{var customer.middlename}} Initial 77 | 78 | {{var customer.suffix}} 79 | 80 | {{var customer.group_id}} 81 | 82 | {{var customer.taxvat}} 83 | 84 | {{var customer.store.name}} 85 | 86 | {{var customer.store.group.name}} 87 | 88 | – To subscribe/unsubscribe newsletter: 89 | 90 | {{var subscriber.getConfirmationLink()}} 91 | 92 | {{var subscriber.getUnsubscriptionLink()}} 93 | 94 | {{var subscriber.email}} 95 | 96 | – Send to a friend: 97 | 98 | {{var product_image}} 99 | 100 | {{var name}} Recipient’s Name 101 | 102 | {{var email}} Recipient’s Email 103 | 104 | {{var product_name}} Product Name 105 | 106 | {{var product_url}} Product Url 107 | 108 | {{var message}} Message Text 109 | 110 | {{var sender_name}} Sender’s Name 111 | 112 | {{var sender_email}} Sender’s Email 113 | 114 | {{var product_image}} Product Image 115 | 116 | – Depend Condition 117 | 118 | {{depend order.getIsNotVirtual()}} 119 | 120 | {{/depend}} 121 | 122 | {{depend salable}} 123 | 124 | {{/depend}} 125 | 126 | – If Condition 127 | 128 | {{if order.getIsNotVirtual()}} 129 | 130 | {{else}} 131 | 132 | {{/if}} 133 | 134 | (else is optional) 135 | 136 | 137 | – New order : Shipping Address 138 | 139 | {{var order.getShippingAddress().format(‘html’)}} 140 | 141 | Items of the shipping address : 142 | 143 | {{var order.getShippingAddress().getName()}} Get the first and last name 144 | 145 | {{var order.getShippingAddress().getPrefix()}} 146 | 147 | {{var order.getShippingAddress().getFirstName()}} 148 | 149 | {{var order.getShippingAddress().getMiddleName()}} 150 | 151 | {{var order.getShippingAddress().getLastName()}} 152 | 153 | {{var order.getShippingAddress().getSuffix()}} 154 | 155 | {{var order.getShippingAddress().getStreet1()}} 156 | 157 | {{var order.getShippingAddress().getStreet2()}} 158 | 159 | {{var order.getShippingAddress().getCity()}} 160 | 161 | {{var order.getShippingAddress().getRegion()}} 162 | 163 | {{var order.getShippingAddress().getPostcode()}} 164 | 165 | {{var order.getShippingAddress().getCountry()}} Get the country’s ID 166 | 167 | {{var order.getShippingAddress().getCountryModel().getName()}} Get the country’s full name 168 | 169 | {{var order.getShippingAddress().getRegion()}} 170 | 171 | {{var order.getShippingAddress().getTelephone()}} 172 | 173 | – Other 174 | 175 | {{var addAllLink}} 176 | 177 | {{var alertGrid}} 178 | 179 | {{var billingAddress.format(‘html’)}} 180 | 181 | {{var checkoutType}} 182 | 183 | {{var comment}} 184 | 185 | {{var creditmemo.id}} 186 | 187 | {{var creditmemo.increment_id}} 188 | 189 | {{var data.comment}} 190 | 191 | {{var data.email}} 192 | 193 | {{var data.name}} 194 | 195 | {{var data.telephone}} 196 | 197 | {{var dateAndTime}} 198 | 199 | {{var invoice.id}} 200 | 201 | {{var invoice.increment_id}} 202 | 203 | {{var invoice.created_at}} 204 | 205 | {{var items}} 206 | 207 | {{var items_html}} 208 | 209 | {{var message}} 210 | 211 | {{var name}} 212 | 213 | {{var order.customer_email}} 214 | 215 | {{var order.getBillingAddress().format(‘html’)}} 216 | 217 | {{var order.getBillingAddress().getName()}} 218 | 219 | {{var order.getCreatedAtFormated(‘long’)}} 220 | 221 | {{var order.getCustomerName()}} 222 | 223 | {{var order.getCustomerFirstname()}} 224 | 225 | {{var order.getCustomerLastname()}} 226 | 227 | {{var order.getEmailCustomerNote()}} Currently unknwon how to test this variable for being set/empty 228 | 229 | {{var order.getShippingDescription()}} 230 | 231 | {{var order.getStatusLabel()}} 232 | 233 | {{var order.getStoreGroupName()}} 234 | 235 | {{var order.id}} 236 | 237 | {{var order.increment_id}} 238 | 239 | {{var password}} 240 | 241 | {{var payment_html}} 242 | 243 | {{var paymentMethod}} 244 | 245 | {{var product_name}} 246 | 247 | {{var product_url}} 248 | 249 | {{var reason}} Reason for payment failure 250 | 251 | {{var shipment.increment_id}} 252 | 253 | {{var shippingAddress.format(‘html’)}} 254 | 255 | {{var shippingMethod}} 256 | 257 | {{var total}} 258 | 259 | {{var user.name}} 260 | 261 | {{var viewOnSiteLink}} 262 | 263 | {{var warnings}} 264 | 265 | {{var billing.name}} 266 | ``` 267 | 268 | # See more: https://docs.magento.com/user-guide/marketing/variables-reference.html 269 | -------------------------------------------------------------------------------- /gitignore: -------------------------------------------------------------------------------- 1 | /.buildpath 2 | /.cache 3 | /.metadata 4 | /.project 5 | /.settings 6 | /.vscode 7 | atlassian* 8 | /nbproject 9 | /robots.txt 10 | /pub/robots.txt 11 | /.idea 12 | /.gitattributes 13 | /node_modules 14 | /.grunt 15 | /.php_cs 16 | /.php_cs.dist 17 | /.php_cs.cache 18 | .DS_Store 19 | 20 | /bin/magento 21 | /bin/.htaccess 22 | /lib 23 | /phpserver 24 | /setup 25 | /sitemap 26 | /sitemap.xml 27 | /pub/sitemap 28 | /pub/sitemap.xml 29 | /app/.htaccess 30 | /app/config_sandbox 31 | /app/autoload.php 32 | /app/bootstrap.php 33 | /app/functions.php 34 | /app/etc/env.php 35 | /app/etc/NonComposerComponentRegistration.php 36 | /app/etc/di.xml 37 | /app/etc/vendor_path.php 38 | /app/code/Magento/TestModule* 39 | /lib/internal/flex/uploader/.actionScriptProperties 40 | /lib/internal/flex/uploader/.flexProperties 41 | /lib/internal/flex/uploader/.project 42 | /lib/internal/flex/uploader/.settings 43 | /lib/internal/flex/varien/.actionScriptProperties 44 | /lib/internal/flex/varien/.flexLibProperties 45 | /lib/internal/flex/varien/.project 46 | /lib/internal/flex/varien/.settings 47 | 48 | /pub/index.php 49 | /pub/cron.php 50 | /pub/get.php 51 | /pub/media/*.* 52 | !/pub/media/.htaccess 53 | /pub/media/attribute/* 54 | !/pub/media/attribute/.htaccess 55 | /pub/media/analytics/* 56 | /pub/media/catalog/* 57 | !/pub/media/catalog/.htaccess 58 | /pub/media/customer/* 59 | !/pub/media/customer/.htaccess 60 | /pub/media/downloadable/* 61 | !/pub/media/downloadable/.htaccess 62 | /pub/media/favicon/* 63 | /pub/media/import/* 64 | !/pub/media/import/.htaccess 65 | /pub/media/logo/* 66 | /pub/media/custom_options/* 67 | !/pub/media/custom_options/.htaccess 68 | /pub/media/theme/* 69 | /pub/media/theme_customization/* 70 | !/pub/media/theme_customization/.htaccess 71 | /pub/media/wysiwyg/* 72 | !/pub/media/wysiwyg/.htaccess 73 | /pub/media/tmp/* 74 | !/pub/media/tmp/.htaccess 75 | /pub/media/captcha/* 76 | /pub/opt 77 | /pub/static.php 78 | /pub/static/* 79 | !/pub/static/.htaccess 80 | /pub/errors 81 | 82 | /var/* 83 | !/var/.htaccess 84 | 85 | /vendor/* 86 | !/vendor/.htaccess 87 | /vendor/ 88 | 89 | /generated/* 90 | !/generated/.htaccess 91 | 92 | /dev/* 93 | !/dev/tools 94 | /dev/tools/* 95 | !/dev/tools/grunt 96 | /dev/tools/grunt/configs/* 97 | !/dev/tools/grunt/configs/themes.js 98 | /grunt-config.json.sample 99 | 100 | /.travis.yml.sample 101 | /.user.ini 102 | /.htaccess 103 | /.htaccess.sample 104 | 105 | /CHANGELOG.md 106 | /SECURITY.md 107 | /CONTRIBUTING.md 108 | /COPYING.txt 109 | /Gruntfile.js.sample 110 | /ISSUE_TEMPLATE.md 111 | /LICENSE.txt 112 | /LICENSE_AFL.txt 113 | /nginx.conf.sample 114 | /package.json.sample 115 | /php.ini.sample 116 | /deploy.log 117 | -------------------------------------------------------------------------------- /image-snippets/admin-config-dev.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/image-snippets/admin-config-dev.jpg -------------------------------------------------------------------------------- /image-snippets/clean-vs-flush-cache.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/image-snippets/clean-vs-flush-cache.jpg -------------------------------------------------------------------------------- /image-snippets/modes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/image-snippets/modes.png -------------------------------------------------------------------------------- /image-snippets/upgrade-composer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/image-snippets/upgrade-composer.jpg -------------------------------------------------------------------------------- /javascript.md: -------------------------------------------------------------------------------- 1 | ## :point_right: Explanation of JS files 2 | ``` 3 | jquery: The jQuery library is used in Magento for manipulating HTML elements and handling events. 4 | 5 | jquery/ui: This module contains jQuery UI-based user interface components such as dialog boxes, trees, calendars, etc. 6 | 7 | mage/adminhtml/wysiwyg/widget: This module is responsible for handling the WYSIWYG editor in the Magento admin panel. 8 | 9 | mage/adminhtml/events: This module contains the JavaScript code used in the Magento admin panel. 10 | 11 | mage/adminhtml/notification: This module is responsible for displaying notifications in the Magento admin panel. 12 | 13 | mage/adminhtml/grid: This module is responsible for handling the data table in the Magento admin panel. 14 | 15 | mage/adminhtml/browser: This module is responsible for handling the file browser in the Magento admin panel. 16 | 17 | mage/calendar: This module is responsible for handling the calendar in Magento. 18 | 19 | mage/captcha: This module is responsible for handling CAPTCHA verification in Magento. 20 | 21 | mage/checkout: This module is responsible for handling the checkout process. 22 | 23 | mage/cookies: This module is responsible for handling cookies in Magento. 24 | 25 | mage/dropdown: This module is responsible for handling dropdown menus in Magento. 26 | 27 | mage/gallery: This module contains functions for handling image galleries in Magento. 28 | 29 | mage/loader: This module is responsible for loading JavaScript and CSS files. 30 | 31 | mage/mage: This module contains functions and tools used in Magento. 32 | 33 | mage/menu: This module is responsible for handling the navigation menu in Magento. 34 | 35 | mage/requirejs/text: This module contains tools for loading text files in Magento. 36 | 37 | mage/smart-keyboard-handler: This module is responsible for handling the keyboard in Magento. 38 | 39 | mage/translate-inline: This module is responsible for live text translation in Magento. 40 | 41 | mage/translate: This module is responsible for text translation in Magento. 42 | 43 | mage/validation/validation: This module contains form validators in Magento. 44 | 45 | mage/sticky: This module is responsible for allowing elements to remain in place while scrolling in Magento. 46 | 47 | mage/collapsible: This module is responsible for handling collapsible elements in Magento. 48 | 49 | mage/ie-class-fixer: This module is responsible for fixing bugs in Internet Explorer browsers. 50 | ``` 51 | 52 | ## the most commonly used configuration options in RequireJS 53 | ``` 54 | paths: The paths configuration option allows developers to specify the locations of the JavaScript files that contain the modules they want to load. For example, if a module called myModule is located in the js directory of the application, the path can be defined as paths: { myModule: 'js/myModule' }. This option is useful when the files are not located in the same directory as the application. 55 | 56 | shim: The shim configuration option is used to define dependencies between non-AMD modules. For example, if a module called jquery is not written in the AMD format but is required by an AMD module, it can be defined as shim: { jquery: { exports: '$' } }. This tells RequireJS that jquery should be treated as an AMD module and that the $ symbol should be used as its export value. 57 | 58 | map: The map configuration option allows developers to create aliases for modules. For example, if a module called myModule depends on a module called otherModule, and otherModule has been aliased as aliasModule, the mapping can be defined as map: { 'myModule': { 'otherModule': 'aliasModule' } }. This allows developers to use more descriptive names for modules without affecting their underlying code. 59 | 60 | config: The config configuration option is used to pass configuration data to modules. For example, if a module called myModule requires a configuration object, the configuration can be defined as config: { 'myModule': { 'apiKey': '12345' } }. This configuration object can then be accessed by myModule using the requirejs.config() method. 61 | ``` 62 | 63 | ## :point_right: How to modify/extend component with mixin? 64 | Create file `app/code/Module/Vendor/view/frontend/requirejs-config.js` 65 | ``` 66 | var config = { 67 | config: { 68 | mixins: { 69 | 'Magento_Checkout/js/view/minicart': { 70 | 'Module_Vendor/js/minicart-mixin': true 71 | } 72 | } 73 | } 74 | }; 75 | ``` 76 | 77 | Then, create `app/code/Module/Vendor/view/frontend/web/js/minicart-mixin.js` 78 | ``` 79 | define([ 80 | /* [...] */ 81 | ], function() { 82 | 'use strict'; 83 | 84 | return function(target) { 85 | return target.extend({ 86 | 87 | getCartItems: function() { 88 | console.log('Mixin Component -- Before getCartItems'); 89 | 90 | var items = this._super(); 91 | 92 | console.log('Mixin Component -- After getCartItems'); 93 | console.log(items); 94 | } 95 | 96 | }); 97 | }; 98 | }); 99 | ``` 100 | 101 | ## :point_right: How to modify/extend widget with mixin? 102 | Create file `app/code/Module/Vendor/view/frontend/requirejs-config.js` 103 | ``` 104 | var config = { 105 | config: { 106 | mixins: { 107 | catalogAddToCart: { 108 | 'Magento_Catalog/js/catalog-add-to-cart-theme-mixin': true // Mixin example 109 | } 110 | } 111 | } 112 | }; 113 | ``` 114 | 115 | Then, create `app/code/Module/Vendor/view/frontend/web/js/catalog-add-to-cart-theme-mixin.js` 116 | ``` 117 | define([ 118 | 'jquery' 119 | ], function($) { 120 | 'use strict'; 121 | 122 | return function(target) { 123 | $.widget('jq.catalogAddToCart', target, { 124 | 125 | ajaxSubmit: function(form) { 126 | console.log('Mixin Widget -- Before ajaxSubmit'); 127 | 128 | this._super(form); 129 | 130 | console.log('Mixin Widget -- After ajaxSubmit'); 131 | } 132 | 133 | }); 134 | 135 | return $.jq.catalogAddToCart; 136 | }; 137 | }); 138 | ``` 139 | -------------------------------------------------------------------------------- /knockout.md: -------------------------------------------------------------------------------- 1 | # [Commomn examples](https://developer.adobe.com/commerce/frontend-core/ui-components/concepts/binding-syntax) 2 | 3 | ### how to debug knonckout variable 4 | ``` 5 |
6 | ``` 7 | ### examples 8 | ``` 9 |
10 | ... 11 |
12 | ``` 13 | ``` 14 | 15 | ``` 16 | ``` 17 | 18 | ``` 19 | ``` 20 | 21 | ``` 22 | ``` 23 | 24 | 25 | 26 | 27 | 28 | 29 | or 30 | 31 | 32 | ``` 33 | ``` 34 |
35 | 36 | 39 | 40 | 41 | 42 | ``` 43 | ``` 44 | Example image 45 | Example lazy image 46 | 47 | Example module image 48 | Example module lazy image 49 | ``` 50 | 51 | 52 | 53 | # Binding 54 | ## if 55 | ``` 56 | 57 | ... 58 | 59 | ``` 60 | ``` 61 |
62 | ``` 63 | ``` 64 | 65 | ``` 66 | 67 | ## ifnot 68 | ``` 69 | 70 | ... 71 | 72 | ``` 73 | ``` 74 |
75 | ``` 76 | ``` 77 | 78 | ``` 79 | 80 | ## text 81 | ``` 82 | 83 | ``` 84 | ``` 85 |
86 | ``` 87 | 88 | ## i18n 89 | ``` 90 | 91 | ``` 92 | ``` 93 | 94 | ``` 95 | 96 | ## foreach 97 | ``` 98 | 99 | ... 100 | 101 | ``` 102 | 103 | ## component 104 | ``` 105 | 106 | ``` 107 | ``` 108 |
109 | ``` 110 | 111 | ## css 112 | ``` 113 |
114 | ``` 115 | 116 | ## attr 117 | ``` 118 |
119 | ``` 120 | 121 | ## style 122 | ``` 123 |
124 | ``` 125 | 126 | ## html 127 | ``` 128 |
129 | ``` 130 | 131 | ## click 132 | ``` 133 |
134 | ``` 135 | 136 | ## event 137 | ``` 138 |
139 | ``` 140 | 141 | ## template 142 | ``` 143 |
144 | ``` 145 | 146 | ## submit 147 | ``` 148 |
149 | ``` 150 | 151 | ## options 152 | ``` 153 | 154 | ``` 155 | 156 | ## selectedOptions 157 | ``` 158 | 159 | ``` 160 | 161 | ## optionsText 162 | ``` 163 | 164 | ``` 165 | 166 | ## optionsValue 167 | ``` 168 | 169 | ``` 170 | 171 | ## enable 172 | ``` 173 | 174 | ``` 175 | 176 | ## disable 177 | ``` 178 | 179 | ``` 180 | 181 | ## hasfocus 182 | ``` 183 | 184 | ``` 185 | 186 | ## textInput 187 | ``` 188 | 189 | ``` 190 | 191 | ## value 192 | ``` 193 | 194 | ``` 195 | 196 | ## checked 197 | ``` 198 | 199 | ``` 200 | ``` 201 | 202 | ``` 203 | 204 | ## checkedValue 205 | ``` 206 | 207 | ``` 208 | 209 | ## with 210 | ``` 211 | 212 | ``` 213 | ``` 214 |
215 | ``` 216 | -------------------------------------------------------------------------------- /phtml.md: -------------------------------------------------------------------------------- 1 | ## Example .phtml header 2 | ``` 3 | 8 | ``` 9 | 10 | ## Translatable text 11 | ``` 12 | 13 | ``` 14 | 15 | ## Translatable text with html and variables 16 | ``` 17 | escapeHtml(__('You will receive a 10% discount on your first purchase and information about promotions and new products.'), ['strong']) ?> 18 | escapeHtml(__('I agree with the Privacy Policy and the principles of how we process data.', $block->getUrl('privacy-policy'), $block->getUrl('process-cookie')), ['a']) ?> 19 | ``` 20 | 21 | ## Useful block functions 22 | ``` 23 | $block->getViewFileUrl('images/loader-1.gif'); - from web/images directory 24 | $block->getViewFileUrl('Magento_Catalog::images/filename.jpg'); - from e.g Magento_Catalog/web/images directory 25 | 26 | $block->getUrl('checkout/cart/index'); 27 | $block->getUrl('', array('_direct'=>'hairproducts.html')); 28 | $block->getUrl('', array('_direct'=>'hairproducts.html', '_query'=>'manufacturer=412')); 29 | 30 | $block->getBaseUrl(); 31 | $block->getMediaDirectory(); 32 | $block->getChildBlock('block.name'); 33 | $block->getChildHtml('block.name'); 34 | $block->getChildChildHtml('block.name'); 35 | $block->getBlockHtml('block.name'); 36 | $block->stripTags(); // removes HTML tags 37 | 38 | $block->escapeHtml(); 39 | $block->escapeUrl(); 40 | $block->escapeHtml('value', $allowedTags); 41 | $block->escapeHtmlAttr('value', $escapeSingleQuote); 42 | $block->escapeJs('value'); 43 | $block->escapeUrl($url); 44 | ``` 45 | ## Escaping 46 | ``` 47 | /* @noEscape */ 48 | /* @escapeNotVerified */ 49 | 50 | $block->escapeHtml(); 51 | $block->escapeHtml('value', $allowedTags); 52 | $block->escapeUrl(); 53 | $block->escapeUrl($url); 54 | $block->escapeHtmlAttr('value', $escapeSingleQuote); 55 | $block->escapeJs('value'); 56 | 57 | $escaper->... 58 | ``` 59 | 60 | ## Call static block ID in .phtml template (if exist/enabled/not empty) 61 | ``` 62 | getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('BLOCK_ID')->toHtml() != ''): ?> 63 |
64 | getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('BLOCK_ID')->toHtml(); ?> 65 |
66 | 67 | ``` 68 | 69 | ## Call widget in .phtml template 70 | ``` 71 | getLayout()->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget") 72 | ->setDisplayType("all_products") 73 | ->setShowPager(1) 74 | ->setProductsPerPage(5) 75 | ->setProductsCount(10) 76 | ->setPageVarName("pwkvbl") 77 | ->setTemplate("product/widget/new/content/new_grid.phtml") 78 | ->toHtml(); ?> 79 | ``` 80 | 81 | ## Call method from module helper 82 | ``` 83 | helper(Vendor\Module\Helper\Data::class); ?> 84 | callMethodName(); ?> 85 | ``` 86 | 87 | ## Get VAR value from /etc/view.xml in phtml 88 | ``` 89 | getVar("gallery/width", 'Magento_Catalog'); ?> 90 | getVar("breakpoints/mobile/conditions/max-width", 'Magento_Catalog'); ?> 91 | ``` 92 | 93 | ## Example operations on product attribute 94 | ``` 95 | getTypeId() == \Magento\ConfigurableProduct\Model\Product\Type\Configurable::TYPE_CODE): ?> 96 | getResource()->getAttribute('delivery_time'); 98 | $minDeliveryTime = $deliveryTime->getFrontend()->getValue($_product); 99 | ?> 100 |
101 | 102 |
103 | 104 | ``` 105 | ``` 106 | $product->getAttributeText('color'); - value as 'text' label 107 | $product->getResource()->getAttribute('color')->getFrontend()->getValue($product); - value as 'text' label 108 | $product->getData('color'); - value as 'id attribute number' 109 | ``` 110 | 111 | ## Execute JavaScript code after swatches are displayed in category view 112 | ``` 113 | 120 | ``` 121 | 122 | ## Can be used to get the list of handles while debugging 123 | ``` 124 | $this->getLayout()->getUpdate()->getHandles(); 125 | ``` 126 | 127 | ## Get backend config option enebled/disabled 128 | ``` 129 | getLayout()->createBlock(\Magento\Config\Block\System\Config\Form::class);?> 130 | getConfigValue('dev/translate_inline/active')): ?> 131 | // do something 132 | 133 | ``` 134 | 135 | ## Media Queries in JavaScript 136 | ``` 137 | 152 | ``` 153 | 154 | ## 2 ways to call Fotorama gallery script 155 | 156 | ``` 157 | 171 | ``` 172 | ``` 173 | 189 | ``` 190 | 191 | ## Script initialization 192 | :information_source: ```` is my custom, optimized JS tag call after first user interaction (click, scroll, etc.) 193 | 194 | ### Example 1 195 | #### standard way 196 | ``` 197 |
198 |
199 |
1
200 |
2
201 |
3
202 |
203 |
204 | ``` 205 | #### or optimized way: 206 | ``` 207 | 216 | ``` 217 | 218 | ### Example 2 219 | #### standard way 220 | ``` 221 | 228 | ``` 229 | #### or optimized way: 230 | ``` 231 | 238 | ``` 239 | -------------------------------------------------------------------------------- /tips&tricks.md: -------------------------------------------------------------------------------- 1 | ## Viewport Size for Devices - great list for CSS breakpoints 2 | - [https://yesviz.com/viewport](https://yesviz.com/viewport/) 3 | 4 | ## :point_right: Disable onepage success page redirect to cart 5 | 6 | `vendor/magento/module-checkout/Controller/Onepage/Success.php` 7 | 8 | `\Magento\Checkout\Controller\Onepage\Success::execute` 9 | ~~~ 10 | // if (!$this->_objectManager->get(\Magento\Checkout\Model\Session\SuccessValidator::class)->isValid()) { 11 | // return $this->resultRedirectFactory->create()->setPath('checkout/cart'); 12 | // } 13 | ~~~ 14 | 15 | ## :point_right: Difference between 'composer install' and 'composer update' 16 | In detail ``composer update`` will: 17 | 18 | - Read composer.json 19 | - Remove installed packages that are no more required in composer.json 20 | - Check the availability of the latest versions of our required packages 21 | - Install the latest versions of our packages 22 | - Update composer.lock to store the installed packages version 23 | 24 | In detail ``composer install`` will install all of the dependencies as specified in the composer.lock file at the version specified (locked), without updating anything. 25 | 26 | - Read composer.lock file 27 | - Install the packages specified in the composer.lock file 28 | 29 | ## :point_right: How to disable Page Builder in Magento 2? (completely from the system and not just in the admin configuration) 30 | ``` 31 | bin/magento module:disable Magento_PageBuilderAnalytics Magento_CatalogPageBuilderAnalytics Magento_CmsPageBuilderAnalytics Magento_PageBuilder 32 | bin/magento setup:di:compile 33 | ``` 34 | 35 | ## :point_right: If you can’t see symlinks in pub static folder even after developer mode enabled. There might be the following reason: 36 | `If your web server is Apache then please make sure .htaccess file in pub/static directory otherwise symlinks will not generate.` 37 | 38 | ## :point_right: How to use Luma icons (list with CSS code) 39 | ![Magento_Luma icons list](https://github.com/jq91/magento2-handy-snippets/blob/master/assets/luma-icons.png) 40 | 41 | ## :point_right:How to add other icons pack to Magento 2 (e.g. Bootstrap Icons, Material Icons)? 42 | `Check this out:` https://github.com/GrimLink/magento2-icon-packs 43 | 44 | ## :point_right:How to create patch file? 45 | https://experienceleague.adobe.com/docs/commerce-operations/upgrade-guide/patches/apply.html 46 | In File directory: 47 | ``` 48 | git diff --no-index File.php File-patch.php > my.patch 49 | ``` 50 | ``` 51 | diff -u File.php File-patch.php > File.diff 52 | ``` 53 | 54 | ## :point_right: Generate source maps in .css files for faster developing styles (compilcation process will take longer and output file will be larger! Only for development) 55 | in file: 56 | ``` 57 | vendor/magento/framework/Css/PreProcessor/Adapter/Less/Processor.php 58 | ``` 59 | 60 | in line 71 (before: 'relativeUrls' => false) add this code: 61 | `'sourceMap' => true,` 62 | 63 | ## :point_right: Find cacheable="false" blocks in templates 64 | 65 | ``` 66 | cd app/design/frontend/ && grep --recursive -l 'cacheable="false"' * && cd ../../..; 67 | cd app/code && grep --recursive -l 'cacheable="false"' * && cd ../..; 68 | cd vendor && grep --recursive -l 'cacheable="false"' * && cd ..; 69 | ``` 70 | 71 | ## :point_right: Dump Magento2 database (for development purpose) without all logs, sessions, admin users, orders, and customers 72 | ``` 73 | n98-magerun2.phar db:dump --strip="@development" 74 | ``` 75 | 76 | **TIP**: to install n98-magerun2 run below command in your Linux terminal: 77 | ``` 78 | wget https://files.magerun.net/n98-magerun2.phar 79 | chmod +x ./n98-magerun2.phar 80 | ./n98-magerun2.phar --version 81 | ``` 82 | 83 | ## :point_right: Simple way to debug Knockout in browser console by 𝐫𝐞𝐪𝐮𝐢𝐫𝐞('𝐮𝐢𝐑𝐞𝐠𝐢𝐬𝐭𝐫𝐲').𝐠𝐞𝐭(𝐬𝐜𝐨𝐩𝐞) 84 | ![Debug Knockout in browser console](https://github.com/jq91/magento2-handy-snippets/blob/master/assets/debug-knockout.jpg) 85 | 86 | ## :point_right: When you should run which commands in Magento 2? 87 | ### `php bin/magento setup:upgrade` 88 | ``` 89 | You should run this command only on following senarios: 90 | - When you made changes in the Setup script(InstallData, InstallSchema, 91 | - UpgradeData, UpgradeSchem) 92 | - When you install a new module 93 | - When you change setup_version in module.xml 94 | - After upgrade Magento version 95 | ``` 96 | 97 | ### `php bin/magento setup:di:compile` 98 | ``` 99 | If you made changes like add new dependency in __construct(), changes in di.xml, Add new controller… 100 | 101 | If you are in developer mode you can simply delete changed files from /generated folder 102 | ``` 103 | 104 | ### `php bin/magento setup:static-content:deploy` 105 | ``` 106 | You need to run this command only when you made changes in HTML, CSS, JS 107 | 108 | If you are in developer mode and enabled symlinks in system you need not run this command. 109 | If disabled symlinks, need to delete particular changed files from pub/static folder. 110 | ``` 111 | 112 | ### `php bin/magento cache:flush` 113 | ``` 114 | You need to run this command, if you made changes in: 115 | - admin configuration 116 | - layout xml 117 | - ui component 118 | - phtml or overrite html 119 | - js in frontend theme 120 | ``` 121 | 122 | ## :point_right: Overview list of caches in Magento 2 123 | ***Configuration***: After adapting configuration files, it is necessary to flush them including configuration and store specific settings 124 | 125 | ***Layouts***: After adapting layout files, it is necessary to flush them including the compiled page layout from all components 126 | 127 | ***Blocks HTML output***: After adapting the view layers, it is necessary to flush them including page fragments per block 128 | 129 | ***Collections Data***: By Magento, it can flush automatically database queries. However, Custom modules may write entries which make Magento can not clean by itself, in case, Magento can not clean so we need to clean the cache 130 | 131 | ***Reflection Data***: API interfaces reflection data will be flushed 132 | 133 | ***Database DDL operations***: it can be flush automatically by Magento, but 3rd party can plus more data, after making custom changes to the database schema, which can clean the cache 134 | 135 | ***EAV types and attributes***: The metadata regarding the entity attributes into the cache, in general, it should not flush the cache 136 | 137 | ***Integrations Configuration***: Caches the compiled integrations on your store. Clean after adding new or changing existing integrations 138 | 139 | ***Integrations API Configuration***: Compiled integration APIs configuration of the Store’s Integrations 140 | 141 | ***Page Cache***: This cache links the HTML pages so it is necessary to clean this type of cache regularly 142 | 143 | ***Translations***: After merging translations from all modules, the merger cache will be cleaned 144 | 145 | ***Web Services Configuration***: Caching the Web API Structure 146 | 147 | 148 | -------------------------------------------------------------------------------- /top-must-have-magento2-extensions.md: -------------------------------------------------------------------------------- 1 | # :star: My recommendations for Magento 2 FREE modules :star: 2 | ## General for your store: 3 | 4 | | | Module name | description | installation | 5 | |:---|---|---|---| 6 | |:point_right: |[AvS_ScopeHint](https://github.com/avstudnitz/AvS_ScopeHint2) | Displays a hint when a configuration value is overwritten on a lower scope (website or store view). |``composer require avstudnitz/scopehint2``| 7 | |:point_right: |[BoldCommerce_OrderComments](https://github.com/boldcommerce/magento2-ordercomments) | extension allows customers to place a comment during the checkout. The comment field is displayed in the billing step right above the place order button. | ``composer require boldcommerce/magento2-ordercomments`` | 8 | |:point_right: |[Magefan_Blog](https://github.com/magefan/module-blog) | blog extension is a multifunctional marketing tool that will not only help you drive more traffic but boost SEO and improve your Google rating. | ``composer require magefan/module-blog``| 9 | |:point_right: |[RedChamps_CleanMenu](https://github.com/redchamps/clean-admin-menu) | It will merge all 3rd party extension's menu items in backend's primary menu to a common menu item named Extensions. |``composer require redchamps/module-clean-admin-menu``| 10 | |:point_right: |[Faonni_MultiFlatShipping](https://github.com/karliuka/m2.MultiFlatShipping) | It will create additional 5 flat rate shipping methods. |``composer require faonni/module-shipping-multi-flat``| 11 | |:point_right: |[Smartmage_Shipping2Payment](https://bitbucket.org/smartmagepl/magento-2-shipping2payment/) | Module for managing the dependencies between delivery and payment in the order process. Allows you to hide inactive payment methods from selected shipping methods. |https://bitbucket.org/smartmagepl/magento-2-shipping2payment/src/master| 12 | |:point_right: |[WeltPixel_SocialLogin](https://www.weltpixel.com/magento2-free-social-login-extension.html) | With Social Login extension, customers can create accounts with Facebook, Google, Amazon, PayPal, Twitter, and even LinkedIn. |https://www.weltpixel.com/magento2-free-social-login-extension.html| 13 | |:point_right: |[Magepow_Instagram](https://github.com/magepow/magento-2-instagram) | Display Instagram posts |``composer require magepow/instagram``| 14 | 15 | ## For developers: 16 | | | Module name | description | installation | 17 | |:---|---|---|---| 18 | |:point_right: |[Composer Patches](https://github.com/cweagans/composer-patches) | Simple patches plugin for Composer. [Read more here](https://m.academy/blog/how-to-apply-github-commit-magento-core-code/). Applies a patch from a local or remote file to any dependency installed by Composer.| ``composer require cweagans/composer-patches``| 19 | |:point_right: |[Magefan_ConflictDetector](https://github.com/magefan/module-conflict-detector) | allows you to detect class rewrite conflicts easy in Magento 2 Store.|``composer require magefan/module-conflict-detector``| 20 | |:point_right: |[MGT Developer Toolbar](https://github.com/mgtcommerce/Mgt_Developertoolbar) | the toolbar shows you all important information for performance optimisation and Magento development.|``composer require mgtcommerce/module-mgtdevelopertoolbar``| 21 | |:point_right: |[MagePal_PreviewCheckoutSuccessPage](https://github.com/magepal/magento2-preview-checkout-success-page) | Styling and testing Magento's order confirmation page can be a very difficult and time-consuming process since the order success page display is only displayed once after completing the lengthy checkout process. Changing your page content or testing a new CSS style will automatically redirect you to an empty shopping cart page on page refresh.|``composer require magepal/magento2-preview-checkout-success-page``| 22 | |:point_right: |[Yireo_EmailTester2](https://github.com/yireo/Yireo_EmailTester2) | Preview any transactional email in your Magento 2 backend| ``composer require yireo/magento2-emailtester2``| 23 | 24 | # :moneybag: My recommendations for Magento 2 PAID modules :moneybag: 25 | | | Module name | description | link | 26 | |:---|---|---|---| 27 | |:point_right: |Swissup_Navigationpro|(MegaMenu) Navigation Pro|https://swissuplabs.com/magento-extensions/magento-2-navigation-pro-extension.html| 28 | |:point_right: |Amasty_ILN|Improved Layered Navigation|https://amasty.com/improved-layered-navigation-for-magento-2.html| 29 | |:point_right: |Amasty_AdvancedReview|Advanced Product Reviews & Review Reminder|https://amasty.com/advanced-product-reviews-for-magento-2.html| 30 | |:point_right: |Amasty_InvisibleCaptcha|Google Invisible reCaptcha v3|https://amasty.com/google-invisible-recaptcha-for-magento-2.html| 31 | -------------------------------------------------------------------------------- /ui-ux/button-size.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/button-size.jpg -------------------------------------------------------------------------------- /ui-ux/chips.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/chips.jpg -------------------------------------------------------------------------------- /ui-ux/dialog-box.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/dialog-box.jpg -------------------------------------------------------------------------------- /ui-ux/fab-button.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/fab-button.jpg -------------------------------------------------------------------------------- /ui-ux/icon-button.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/icon-button.jpg -------------------------------------------------------------------------------- /ui-ux/input.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/input.jpg -------------------------------------------------------------------------------- /ui-ux/navbar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/navbar.jpg -------------------------------------------------------------------------------- /ui-ux/navbar2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/navbar2.jpg -------------------------------------------------------------------------------- /ui-ux/navigation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/navigation.jpg -------------------------------------------------------------------------------- /ui-ux/svtion-bar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/ui-ux/svtion-bar.jpg -------------------------------------------------------------------------------- /widgety-m2-luma.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-jq/magento2-handy-snippets/f809227141c1cf5350ec8f5703f384f6758ed99e/widgety-m2-luma.pdf -------------------------------------------------------------------------------- /xml.md: -------------------------------------------------------------------------------- 1 | ## Attributes in xml 2 | ` cacheable="false" // or "true" ` 3 | ` remove="true" // or "false" ` 4 | ` display="true" // or "false" ` 5 | 6 | ## ESI Block 7 | Only when full page cache application is set to Varnish, ESI blocks are actual. ESI block is fetched by separate Varnish request, cached and invalidated independently from the page. 8 | 9 | ### You should use the ESI block in the following situations: 10 | - The block is considered to be invalidated more frequently than pages where this block is rendered. 11 | - The block is considered to be invalidated less frequently than pages where this block is rendered. 12 | 13 | ``` 14 | 15 | ``` 16 | 17 | ## Custom block with template 18 | ``` 19 | ( after="-" or before="-" ) 20 | 21 | ``` 22 | 23 | ## Block with configuration condition 24 | ``` 25 | 26 | ``` 27 | 28 | ## Block inside container 29 | ``` 30 | 31 | // block here 32 | 33 | ``` 34 | 35 | ## Call static block from XML 36 | ``` 37 | 38 | 39 | 40 | promo 41 | 42 | 43 | 44 | ``` 45 | 46 | ## Two ways set template in xml 47 | 1) 48 | ``` 49 | ` 50 | ``` 51 | 2) 52 | ``` 53 | 54 | 55 | Vendor_Module::path/to/template.phtml 56 | 57 | 58 | ``` 59 | 60 | ## Set template layout in xml (e.g. "2columns-left" in catalog_category_view.xml) 61 | ``` 62 | 63 | 64 | 65 | ... 66 | 67 | 68 | ``` 69 | 70 | ## Add custom link to top.links (customer dropdown) 71 | ``` 72 | 73 | 74 | 75 | Create an Account 76 | customer/account/create 77 | 100 78 | 79 | 80 | 81 | ``` 82 | 83 | ## Include static resources (JavaScript, CSS, fonts) 84 | ``` 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 |