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を連携したい時は、参考にしていただければ幸いです。