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>
Improve this question
1

2 Answers 2

Reset to default
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.

Improve this answer
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>
Improve this answer
3
  • 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. Commented Mar 29, 2017 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 Commented Mar 29, 2017 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. Commented Mar 30, 2017 at 8:31

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.