タグ別アーカイブ: カスタマイズ

EC CUBE 2.13.3カスタマイズ 注文確認メールに支払い方法別に振込先などの情報を表示・挿入したメールを自動作成する方法

こんにちは。nekonomoridesignのyoshyです。
勤務先のEC CUBEサイトのカスタマイズで相変わらずひーひーいうてますが、いよいよ、運用に向けて動き出しているのですが、テスト注文をしたりしていたとき、ふと、気になった事がありました。

銀行振り込みとかの場合で入金先の連絡とかどうすればいいの?

あらかじめEC CUBEに備えられている注文確認メールでは、銀行振込先なんて記載はありません。かといって、支払い方法によってテンプレートを変えて送信できるというような某モールのような便利機能も見当たらなかったので・・・・ふたたび自作カスタマイズとなりました。(泣)

メールテンプレートの格納場所は・・・
data/Smarty/templates/defalt/mail_templates/

この中のテンプレートの、order_mail.tplをいじっていくのですが、いじる前に必ずバックアップやコピーを作製しておきましょう。

order_mail.tplで、支払い方法が「銀行振込」だった場合は、入金先をメール内容に入金先の案内を挿入させるカスタマイズ

━━━━━━以下コピー ━━━━━━━━━━━━━━━━

<!–{if $arrOrder.payment_method == “銀行振込” }–>
————————————–
【お振込先のご案内】
銀行名 :●●●銀行
支店名 :▲▲支店
口座番号:普通 xxxxxx
振込先名:★★★ ★★★

※お振込手数料はお客様ご負担でお願い致します。
※ご注文後1週間以内にお振込ください。予めご了承下さい。
————————————–
<!–{/if}–>

━━━━━━ここまで ━━━━━━━━━━━━━━━━

↑この内容で、  == “銀行振込”  のところを、支払い方法に登録してある支払い方法にする事で、その支払い方法のときだけ、 if で囲んである中の内容が表示されるようになります。

これを、order_mail.tplの、
<!–{if $arrOther.title.value}–>

↑こういうのが書いてある真下くらいに挿入すると良いです。(おそらく38行目あたりだったかと・・・・)

こうしておけば、ご注文があった時点で自動返信でいくこの注文確認メールに、すでに振込先を掲載出来るのでとてもラクチンです。

是非ためしてみてくださいね♪

EC CUBE 2.13.3 カスタマイズ トップページにスライドショーを設置する方法 動きのあるトップページを作る方法

こんにちは。nekonomoridesignのyoshyです。
本日はEC CUBEカスタマイズです。

トップページにスライドショーを設置する方法

トップページにスライドショーがあると、動きもあって何だかソレっぽい感じになりますよね?ということで、設置したいなあとおもってやってみましたので、備忘録兼ねて記事にしておきます。
簡単な流れはこちら。

  1. スライドショー用の画像を設置
  2. スライドショー用のブロックを新規作成
  3. 必要タグをそのブロックに記載
  4. 完成したボックスをレイアウトで配置

という簡単な流れです。

1.スライドショー用の画像の準備
/html/user_data/packages/default/img/(新規作成したフォルダ)
に画像を保存する。

ではまず、画像を用意します。
適当・・・というわけでもありませんが、1000x400位の大きさで私は作りましたが、画像の大きさは、設置されるサイトのサイズによると思いますので詳しくは割愛します。

作った画像を保存するのですが、保存場所は、私の場合、わかりやすいように「top_slide」という名前の専用フォルダを以下のに作製してそこに保存していきました。
スライドショーで流したい画像はすべてそこに入れるという感じです。

保存フォルダ
/html/user_data/packages/default/img/top_slide(※新規作成したフォルダ)

上記フォルダにFTPサーバ経由で画像をアップロードしておきます。

2&3.スライドショー用のブロックを新規作成してタグも記入。

スライドショーを表示させるためのブロックを新規作成します。
タグも一緒に書いてしまいます。

【作業場所】
デザイン管理>PC>ブロック設定
【登録内容】
ブロック名:トップスライドショー(※任意で決めてください)
ファイル名:top_slideshow(※任意で決めてください)
【タグ】
———————————————————————————–

