EC-CUBE4の商品一覧を別のWordPressサイト上に表示する方法

EC-CUBE4の商品一覧を別のWordPressサイト上に表示する方法

EC-CUBE4の商品一覧を別のWordPressサイト上に表示する方法

EC-CUBE4で作成されたサイトに登録されている商品一覧を別のWordPressサイトに表示させる方法をご紹介いたします。

WordPressの投稿をEC-CUBEに表示させるのはプラグインがありますが逆はありません。EC-CUBEの商品一覧をWordPress側に表示させる場合は、EC-CUBE側とWordPress側の両方でカスタマイズが必要です。

EC-CUBE4のカスタマイズ:商品一覧をJSON形式で出力

※環境はEC-CUBE4.2.3で試しました。

まずは、EC-CUBE側のカスタマイズです。

「/app/Customize/Controller/Api/ProductController.php」というファイルを作成します。ProductController.phpの中身は下記の通りです。

EC-CUBEがサブディレクトリにインストールされている場合は、「/html/upload/save_image/」の前にディレクトリ名を追加してください。

<?php

namespace Customize\Controller\Api;

use Eccube\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;
use Eccube\Repository\ProductRepository;

class ProductController extends AbstractController {
  /**
   * @Route("/api/products", name="api_products", methods={"GET"})
   */
  public function index(ProductRepository $productRepository) {
    $products = $productRepository->findBy([], null, 10); //新着10件

    $request = $this->get('request_stack')->getCurrentRequest();
    $host = $request->getSchemeAndHttpHost();

    $data = [];
    foreach ($products as $product) {
      $image = $product->getMainListImage();
      $imageUrl = $image ? $host . '/html/upload/save_image/' . $image->getFileName() : null;

      $data[] = [
        'id' => $product->getId(),
        'name' => $product->getName(),
        'price' => $product->getPrice02IncTaxMin(),
        'image' => $imageUrl,
        'url' => $this->generateUrl('product_detail', ['id' => $product->getId()], 0),
      ];
    }

    return new JsonResponse($data);
  }
}

ファイルをアップロードしたら、EC-CUBE管理画面の[コンテンツ管理] – [キャッシュ管理]でキャッシュをクリアします。

これで、「https://example.com/api/products」にアクセスすると、JSON形式の商品一覧(新着10件)が出力されるようになります。

WordPressのカスタマイズ:商品一覧のJSONを取得してショートコードで出力

※環境はWordPress6.7.2で試しました。

WordPress側では、適用しているテーマのfunctions.phpに下記コードを追加します。「https://example.com/api/products」の部分はEC-CUBEサイトのドメインに変更してください。

function show_eccube_products() {
  $response = wp_remote_get('https://example.com/api/products');

  if (is_wp_error($response)) {
    return '商品情報を取得できませんでした(接続エラー)';
  }

  $body = wp_remote_retrieve_body($response);
  $products = json_decode($body, true);

  if (!is_array($products)) {
    return '商品情報の取得に失敗しました(データ不正)';
  }

  $output = '<ul class="eccube-products">';
  foreach ($products as $product) {
    $output .= '<li class="eccube-products__item">';
    if (!empty($product['image'])) {
      $output .= '<img src="' . esc_url($product['image']) . '" alt="' . esc_attr($product['name']) . '">';
    }
    $output .= '<h3>' . esc_html($product['name']) . '</h3>';
    $output .= '<p>価格: ' . number_format($product['price']) . '円</p>';
    $output .= '<a href="' . esc_url($product['url']) . '">商品詳細へ</a>';
    $output .= '</li>';
  }
  $output .= '</ul>';

  return $output;
}
add_shortcode('eccube_products', 'show_eccube_products');

functions.phpにコードを追加したら、商品一覧を表示させたい箇所に下記ショートコードを挿入します。

[eccube_products]

これで、WordPressサイトにEC-CUBEの商品一覧を表示できます。あとは、CSSで見た目を調整すればOKです。

あとがき

出力されるHTMLを変更したい場合は、functions.phpのHTMLの部分を適宜変更してください。

EC-CUBEとWordPressを連携したい時は、参考にしていただければ幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です