商品詳細 | ORITURU

2012年2月13日2012年2月13日

EC-CUBE 商品詳細に在庫数表示

; html-script: false ]
<table border="0" cellpadding="0" cellspacing="0">

<tr><td>

在庫：

<!--{if $arrProduct.stock_unlimited_min == 1}-->

有り

<!--{else}-->

<!--{if $arrProduct.stock_min != $arrProduct.stock_max}-->

残りあと<!--{$arrProduct.stock_min|escape}-->～<!--{$arrProduct.stock_max|escape}-->

<!--{else}-->

残りあと<!--{$arrProduct.stock_min|escape}-->

<!--{/if}-->

<!--{/if}-->

</td></tr></table>

; html-script: false ]

在庫：

有り

残りあと～

残りあと

</td></tr></table>

上記コードを表示させたいところに表示。

商品詳細ページのファイルは下記。

; html-script: false ]
root/Smarty/templates/my_temp/
　　　　　　　　　　　　　　┗products/detail.php

; html-script: false ]

root/Smarty/templates/my_temp/

　　　　　　　　　　　　　　┗products/detail.php

2012年1月24日2012年1月24日

「EC-CUBEの商品の登録項目内容の追加」

商品詳細ページに入力項目を追加したいと思います。
例として今回は家具サイトの例として「サイズ（W*D*H）」を追加します。

データベース（以下、DB）にカラムを追加する

dtb_productsに1カラム追加。
カラム名「comment7」
データ型「text」

商品詳細ページの編集

管理ページのデザイン管理>ページ詳細設定＞商品詳細ページを開き、サイズを表示したい部分に、

<!–{$arrProduct.comment7}–>

と記述する。

サイズ表示しないようにするには、

<!–{$arrProduct.comment7|escape}–>

と記述する

商品登録ページの編集

data/Smarty/templates/default/admin/products/product.tplのファイルを開き、メーカーサイトの項目の下あたりに、

; html-script: false ]
&lt;div&gt;&lt;code&gt;サイズ &amp;lt;&lt;/code&gt;&lt;code&gt;span&lt;/code&gt; &lt;code&gt;class&lt;/code&gt;&lt;code&gt;=&lt;/code&gt;&lt;code&gt;"red12"&lt;/code&gt;&lt;code&gt;&amp;gt;&lt;/code&gt;&lt;code&gt;&amp;lt;!--{$arrErr.comment7}--&amp;gt;&lt;/code&gt;&lt;code&gt;&amp;lt;/&lt;/code&gt;&lt;code&gt;span&lt;/code&gt;&lt;code&gt;&amp;gt;&lt;/code&gt;&lt;/div&gt;
&lt;div&gt;&lt;code&gt;&amp;lt;&lt;/code&gt;&lt;code&gt;input&lt;/code&gt; &lt;code&gt;class&lt;/code&gt;&lt;code&gt;=&lt;/code&gt;&lt;code&gt;"box60"&lt;/code&gt; &lt;code&gt;maxlength="&lt;/code&gt;&lt;code&gt;&amp;lt;!--{$smarty.const.URL_LEN}--&amp;gt;&lt;/code&gt;&lt;code&gt;" name="comment7" size="60" type="text" value="&lt;/code&gt;&lt;code&gt;&amp;lt;!--{$arrForm.comment7|escape}--&amp;gt;&lt;/code&gt;&lt;code&gt;" /&amp;gt;&amp;lt;&lt;/code&gt;&lt;code&gt;span&lt;/code&gt; &lt;code&gt;class&lt;/code&gt;&lt;code&gt;=&lt;/code&gt;&lt;code&gt;"red"&lt;/code&gt;&lt;code&gt;&amp;gt; （上限&lt;/code&gt;&lt;code&gt;&amp;lt;!--{$smarty.const.URL_LEN}--&amp;gt;&lt;/code&gt;&lt;code&gt;文字）&amp;lt;/&lt;/code&gt;&lt;code&gt;span&lt;/code&gt;&lt;code&gt;&amp;gt;&lt;/code&gt;&lt;/div&gt;