<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/default.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/module.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/bloc.css” type=”text/css” media=”all”>
<link rel=”stylesheet” href=”<!–{$TPL_URLPATH}–>css/jquery.bxslider.css” type=”text/css” media=”all”>
<script type=”text/javascript” src=”<!–{$TPL_URLPATH}–>js/jquery.min.js”></script>
<script type=”text/javascript” src=”<!–{$TPL_URLPATH}–>js/jquery.bxslider.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.slider’).bxSlider({
auto: true,
pause: 4000,
speed: 1000,
mode: ‘horizontal’,
pager:true,
prevText: ‘<‘,
nextText: ‘>’
});
});
</script>

<div id=”slide_page”>
<ul class=”slider”>
<li><a href=”./products/list.php?category_id=1″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像1枚目” alt=”スライド1” /></a></li>
<li><a href=”./products/detail.php?product_id=1″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像2枚目” alt=”スライド2″ /></a></li>
<li><a href=”./products/list.php?category_id=2″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像3枚目” alt=”スライド3″ /></a></li>
<li><a href=”./products/list.php?category_id=3″><img src=”<!–{$TPL_URLPATH}–>/img/top_slide/2で保存した画像4枚目” alt=”スライド4″ /></a></li>
</ul>
</div>

————————————————————————————
タグの解説
<a href=”./products/list.php?category_id=3″>
↑これは、リンクURL。カテゴリへ飛ばしたいときは、ここの id= のあとの数字を変えれば使えます。

<a href=”./products/detail.php?product_id=1″>
↑これもリンクURL。こちらは商品ページにダイレクトです。id= のあとの数字を、表示したい商品管理番号にすればダイレクトにリンクします。

<div id=”slide_page”>
スライド全体をcssのスタイルシートで指定しています。
このcssは、/html/user_data/packages/default/css/contents.css
に、新しいcssを追加作製しています。

———————————————————————————-

EC CUBE 2.13.3 スライドショーをトップページに設置する方法
EC CUBE 2.13.3 スライドショーをトップページに設置する方法

こんな感じでかいていって、「登録する」を押します。

4.完成したスライドをレイアウトで配置します。

【作業場所】
デザイン管理>PC>レイアウト設定

EC CUBE 2.13.3 スライドショーをトップページに設置する方法
EC CUBE 2.13.3 スライドショーをトップページに設置する方法

未使用ブロックに、先ほど3でつくったブロックがあるはずなので、ソレを任意の位置にレイアウトすれば完了です。

お教えしたままのタグだと、スライドを表示させているところが<div>でくぐってクラス設定をしているので、そこは、CSSで適当に調整してください。

以上で、簡単なスライドショーの設置方法でした!

 

EC CUBE 2.13.3 クロネコヤマトB2のプラグインが動かない。ボタンが配置されない CSVがダウンロード出来ない

こんにちは。nekonomoridesignのyoshyです。
本日また、勤務先で躓きました・・・。
EC CUBE 2.13.3です。

ようやく、運送会社も決まり、配送システムの環境も整ったので
EC CUBEに、プラグインでクロネコヤマトB2用のを入れたのですが・・。

受注管理画面にクロネコヤマト用B2のボタンが表示されませんでした。

プラグインの競合として、ソニーペイメントサービスがあがっていたので
それも無効化してみたりもしたのですがぜんぜんダメ・・・。

苦肉之策で、クロネコヤマトB2用のプラグインを配布なさっている会社様(ボクブロック株式会社様)に連絡を取ったりもしてみたのですが、色々デバッグ(プラグインを削除してみたり入れなおしてみたり他のプラグイン無効化したり)したのですが、結局ダメでした。

プラグイン開発会社さんも初めての経験だそう

開発会社さんの担当様によると、ボタンが現れないというのは初めてだそうで、前例が無く、プラグインの不具合なのか、何と競合しているのかもわからないと言う事で、さじを投げられる格好になりました。

結局のところ、デバッグするほか無く、

  • 新しいサーバに新品のEC CUBE2.13.3をインストール
  • クロネコヤマトB2 2.13対応版プラグインをインストール
  • 受注管理画面を確認

これで受注管理画面にボタンが出なかったらプラグインの不具合なので修正しますということでした・・・。

今日は職場のサーバー管理者がいなかったので新しくインストール出来るようなサーバがあるかわからなかったので検証出来なかったのですが、2.13.3って、2.13.1とか用のプログラムじゃ動かないこともある気がするんですよね・・・・。

