PrestaShop 1.7.x テーマ（テンプレート）のカスタマイズ（Webpack）

tk-fuse · 2017 年 6 月 27 日午前 5:38

イーコマースCMSであるPrestaShopをストアサイトに採用しました。従来のMagentoによるストアサイトは、構成ファイルの階層の深さによるカスタマイズの煩雑さや、バージョンアップ毎の不具合頻度の多さから採用を取りやめました。

PrestaShopのテーマのカスタマイズにはWebpackによる開発環境が必要です。Webpackについては以下のサイトを参照して下さい。インストール先サーバはUbuntu16.04です。

Node.jsのインストール

以下サイトを参照しNode.jsの最新バージョンをインストールします。

$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -

$ sudo apt-get install -y nodejs

Node.jsのパッケージマネージャnpmも同時にインストールされます。

Webpackのインストール

Node.jsのWebpackパッケージをグローバル環境にインストールします。

$ sudo npm i -g webpack

PrestaShop Classicテーマのダウンロード

以下Githubのサイトからdevelopのブランチをダウンロードします。ここから /themes/classic/_dev を展開してサーバ側の該当フォルダと入れ換えます。

Node関連パッケージのインストール

_dev内のpackage.jsonに記述されているパッケージをインストールします。

$ cd /your_store_site/themes/classic/_dev

$ npm install

Webpackによるコンパイル

以下コマンドで_dev内の関連ファイルをコンパイル、assetsフォルダにサイトを構成するcss、jsファイルを出力します。Webpack設定ファイルは_dev内のwebpack.config.jsです。

$ npm run build

または

＄ webpack

cssの変更は_dev内のscssファイルを編集、コンパイルすることでサイトに反映されます。Node.jsによるAPIは下記サイトを参照願います。

tk-fuse · 2018 年 6 月 7 日午前 9:12

npmは/usr/bin/npmにインストールされるため、

$ which npm
/usr/bin/npm

以下リンクを作成します。

$ sudo ln -s /usr/bin/npm /usr/local/bin/npm

tk-fuse · 2018 年 6 月 7 日午前 10:55

How to Prevent Permissions Errors

https://docs.npmjs.com/getting-started/fixing-npm-permissions

ホームホルダー内で

$ mkdir ~/.npm-global
$ npm config set prefix ‘~/.npm-global’
$ export PATH=~/.npm-global/bin:$PATH
$ source ~/.profile

npxパッケージを利用する代替案もあります。（npmバージョン5.2以上）

tk-fuse · 2018 年 6 月 7 日午後 12:49

まとめ

パッケージの依存関係が複雑で問題が必ず発生します。Nodejsは安定版を利用すること。

Nodeの最新安定版をインストール

インストールは上記本家から直接ダウンロードして該当フォルダにコピーするか、記事の手順

に従います。

webpackのインストール

上記の説明ではグローバル環境にインストールすることになっていましたが、本家サイトでは利用するローカルフォルダにインストールすることを推奨しています。

webpackの実行は、

$ sudo node_modules/webpack/bin/webpack.js

tk-fuse · 2022 年 6 月 14 日午前 1:40

テーマの変更・追加

数箇所の変更であれば、直接テーマのcssファイルを変更して下さい。
変更後管理画面の 拡張パラメータ ---> パフォーマンス からキャッシュをクリアします。

/themes/classic/assets/css/theme.css

.carousel .carousel-item .caption .display-1 {
    font-size: 3rem;
    font-weight: 700;
    color: lightgreen;
}

メールテンプレートの編集

チェックによる支払いフォーマットをWISEへ変更

tk-fuse · 2022 年 6 月 16 日午前 5:18

商品説明タグの移動

themes/classic/templates/catalog/product.tpl

右半分の領域で表示されていた商品説明タグを独立させて横幅全体に表示。

右側のブロックを追加

左側で表示された</div>を削除

tk-fuse · 2022 年 7 月 26 日午前 9:33

フッターリンクの変更

themes/classic/templates/_partials/footer.tpl

<div class="footer-container">
  <div class="container">
    <div class="row">
      {block name='hook_footer'}
        {hook h='displayFooter'}
      {/block}
    </div>
    <div class="row">
      {block name='hook_footer_after'}
        {hook h='displayFooterAfter'}
      {/block}
    </div>
    <div class="row">
      <div class="col-md-12">
        <p class="text-sm-center">
          {block name='copyright_link'}
            <a href="https://ficus.myvnc.com" target="_blank" rel="noopener noreferrer nofollow">
              {l s='%copyright% %year% - FICUSONLINE F9E STORE by %ficusonline%' sprintf=['%ficusonline%' => 'FICUSONLINE™', '%year%' => 'Y'|date, '%copyright%' => '©'] d='Shop.Theme.Global'}
            </a>
          {/block}
        </p>
      </div>
    </div>
  </div>
</div>