[EC-CUBE]ブロックで特定ページだけ表示させる条件分岐
<!--{if $smarty.server.PHP_SELF==$mypage}-->
マイページにだけ表示
<!--{/if}-->
これだとなぜか取得されなかったので
<!--{if $smarty.server.REQUEST_URI=='/mypage/'}-->
マイページにだけ表示
<!--{/if}-->
こっちで対処
[Jquery]マウスオーバー/マウスアウトでアコーディオンメニュー
先ほど書いたやつだと、エリア外が閉じないので、こっちで対処
http://stackoverflow.com/questions/19001183/mouseover-and-mouseout-in-accordion
http://jsfiddle.net/arunpjohny/jBFMv/
<ul id="accordion"> <li> <a href="#" class="history_heading" rel="history_heading">HISTORY</a> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> <li><a href="#">Link Five</a></li> </ul> </li> <li> <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> <li><a href="#">Link Five</a></li> </ul> </li> </ul><script type="text/javascript"> jQuery(function ($) { $('#accordion li').hover(function () { $(this).find('ul').stop(true, true).slideToggle() }).find('ul').hide() }) </script>
[Jquery]マウスオーバーでアコーディオンメニュー
意外？とマウスオーバーでアコーディオン無いんすね～。
下記サイト様を参考に
http://aqua-create.com/jquery/acordeon-menu-jquery/
http://web.donnatokimo.com/jquery/517
今回は最初に開くメニューは要らないので
if(index > 0) $this.next().hide('normal');
の部分を無理やり変更
$this.next().hide('normal');
<ul id="demo" class="clearfix"> <li><a href="1">menu1</a> <ul> <li><a href="#">menu 1-1</a></li> <li><a href="#">menu 1-2</a></li> <li><a href="#">menu 1-3</a></li> </ul> </li> <li><a href="2">menu2</a> <ul> <li><a href="#">menu 2-1</a></li> <li><a href="#">menu 2-2</a></li> <li><a href="#">menu 2-3</a></li> </ul> </li> <li><a href="3">menu3</a> <ul> <li><a href="#">menu 3-1</a></li> <li><a href="#">menu 3-2</a></li> <li><a href="#">menu 3-3</a></li> <li><a href="#">menu 3-4</a></li> </ul> </li> </ul>
<script type="text/javascript">
var j$ = jQuery;
j$(function(){
j$("#demo").each(function(){
j$("li > a", this).each(function(){
var $this = j$(this);
$this.next().hide('normal');
$this.mouseover(function(){
j$(this).next().show('normal').parent().siblings().children("ul:visible").hide('normal');
return false;
});
$this.mouseout(function(){
$this.next().hide('normal');
});
});
});
});
</script>
#demo > li {
float:left;
width:150px;
height:50px;
}
余談ですが、#demo > li の書き方が超超便利なことに最近気づきました （遅）
[EC-CUBE]facebookいいねボタンとOPGの設置
●EC-CUBEでもOGPタグといいねボタンの設置を設置する
http://2inc.org/blog/2012/02/08/1186/
そのまま引用させていただいてます～。
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"><!--{assign var=detail value="`$smarty.const.TOP_URLPATH`products/detail.php"}--> <!--{if $smarty.server.PHP_SELF==$detail}--> <meta property="og:title" content="<!--{$arrProduct.name|escape}-->" /> <meta property="og:type" content="product" /> <meta property="og:image" content="<!--{$smarty.const.HTTP_URL}-->upload/save_image/<!--{$arrProduct.main_list_image}-->" /> <meta property="og:site_name" content="<!--{$arrSiteInfo.shop_name|h}-->" /> <meta property="og:url" content="<!--{$smarty.const.HTTP_URL}-->products/detail.php?product_id=<!--{$arrProduct.product_id}-->" /> <meta property="og:description" content="<!--{$arrProduct.main_list_comment}-->" /> <meta property="fb:app_id" content="あなたののapp_id" /> <!--{/if}--><div id="fb-root"></div> <script type="text/javascript" src="https://connect.facebook.net/ja_JP/all.js"></script> <script type="text/javascript"> FB.init({ appId : "あなたのapp_id", status : true, cookie : true, xfbml : true, channelURL : "<!--{$smarty.const.HTTP_URL}-->products/detail.php?product_id=<!--{$arrProduct.product_id}-->", oauth : true }); </script><fb:like href="<!--{$smarty.const.HTTP_URL}-->products/detail.php?product_id=<!--{$arrProduct.product_id}-->" send="false" width="367" show_faces="true" font="arial"></fb:like>
[EC-CUBE]商品一覧で特定カテゴリに情報を表示する
<!--{if $arrSearchData.category_id == ●●●(カテゴリID)}-->
カテゴリIDが「1」の場合に表示
<!--{/if}-->
[EC-CUBE]商品一覧でカテゴリID取得
EC-CUBEでカテゴリ毎に画像を表示させたいのがあったんですが、
●[EC-CUBE 2.11.4] 商品一覧ページにカテゴリごとのタイトルバナー画像を入れる
http://ec-cube.nakweb.com/blog/1201.html
こちらのサイト様だと「LC_Page_Products_List.php」に表示させたいカテゴリIDを記述するのですが
もしカテゴリが追加されたら意外に面倒？と思ってしまいまして
あんまり推奨されていない（かもしれない）
●EC-CUBE、商品一覧のカテゴリIDを取得する方法
http://highmoon-miyabi.main.jp/blog/2013/10/17_000353.html
こっちを使用させていただこうかなーと。
テンプレに直接追加できるので、汎用性が高い気がします。
<!--{php}-->
$cat_id = $_GET['category_id'];
echo $cat_id;
<!--{/php}-->
単純に出すだけなら下記でも行けますね～
<!--{php}-->echo $_GET['category_id'];<!--{/php}-->
サムネイルつきリストのメモ
スマホサイトでよく見るパーツのコードサンプル集
http://07design.net/blog/?p=477
こちらのサイトさんのサムネイルつきリストはスマホに限らず
かなり使うことが多いので抜粋してメモメモ
<h3>サムネイルつき矢印リスト２</h3> <!--サムネイルつき矢印リスト2--> <section class="list4"> <ul> <li><a href="#"><img src="thumbs.png"><strong>MENU1</strong>texttexttext</a></li> <li><a href="#"><img src="thumbs.png"><strong>MENU2</strong>texttexttext</a></li> <li><a href="#"><img src="thumbs.png"><strong>MENU3</strong>texttexttext</a></li> </ul> </section> <!--/サムネイルつき矢印リスト2-->/* サムネイルつき矢印リスト２ */ .list4 ul{ border-bottom: 1px solid #ccc; margin-left: 10px; margin-right: 10px; } .list4 ul li{ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f0f0f0)); background: linear-gradient(#fff, #f0f0f0); border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; height: 45px; margin: 0px; } .list4 ul li a{ background: url(list_mark1.png) no-repeat 100% 50%; color: #666; display: block; height: 45px; margin: 0; padding: 0 20px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; } .list4 ul li a strong{ color: #000; display: block; font-weight: bold; padding-top: 5px; } .list4 ul li img{ float: left; height: 45px; width: 45px; margin-right: 10px; }
[Jquery]bxsliderでサムネイルつきスライダーにする
●レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置
こちらのサイトさんのサンプル8を最初使用していたのですが、
IE7ではどうにも動かず。2時間くらいうーーーーんと唸ってました。
//サムネイルつき
var slider = $('#sample').bxSlider({
mode:"fade",
pager: false,
controls: false
});
$('.thumbs a').click(function(){
var thumbIndex = $('.thumbs a').index(this);
slider.goToSlide(thumbIndex);
$('.thumbs a').removeClass('pager-active');
$(this).addClass('pager-active');
return false;
});
$('.thumbs a:first').addClass('pager-active');
slider.goToSlide(thumbIndex);ここら辺が怪しいのかな？
最終的にサンプルサイトをIE7で見たところ example8だけは効かないようになってたので
素直にあきらめまして、
jQueryプラグイン「bxslider」を利用してサムネイル付スライダーをつくる
こちらのサイトさんのコードをいただくことにしました。
$(function(){
var slider = $('.bxslider2').bxSlider({
mode: 'fade',
pager: false,
pagerCustom: '.samuko',
controls: false
});
});
こちらで試したところ無事希望通りの動作に♪
助かりましたー（- 人 -）
[EC-CUBE]商品詳細でサブコメントを任意の場所に出す
これは良く使いますねー。たぶん。
[EC-CUBE 2.11.5] 商品詳細のサブ情報を自由に配置する
http://ec-cube.nakweb.com/blog/1315.html
[jquery]横自動スクロール
Jqueryの自動横スクロールでかなり使い勝手が良いのが見つかりました
Javascript（JQuery）で横スクロールのサンプルを作りました。
機能的には
・マウスオーバーで一時停止
・左右ボタンで加速
・画像以外の要素もOKの優れもの
・カスタマイズしやすい
というかなり、かなり、ありがたや～（-人-）なプラグインです。
以外に上記機能を内包してるプラグインが無いんですよね～。
良いのが見つからなくて自作するかと考えてたのでかなり助かりました
カスタマイズすれば、レスポンシブ(横幅可変)なスクロールに対応できます。
あと、読み込むページで高さ指定すれば結構応用が効くものになりそうです。
<script>
$(function(){
$('#ScrollArea').css('height',"300px");/*要素の高さを指定*/
});
</script>