Shifter Static + WooCommerce + Algoliaでつくるカタログサイト

この記事は「Algolia Advent Calendar 2020」および「Shifter Advent Calendar 2020」19日目の投稿です。

普通のWordPress案件でもちょっと面倒なことが多いカタログサイトですが、WooCommerce + Algoliaでいい感じにできそうだったので紹介します。

使ったプラグイン

WooCommerce

言わずもがなの通販サイト構築プラグインです。

WordPress同様コアは比較的素朴ですが、プラグインが豊富で組み合わせによるカスタマイズを強みとしています。

WordPressのサーバー / DBで顧客情報を扱いたくないという見方もありますが、今回はカート・顧客管理系を一切使いませんので気軽にいれてしまいます。

YITH WooCommerce Catalog Mode

カート系をつぶしたいので、カタログモードにするプラグインを追加します。

ちなみに、WooCommerceのコア機能で「外部リンクに飛ばす」ということができますので、特定のフォームに飛ばしたいなどの場合はこちらを使いましょう。

WP Search with Algolia

カタログといえば検索でしょうということで、おなじみAlgoliaの出番です。

WooCommerceについてもデフォルトで対応していますので、ノーカスタマイズで導入しています。

商品登録

カタログとして掲載したいものは、WooCommerceの商品として登録します。

その際、検索対象にしたい項目はカスタム商品属性として登録しましょう。

ここで登録すると、Algolia側でもtaxonomiesとしてインデックスされます。

インデックス対象に「商品」を追加

Algoliaプラグインの設定（autocomplete）で「商品」にチェックを入れて保存します。これで商品情報を更新すると、プラグインがAlgoliaのインデックスを更新してくれます。いろんなものがインデックスできますが、使う予定がないものは不用意にインデックスしないようにしましょう。

Instantsearch.jsを読み込むプラグインを用意する

手早いのはテーマに直接書き込むことですが、Gitで管理していないものを使っている場合以外は全くお勧めしません。

プラグインとしてInstantsearch.jsを読み込みましょう。

<?php
/*
Plugin Name: Custom search
Description: カスタマイズ用の諸々
Author: hideokamoto
Version:100.0.1
*/

/**
 * Algolia Instantsearchの読み込み
 **/
function add_algolia() {
  $version = '20200919';
  wp_enqueue_script( 'algolia_instantsearch', 'https://cdn.jsdelivr.net/npm/instantsearch.js@4.8.1/dist/instantsearch.production.min.js', array(), $version );
  wp_enqueue_script( 'algolia_instantsearch_js', plugins_url( '/index.js' , __FILE__ ), array( 'algolia_instantsearch' ), $version  );
  wp_enqueue_style( 'algolia_instantsearch_css_reset', "https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/reset-min.css",array(), $version );
  wp_enqueue_style( 'algolia_instantsearch_css', "https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia-min.css",array(), $version );
}
add_action( 'wp_enqueue_scripts',  'add_algolia' );

Instantsearch.jsのコードを書く

あとはInstantsearch.jsを実行する処理を書いてやりましょう。

function loadAlgoliaInstantSearch() {
  const target = jQuery('#algolia_search')
  if (!target[0]) return;
  const searchClient = algoliasearch(
      'xxxxx',
      'xxxxxx'
  );

  const search = instantsearch({
      searchClient,
      indexName: "wp_posts_product"
  });
  search.addWidgets([
      instantsearch.widgets.refinementList({container: "#algolia_refinement_list_1",attribute: "taxonomies.pa_place"}),
      instantsearch.widgets.refinementList({container: "#algolia_refinement_list_2",attribute: "taxonomies.pa_date"}),
      instantsearch.widgets.hits({
      container: "#algolia_search_result",
      templates: {
          item(hit) {
          return `
              <article>
              <h2><a href="${hit.permalink}">${instantsearch.highlight({ attribute: 'post_title', highlightedTagName: 'mark', hit })}</a></h2>
              <p>${instantsearch.highlight({ attribute: 'post_excerpt', highlightedTagName: 'mark', hit })}</p>
          <section>${hit.post_excerpt}</section>
              
              </article>
          `;
          }
      }
      }
  ),
  ])
  search.start()
}
window.addEventListener('load', loadAlgoliaInstantSearch);

大体こんな感じになります

多少CSSで調整していますが、こんな感じで条件別に絞り込む検索を行えるようになっています。

WooCommerceを使うメリット

WooCommerceをカタログに使うメリットとしては、学習コストとカスタマイズ性が挙がると思います。

カタログサイトを作るプラグイン自体はいろいろとありますが、それぞれの使い勝手などを比較検討して、その使い方を社内で案内する手間を考えると、認知度が高い方であるWooCommerceのUIで触れるのはメリットです。

また、Algoliaの件のようにある程度他のプラグインもWooCommerceを考慮した挙動になっていることが多いことや、WooCommerce用のプラグイン・テーマというカテゴリがある程にはサードパーティについても豊富です。

もちろんWooCommerceのAPI / Hookも豊富ですので、自前でカスタマイズすることも可能ですし、その場合の参考になる記事なども他と比較すると多いでしょう。

カタログサイト案件をいくつも回す必要がある場合は、concrete5やDrupalの方が向いているのではないかとかそのあたりからちゃんと検討しますが、単発で1サイトだけというケースであれば手慣れているWordPressにWooCommerceをいれて手早く済ませるという判断が自分にとって合っているかなと思います。

セキュリティについてはShifter Staticで静的化して対応

WooCommerceを使うと、WordPressの中に顧客情報をはじめとする個人情報がある程度記録されていきます。ちゃんとメンテナンス・運用できていれば特別問題視することでもないとは思いますが、より安全側に振りたいという場合には静的化してしまうとよいでしょう。

今回のようにカタログ用途であれば、カートや顧客管理・注文処理といったサーバー側の処理を必要とする機能はほぼ不要です。また、検索についてもAlgoliaのJSアプリ（Instantsearch）を利用していますので、気にする必要はありません。

ということで、個人的に作ったアプリなどのポートフォリオサイトやあまりメンテに時間を割きたくない小規模なサービスカタログサイトなどは、Shifter StaticにWooCommerceを入れて構築し、検索が必要ならAlgoliaを入れるという方法が平和じゃないかなと思います。