[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>サムネイルつき矢印リスト2</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-->
/* サムネイルつき矢印リスト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;
 }
css

[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
});
});

こちらで試したところ無事希望通りの動作に♪
助かりましたー(- 人 -)

[jquery]横自動スクロール

Jqueryの自動横スクロールでかなり使い勝手が良いのが見つかりました

Javascript(JQuery)で横スクロールのサンプルを作りました。

機能的には
・マウスオーバーで一時停止
・左右ボタンで加速
・画像以外の要素もOKの優れもの
・カスタマイズしやすい

というかなり、かなり、ありがたや~(-人-)なプラグインです。
以外に上記機能を内包してるプラグインが無いんですよね~。
良いのが見つからなくて自作するかと考えてたのでかなり助かりました

カスタマイズすれば、レスポンシブ(横幅可変)なスクロールに対応できます。

あと、読み込むページで高さ指定すれば結構応用が効くものになりそうです。

<script>
$(function(){
	$('#ScrollArea').css('height',"300px");/*要素の高さを指定*/
});
</script>

保護中: php簡易パスワード認証

このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。

php

[DREAMWEARVER]テンプレート変数の設定方法その3<リピート表示>

まとめて1記事にしろよって自分でも思いますが
とりあえずリピートで同じレイアウトを出させる方法

<!-- TemplateBeginRepeat name="repeat_span" -->ここにテキスト<!-- TemplateEndRepeat -->

これだけだと同じ文言をリピートになってしまうので、編集ができるようにするには編集可能領域を追加する

<!-- TemplateBeginRepeat name="repeat_span" -->
<span><!-- TemplateBeginEditable name="repeat_span_txt" -->ここにテキスト<!-- TemplateEndEditable --></span>
<!-- TemplateEndRepeat -->

なかなか便利~。
phpで組んでいるのをhtmlに置き換え&編集できるようにするのは骨が折れますねー

配列は無理っぽいので最初に出したtrueでするか、リピート使うかのどっちかで対応かなー。

[DREAMWEARVER]テンプレート変数の設定方法その2<分岐で表示>

変数 ON(true)・OFF(false)で表示切り替え

ヘッダに

<!-- TemplateParam name="type1" type="boolean" value="false" -->

BODY内に

<!-- TemplateBeginIf cond="type1==true" -->
<!--ここに真(ON)のときの条件-->
<li><img src="aaaaa.png"></li>
<!-- TemplateEndIf -->

次は配列が出来るのか調べないと………………出来るのかしら…?

[DREAMWEARVER]テンプレート変数の設定方法<テキストを表示>

ただ単にテキストを変数にしたかったんですが、
「挿入」→「オプション領域」で追加した後で編集しないといけないっぽいので、メモ。

ヘッダに

<!-- TemplateParam name="title_name" type="text" value="" -->

BODY内に

<title>@@(title_name)@@</title>
<!--~省略~-->
<ul id="topic_path">
 <li>@@(title_name)@@</li>
</ul>

ぜんぜん関係無いですけど、最近は「breadcrumbs」より「topic_path」を見かけることが多くなってきてる気がします。気のせいかな?