EC-CUBE3 プラグイン入れ方

eccube

今回はEC-CUBE プラグインの入れ方 自分用メモ、、、、

EC-CUBE公式サイトのトップに飛んで→オーナーズストアの機能カスタマイズ
にいくとプラグインがずらーーーーーっっって並びます。

スクリーンショット 2016-06-22 18.17.25

このように公式プラグインが並びます。
次に入れたいプラグインをクリックして購入するを押すと
スクリーンショット-2016-06-22-18.20.42そして利用するサイトをチェックして購入してください。
その後に自分のEC-CUBEサイトの管理に行って、

サイドバーのオーナーズストア→プラグイン→購入済みプラグインに行くと自分が買ったプラグインがあるのでインストールします。

そうするとブロックを作るプラグインもあれば登録する際に詳細が細かく設定できるプラグインもあるようです。!

 

EC-CUBEでループカウント

eccube

EC-CUBE の自分用メモです。

wordpressなどPHPを触る時に3個の記事ごとにこのコードを記述するなどif文で書く事が良くありますよね?
EC-CUBEでも同じ感じで使う事が出来ます。

<div id=”item_list”>
<div class=”row no-padding”>
{% for Product in pagination %}
<div id=”result_list_box–{{ Product.id }}” class=”col-sm-3 col-xs-6″>
<div id=”result_list__item–{{ Product.id }}” class=”product_item”>
<a href=”{{ url(‘product_detail’, {‘id’: Product.id}) }}“>
<div id=”result_list__image–{{ Product.id }}” class=”item_photo”>
<img src=”{{ app.config.image_save_urlpath }}/{{ Product.main_list_image|no_image_product }}“>
</div>
<dl id=”result_list__detail–{{ Product.id }}“>
<dt id=”result_list__name–{{ Product.id }}” class=”item_name”>{{ Product.name }}</dt>
{% if Product.description_list %}
<dd id=”result_list__description_list–{{ Product.id }}” class=”item_comment”>{{ Product.description_list|raw|nl2br }}</dd>
{% endif %}
{% if Product.hasProductClass %}
{% if Product.getPrice02Min == Product.getPrice02Max %}
<dd id=”result_list__price02_inc_tax–{{ Product.id }}” class=”item_price”>
{{ Product.getPrice02IncTaxMin|price }}
</dd>
{% else %}
<dd id=”result_list__price02_inc_tax–{{ Product.id }}” class=”item_price”>
{{ Product.getPrice02IncTaxMin|price }} ~ {{ Product.getPrice02IncTaxMax|price }}
</dd>
 {% endif %}
{% else %}
<dd id=”result_list__price02_inc_tax–{{ Product.id }}” class=”item_price”>{{ Product.getPrice02IncTaxMin|price }}</dd>
{% endif %}
</dl>
</a>
</div>
</div>
{% endfor %}
</div>

</div>

(これはデフォルトのlist.twig から抜粋してます。)

これだけの記述だとそれぞれの高さが違ったり3カラムで記事を並べる際に4個目がくると上に詰めますよね?

そういう時に3個並んで4個目にはclear:both を挟んだりしたい場合に結構やくにたちます。

{% if loop.index %2==0 %}
表示させたいコード
{% endif %}

このコードをループの一番下に記述してください。

{% endfor %}のすぐ上に追加です。

%2と記述されてる所に何番目になので2の数字を変える事で4番目、5番目と変える事が出来ます。

 

EC-CUBE 商品を個別にデザインを変える方法

eccubeEC-CUBE 自分用メモ

EC-CUBEの商品を個別にデザインしたいときありますよね?
その時に簡単に個別でできる方法を記載します。ほとんど何も触る必要は無いです。

商品管理→商品追加から追加ページを開いて、

スクリーンショット-2016-05-25-18.18.15

このフリーエリアをクリックすると開くので

スクリーンショット-2016-05-25-18.18.35

この中にhtmlで画像も全部表示することが出来ます。
ただdetile.twigファイルの中に

{% if Product.freearea %}

{{ include(template_from_string(Product.freearea)) }}

{% endif %}

この表記が無いとフリーエリアが表示されないので注意しましょう!!

wordpress ループ

wordpresslogo-e1367355053944

wordpress ループの自分用メモです。

