how to call custom jquery function on custom phtml in magento 2

Question

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>

• Qaisar Satti: magento.stackexchange.com/questions/102761/… check it this is your solution

Answer 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.

Answer 2

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

<script type="text/javascript">require(['yourscript']);</script>

• Ben Crook: 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.
• mrtuvn: 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
• Ben Crook: 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.