0

I want to call a custom JS method quickViewPopUp like below on a list.phtml file in magento2. How can i do it? I'm doing something like this.

<?php    
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
use Magento\Framework\App\Action\Action;

// @codingStandardsIgnoreFile
?>
<?php
/**
 * Product list template
 *
 * @var $block \Magento\Catalog\Block\Product\ListProduct
 */
?>
<?php
$_productCollection = $block->getLoadedProductCollection();
$_helper = $this->helper('Magento\Catalog\Helper\Output');
?>
<?php if (!$_productCollection->count()): ?>
    <div class="message info empty"><div><?php /* @escapeNotVerified */ echo __('We can\'t find products matching the selection.') ?></div></div>
<?php else: ?>
    <?php echo $block->getToolbarHtml() ?>
    <?php echo $block->getAdditionalHtml() ?>
    <?php
    if ($block->getMode() == 'grid') {
        $viewMode = 'grid';
        $image = 'category_page_grid';
        $showDescription = false;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
    } else {
        $viewMode = 'list';
        $image = 'category_page_list';
        $showDescription = true;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
    }
    /**
     * Position for actions regarding image size changing in vde if needed
     */
    $pos = $block->getPositioned();
    ?>
    <div class="products wrapper <?php /* @escapeNotVerified */ echo $viewMode; ?> products-<?php /* @escapeNotVerified */ echo $viewMode; ?>">
        <?php $iterator = 1; ?>
        <ol class="products list items product-items">
            <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
            <?php foreach ($_productCollection as $_product): ?>
                <?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
                <div class="product-item-info" data-container="product-grid">
                    <?php
                    $productImage = $block->getImage($_product, $image);
                    if ($pos != null) {
                        $position = ' style="left:' . $productImage->getWidth() . 'px;'
                                . 'top:' . $productImage->getHeight() . 'px;"';
                    }
                    ?>
                    <?php // Product Image ?>
                    <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
                        <?php echo $productImage->toHtml(); ?>
                    </a>
                    <div class="product details product-item-details">
                        <?php
                        $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                        ?>
                        <strong class="product name product-item-name">
                            <a class="product-item-link"
                               href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>">
                                   <?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>
                            </a>
                        </strong>
                        <?php echo $block->getReviewsSummaryHtml($_product, $templateType); ?>
                        <?php /* @escapeNotVerified */ echo $block->getProductPrice($_product) ?>
                        <?php echo $block->getProductDetailsHtml($_product); ?>

                        <div class="product-item-inner">
                            <div class="product actions product-item-actions"<?php echo strpos($pos, $viewMode . '-actions') ? $position : ''; ?>>
                                <div class="actions-primary"<?php echo strpos($pos, $viewMode . '-primary') ? $position : ''; ?>>
                                    <?php if ($_product->isSaleable()): ?>
                                        <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                        <form data-role="tocart-form" action="<?php /* @escapeNotVerified */ echo $postParams['action']; ?>" method="post">
                                            <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
                                            <input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
                                            <?php echo $block->getBlockHtml('formkey') ?>
                                            <button type="submit"
                                                    title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
                                                    class="action tocart primary">
                                                <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                            </button>
                                        </form>
                                    <?php else: ?>
                                        <?php if ($_product->getIsSalable()): ?>
                                            <div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
                                        <?php else: ?>
                                            <div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                                <div class="quick_view">
                                    <button type="button" onclick="quickViewPopUp(this)" data-id="<?php echo $_product->getId() ?>" class="quick-view-btn-<?php echo $_product->getId() ?>"><?php echo __('Quick-View') ?></button>
                                </div>
                                <div data-role="add-to-links" class="actions-secondary"<?php echo strpos($pos, $viewMode . '-secondary') ? $position : ''; ?>>
                                    <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow()): ?>
                                        <a href="#"
                                           class="action towishlist"
                                           title="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>"
                                           aria-label="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>"
                                           data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($_product); ?>'
                                           data-action="add-to-wishlist"
                                           role="button">
                                            <span><?php /* @escapeNotVerified */ echo __('Add to Wish List') ?></span>
                                        </a>
                                    <?php endif; ?>
                                    <?php
                                    $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
                                    ?>
                                    <a href="#"
                                       class="action tocompare"
                                       title="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"
                                       aria-label="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"
                                       data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_product); ?>'
                                       role="button">
                                        <span><?php /* @escapeNotVerified */ echo __('Add to Compare') ?></span>
                                    </a>
                                </div>
                            </div>
                            <?php if ($showDescription): ?>
                                <div class="product description product-item-description">
                                    <?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                                    <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" title="<?php /* @escapeNotVerified */ echo $_productNameStripped ?>"
                                       class="action more"><?php /* @escapeNotVerified */ echo __('Learn More') ?></a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php echo($iterator == count($_productCollection) + 1) ? '</li>' : '' ?>
            <?php endforeach; ?>
        </ol>
    </div>
    <?php echo $block->getToolbarHtml() ?>
    <?php if (!$block->isRedirectToCartEnabled()) : ?>
        <script type="text/x-magento-init">
            {
            "[data-role=tocart-form], .form.map.checkout": {
            "catalogAddToCart": {}
            }
            }
        </script>
    <?php endif; ?>