EC CUBEはバージョンで違いすぎて困る・・。

EC CUBE2.13.3を使っている人が少ないのか、まだ本とかもほとんど無いですし不具合報告も少なくて、かなり困っている自分はレアケースなのか?とすら思ってしまっていますが、とりあえずクロネコヤマト形式のプラグインが使えない事実には変わりませんし、新しいサーバにインストールしてプラグインが表示されなかった場合、プラグインの修正を依頼するにしても不具合解消までのタイムロスを考えれば、クロネコヤマトB2用のCSV出力をSQLで自作するほうが早いですよね・・・。

高度なCSV設定のところでクロネコヤマトB2のならびに応じたCSVを作製するようにがんばるしかない

結局プラグインのほうでどうにもならない事が判明してから、この足りない脳みそでクロネコヤマトB2用のCSV出力のSQLを考えていたのですが今日はうまく行きませんでした。

2.13.3対応のクロネコヤマト用B2 CSVが出来たら報告します・・・(泣)

今週は何だかピリっとしない終わり方でした。悲しい・・・。

Filemaker ファイルメーカーで絞込検索をする方法、ボタン・スクリプトの作り方 カスタマイズ

こんにちは。nekonomoridesignのyoshyです。
今日は、ファイルメーカーのお話をしてみたいと思います。
当たり前のように自分が使っているファイルメーカーなのでついついブログとかでそういった情報を書き漏れしている事に気づきました・・・。
元々、ファイルメーカー得意なので、良く考えてみたら、そういった知識もお伝えしていれば、いつか誰かのお役に立てるかも?ですよね。

では早速、今日は手始めに簡単&便利な3分クッキング的なファイルメーカーカスタマイズをご紹介します。

ファイルメーカー3分クッキング♪
検索のあと更に絞り込んで検索をしたいときに便利なスクリプトとボタン
を作る方法

検索モード、またはCtrl+Fで検索画面にして、入力されているものを探すときってありますよね?
その検索結果から更に絞り込みたい時、ファイルメーカー以外のソフトの場合たとえば・・・エクセルとかだと、画面を開いた状態でCtrl+Fをすれば検索窓みたいなのが出てきたりして見つけられたりしますが、ファイルメーカーで、検索結果表示画面の状態からCtrl+Fを押しちゃうと、自然と検索モードに切り替わってしまいます。

これは、Filemakerになれていない人だと案外ストレスのようです・・・。
よく、Filemaker導入直後ぐらいでたいてい、
「この検索結果から更に絞り込んで検索したいのにCtrl+Fおしたらまた検索にもどっちゃうんだけど?」

という苦情が相次ぎます(´_ゝ`)・・・・。

ので、絞り込み検索、標準装備されていたら良いなーなんて思いながら、毎回Filemakerでプログラムを組むときは真っ先に作るスクリプトです。

絞込検索のボタン&スクリプトの作り方

  1. スクリプト新規作成。名前は適当でいいが、判りやすく「絞込検索」とかにしておくといいかも?名前をつけたら、
    左側のスクリプト一覧から
    「検索モードを表示」
    を選んでダブルクリック
  2. つぎに、「対象レコードの絞込」を探して、ダブルクリック。
  3. 右側のスクリプトの順番が

    検索モードを表示

    対象レコードの絞込

    となっていれば完成。

  4. スクリプトを保存して閉じる。スクリプト作成画面を閉じる。
  5. 対象レコードの絞込をしたいレイアウトに変えてから、
    レイアウトモードに。(Ctrl+L)
  6. ボタンを適当に作り、ボタンの動作設定で「スクリプト実行」を割り当てる。割り当ての時にどのスクリプトを実行するか選べるので、先ほど作った「絞込検索」のスクリプトを指定して、ボタンに名前を付けて出来上がり。

たった2行のスクリプトです。
これだけで絞込検索になります。

ためしに、Ctrl+Fまたは検索モードで何か検索し、その検索結果の状態から、先ほどは位置した「絞込検索」のボタンをクリックすると、再度検索モードになります。
絞り込みたいワードを入力すれば、検索が更に絞り込まれた状態で出来ているはずです。

めちゃくちゃ便利ですので是非、この絞込検索ボタンとスクリプトはおすすめです。

このスクリプト、自動で表示されるようにならないかなー・・・・(´_ゝ`)・・・。

