場合によっては、カテゴリページで商品をすぐにプレビューしたいこともあるでしょう。そのような場合には、カテゴリーリストの商品ボックスに「クイックビュー」ボタンを追加することができます。このボタンをクリックすると、製品のすべての機能を表示するモーダルウィンドウが開きます。しかし、デフォルトの設定では、そのようなことはできません。そこで今日は、Magento 2にクイックビュー機能を追加する方法をご紹介します。
ステップ1：Magento 2モジュールの作成と有効化
まず、app/code/Mageplaza/QuickView/registration.phpを作成してください。作成されたら、以下のコードを追加します。
<?php
/**
* @category Mageplaza
* @package Mageplaza_QuickView
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Mageplaza_QuickView',
__DIR__
);上記のコードは、新しいモジュールを登録するために非常に重要です。
また、app/code/Mageplaza/QuickView/etc/module.xmlを作成する必要があります。
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Mageplaza_QuickView" setup_version="1.0.0">
<sequence>
<module name="Magento_Catalog"/>
<module name="Magento_Customer"/>
</sequence>
</module>
</config>そして、app/code/Mageplaza/QuickView/composer.jsonも。
{
"name": "mageplaza/module-quickview",
"description": "Simple Quick View",
"require": {
"php": "~5.6.0|~7.0.0",
"magento/framework": "100.1.*"
},
"type": "magento2-module",
"version": "1.0.0",
"license": [
"proprietary"
],
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"Mageplaza\\QuickView\\": ""
}
}
}最後に、以下のコマンドを実行すると、この拡張機能を有効にすることができます。
php bin/magento module:enable Mageplaza_QuickViewステップ2： ファンクショナリーの追加
カテゴリページのすべての商品ボックスにクイックビューボタンを追加するには、app/code/Mageplaza/QuickView/view/frontend/layout/catalog_category_view.xmlをプロジェクト内で作成する必要があります。そして、それが作成されたら、これを追加してください。
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<referenceBlock name="category.product.addto">
<block class="Magento\Catalog\Block\Product\ProductList\Item\Block"
name="category.product.quickview"
as="quickview"
template="Mageplaza_QuickView::product/productlist/item/quickview.phtml"/>
</referenceBlock>
</referenceContainer>
</body>
</page>上記のコードは、カートに入れるボタンの近くにあるボタンを追加することができます。このボタンはお好みのスタイルにすることができます。
モーダルウィンドウの商品ページが商品ビューページのページと同じように見えるように、XMLでいくつかの要素を削除する必要があるかもしれないことに気づくはずです。
そのためには、Magento\Catalog\Controller\Product\Viewをオーバーライドして、iframe経由で商品が呼び出される場合の新しいハンドルを追加します。
しかし、その前に、app/code/Mageplaza/QuickView/etc/frontend/di.xmlを作成する必要があります。
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Controller\Product\View"
type="Mageplaza\QuickView\Controller\Product\View" />
</config>そして、app/code/Mageplaza/QuickView/Controller/Product/View.phpが必要になります。
<?php
namespace Mageplaza\QuickView\Controller\Product;
use Magento\Catalog\Controller\Product\View as CatalogView;
/**
* Class View
*
* @package Mageplaza\QuickView\Controller\Product
*/
class View extends CatalogView
{
/**
* Overriden in order to add new layout handle in case product page is loaded in iframe
*
* @return \Magento\Framework\Controller\Result\Forward|\Magento\Framework\Controller\Result\Redirect
*/
public function execute()
{
if ($this->getRequest()->getParam("iframe")) {
$layout = $this->_view->getLayout();
$layout->getUpdate()->addHandle('quickview_product_view');
}
return parent::execute();
}
}つまり、iframeを含む製品のURLをGETパラメータとして呼び出したときに、そのレイアウトを変更することができます。以下は、その方法です: app/code/Mageplaza/QuickView/view/frontend/layout/quickview_product_view.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="empty"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="empty"/>
<html>
<attribute name="class" value="quickview-scroll"/>
</html>
<body>
<attribute name="class" value="quickview-override"/>
<referenceContainer name="product.page.products.wrapper" remove="true" />
<referenceContainer name="product.info.details" remove="true" />
<referenceBlock name="reviews.tab" remove="true" />
<referenceBlock name="product.info.details" remove="true" />
<referenceBlock name="product.info.description" remove="true" />
<referenceBlock name="product.info.overview" remove="true" />
<referenceBlock name="authentication-popup" remove="true" />
</body>
</page>ページのレイアウトは自由に編集することができます。例えば、いくつかの要素を削除することができます。
ステップ3: JavaScriptの編集
ここで魔法がかかります: app/code/Mageplaza/QuickView/view/frontend/web/js/product/productlist/item/quickview.js
define([
'jquery',
'Magento_Ui/js/modal/modal',
'mage/loader',
'Magento_Customer/js/customer-data'
], function ($, modal, loader, customerData) {
'use strict';
return function(config, node) {
var product_id = jQuery(node).data('id');
var product_url = jQuery(node).data('url');
var options = {
type: 'popup',
responsive: true,
innerScroll: false,
title: $.mage.__('Quick View'),
buttons: [{
text: $.mage.__('Close'),
class: 'close-modal',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#quickViewContainer' + product_id));
$("#quickViewButton" + product_id).on("click", function () {
openQuickViewModal();
});
var openQuickViewModal = function () {
var modalContainer = $("#quickViewContainer" + product_id);
modalContainer.html(createIframe());
var iframe_selector = "#iFrame" + product_id;
$(iframe_selector).on("load", function () {
modalContainer.addClass("product-quickview");
modalContainer.modal('openModal');
this.style.height = this.contentWindow.document.body.scrollHeight+10 + 'px';
this.style.border = '0';
this.style.width = '100%';
observeAddToCart(this);
});
};
var observeAddToCart = function (iframe) {
var doc = iframe.contentWindow.document;
$(doc).contents().find('#product_addtocart_form').submit(function(e) {
e.preventDefault();
$.ajax({
data: $(this).serialize(),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function(response) {
customerData.reload("cart");
customerData.reload("messages");
$(".close-modal").trigger("click");
$('[data-block="minicart"]').find('[data-role="dropdownDialog"]').dropdownDialog("open");
}
});
});
};
var createIframe = function () {
return $('<iframe />', {
id: 'iFrame' + product_id,
src: product_url + "?iframe=1"
});
}
};
});ここでは、ほとんどのバグを見つけて修正することができます。Magentoのデフォルトのモーダルウィンドウを使い、先ほど数ステップで追加したボタンを使ってモーダルウィンドウを開き、iframeを作成して、iframe内に商品ページを読み込み、カートに入れるフォームのsubmitイベントを監視すると理想的です。こうすることで、商品が追加されたときにウィンドウを閉じることができます。
結論
結論として、クイックビューは非常に便利なツールで、特にカテゴリーページで商品をプレビューしたい場合に有効です。このガイドを読めば、Magento 2 にクイックビュー機能を追加する方法について、理想的な理解が得られるでしょう。
