Bilal Malik
- Jul 19, 2017
- 1 min
Requirejs Magento 2
In this article, we will take a tour about how to use requirejs in Magento 2 with simple examples. What is requirejs? In Magento 2, almost all the javascript files are loaded by requirejs concept (lazy load). For example below snippet first load jquery then execute your code. requirejs(['jquery'], function(jQuery){
// Your code here
}); Prerequisite for follow this tutorial [optional] I already created a boilerplate module, which makes easy to follow this tutorial. It is op
1 view0 comments
{"items":["5eefa551748f780017bdcc24","5eefa5683cdd9b0017daf977"],"styles":{"galleryType":"Columns","groupSize":1,"showArrows":true,"cubeImages":true,"cubeType":"fill","cubeRatio":1.3333333333333333,"isVertical":true,"gallerySize":30,"collageAmount":0,"collageDensity":0,"groupTypes":"1","oneRow":false,"imageMargin":32,"galleryMargin":0,"scatter":0,"rotatingScatter":"","chooseBestGroup":true,"smartCrop":false,"hasThumbnails":false,"enableScroll":true,"isGrid":true,"isSlider":false,"isColumns":false,"isSlideshow":false,"cropOnlyFill":false,"fixedColumns":1,"enableInfiniteScroll":true,"isRTL":false,"minItemSize":50,"rotatingGroupTypes":"","rotatingCropRatios":"","columnWidths":"","gallerySliderImageRatio":1.7777777777777777,"numberOfImagesPerRow":1,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":1,"mobilePanorama":false,"placeGroupsLtr":true,"viewMode":"preview","thumbnailSpacings":4,"galleryThumbnailsAlignment":"bottom","isMasonry":false,"isAutoSlideshow":false,"slideshowLoop":false,"autoSlideshowInterval":4,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_THE_RIGHT","galleryTextAlign":"center","scrollSnap":false,"itemClick":"nothing","fullscreen":true,"videoPlay":"hover","scrollAnimation":"NO_EFFECT","slideAnimation":"SCROLL","scrollDirection":0,"scrollDuration":400,"overlayAnimation":"FADE_IN","arrowsPosition":0,"arrowsSize":23,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":200,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"NEVER_SHOW","thumbnailSize":120,"magicLayoutSeed":1,"imageHoverAnimation":"NO_EFFECT","imagePlacementAnimation":"NO_EFFECT","calculateTextBoxWidthMode":"PERCENT","textBoxHeight":0,"textBoxWidth":200,"textBoxWidthPercent":50,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"loadMoreButtonText":"","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"ATTACHED_BACKGROUND","itemBorderWidth":1,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":false,"videoSpeed":"1","videoLoop":true,"jsonStyleParams":"","gallerySizeType":"px","gallerySizePx":940,"allowTitle":true,"allowContextMenu":true,"textsHorizontalPadding":-30,"itemBorderColor":{"themeName":"color_12","value":"rgba(191,191,191,1)"},"showVideoPlayButton":true,"galleryLayout":2,"targetItemSize":940,"selectedLayout":"2|bottom|1|fill|true|0|true","layoutsVersion":2,"selectedLayoutV2":2,"isSlideshowFont":false,"externalInfoHeight":0,"externalInfoWidth":0.5},"container":{"width":940,"galleryWidth":972,"galleryHeight":0,"scrollBase":0,"height":null}}