カラーミーいじりたおし (新サイト:naeco.jp)

2010年5月28日

独自タグをJavaScriptの関数に渡す

カラーミーショップ!プロには、いくつも独自タグがあります。
写真は独自タグのページから一部抜粋したものです。

独自タグ、Smarty、JavaScriptを組み合わせることにより、パワフルなカスタマイズが可能です。

JavaScriptの関数の引数として独自タグを渡すさいの注意はひとつ
・文字として渡す場合は””で括ること

<script type="text/javascript">

</script>

独自タグを参照ののち、JavaScriptの処理がなされます。

document.write("<{$product.name}>");　
としたら商品名が表示されます（意味のない使い方ですが）。

Smarty初心者（私がそうなんですが）には気がつきにくい点だと思いました。

【関連記事】
・カラーミーのカテゴリー表示2

2010年5月27日

普段、Firefoxを使用していると、 Internet Explorerのデザインのズレに気づかなかったりします。
どこを修正した際に生じたかわかっていれば、一旦元に戻したのち、チマチマと原因を探ることになります。
検討がつかないと、ひどい時間のロスになります。
テンプレートのバックアップはこまめにとりましょう（カラーミーショップ!プロでは、テンプレート5つまで保存できます）。

今日の本題。
最近手直ししたサイトの「商品詳細」の購入数の矢印ボタンがずれていました。
Firefoxでは問題なかったので気づきませんでしたが、IE7.0では上矢印と下矢印の間に妙な隙間ができていました。
いつずれたのかさっぱりわからず、バックアップのテンプレートとの差分をみながら、チマチマ作業。
CSSが原因らしいと検討がついたのち、さらにチマチマ作業。

特定のフォントのときに隙間があくと判明しました。
そういえば、font-familyにメイリオを追加したんだったと、解決した後で思い出しました。

直近の<div>に、問題のでない「font-family:Courier」追加して修正完了。

<div style="width: 15px; margin: 0px;font-family:Courier;">

ためしに、別のテンプレートで再現するか確認しましたが、問題発生したフォントでも隙間はできませんでした。
テンプレートによるのでしょうか。今回の話は、こんなこともあるのかーくらいで。

2010年5月26日

カートに入れるを二ヶ所につける 3

「カートに入れるを二ヶ所につける 2」のつづき。

今回はJavaScriptのサンプルです。ベースになるソースは「カートに入れるを二ヶ所につける 1」です。
JavaScriptですが、外部ファイルを読み込む場合は、ロリポップ！のようなレンタルサーバーに置き、「共通」か「商品詳細」の先頭で読み込みます（汎用性のある関数は「共通」で）。<body>部でOK。

<script src="http://～/sample.js" type="text/javascript"></script>

ポイントは前回説明済みですので、今回は補足事項のみ。
・カートの二つめはまるまるコピーで、橙色部分を修正。
・置換処理では関数名しか差し替えていない。

1.テンプレート「商品詳細」の購入数からカートに入れるまで抜粋。橙色部分が修正箇所。

<form name="product_form" method="post" action="<{$cart_url}>">
（中略）
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
    <tr>
      <th>購入数</th>
      <td style="padding: 0px 5px;">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td style="padding: 0px;">
              <input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" onKeyUp="change_key_num()"/>
            </td>
            <td style="padding: 0px;">
              <div style="width: 15px; margin: 0px;">
                <a href="<{$num_up_url|regex_replace:'/f_change_num2/':'change_button_num'}>"><img src="<{$num_up_img_url}>"></a>
                <a href="<{$num_dw_url|regex_replace:'/f_change_num2/':'change_button_num'}>"><img src="<{$num_dw_img_url}>"></a>
              </div>
            </td>
            <td style="padding: 0px;"><{$product.unit}></td>
          </tr>
       </table>
     </td>
   </tr>
<{/if}>
（中略）
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
    <tr>
      <th>購入数</th>
      <td style="padding: 0px 5px;">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td style="padding: 0px;">
              <input type="text" name="product_num2" value="<{$product.init_num}>" style="width: 50px;" onKeyUp="change_key_num2()" />
            </td>
            <td style="padding: 0px;">
              <div style="width: 15px; margin: 0px;">
                <a href="<{$num_up_url|regex_replace:'/f_change_num2\(document.product_form.product_num/':'change_button_num(document.product_form.product_num2'}>"><img src="<{$num_up_img_url}>"></a>
                <a href="<{$num_dw_url|regex_replace:'/f_change_num2\(document.product_form.product_num/':'change_button_num(document.product_form.product_num2'}>"><img src="<{$num_dw_img_url}>"></a>
              </div>
            </td>
            <td style="padding: 0px;"><{$product.unit}></td>
          </tr>
       </table>
     </td>
   </tr>
<{/if}>
（中略）
</form>

2.JavaScript

function change_key_num(){
document.product_form.product_num2.value = document.product_form.product_num.value;
}

function change_key_num2(){
document.product_form.product_num.value = document.product_form.product_num2.value;
}

