月別アーカイブ: 2014年4月

javascriptのonclickとかをjQueryで作動させる

例えが難しいのですが、仮に下記のようなコードがあったとして・・・

<input type="radio" onClick="処理">ラジオボタン

でもこのラジオボタンはデザイン的にとかUI的にdisplay:none;したいとします。

そうすると、このラジオボタンはクリックできなくなるためどうやってonClickの処理を発動させたらいいの??という疑問が。

簡単な解決方法は以下です。

$('input').trigger("click")

jQueryで無理やりクリックしたことにしちゃう!みたいな感じです。

jQueryで配列の基本

配列を一気に作って表示

//配列を一気に代入

var animal = ['dog','cat','mouse'];

//特定の番号の配列を表示
$('div').append(animal[1]) ;})

▼表示例

cat

eachをつかって全部表示

//配列を全部表示
 $.each(animal, function(index, value){
     $('div').append(value).append('
');

▼表示例

dog
cat
mouse

配列を作って入れて値があれば表示

//配列ハコだけ作っておく

var fruits = [];

//入れていく
fruits[0] = 'apple'
fruits[1] = 'orange'
fruits[3] = 'lemon'


//値があれば表示
 $.each(fruits, function(index, value){
     if(value){$('div').append(value).append('/');}
    })

▼表示例

apple/orange/lemon/

detail.tpl内で、商品の属するカテゴリ毎に条件分岐

EC-CUBEであるカテゴリに属する商品の商品詳細ページ(detail.tpl)でカテゴリ毎の条件分岐を行いたい

▼第一階層のカテゴリ(いちばんでかいカテゴリ)で分岐

<!--{if count($arrRelativeCat) > 0}-->
  <!--{if $arrRelativeCat.0.0.category_id == 8}-->
  カテゴリID8に属する商品詳細の場合に表示する内容
  <!--{else}-->
  それ以外
  <!--{/if}-->
<!--{/if}-->    

▼最終層のカテゴリ(いちばんちいさいカテゴリ)で分岐

<!--{if count($arrRelativeCat) > 0}-->
  <!--{assign var="num" value=$arrRelativeCat[0]|@count}-->
  <!--{assign var="num2" value=`$num-1`}-->
  <!--{if $arrRelativeCat.0.$num2.category_id == 20}-->
    いちばん小さいカテゴリID20に属する商品の場合に表示する内容
  <!--{elseif $arrRelativeCat.0.$num2.category_id == 25}-->
    いちばん小さいカテゴリID25に属する商品の場合に表示する内容
  <!--{else}-->
    それ以外
  <!--{/if}-->
<!--{/if}-->

参考サイト⇒http://ec-cube.nakweb.com/blog/947.html

iphone版Chromeだけクリッカブルマップがきかない

クリッカブルマップでareaをクリックしたらモーダルが開いて・・・てなページを作成し、 各機種で検証したところ、【iphoneのChrome】でのみ!動かない~~~!!!

iPhoneのSafariやAndroidのブラウザではうまくいっているし、PCのChromeでも問題ないのにっ!!

てなことがあり、解決したので残しとく。

jQueryの書き方とかいろいろ試したけど、結局原因は以下でした。

imgに幅と高さが指定されていない

これだけでした。

レスポンシブでCSSで幅を100%とかにしているため、画像自体には特に幅・高さを入れなかったのが原因。

▼以下がダメコード

<img alt="クリッカブルマップ" src="/images/areamap.jpg" usemap="#hoge" />
<map id="hoge" name="hoge">
<area alt="りんご" coords="435,193,39" shape="circle" href="#" />
<area alt="みかん" coords="369,296,38" shape="circle" href="#" />
<area alt="いちご" coords="295,337,38" shape="circle" href="#" />
</map>

それがimgにちゃんと幅と高さを入れるだけで解決
▼以下が正解コード

&lt;img src="/images/areamap.jpg" alt="クリッカブルマップ" usemap="#hoge" width="500" height="600"&gt;
&lt;map id="hoge" name="hoge"&gt;
  &lt;area shape="circle" coords="435,193,39" href="#" alt="りんご"&gt;
  &lt;area shape="circle" coords="369,296,38" href="#" alt="みかん"&gt;
  &lt;area shape="circle" coords="295,337,38" href="#" alt="いちご"&gt;
&lt;/map&gt;<map id="hoge" name="hoge">  </map>

これで解決です!

よく使うjQueryのイベントとか

formの値の操作系

▼入力値の取得

var xxx = $('input[type="text"]').val()

▼input textとかの値が変更されたらなにかする

 $('input[type="text"]').change(function(){
alert('変更されたよ')
}); })

▼フォーカスが外れたとき何かする

$('input[type="text"]').blur(function(){
alert('フォーカスが外れたよ')
});

▼ボタンを押せないようにする

$('input[type="button"]').attr('disabled', false).removeAttr('disabled'); 

ブロック内でif分岐

EC-CUBEのブロック内でif分岐をする方法をメモ

▼TOPページだけ表示させたい

<!--{if $smarty.server.PHP_SELF=="/index.php"}-->
表示させたい内容
<!--{/if}-->

▼else

<!--{if $smarty.server.PHP_SELF=="/index.php"}-->
TOPで表示したい内容
<!--{else}-->
その他のページで表示したい内容
<!--{/if}-->

▼TOP以外だけ表示させたい

<!--{if $smarty.server.PHP_SELF != "phpファイルのパス"}-->
TOP以外だけ表示させたい内容
<!--{/if}-->

▼まとめ

<!--{if $smarty.server.PHP_SELF == "phpファイルのパス(/products/detail.phpとか)"}-->

表示させたい内容

<!--{else}-->
その他ページで表示したい内容
<!--{/if}-->

ざっくりEC-CUBEインストール

1・データベースを用意。

データベースのDBサーバー名・DB名・ユーザー名・パスワードを用意。

2・ダウンロード&解凍

EC-CUBEのサイトからEC-CUBEをダウンロードし、解凍しておく。

3・必要なファイルをアップロード

▼必要なファイルは以下。

・【data】フォルダ一式
・【html】フォルダの中身一式

▼アップロードする場所は以下

【html】フォルダの中身一式は、表示させたいドメインのルートにアップロード。

ドメイン(http://●●.com/)で表示させたい場合は「www」や「public_html」など、通常index.html(トップページ)を置く場所に【html】フォルダの※中身をぜんぶアップロード

htmlフォルダごとアップしてしまうと、URLがhttp://●●.com/html/になってしまうので注意です。

【data】フォルダはできれば「www」や「public_html」と同じ階層にアップロード

ec-cubeインストールするディレクトリ

【data】フォルダは、セキュリティ上簡単にアクセスできないよう「www」や「public_html」などの中には置かないほうがいいそうです。

「www」や「public_html」と同じ階層にアップしておくと安全。

サーバーの仕様で外に置けない場合は普通にwwwの中とかにいれちゃってOK。

4・define.phpを開き、dataへのパスを書き換える

htmlの中身の中にdefine.phpというのがあるので開く。

3行目ぐらいに以下の記述があるはず

/** HTMLディレクトリからのDATAディレクトリの相対パス */
define('HTML2DATA_DIR', '../data/');

‘../data/’の部分をdataをアップした場所によって必要であれば変更する。
もしwwwの中にdataをアップしたなら、’../data/’の部分は’data/’になる。

5・アクセスしてみる。

ここまでできたらインストールしたドメインにアクセスしてみる。
この画面が出ていればあとは進んでいくだけ。インストール画面

エラーが出てたら・・・

エラーが出ている場合は以下のフォルダ・ファイルのパーミッションを全部755に変更する。

【htmlフォルダの中】
html/install/temp
html/user_data
html/upload

【dataフォルダの中】
data/cache
data/class
data/class_extends
data/config
data/download
data/downloads
data/logs
data/smarty
data/upload

全部パーミッション755に変更してもう一度アクセスしてみる。

それでもエラーが出てる場合⇒準備中

6・インストールを進める

▼管理者のいろいろを入力する画面
ec-cube管理者の設定

赤枠の部分は管理画面のディレクトリなので「admin」とか「kanri」とか設定する。

▼次はデータベースの設定。
データベースの設定画面

1で用意した情報を入れていく。

7・やっと完了!

ec_install6

 

ログインしたら、忘れがちな郵便番号で住所自動入力の設定をやっておく。

 

とりあえず最初に入れておくWPプラグイン

WP Syntax Highlighter

コード書くから。

SyntaxHighlighter TinyMCE Button

上記SyntaxHighlighterが使いやすくなる。
ビジュアルエディタに入力用アイコンが出て、簡単にコードを挿入できるように。

Advanced Custom Fields

カスタムフィールドの管理が超便利。
カスタムフィールドのプラグインはコレ!

Custom Post Type UI

カスタム投稿とタクソノミの管理がしやすい

Custom Post Type Permalinks

カスタム投稿使うときのパーマリンク設定に必須

TinyMCE Advanced

ビジュアルエディタのボタンを好きに設定できる。

Admin Menu Editor

管理画面のメニューの並びを変えたり隠したり。自分用にもクライアント用にも。直感的に操作できるのが魅力。