How To Add Custom Attribute (PRICE and SKU) Data To Recently Viewed Products Widget in Magento 2.4.5

目次

1. はじめに
2. 環境の設定
3. ステップ1：カスタムモジュールの作成
4. ステップ2：製品モデルの拡張
5. ステップ3：ウィジェットテンプレートの上書き
6. ステップ4：レイアウトXMLの更新
7. ステップ5：テストと展開
8. 結論
9. FAQ

はじめに

電子商取引のウェブサイトを閲覧していると、以前に表示された商品を見かけますが、詳細を思い出せないことがあります。便利に、ウィジェットに最近表示された商品が表示されますが、名前、画像、および「詳細を見る」ボタンのみ表示されます。このウィジェットに価格とSKUも表示されると便利ではないでしょうか？このブログポストでは、Magento 2.4.5ストアにこれらのカスタム属性を追加して、ユーザーエクスペリエンスを向上させ、売上を向上させる方法について詳しく説明します。

Magentoサイトのオーナーまたは開発者で、最近表示された商品ウィジェットをより詳細にしたいですか？正しい投稿に辿り着きました。ここでは、Magento 2.4.5でこのウィジェットにカスタム属性（価格とSKU）を追加する方法を手順ごとに説明します。

環境の設定

変更を行う前に、開発環境が正しく設定されていることを確認してください:

1. Magentoのインストール：実行中のMagento 2.4.5インスタンスを確認してください。
2. コードベースへのアクセス：FTP、SSH、または同様の方法を使用してMagentoのコードベースにアクセスしてください。
3. バックアップ：コアファイルを変更する前に、常にサイトのバックアップを作成してください。

ステップ1：カスタムモジュールの作成

コアファイルに手を加えないようにするために、この拡張のためにカスタムモジュールを作成します。

1. ディレクトリの作成:

   • app/code/YourVendor/RecentlyViewed
   • app/code/YourVendor/RecentlyViewed/etc
   • app/code/YourVendor/RecentlyViewed/etc/module.xml
   • app/code/YourVendor/RecentlyViewed/registration.php

2. 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="YourVendor_RecentlyViewed" setup_version="1.0.0"/>
   </config>
   

3. registration.phpの作成:

   <?php
   \Magento\Framework\Component\ComponentRegistrar::register(
       \Magento\Framework\Component\ComponentRegistrar::MODULE,
       'YourVendor_RecentlyViewed',
       __DIR__
   );
   ?>
   

ステップ2：製品モデルの拡張

追加の属性（価格とSKUなど）が利用可能であることを確認するために、製品モデルを拡張する必要があります。

1. 商品属性のXMLファイルを作成:

   • app/code/YourVendor/RecentlyViewed/etc/frontend/events.xml

   <?xml version="1.0"?>
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework/Event/etc/events.xsd">
       <event name="catalog_block_product_list_collection">
           <observer name="add_custom_attributes" instance="YourVendor\RecentlyViewed\Observer\AddCustomAttributes"/>
       </event>
   </config>
   

2. Observerクラスの作成:

   • app/code/YourVendor/RecentlyViewed/Observer/AddCustomAttributes.php

   <?php
   namespace YourVendor\RecentlyViewed\Observer;
   
   use Magento\Framework\Event\ObserverInterface;
   
   class AddCustomAttributes implements ObserverInterface
   {
       public function execute(\Magento\Framework\Event\Observer $observer)
       {
           $collection = $observer->getEvent()->getCollection();
           $collection->addAttributeToSelect('price');
           $collection->addAttributeToSelect('sku');
       }
   }
   ?>
   

ステップ3：ウィジェットテンプレートの上書き

次のステップは、最近表示された商品ウィジェットで使用されるテンプレートファイルを上書きすることです。

1. ウィジェットテンプレートディレクトリの作成:

   • app/code/YourVendor/RecentlyViewed/view/frontend/templates

2. 既存のテンプレートをコピー: 元のテンプレートファイルがvendor/magento/module-catalog/view/frontend/templates/product/list/items.phtmlにある場所を特定し、それをカスタムモジュールのテンプレートディレクトリにコピーします。

3. テンプレートの変更:

   • app/code/YourVendor/RecentlyViewed/view/frontend/templates/product/list/items.phtml

   <?php
   foreach ($_productCollection as $_product): ?>
       <div class="product-item">
           <div class="product-item-info">
               <a href="<?php echo $_product->getProductUrl(); ?>" class="product-item-photo">
                   <span class="product-item-image">
                       <img src="<?php echo $block->getImage($_product, 'product_base_image')->getImageUrl(); ?>" alt="<?php echo htmlspecialchars($_product->getName(), ENT_QUOTES, 'UTF-8'); ?>">
                   </span>
               </a>
               <div class="product-item-details">
                   <strong class="product-item-name"><a href="<?php echo $_product->getProductUrl(); ?>"><?php echo htmlspecialchars($_product->getName(), ENT_QUOTES, 'UTF-8'); ?></a></strong>
                   <div class="product-item-price">
                       <?php echo $block->getPriceHtml($_product); ?>
                   </div>
                   <div class="product-item-sku">
                       SKU: <?php echo htmlspecialchars($_product->getSku(), ENT_QUOTES, 'UTF-8'); ?>
                   </div>
               </div>
           </div>
       </div>
   <?php endforeach; ?>
   

ステップ4：レイアウトXMLの更新

Magentoがカスタムテンプレートをウィジェットに使用するようにするには、レイアウトXMLを更新する必要があります。

1. レイアウトの更新:

   • app/code/YourVendor/RecentlyViewed/view/frontend/layout/default.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>
           <referenceBlock name="recently_viewed.products">
               <action method="setTemplate">
                   <argument name="template" xsi:type="string">YourVendor_RecentlyViewed::product/list/items.phtml</argument>
               </action>
           </referenceBlock>
       </body>
   </page>
   

ステップ5：テストと展開

すべてのキャッシュをクリアし、setup:upgradeコマンドを実行してモジュールを登録することを忘れずに:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
php bin/magento cache:clean
php bin/magento cache:flush

テスト

1. 最近表示された商品ウィジェット：任意の商品ページに移動し、いくつかの商品を表示して最近表示された商品ウィジェットを作成します。
2. 属性の確認：ウィジェットのエントリに価格とSKUが正しく表示されていることを確認してください。

結論

これらの手順に従うことで、Magento 2.4.5で最近表示された商品ウィジェットに価格とSKUなどのカスタム属性を追加できます。これにより、ユーザーエクスペリエンスが向上し、お客様が迅速に情報を得るのを助ける重要な情報が前面に表示されます。豊かなショッピング体験を提供するためにMagentoストアフロントをカスタマイズして競争に勝ってください。

FAQ

Q1：ウィジェットにさらにカスタム属性を追加できますか？ はい、同じ手順に従い、必要に応じてオブザーバを変更して追加の属性を含めることができます。

Q2：カスタムモジュールを実装した後に問題が発生した場合はどうすればよいですか？ 変更を行う前に、サイトのすべてのキャッシュをクリアし、データを再インデックスしてください。変更を行う前に常にサイトのバックアップを取得することをおすすめします。

Q3：このカスタマイズはサイトのパフォーマンスに影響を与えますか？ いくつかの追加属性を追加することは通常はほとんど影響がありませんが、特にサイトのトラフィックが多い場合は、パフォーマンスを監視することをおすすめします。