<?php endif; ?>

<script>
    require(['jquery', "mage/mage"], function(jQuery){
    //<![CDATA[

    function quickViewPopUp(element) {
    console.log('ok');
    var baseUrl = '<?php echo $block->getBaseUrl() ?>';
    var productId = jQuery(element).attr('data-id');    
    jQuery.ajax({
    type: "POST",
    url: baseUrl + "quickview",
    data: { prod_id: productId, call_type: "quickview"},
    success: function(data) {

    jQuery.fancybox(data, {
    fitToView: false,
    width: 905,
    height: 505,
    autoSize: false,
    closeClick: false,
    openEffect: 'none',
    closeEffect: 'none'
    }); 
    }
    });
    }
    //]]>

    });



</script>
1

 Links

Use custom JS in M2 - Dev Docs

Calling and initialising JS in M2 - Dev Docs

How to use Knockout JS in Magento 2 - Magento Stack Exchange

Reference the JS

The first step is to reference your JS file inside the PHTML template:

<script type="text/x-magento-init">
{
    // components initialized on the element defined by selector
    "<element_selector>": {
        "<js_component1>": ...,
        "<js_component2>": ...
    },
    // components initialized without binding to an element
    "*": {
        "<js_component3>": ...
    }
}
</script>

For example if you wanted to load vendor/magento/module-catalog/view/frontend/web/product/view/validation.js when the dom element #test has loaded you would write:

<script type="text/x-magento-init">
    {
        "#test": {
            "Magento_Catalog/product/view/validation": {
                options-can-be-passed-here
            }
        }
    }
</script>

If you don't care about making sure the node has been rendered then you can use * which will load the JS regardless of any DOM elements.

Add your JS

In your JS file you will need to use the following structure:

define ([
    'jquery',
    'other/dependencies/can/go/here',
    `domReady!` // If you require your script to run after page load
], function ($, anotherFunction, domReady) {
    // Your code here
});

Loading the new file

To load the file on the frontend you'll need to clear pub/static/frontend, pub/static/_requirejs, and var/view_preprocessed. Also clear your browser cache.

 Notes

I would highly recommend choosing this method over adding JS inside a template, I'm a big fan of separating the content and logic.

0

You can call any script from template you want if you already register it in requirejs-config

<script type="text/javascript">require(['yourscript']);</script>
  • Would it not be better practice to load require JS via x-magento-init and have your script in it's own file? I feel that writing JS inside a PHTML template is not good practice. – Ben Crook Mar 29 '17 at 11:59
  • Should i call js via data-mage-init way in template? avoid call js directly in phtml. Sometimes i don't need use jslayout or component to pass php to js – mrtuvn Mar 29 '17 at 17:40
  • This way does work and the functionality should be the same so technically it doesn't matter which way you do it, it's more a case of splitting up the structure (PHTML) and the logic (JS) as most people find it easier to maintain. – Ben Crook Mar 30 '17 at 8:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.