ワードプレスは簡単なPHPで動的に表示を出す事ができます。

静的なサイトだと一つ一つ自分で記事を記述しないといけませんが、動的にできるワードプレスだと追加した情報を自動で記述してくれるのでお知らせやブログなどを簡単に反映させる事ができます。

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

この記述がループに必要な記述です。
この間間の中に <?php the_content(); ?>など追加でブログの記事を持ってくる事ができます。

あと

category.php

tag.php
も同じ用に追加でカテゴリー選択したときのページ,タグ選択した時のページを作る事ができます!

あと、、、、

<?php if(is_home()||is_front_page()):?>

もしフロントページかホームページなら起こる事

<php else: ?>

それ以外

<?php endif;?>

これは分岐方法です。サイトを作ってると使う機会が多くなります!

他にも is_page() やis_single() があります。

is_pageは固定ページに使い is_singleは投稿ページに使います。

() この中にページのIDを入れる事によってそのページだけに反映させる事が出来るようになります。

ループと簡単な条件分岐を記述しましたがwordpressをいじる際に必須になるので勉強が必要!
全然わからない事が多いですががんばります!

WordPress 動的にIDを振る方法(移動ナビ用)

wordpresslogo-e1367355053944

ワードプレスのナビ作る時に学んだ事のメモです。

HTMLだけで飛ばすだけなら簡単に作れたのですがPHPに混ぜるのはすごく工夫がいりました。

例 $terms = get_terms( ‘カテゴリー’, ‘orderby=slug&exclude=123’ );

$termsにカテゴリーの値 並びスラッグを入れてみました。

ちゃんと中に値が入ってるかチェックが必要です。

print_r などをつかってちゃんと何の値が入ってるか中身をチェックしてterm_id をチェックして

自分で作ったナビにIDを貼付けましょう。

<?php  

echo ‘<div>’;
echo ‘<h2 id=”category-‘ . $term->term_id .'”>’ . $term->name . ‘( ‘. $term->count . ‘件 )’ . ‘</h2>’;
echo ‘</div>’;

?>

赤文字は全部$termの中の値から取り出して表示しています。

これで<h2 id=category-(番号)>(カテゴリーネーム)(記事数)件)</h2>が出力されます。

凄い便利です!
今回はfunction.php の方で出力してるのでPHPでの記述方のメモをしてます。。。。

 

 

Sublime Text Package

sublime_text_icon_2181

自分が最近知ったsublime text の色々な使い方のメモします。

私が使うときはCSS、PHP、HTML、JS などのコードを打ち込む事に使う事がほとんどだったのですが、

サブライムテキストには色々な使い道があるみたいです。

emmet やSass などもコンパイルしたりFTPでも使うとこができるらしい!

使うにはパッケージを入れてシステムをダウンロードしないといけないけどSublime text 一つで全部こなす事が出来そうですね!

パッケージの入れ方

スクリーンショット 2016-04-13 18.31.03

 

 

 

なにも書いてないまっさらな状態に

左上のコマンドの View→ show console を押すと

コマンド入れるコンソールが出てきます。

 

 

 

 

コンソール出てきた状態

スクリーンショット 2016-04-13 18.36.34

 

この状態で https://packagecontrol.io/installation#st2 スクリーンショット 2016-04-13 18.25.07

このURL からコードを持ってきて貼付けます。

背景色が灰色のところのコードをコピペしてEnter

上のタブでSublime text 2,3  どっちかのコードに切り替える事ができます。

バージョンを間違ったら動かなくなるので注意してください。

 

 

 

パッケージをインストールした後にMac : command+shift+p ( Windows : control+shift+p )

このコマンドでパッケージのコマンドを開く事ができます。

スクリーンショット 2016-04-13 18.41.21

 

こんな感じで出てくるので自分が使いたいパッケージを入れて行きましょう。

色々な機能があって凄く便利!!

 

 

 

EC-CUBE プロダクトページコード

eccube

プロダクトページで使うコードメモ

{{ Product.name }} 商品名を表示
{% for ProductCategory in Product.ProductCategories %}

{% for Category in ProductCategory.Category.path %}
<a id=”relative_category_box__relative_category–{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}” href=”{{ url(‘product_list’) }}?category_id={{ Category.id }}”>{{ Category.name }}</a>
{% endfor %}

