EC-cube3 商品説明で画像をリンク [EC-cube3]
商品説明欄に文字を入力すると、<p>で囲まれます。でも、写真をリンクするのは、直接リンクのみで、{{ app.config.image_save_urlpath }}とか使えません。直接リンクは後々面倒な事になる場合もあるので、なんとかしたいと思います。
eccube-3.0.8/app/template/default/Product/detail.twig を編集
<!--★商品説明★-->の
<p class="item_comment">{{ Product.description_detail|raw|nl2br }}</p>
を
<p class="item_comment">{{ include(template_from_string(Product.description_detail|raw|nl2br)) }}</p> にする事で、アップロードフォルダの画像にリンクできるようになりました。
このままだと、ulなど、入力してソースを見ると<p>で囲まれてしまっているので、<p class="item_comment">をdivにして、後はタグで入力する事にしました。
EC-cube3 商品名を改行(タグ) [EC-cube3]
商品一覧の商品名と、商品詳細の商品名に改行を入れる方法。というか、タグを使えるようにする。
商品一覧のテンプレ
eccube-3.0.8/app/template/default/Product/detail.twig
の
<dt class="item_name">{{ Product.name }}</dt>を
<dt class="item_name">{{ include(template_from_string(Product.name|raw|nl2br)) }}</dt>に。
商品一覧の商品名<h3 class="item_name">{{ Product.name }}・・・のを所を
<h3 class="item_name">{{ include(template_from_string(Product.name|raw|nl2br) }}</h3>に。
現在のカゴの中
<a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">{{ Product.name }}</a>を
<a target="_blank" href="{{ url('product_detail', {id : Product.id} ) }}">{{ include(template_from_string(Product.name|raw|nl2br)) }}</a>に。
商品の購入の
<dt class="item_name text-default">{{ orderDetail.productName }}の部分を<dt class="item_name text-default">{{ include(template_from_string(orderDetail.productName|raw|nl2br)) }}に
EC-cube3 Webフォントを使う [EC-cube3]
EC-cube3では、header部分にハート、鍵とかSVGアイコンが使われています。
リストはhtml/template/admin/assets/img/svg_list.html にありますが、もっといろいろ使いたい!という事で
Font-Awesomeを使えるようにしました。
https://fortawesome.github.io/Font-Awesome/get-started/
headerへのリンク追加方法は、
http://naoichigo.blog.so-net.ne.jp/2016-02-02-1
ここに、
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
を追記します。
EC-cube3 税抜価格の表示 [EC-cube3]
商品登録で、税抜価格を入力しても、表示されるのは自動的に課税した金額になってしまうので、なんだかなぁ~。
修正方法が開発コミュニティーに載っていました。ありがとうございます♪
コンテンツ管理→ページ管理→「商品詳細」と「商品一覧」を修正します。
htdocs\eccube-3.0.8/app/template/default/Product/detail.twigとlist.twig です。
以下
getPrice01IncTaxMax
getPrice01IncTaxMin
getPrice02IncTaxMax
getPrice02IncTaxMin
から、IncTaxを消して、以下のような状態にします。数あるので、検索すると良いと思います。
getPrice01Max
getPrice01Min
getPrice02Max
getPrice02Min
買い物カゴに入れると、いきなり税込価格になってしまうので、お客さんが驚くかも?
コンテンツ管理→ページ管理→「現在のカゴの中」を修正
htdocs\eccube-3.0.8/app/template/default/cart/index.twig
商品の合計金額は→商品の税込み合計額は
個々の商品金額に、(税込)を追加しました。
EC-cube3 Topページの¥(円) [EC-cube3]
デフォルトテンプレートのTopページ の「新入荷商品特集」とかって書いてあるブロックの¥円マークが \ 1,785となっている件。
編集ページが見当たらない!このブロックは自動で出力されている部分ではないようです。
ブロック編集→新着商品 にhtmlで書かれた箇所でした。なので、\ 1,785を¥1,785にすればOKという事です。
自動が良ければ新着商品プラグインを使えば良いと思います。ちなみに、このプラグインの設定は独自プラグイン一覧から行います。
EC-cube3 headerの編集 [EC-cube3]
カスタマイズの際、CSSを直接編集せず新たなテンプレートで上書きした方が良いと思うので、headerに追記するとします。
headerのテンプレートはhtdocs\eccube-3.0.8/src/Eccube/Resource/template/default/default_frame.twigにありました。しかし、このままではアップデートの際に上書きされてしまうのでどうしよう??
ブロック編集の際にテンプレートが保管されているフォルダに置いたらどうだろう?実験してみました。
参照: http://naoichigo.blog.so-net.ne.jp/2016-02-02
つまり、headerのテンプレートdefault_frame.twigをコピーして、編集したファイルを
htdocs\eccube-3.0.8/app/template/default/に置いてみました。
上手く出来ました。
EC-cube3 ブロックの編集 [EC-cube3]
ページの編集もそうでしたが、http://naoichigo.blog.so-net.ne.jp/2016-01-28-1
コンテンツ管理→ブロック管理で、ブロックを編集すると、htdocs\eccube-3.0.8/app/template/default/Block 内に編集されたテンプレートtwigが保存されるようです。
EC-cube3 画像へのリンクURL [EC-cube3]
商品説明やフリーエリアに画像を貼り付けたい場合のリンクについて。
商品画像と同じフォルダ\htdocs\eccube/html/upload/save_image/が良ければ
<img src="{{ app.config.image_save_urlpath }}/画像.jpg"/>
Topのスライドと同じ\htdocs\eccube/html/template/default/img/top/フォルダが良ければ
<img src="{{ app.config.front_urlpath }}/img/top/画像.jpg">
上記のパターン(?)が分かればあとは、整理しやすいように何処かにフォルダを作るとかも簡単だと思います。
EC-cube3 商品詳細の編集 [EC-cube3]
商品詳細ページの表示内容を変えてみます。
念の為、C:\xampp\htdocs\eccube-3.0.8/app/template/default/Product/detail.twig のバックアップを取っておきます。
1/29追記:どやら、コンテンツ管理→ページ管理で編集すると、上記のdefault/Product/フォルダ内に編集済みのファイルが作成されるようです。もしかすると、アップデートには影響しない??
あとは、コメントがついているので、移動させるなり、削除するなりすればOKです。
私の場合は<!--★商品説明★-->を移動させました。
※ <section id="item_detail_area" class="col-sm-6">から<!--詳細ここまで-->の後の</div>までのエリアが写真の右側の詳細エリアです。
EC-cube3 商品詳細 フリーエリアの余白 [EC-cube3]
EC-cube3のデフォルトデザインはBootstrap3を使用したレスポンシブになりました。
商品登録の一番下に「フリーエリア」があります。商品写真サムネイルの下がそのエリアです。htmlが使用でき、文章でも画像でも掲載可能なようです。
表示してみると、左側に半端な余白が出来るのが気になります。中央でもなく、なんとも変な位置。
ソースを見てみると、 <div class="col-sm-10 col-sm-offset-1">とあり、中に<div class="freearea">があります。col-sm-offset-1と言う部分がbootstrapのカラムを飛ばす指定なので、まるごと削除し、<div class="col-sm-10>とする事で左寄せになりました。
管理画面のコンテンツ管理→ページ管理→商品詳細ページの下の方にありました。
col-sm-offset-1を記載する意味が何処かにあるのかもしれませんが、今の所 良く分かりません。