Installing and configuring Grunt :

  • First, install node.js on your server, which is easily done, just follow instructions.
  • Afterwards, you will need to install grunt-cli globally. npm install -g grunt-cli
  • Next, navigate to your Magento 2 web root. (The directory where Magento 2 is installed).
  • You will need to rename two files, rename Gruntfile.js.sample to Gruntfile.js, next rename package.json.sample to package.json.
  • Once this is complete simply install the packages that are listed in package.json by using the following command
  • npm install

  • Once all the packages have been installed in the project, ensure your Magento 2 installation is in dev mode.
  • bin/magento deploy:mode:set development

  • Next, you will need to add your custom themes to dev/tools/grunt/configs/theme.js and example is below:
  • 
            module.exports = {
    		    <theme>: {
    		        area: 'frontend',
    		            name: '<Vendor>/<theme>',
    		            locale: '<language>',
    		            files: [
    		            'css/styles-m', //path to root source file
    		            'css/styles-l'  //path to root source file
    		        ],
    		            dsl: 'less'
    		    }
    		};
    
    
  • Once you have added your custom theme to the theme.js file, remove all the files in pub/static and remove the var/generation and var/view_preprocessed and var/di, with a command like rm -rf pub/static/* var/view_preprocessed var/generation var/di.
  • To get ready to use Grunt watch for live reload capabilities, you need to run grunt exec:, grunt less: and then grunt watch in that order.
  • To use livereload functionality, you must install a browser extension

  • (Optional) If you want to use Grunt for “watching” changes automatically, without reloading pages in a browser each time, install the LiveReload extension in your browser.
  • Once it is installed, you can run grunt watch and select the live reload extension button, it should allow you to connect. In browser, sometimes you will get an error in console stating failed to connect, simply hard refresh the page a few times until chrome decides to connect properly.
  • Advertisements

    Step 1: Download latest Owl carousel version from below URL :
    https://owlcarousel2.github.io/OwlCarousel2/

    Add CSS under app/design/frontend/Vendor/YourTheme/web/css folder
    Add JS under app/design/frontend/Vendor/YourTheme/web/js folder

    Step 2: Create requirejs-config.js under below path :

    app/design/frontend/Vendor/YourTheme/Magento_Theme/requirejs-config.js

    Add below code :

    var config = {
        paths: {
            'owlcarousel': "js/owlcarousel"
        },
        shim: {
            'owlcarousel': {
                deps: ['jquery']
            }
        }
    };
    

    Step 3: Create default_head_blocks.xml under below path :

    app/design/frontend/Vendor/YourTheme/Magento_Theme/Magento_Theme/layout/default_head_blocks.xml

    Step 4: Add below code :

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="css/owl.carousel.css"/>
        </head>
    </page>
    

    Step 5: Create static block or phtml file and add below code :

    <div class="owl-carousel owl-theme">
        <div class="item"><img src="{{media url="wysiwyg/demo.jpg"}}" /></div>
        <div class="item"><img src="{{media url="wysiwyg/demo.jpg"}}" /></div>
        <div class="item"><img src="{{media url="wysiwyg/demo.jpg"}}" /></div>
    </div>
    <script type="text/javascript" xml="space">
        require([
            'jquery',
            'owlcarousel'
        ], function($){
            $(document).ready(function() {
                $('.owl-carousel ').owlCarousel({
                    loop:false,
                    nav:false,
                    items:1,
                    dots:true,
                    autoplay:true,
                    autoplayTimeout:3000
                })
            });
        });
    </script>
    

    Step 1: Download latest Fancybox version from below URL :
    http://fancyapps.com/fancybox/3/

    Add CSS under app/design/frontend/Vendor/YourTheme/web/css folder
    Add JS under app/design/frontend/Vendor/YourTheme/web/js folder

    Step 2: Create requirejs-config.js under below path :

    app/design/frontend/Vendor/YourTheme/Magento_Theme/requirejs-config.js

    Add below code :

    var config = {
        paths: {
            'fancybox': "js/jquery.fancybox.min"
        },
        shim: {
            'fancybox': {
                deps: ['jquery']
            }
        }
    };
    

    Step 3: Create default_head_blocks.xml under below path :

    app/design/frontend/Vendor/YourTheme/Magento_Theme/Magento_Theme/layout/default_head_blocks.xml

    Step 4: Add below code :

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <css src="css/jquery.fancybox.min.css"/>
        </head>
    </page>
    

    Step 5: Created static block or phtml file and add below code :

    <h1>Inline</h1>
    <a data-fancybox data-src="#hidden-content" href="javascript:;">
        Trigger the fancybox
    </a>
    <script type="text/javascript" xml="space">
        require([
                'jquery',
                'fancybox'
            ],
            function($) {
             // You can add your custom changes here.
            });
    </script>
    

    You can use below popup options :
    http://fancyapps.com/fancybox/3/docs/#media_types
    • Media types
    • Images
    • Video
    • Inline HTML
    • Ajax
    • Iframe


    HTML

    <div class="cart-container"> 
        <a href="#" class="cart">Cart</a>
        <ul class="cart-scroll">
            Content
        </ul>
    </div>
    

    CSS

    .cart-container {
          width: 250px;
          position: relative;
      }
      .cart {
          color: #000000;
          background: #cccccc;
          padding: 10px;
          text-decoration: none;
          line-height: 30px;
          float: left;  
      }
      .cart-scroll {
          background: #F5F5F5;
          opacity: 0;
          position: absolute;
          left: 0;
          top: 30px;
          text-align: left;
          transform: scaleY(0);
          transform-origin: 0 0 0;
          transition: all 0.5s ease 0s;
          visibility: hidden;
          width: 250px;
          z-index: 99999;
          padding: 20px;
      }
      .cart-container:hover ul.cart-scroll {
          opacity: 1;
          transform: scaleY(1);
          visibility: visible;
      }
    

    You can change position by overriding the file vendor/magento/module-catalog/view/base/templates/product/price/final_price.phtml

    <?php if ($block->hasSpecialPrice()): ?>
        <span class="special-price">
            <?php /* @escapeNotVerified */ echo $block->renderAmount($finalPriceModel->getAmount(), [
                'display_label'     => __('Special Price'),
                'price_id'          => $block->getPriceId('product-price-' . $idSuffix),
                'price_type'        => 'finalPrice',
                'include_container' => true,
                'schema' => $schema
            ]); ?>
        </span>
        <span class="old-price">
            <?php /* @escapeNotVerified */ echo $block->renderAmount($priceModel->getAmount(), [
                'display_label'     => __('Regular Price'),
                'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
                'price_type'        => 'oldPrice',
                'include_container' => true,
                'skip_adjustments'  => true
            ]); ?>
        </span>
    <?php else: ?>
        <?php /* @escapeNotVerified */ echo $block->renderAmount($finalPriceModel->getAmount(), [
            'price_id'          => $block->getPriceId('product-price-' . $idSuffix),
            'price_type'        => 'finalPrice',
            'include_container' => true,
            'schema' => $schema
        ]); ?>
    <?php endif; ?>
    

    TO

    <?php if ($block->hasSpecialPrice()): ?>
        <span class="old-price">
            <?php /* @escapeNotVerified */ echo $block->renderAmount($priceModel->getAmount(), [
                'display_label'     => __('Regular Price'),
                'price_id'          => $block->getPriceId('old-price-' . $idSuffix),
                'price_type'        => 'oldPrice',
                'include_container' => true,
                'skip_adjustments'  => true
            ]); ?>
        </span>
        <span class="special-price">
            <?php /* @escapeNotVerified */ echo $block->renderAmount($finalPriceModel->getAmount(), [
                'display_label'     => __('Special Price'),
                'price_id'          => $block->getPriceId('product-price-' . $idSuffix),
                'price_type'        => 'finalPrice',
                'include_container' => true,
                'schema' => $schema
            ]); ?>
        </span>
    <?php else: ?>
        <?php /* @escapeNotVerified */ echo $block->renderAmount($finalPriceModel->getAmount(), [
            'price_id'          => $block->getPriceId('product-price-' . $idSuffix),
            'price_type'        => 'finalPrice',
            'include_container' => true,
            'schema' => $schema
        ]); ?>
    <?php endif; ?>
    

    Call Media Images in PHTML Files

    <img src="<?php echo $mediaUrl.'wysiwyg/demo.jpg'; ?>" />
    

    Call Web Images in PHTML File

    <img src="<?php echo $this->getViewFileUrl('images/demo.png'); ?>" />
    

    Call Web Images in Static block and CMS page

    <img src="{{view url="images/demo.jpg"}}" />
    

    Call Media Images in Static block and CMS page

    <img src="{{media url='wysiwyg/demo.png'}}; ?>" />
    

    this class needs to be added to the map div = gmap-wrapper
    this class needs to be added to the iframe as a class = scrolloff

    CSS

    .scrolloff
    { pointer-events: none; }
    

    HTML

    <div class="gmap-wrapper">					
    	<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14695.074973989373!2d72.6236405!3d22.9587424!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4b7d4042cc4ba9d9!2sTankar+Residency%2C+Dibiyapur%2C+Vatva%2C+Ahmedabad%2C+Gujarat+382445!5e0!3m2!1sen!2sin!4v1499159481841" width="600" height="450" frameborder="0" style="border:0"  class="scrolloff"></iframe>
    </div>
    

    jQuery

    <script type="text/javascript">
    // DISABLE MOUSE SCROLL IN MAPS
    // enable the pointer events only on click;
    	jQuery(document).ready(function( $ ) {
    		$('.gmap-wrapper').on('click', function ()
    			{ $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click 
    		});
    		// you want to disable pointer events when the mouse leave the canvas area;
    		$(".gmap-wrapper").mouseleave(function (){ 
    			$('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area 
    		});
    	});
    </script>