{% endfor %}

上記のコードでループでカテゴリー表示です。

{% for ProductCategory in Product.ProductCategories %}

{% endfor %}

カテゴリーのループです。

{% for Category in ProductCategory.Category.path %}
<a id=”relative_category_box__relative_category–{{ ProductCategory.product_id }}_{{ loop.parent.loop.index }}_{{ Category.id }}” href=”{{ url(‘product_list’) }}?category_id={{ Category.id }}”>{{ Category.name }}</a>
{% endfor %}

カテゴリー設定したカテゴリーがある分全表示(リンク付き) WPのループでカテゴリ追加と一緒なのですが、書き方が少しかわってきます。

{{ Product.code_min }}
{% if Product.code_min != Product.code_max %} ~ {{ Product.code_max }}
{% endif %}

商品登録画面で設定した 商品コードの表示 複数登録したやつも最初に登録した順から表示されます。

{% if Product.hasProductClass -%}
{% if Product.getPrice01Min is not null and Product.getPrice01Min == Product.getPrice01Max %}
通常価格:{{ Product.getPrice01IncTaxMin|number_format }}円(税込)
{% elseif Product.getPrice01Min is not null and Product.getPrice01Max is not null %}
通常価格:{{ Product.getPrice01IncTaxMin|number_format }} ~ {{ Product.getPrice01IncTaxMax|number_format }}円(税込)
{% endif %}
{% else -%}

↓消費税

{% if Product.getPrice01Max is not null %}
通常価格:{{ Product.getPrice01IncTaxMin|number_format }}円(税込)
{% endif %}
{% endif -%}

値段表示のコードです。標準のままだとnumber_formatでは無くpriceになってます。

price は値段表示 自動で¥が入ります。

number_format 数字表示 後ろに単位を設定できる。 ※¥が表示されません。

 

自分もec-cube初心者ですが、みなさんの役にたってもらえると嬉しいです!

 

EC-CUBE 値段表記メモ

eccube

EC-CUBEの初期の値段表示タグは {{ Product.getPrice02IncTaxMin|price }}となっていて、

この初期の状態だと値段は出るが¥1000(値段が1000円だとして)という表記になっている。

このタグは税金の%を管理画面の方で設定していたら税込みで表示されます。

ただ{{ Product.getPrice02IncTaxMin|price }}状態だと表記が¥1000で表記されるため人によっては、

見やすい1000円の表記に変えたいですよね!?

{{ Product.getPrice02IncTaxMin|price }}このタグの{{ Product.getPrice02IncTaxMin|price }}このpriceとかかれた部分が

値段の表示設定になっていてpriceは値段表示という設定になっています。このpriceの部分を

number_formatに書き換える事で数字表示に切り替える事が出来ます。

{{ Product.getPrice02IncTaxMin|number_format }}円 と記述することによって 1000円という表示に切り替える事ができます。

 

EC-CUBE フレーム#2

eccube

EC-CUBE フレームメモ #2

スクリーンショット 2016-03-09 18.26.59

ここに書かれてる{% if —— %}〜{% endif %} この区切りがEC-CUBE内の

 

コンテンツ管理->ページ管理->レイアウト編集 の中身に連動していてこの中にblockをはめてページのレイアウトを作って行きます。

 

スクリーンショット 2016-03-16 18.49.06ここで自分の作ったブロックをドラッグして入れて行きます。

このMainと書かれた部分だけは同じディレクトリにあるindex.twig のデータが来るようになっていて注意が必要です!

この枠にはめて行く作業は大変ですが Blockって形でどのページにも同じブロックを入れて行けるので結構便利です!

EC-CUBE フレーム 

eccube

EC-CUBE のフレーム #1メモです。

EC-CUBE はまず大まかな形をを作ってブロックを入れて行くプログラムみたいです。

子供が好きなレゴみたいですね!

default_frame.twig の中をいじってサイトの大まかな形を作らないといけないらしく。

サイトの骨格はdefault_frame.twig に記述して中身のパーツはブロックに記述しないとダメみたいです。

 

スクリーンショット 2016-03-09 18.26.59

ここに書かれてる
{%if ~~~~~~~%}

{% endif %} がEC-CUBEのレイアウトの骨格と連動する仕組みみたいです。