それでは今日はこのあたりで!

 

EC CUBE 2.13.3 カスタマイズ 商品のステータスを増やして表示アイコンも増やす方法

こんにちは。nekonomoridesignのyoshyです。
本日もEC CUBEのカスタマイズです。

商品状態のステータスを増やして、アイコンも増やす方法

これも、案外簡単でした。さっくり説明しまっす。

  1. EC CUBE管理画面のシステム設定>>マスタデータ管理をクリック。
    プルダウンから「mtb_status」を選んでから「選択」をクリックします。
    下記写真のように、一覧で出てくるので、追加したい値を入力して
    「この内容で登録する」をクリックします。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  2. 今度は同じく
    EC CUBE管理画面のシステム設定>>マスタデータ管理をクリック。
    プルダウンから「mtb_status_image」を選んでから「選択」をクリックします。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  3. mtb_statusで追加したIDと同じIDを「ID」に入力。
    その隣の「値」に、アイコン画像へのパスを入力し
    「この内容で登録する」をクリックします。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  4. 今度は、画像が保存されているところに移動します。
    eccube-2.13.3 >> html >> user_data >> packages >> defalut >> img >> icon
    (defalutのところは、カスタマイズフォルダの人は、そのフォルダです)

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  5. photoshop等の画像編集ソフトで、
    幅60px、高さ17px
    の大きさでアイコン画像を作り、先ほど、3で指定した画像の名前で保存します。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
  6. あとは、管理画面>>商品管理>>商品マスターで新規登録などでみてみると、ステータスがちゃんと増えているのがわかると思います。

    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法
    EC CUBE 2.13.3 商品のステータスを増やして表示アイコンも増やす方法

意外と簡単ですね!
是非やってみてくださいね!

EC CUBE 2.13.3 カスタマイズ おすすめ商品の表示件数を増やしたい

こんにちは。nekonomoridesignのyoshyです。
今日は、EC CUBE 2.13.3のカスタマイズです。

おすすめ商品の表示件数を増やしたいときの増やし方

案外、簡単でした。管理画面だけで出来ました。

  1. EC-CUBE 管理画面の「システム設定」をクリック

    EC-CUBE 2.13.3 おすすめ商品表示件数を増やす
    EC-CUBE 2.13.3 おすすめ商品表示件数を増やす
  2. RECOMMEND_NUMというところの数字を任意の数に変更するだけです。

    EC-CUBE 2.13.3 おすすめ商品表示件数を増やす
    EC-CUBE 2.13.3 おすすめ商品表示件数を増やす
  3. おしまい。

こんな感じで簡単に出来ました。

あとは、管理画面の「おすすめ商品」の登録画面にいけば、設定した数字の分だけ、作製枠が出来ていると思います。

あまりに簡単すぎてびっくりしちゃいました。

でも、忘れそうなのでメモメモ….。

今日は短いですがここまでっ!

良いEC CUBEカスタマイズライフを!!

EC CUBE カスタマイズメモ さくらインターネットサービスをサーバにしていて決済ページがエラーになる場合の対処方法

こんにちは。nekonomoridesignのyoshyです。
13日~16日までお盆休みで、会社員と二束のわらじをしつつ家庭内では妻と言う立場でもある私なので、何かと家の事をしていたりしていたので、結局会社のお休みと連動して、副業のほうもいったんお休みにしておりました。

お盆もあけ、いよいよ後半戦!
(私の中ではお盆が半分と言う感覚で・・・)

後半ラストスパートでがんばって、本業(このブログやら家でやってるクリエイティブのほう)一本になれるように精進する日々です。
そして今日は久しぶりにEC CUBEのカスタマイズについてのお話。

EC CUBEのインストールサーバーを
さくらインターネットサービスにしている人は要注意。

さくらインターネットサービスにEC CUBEをインストールしている人で、カスタマイズをして居る時に、決済モジュールのインストール後に、テストをしてみたところ、「動かなかった」「エラーがでた」ということはありませんでしたでしょうか?

さくらインターネットサービスは、「属性」の数字を変えないとエラーを引き起こす

エラーログをメモしてとっておくのを忘れてしまったのがアレなのですが、モジュールのインストールは無事おわっていてエラーも出なかったのに、カード決済のテスト注文をしてみたところ、エラー画面になってしまいました・・・。