; html-script: false ]

<div><code>サイズ &lt;</code><code>span</code> <code>class</code><code>=</code><code>"red12"</code><code>&gt;</code><code>&lt;!--{$arrErr.comment7}--&gt;</code><code>&lt;/</code><code>span</code><code>&gt;</code></div>

<div><code>&lt;</code><code>input</code> <code>class</code><code>=</code><code>"box60"</code> <code>maxlength="</code><code>&lt;!--{$smarty.const.URL_LEN}--&gt;</code><code>" name="comment7" size="60" type="text" value="</code><code>&lt;!--{$arrForm.comment7|escape}--&gt;</code><code>" /&gt;&lt;</code><code>span</code> <code>class</code><code>=</code><code>"red"</code><code>&gt; （上限</code><code>&lt;!--{$smarty.const.URL_LEN}--&gt;</code><code>文字）&lt;/</code><code>span</code><code>&gt;</code></div>

つづく

2011年11月28日2012年1月16日

EC-CUBE 動的ページを静的ページ（静的URL）にする

なぜ静的URLにするのかというと・・・

GoogleやYahoo! などの検索の場合、動的URLでは、一つのページとみなしてしまいます。（まぁ最近じゃ?がついていようとインデックスしてくれるみたいですが）ちなみに動的URLとは下記のように？が入るURLです。 http://サーバ名/ec-cube/html/products/detail.php?product_id=xxこちらですと、検索するにあたって、detail.phpのファイルとみなされていまい、 1ページしかインデックスされません。

ですので、各ページごとにインデックスされるように、 http://サーバ名/ec-cube/html/products/detail/xx

とします。これが静的URLです。実際にページは存在していませんが、検索ロボットに存在しているように見せることができます。

1. パラメータを変える。

まず、システム設定＞パラメータ設定より以下を変更います。パラメータ：LIST_P_HTML 変更前：URL_DIR . “products/list-p” 変更後：URL_DIR . “products/list/” パラメータ：DETAIL_P_HTML変更前：URL_DIR . “products/detail.php?product_id=”変更後：URL_DIR . “products/detail/”

2. .htaccsessファイルをhtml/products/以下にに配置します。そのファイルに下記の内容を追加します。 RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^detail/([0-9]+)+ detail.php?product_id=$1 [L] RewriteRule ^list/([0-9]+)+ list.php?category_id=$1 [L]

※.htaccsessは、ｈｔｍｌ/　内にありますので、それをコピーして設置すると楽です。

3.管理画面>デザイン管理>ブロック編集>カテゴリを開き46行目あたりのソースを変更

こちらはカテゴリのリンクの変更です。

変更前：products/list.php?category_id= 変更後：products/list/

4.管理画面>デザイン管理>ページ詳細設定>商品詳細ページのソースを変更

商品詳細のページのリンクが静的ページにするために、パス（　/ ）を切った関係で、階層が一つ多くなってしまいました。

変更箇所は、内の合計6つ変更です。

変更前：./ 変更後：../　 ※2階層上へ送っている

他、動作には関係ありませんが、こちらも変更をオススメ、

内

変更前：products/list.php?category_id= 変更後：products/list/

これで、変更完了です。各種エディターを使って、コピペして、コマンド+Fで所定の箇所を探してみてください。

2011年8月16日

SEO対策 titleタグ編

内部SEO対策を行う上で、重要なのはタグです。

・Titleタグ
・Metaタグ
・Hタグ
・Altタグ
・Aタグ
・Strongタグ

とSEOに関連するタグはありますが、SEOを行う上で重要なのがTITLEタグです。
特にみずいろ堂では商品詳細のページにランディングしてもらおうという考えですので
商品詳細ページのタイトルは重要です！

しかしながら、デフォルトの商品詳細ページのTitleタグは納得がいきません！

