Posts

Posted on

How to create popup modal in magento 2?

How to create Popup Modal using Javascript in Magento 2?

Create a .phtml template file with the given content to make POPUP using Magento 2,

<div class="main-block">
    <div class="content">
    	<a href="javascript:void(0)" id="chart"><?php echo __('Chart Link');?></a>
    </div>
    <!-- Your Popup content with main div display none -->
	<div id="popup-chart" style="display:none;">
	    YOUR POPUP CONTENT GOES HERE
	</div>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal',
            'domReady!'
        ],
        function($, modal) {
            $(function() {
            	$("body").on("click", "#chart", function(e) {
                    var options = {
                        type: 'popup',
                        responsive: true,
                        innerScroll: true,
                        buttons: false
                    };
                    var popup = modal(options, $('#popup-chart'));
                    $("#popup-chart").modal("openModal");
                }
            });
        }
    );
</script>

In the above template file, we can show popup based on click on chart link. When click on the chart link defined in our DOM element popup modal will be displayed.

Call Magento_Ui/js/modal/modal object in your require dependency.

There are many default options are available for modal.js file.
Different types of optios you can pass as per your requirement in above options object.

List of default options for a modal popup, if you want to override default value set options value in your custom template in the options object.

    type: 'popup',
    title: '',
    subTitle: '',
    modalClass: '',
    focus: '[data-role="closeBtn"]',
    autoOpen: false,
    clickableOverlay: true,
    popupTpl: popupTpl,
    slideTpl: slideTpl,
    customTpl: customTpl,
    modalVisibleClass: '_show',
    parentModalClass: '_has-modal',
    innerScrollClass: '_inner-scroll',
    responsive: false,
    innerScroll: false,
    modalTitle: '[data-role="title"]',
    modalSubTitle: '[data-role="subTitle"]',
    modalBlock: '[data-role="modal"]',
    modalCloseBtn: '[data-role="closeBtn"]',
    modalContent: '[data-role="content"]',
    modalAction: '[data-role="action"]',
    focusableScope: '[data-role="focusable-scope"]',
    focusableStart: '[data-role="focusable-start"]',
    focusableEnd: '[data-role="focusable-end"]',
    appendTo: 'body',
    wrapperClass: 'modals-wrapper',
    overlayClass: 'modals-overlay',
    responsiveClass: 'modal-slide',
    trigger: '',
    modalLeftMargin: 45,
    closeText: $.mage.__('Close'),
    buttons: [{
        text: $.mage.__('Ok'),
        class: '',
        attr: {},

        /**
         * Default action on button click
         */
        click: function (event) {
            this.closeModal(event);
        }
    }],
Posted on

How to Create a CSV and Download Programmatically by Magento 2?

Create Export and Download CSV, Excel or Text File Programmatically in Magento 2 by FileFactory Class.

\Magento\Framework\App\Response\Http\FileFactory used to create CSV and download CSV by Magento way. create() function in FileFactory.php is used for create CSV file.

There are many other ways to download CSV files using Core PHP script but its not the best way to use within the Magento Coding standard.
You can write CSV and download a CSV file using just simple below code snippet in your controller file,

<?php
namespace Rbj\CSV\Controller\Adminhtml\Index;

use Magento\Framework\App\Filesystem\DirectoryList;

class Export extends \Magento\Backend\App\Action
{
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\App\Response\Http\FileFactory $fileFactory,
        \Magento\Framework\Filesystem $filesystem
    ) {
        $this->_fileFactory = $fileFactory;
        $this->directory = $filesystem->getDirectoryWrite(DirectoryList::VAR_DIR);
        parent::__construct($context);
    }

    public function execute()
    {
        $name = date('m_d_Y_H_i_s');
        $filepath = 'export/custom' . $name . '.csv';
        $this->directory->create('export');
        /* Open file */
        $stream = $this->directory->openFile($filepath, 'w+');
        $stream->lock();
        $columns = $this->getColumnHeader();
        foreach ($columns as $column) {
            $header[] = $column;
        }
        /* Write Header */
        $stream->writeCsv($header);

        $products[] = array(1,'Test 1','test 1',100);
        $products[] = array(2,'Test 2','test 2',299);

        foreach ($products as $item) {
            $itemData = [];
            $itemData[] = $item[0];
            $itemData[] = $item[1];
            $itemData[] = $item[2];
            $itemData[] = $item[3];
            $stream->writeCsv($itemData);
        }

        $content = [];
        $content['type'] = 'filename'; // must keep filename
        $content['value'] = $filepath;
        $content['rm'] = '1'; //remove csv from var folder

        $csvfilename = 'Product.csv';
        return $this->_fileFactory->create($csvfilename, $content, DirectoryList::VAR_DIR);
        
    }

    /* Header Columns */
    public function getColumnHeader() {
        $headers = ['Id','Product name','SKU','Price'];
        return $headers;
    }
}

When you run controller action you can download CSV file using just Magento straight forward way.
Using the above way you can download CSV file using Magento 2 Way.

Posted on

How to convert shipping address into html format using magento 2?

In Magento 2 we can convert Shipping address or billing address into Html format using below code snippet. Sometimes we need to display entire shipping address into CSV column or any specific page at that time below html format will be useful.

You are familiar with How to Get Customer Default billing and shipping address   You can also use shipping/billing address from above way.

For Example, We have just get order shipping address, First load order by order id and after getting order id we have fetch order shipping address.
Call below construct in your php file,

<?php
class MassExport {
    public function __construct(
        \Magento\Sales\Api\OrderRepositoryInterface $orderRepository,
        \Magento\Customer\Model\Address\Config $addressConfig
    ) {
        $this->orderRepository = $orderRepository;
        $this->_addressConfig = $addressConfig;
    }

    /**
     * Render an address as HTML and return the result
     *
     * @return string
     */
    public function _getAddressHtml($orderId)
    {
        try {
            $order = $this->orderRepository->get($orderId);
        } catch (NoSuchEntityException $e) {
            throw new \Magento\Framework\Exception\LocalizedException(__('This order no longer exists.'));
        }
        $address = $order->getShippingAddress();
        $renderer = $this->_addressConfig->getFormatByCode('html')->getRenderer();
        return $renderer->renderArray($address);
    }
}

You need to get address renderer using \Magento\Customer\Model\Address\Config class.
pass html format code and you will get html formatted address.

Call from template file,

    $orderId = 10;
    $shippingAddress = $this->_getAddressHtml($orderId);
    $shippingFormat = strip_tags($this->_getAddressHtml($shippingAddress));
    echo $shippingFormat;

The result will be,

Veronica Costello
6146 Honey Bluff Parkway
Calder,  Michigan, 49628-7978
United States
T:(555) 229-3326