良く調べてみると、なんか、読み出せないよ、っぽいエラーだったと思います。

さくらインターネットサービスを利用していて、ソニーペイメントサービスを利用の場合は以下のファイルの属性を変更すれば解決

html/shopping/load_sln_payment_module.php

このファイルの属性を、FFFTP上で、右クリック>>属性の変更で

644

にしてあげれば、直りました。

さくらインターネットサービスは、属性が通常とちょっと違うようで、このファイルの属性がおかしいと、エラーが出るようでした。

是非、さくらインターネットサービスでEC CUBEを導入しようとしていてエラーが出た方は、この属性を一度調べてみてくださいね!

お役に立てたでしょうか?
それでは、今日はこのあたりで失礼します!

Filemaker ワークショップ in名古屋 に行ってきました。基礎をもう一度しっかり勉強

こんにちは。nekonomoridesignのyoshyです。
今日は、Filemakerワークショップ in名古屋に参加してきました。
こういったのに参加するのは本当に久しぶりで緊張も半分ありながら行きましたが、とても充実していました。

Filemakerを使った事業をしているコーメーカー株式会社さんが主催されているFilemakerのワークショップ

名古屋地区では偶数月の土曜日に行われているこのワークショップ。Fファイルメーカーを使用して何かを管理したり作ったりしている人があつまって、意見を出し合って色々な問題を解決したりする事を目的として開催されています。

会社を出て、独自で開発と言う人は今回のワークショップにはあまりいらっしゃいませんでしたが、どの方も自社でファイルメーカーを使って管理したりしている人ばかりでした。

初心者コース~中級コースに近いコースのテーブルに参加。
初歩の初歩から聞けて、再勉強になりました

ファイルメーカーを使うきっかけのそのほとんどは、「会社にあったデーターベースシステムがファイルメーカーだったから・・」というパターンは多いと思います。
にもかかわらず、Filemakerそのものを学習するところはほとんどありません。AccsessやSQLなどは学校や資格取得学校などでも習ったりする方法はありますが、ファイルメーカーは極端にそういうものが少ないように感じます。

それでいて、ファイルメーカーは、その自由度の高さから、ハマるひとにはハマるデータベースなので、もっと知りたい、もっと勉強したいと思う気持ちはあれど、独学で本とかを見るしかなく、改めて、「この言葉の意味って何よ?」「こんなスクリプトとか動作させたいけどいけるの?」というのを聞ける場所がないのが現状。

そして、ほとんどの人が、「作ってあったもの」をベースに、そこから自分たちの都合の良いようにデータベースをカスタマイズしたいという思いから始まり、改変していき・・・というパターンが多いように思います。

そういう人にとって、このワークショップは、同じソフトを使っている人が集まり、それぞれがそれぞれの使いやすい物を開発し、使用している事が多いので、いろんな意見が参考になりやすいと言うのも特徴なのだなあと実感しました。

今回、私は、知っているし、やった事もある、という部分を改めてきちんと聞きたく、初級~中級コースで、1つ1つ、リレーションや、テーブルでのデータの作り方、ポータルの効果と意味など改めて教えてもらえて、データベースを作るうえでとても勉強になりました。

いろんな方にお会いできる良い機会。異業種交流会に近いが、共通する業務がある点で話も弾みやすそう

今日は、都合がつかず懇親会に参加出来なかったのですが、懇親会に行ってもう少し交流したかったなと思いました。
この勉強会、また10月にあるようなので、また参加したいと思い、そのときまでには自分でファイルメーカーベースのデータベースを作りたいなと思いました。

実際、企業に属しているわけでもありませんが、実践的に使えそうなシステムを作って、それをどこかに提供するというビジネスモデルも作れますし、色々可能性としては無限大だと思いました。

こういったものに参加して、またまた自分の可能性も引き出していきたいなと思い、俄然、元気も出てきました。本当に参加して良かったと思います。

これからもがんばるぞー!

Filemakerのワークショップ みんなで一緒に FileMaker ソリューションを作ってみよう に参加します

こんにちは。nekonomoridesignのYoshyです。
先日、前の会社でお世話になった上司に、Filemakerのワークショップを主催している会社さんの話を聞かせていただき、今度そういうイベントがあったら教えてくださいとお願いしていたところ、早速ご紹介していただきました。

