12
May
welcart 郵便番号から住所を自動入力する zipaddr-jp
welcartに最初から対応されているので、プラグイン有効化で何も設定せずに
自動入力できていました。
他のページに自動入力デモ画面などありますので、使い心地を試してみてください
http://zipaddr2.com/wordpress/
http://welcustom.net/zipaddr-jp/
welcartカスタマイズブログで有名なかたが使用しています。
新しいプラグインということで不安でしたが、有名どころのかたが使っていることと、
ありがたいことにwelcart用の設定が最初から組み込まれているため、
煩わしいことなく即使えるのがいいですね
EC-CUBE版も出ています。
styleの変更
styleを変えようと思ったら、htmlに直接出力されていました。メールで伺ったところ、!important をつけまくることでcssで上書きできます。
!importantのこと忘れてました。
というか直接出力されてしまうやつ、jQueryでわざわざstyle置き換えてたことあったような･･･。
!importantは直書きよりも上位だったんですね･･･。
カート入力ページでポップアップ表示ということもあって、確認作業が非常にめんどいため、
!importantなしで効く効かないをいちいち見るのがしんどくなりました。
そのため!importantつけまくりました。
文字サイズを大きくしたり、paddingなどで幅をふやすと、<span>で囲われている
地域名とヒット数のところがおかしくなります。みえなくなります。
<span>にdisplay:block;をすると、上部になぞの空白ができて取れないので
display:inline-block;にしました。
背景は区切り線のように横棒のに細長く色をつけたかったから、ブロック要素の
display:block;がよかったんですけど、余計な空白あるとまた何いわれるかわかんないから
display:inline-block;で妥協します。
「閉じる」の誤マウスオーバー対策
「閉じる」というところにマウスオーバーすると勝手に閉じてしまいます。閉じる気がなかったのにマウスが行って閉じるとイラっとしますよね。
それを少しでもさけるために、「閉じる」の上に余白を作りました。
2番目の<span>（ヒット数のところ）にmargin-top:15pxをつけました
#autozip span:nth-of-type(2){
margin-top:15px !important;
}
ガイダンスの位置変更
「ガイダンス」とは住所選べるツールチップ？のところのことです。出現位置が入力している郵便番号にかからないように、見やすい位置に変えましょう。
「プラグイン」→「zipaddr」のところで設定します。
こういうのは「設定」のところに通常いれるのに、「プラグイン」に出力されています･･･。
ここのガイダンスの位置補正で数値いれてみてください。私は縦50、横30でやってます。
PR