商品詳細ページは、各々の商品の物販サイトであるということを意識したタイトルにしました。

【対象ファイル】
data\class\pages\products\LC_Page_Products_Detail.php

【変更箇所】
$this->tpl_title = “商品詳細 “. $this->arrProduct[“name”];

を

$this->tpl_title = “通販 “. $this->arrProduct[“name”];
などに変更するだけです。

SEOにとって重要でありますが、変更は非常に簡単ですので、やってみるべき変更だと思います。

2011年7月27日2012年2月1日

コメントなしでもサブ画像のみ表示する方法（PC／スマフォ兼用）ver2.11

コメントなしでもサブ画像のみ表示する方法
商品詳細のページでサブ画像だけ増やしたいときにこれを使用。
最終的には縦並びになるのでCSSで横に並ぶようにしました。

templates/default/products/details.tpl

下記コードのサブタイトルとサブ画像を切り離します。

    <!--▼サブコメント-->
    <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
        <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
        <!--{if $arrProduct[$key] != ""}-->
<div class="sub_area clearfix">
<h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3>
<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
                <!--▼サブ画像-->
                <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
                <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
                <!--{if $arrProduct[$key]|strlen >= 1}-->
<div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></div>
<div class="subphotoimg">
                        <!--{if $arrProduct[$lkey]|strlen >= 1}-->
                            <a class="expansion" onmouseover="chgImg('&lt;!--{$TPL_URLPATH}--&gt;img/button/btn_expansion_on.gif', 'expansion_&lt;!--{$lkey|h}--&gt;');" onmouseout="chgImg('&lt;!--{$TPL_URLPATH}--&gt;img/button/btn_expansion.gif', 'expansion_&lt;!--{$lkey|h}--&gt;');" href="&lt;!--{$smarty.const.IMAGE_SAVE_URLPATH}--&gt;&lt;!--{$arrProduct[$lkey]|h}--&gt;" target="_blank">
                        <!--{/if}-->
                        <img src="&lt;!--{$arrFile[$key].filepath}--&gt;" alt="&lt;!--{$arrProduct.name|h}--&gt;" width="&lt;!--{$arrFile[$key].width}--&gt;" height="&lt;!--{$arrFile[$key].height}--&gt;" />
                        <!--{if $arrProduct[$lkey]|strlen >= 1}--></a>
                            <span class="mini">
                                <a class="expansion" href="&lt;!--{$smarty.const.IMAGE_SAVE_URLPATH}--&gt;&lt;!--{$arrProduct[$lkey]|h}--&gt;" target="_blank">
                                    画像を拡大する</a>
                            </span>
                        <!--{/if}--></div>
<!--{else}-->

<!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}-->

                <!--{/if}-->
                <!--▲サブ画像-->
            
</div>
<!--{/if}-->
    <!--{/section}-->
    <!--▲サブコメント-->

<a class="expansion" onmouseover="chgImg('img/button/btn_expansion_on.gif', 'expansion_');" onmouseout="chgImg('img/button/btn_expansion.gif', 'expansion_');" href="" target="_blank">

<img src="" alt="" width="" height="" />

</a>

<a class="expansion" href="" target="_blank">

画像を拡大する</a>

</span>

</div>

</div>

    <!--▼サブコメント-->
    <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
        <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
        <!--{if $arrProduct[$key] != ""}-->
<div class="sub_area clearfix">
<h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3>
<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->

<!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}-->

</div>
<!--{/if}-->
    <!--{/section}-->
    <!--▲サブコメント-->

</div>

上記コードを下記に丸ごと書き換え。

 
                <!--▼サブ画像-->
    <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
                <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
                <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
                <!--{if $arrProduct[$key]|strlen >= 1}-->