Filemakerが好き。だから、ファイルメーカーのことをもっと知りたい

新社会人になった直後に出会ったこのソフト。
データベースとかCSVとかも何もわからなかったころに知ったこのソフトですが、そんな初心者でも、データベースを作ったり利用したりするのが安易にできて、楽しいと思えるソフトが、ファイルメーカーでした。

最初は仕事で使う範囲で触れれば・・という程度だったのですが、Filemakerベースで作られたデータベースソフトはカスタマイズが可能と知ったとき、私の中の「クリエイティブ魂」が目覚めました。

ファイルメーカーはデータベースの自作、カスタマイズ、改良が簡単

カスタマイズできるということは好きなように変えれるということ。
それを知ったとたん、とてもFilemakerのことを知りたいと思うようになりました。知って、いろんな機能で自分のやりたいことを実現できるんだと思えるようになると、いろんなことを知りたいと思うようになりました。それからは、仕事上でもファイルメーカーを使う機会に恵まれた私は、独学で、仕事と両立しながら、より、ファイルメーカーでする作業がラクになる方法を模索しながら、カスタマイズの方法を独学で勉強していきました。

独学ばかりでなく、基礎的なことを知ったり、他の人が作っているシステムが見たい

独学で、簡単な納品書や、注文管理のデータベースや、CSVにデータ変換するソフトなどの開発はできるようになりました。
それを仕事場で、自分以外の人に使っていただく機会も与えていただけるようになってから、だんだん、「自分の独りよがりな作り方」をしていると、使う人によっては使いにくいということが発生することを知りました。

そうなってくると、今度は、「利用者にとって使いやすいデータベースの作り方・考え方」が知りたいと思うようになってきたのです。

ファイルメーカー好きと話してみたいと思った

ワークショップに来る方々は、もしかしたらものすごいできる方々ばかりかもしれないなという不安も抱いています。
ですが、Filemakerの可能性を見出し、何かをできるようになりたいと思った人が集まっているのだと思うと、同じ志の人たちとお会いするよい機会になるだろうと思い、ワークショップへの参加を今回決意しました。

自分にとって、会社以外のところで仕事をすることは、今もまだ緊張します。それでも、一歩踏み出してみないと、何も始まらないとも思っています。どきどきしますが、今度名古屋で開催されるこのワークショップに参加してこようと思います。

ファイルメーカー好きさんとお会いして、何か今後に役立つような技術も勉強してきたいと思います。

 

EC CUBE 2.13.3 カスタマイズ 商品詳細コメント欄のhtmlにcssを適用させる方法 tableタグが使えない時の対処法

こんにちは。nekonomoridesignのYoshyです。
本日も、EC CUBEカスタマイズについてお話したいと思います。

商品登録をしていて、詳細ページのコメント欄にhtmlが使える事が判明したので、HTMLで記載し、CSSのスタイル設定で装飾してみる事にしました。

EC CUBE 2.13.3で商品詳細ページのhtmlが使えるコメント欄でcssを使ってデザインする方法

ひとまず、
EC CUBE管理画面 >> 商品管理 >>商品登録

から、編集したい商品の編集画面を開き、詳細-メインコメント(タグ許可)のところにhtmlを記載します。

ここに、最初、styleとかでくくってやってみたのですが、案の定ダメでした。

では、CSSはどこに記載するのか。

/html/user_data/packages/custom/css/contents.css

この contents.cssに自作のCSSを追加。

そして、

EC CUBE管理画面 >> 商品管理 >>商品登録

から、編集したい商品を再び選んで「編集」を押し、詳細-メインコメント(タグ許可)のところにhtmlを記載するだけです。
ちなみに、使えるhtmlは限られているようで、tableは使えませんでした。

tableっぽいので商品詳細情報を組みたいなら、cssでスタイル設定したdivを並べるしかない

のタグは使えたので、テーブルっぽいのも、すべてdivで作るのが良いみたいなので、float:leftを設定したclassを指定した

でうまく組み合わせていくしかなさそうです。
ちなみにここは 99999文字が上限なので、気を付けてくださいね。参考になるとうれしいです。EC CUBEの超初期カスタマイズであれば、質問にお答えできますので、お問い合わせもお気軽にお待ちしております。