//***********************************
//個数UP・DOWNボタン処理（差し替え版）
//***********************************
function change_button_num(select, pType, pMinNum, pStockNum) {
if( select.value.match(/[^0-9]/)){ select.value = pMinNum; return; }
wNum = parseInt(select.value);
if (pType == "0" && wNum > pMinNum) {
    document.product_form.product_num.value = String(wNum-1);
    document.product_form.product_num2.value = String(wNum-1);
}
if (pType == "1") {
    if (pStockNum) {
      if (wNum >= pStockNum) return;
    }
    document.product_form.product_num.value = String(wNum+1);
    document.product_form.product_num2.value = String(wNum+1);
}
}

テストした感じだと問題なさそうですが、いかがでしょうか。
以前に仕事でつくったソースより、ずいぶんシンプルになりました。

「カートに入れるを二ヶ所につける - オプション編」に続く。

【追記】
間違い部分を訂正しました。ご指摘ありがとうございました。

2010年5月25日

カートに入れるを二ヶ所につける 2

前回のつづきです。
カラーミーショップ!プロに「カートに入れる」をふたつ設置できるか。

修正する点
・テキスト入力フィールドと「カートに入れる」ボタンを設置
<form>～</form>のなかの設置したい場所に、2箇所目の<input>（とその周辺）を記述します。

・増減ボタンをクリックした場合
cart.js内の関数「f_change_num2」を直接修正してアップロードすることができませんので、正規表現と置換を使って、呼び出す関数を差し替えます。
呼び出す関数は「f_change_num2」をベースに、複数あるテキスト入力フィールドの整合がとれるように数行付け加えます。作成したJavaScriptはレンタルサーバーに置きます。

・テキスト入力フィールドに直接文字を入力した場合
JavaScriptのイベントハンドラ、onKeyUp（キーアップ時に発生するイベント）を使用し、テキスト入力フィールドの整合をとるための関数を呼び出します。
自前で作成します（わずか数行です）。

次回はサンプルを作ってみます。

「カートに入れるを二ヶ所につける 3」につづく。

2010年5月24日

カートに入れるを二ヶ所につける 1

商品説明文がスクロールするくらい長いショップの方から、「カートに入れる」をページ上下に二つほしいと要望がありました。
なかをみると、カラーミーショップ!プロは通常ひとつを想定しているようでした。

複数設置すると当然のように、「購入数」を表示するテキスト入力フィールドが複数必要になります（なくても問題ありませんが、お客様の利便性を考えると普通はつけます）。
複数になると各々のテキストフィールド内で表示している数字の整合が取れなくなり、正しい数字をサーバーに渡すことができなくなります。
そこさえクリアすれば複数設置することは可能です。ポイントをみていきましょう。

1. 「商品詳細」の「カートに入れる」部分（使用テンプレートによって若干の違いあり）。

<form name="product_form" method="post" action="<{$cart_url}>">
（中略）
<{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }>
    <tr>
      <th>購入数</th>
      <td style="padding: 0px 5px;">
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
          <td style="padding: 0px;">
          <input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" />
            </td>
          <td style="padding: 0px;">
          <div style="width: 15px; margin: 0px;">
                <a href="<{$num_up_url}>"><img src="<{$num_up_img_url}>"></a>
                <a href="<{$num_dw_url}>"><img src="<{$num_dw_img_url}>"></a>
              </div>
            </td>
            <td style="padding: 0px;"><{$product.unit}></td>
          </tr>
       </table>
     </td>
   </tr>
<{/if}>
（中略）
</form>

以下の独自タグで、JavaScriptを呼び出します。
<{$num_up_url}>の内容
javascript:f_change_num2(document.product_form.product_num,'1',1,1);
<{$num_dw_url}>の内容
javascript:f_change_num2(document.product_form.product_num,'0',1,1);

2.http://～/js/cart.js 内の関数

//***********************************
//個数UP・DOWNボタン処理
//***********************************
function f_change_num2(select, pType, pMinNum, pStockNum) {
if( select.value.match(/[^0-9]/)){ select.value = pMinNum; return; }
    wNum = parseInt(select.value);
    if (pType == "0" && wNum > pMinNum) {
      select.value = String(wNum-1);
    }
    if (pType == "1") {
      if (pStockNum) {
        if (wNum >= pStockNum) return;
      }
      select.value = String(wNum+1);
    }
}

数量を増減させるボタンを押すと、cart.js（最初からあるJavaScript）の関数「f_change_num2」が呼び出されます。pTypeで増か減かの条件分岐。
ここでのselect.valueとは、「document.product_form.product_num.value」のことです。

どのように整合をとるか、イメージできましたか。橙色部分が修正時のポイントです。
cart.jsは、はじめからあるJavaScriptで、ファイルの置き場所に手が出せません。そういうことで、なかを手直しすることはできません。

「カートに入れるを二ヶ所につける 2」につづく。

【参照リンク】
・とほほのWWW入門

登録: 投稿 (Atom)

カラーミーいじりたおし (新サイト:naeco.jp)

2010年5月28日

独自タグをJavaScriptの関数に渡す

2010年5月27日

購入数の↓ボタンの位置がずれる

2010年5月26日

カートに入れるを二ヶ所につける 3

2010年5月25日

カートに入れるを二ヶ所につける 2

2010年5月24日

カートに入れるを二ヶ所につける 1

Sponser Link

Labels

Category

Blog Archive

About This Site