<div class="subphotoimg">
                        <!--{if $arrProduct[$lkey]|strlen >= 1}-->
                            <a class="expansion" onmouseover="chgImg('&lt;!--{$TPL_URLPATH}--&gt;img/button/btn_expansion_on.gif', 'expansion_&lt;!--{$lkey|h}--&gt;');" onmouseout="chgImg('&lt;!--{$TPL_URLPATH}--&gt;img/button/btn_expansion.gif', 'expansion_&lt;!--{$lkey|h}--&gt;');" href="&lt;!--{$smarty.const.IMAGE_SAVE_URLPATH}--&gt;&lt;!--{$arrProduct[$lkey]|h}--&gt;" target="_blank">
                        <!--{/if}-->
                        <img src="&lt;!--{$arrFile[$key].filepath}--&gt;" alt="&lt;!--{$arrProduct.name|h}--&gt;" width="&lt;!--{$arrFile[$key].width}--&gt;" height="&lt;!--{$arrFile[$key].height}--&gt;" />
                        <!--{if $arrProduct[$lkey]|strlen >= 1}--></a>
                            <span class="mini">
                                <a class="expansion" href="&lt;!--{$smarty.const.IMAGE_SAVE_URLPATH}--&gt;&lt;!--{$arrProduct[$lkey]|h}--&gt;" target="_blank">
                                    画像を拡大する</a>
                            </span>
                        <!--{/if}--></div>
<!--{/if}-->
    <!--{/section}-->
                <!--▲サブ画像-->

<img src="" alt="" width="" height="" />

</a>

<a class="expansion" href="" target="_blank">

画像を拡大する</a>

</span>

</div>

多分コレで出来るはず。
（スマフォ版もコレで行けました。）

ただ縦に並ぶだけなので、CSSのdiv.subphotoimgを下記コードに書き換え。

div.subphotoimg {
    float: right;
    text-align: right;
}

div.subphotoimg {

float: right;

text-align: right;

}

ちなみにfloat：right；なので右揃え。
通常はleftでもいいかと思います。
なので、コメント欄の後ろのほうに登録した写真が左に来て、上位のコメントにつけた画像が右に来る可能性あり。

あと表示位置をメイン写真の真下に持ってこれれば最高、しかもクリックしたらそれもLightBox風にできぬだろうか・・・

2011年7月20日2011年7月21日

商品詳細のメーカー名の表示方法

編集データ
date/Smatry/template/default/products/detail.tpl

下記記述を変更

            <!--▼メーカーURL-->
            <!--{if $arrProduct.comment1|strlen >= 1}-->
                <div><span class="comment1">メーカーURL：
                    <a href="<!--{$arrProduct.comment1|h}-->"><!--{$arrProduct.comment1|h}--></a>
                </div>
            <!--{/if}-->
            <!--▼メーカーURL-->

<div><span class="comment1">メーカーURL：

</div>

155行目付近を下記に変更

            &lt;br style="clear:both" /&gt;
            &lt;!--▼メーカー名--&gt;
            &lt;!--{if $arrProduct.maker_name|strlen &gt;= 1}--&gt;
                &lt;div&gt;&lt;span class="comment1"&gt;メーカー　　：
                    &lt;a href="&lt;!--{$arrProduct.comment1|h}--&gt;"&gt;&lt;!--{$arrProduct.maker_name|h}--&gt;&lt;/a&gt;&lt;/span&gt;
                &lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;!--▲メーカー名--&gt;

            &lt;!--▼メーカーURL--&gt;
            &lt;!--{if $arrProduct.comment1|strlen &gt;= 1}--&gt;
                &lt;div&gt;&lt;span class="comment1"&gt;メーカーURL：
                    &lt;a href="&lt;!--{$arrProduct.comment1|h}--&gt;"&gt;&lt;!--{$arrProduct.comment1|h}--&gt;&lt;/a&gt;&lt;/span&gt;
                &lt;/div&gt;
            &lt;!--{/if}--&gt;
            &lt;!--▲メーカーURL--&gt;

<div><span class="comment1">メーカー　　：

</div>

<div><span class="comment1">メーカーURL：

</div>