【 カフェミルク ショッピングカート 】 　 クレジットカード 　 アフィリエイト 　 会員 　 ポイント 　 SSL 　 ブログ 　 携帯 　 対応CGI



CAFEMILK SHOPPING CART V5
　ショッピングカート ホームへ戻る　
スキン
スキン製作のお願い
製品には標準スキンが添付されていますが、これは画像を用いないHTMLソースのみのシンプルなものとなっています。
各ショップはスキンの製作に努めてください。
スキン製作にあたっては弊社が一定のサポートを行います。「このページのこの位置でこのような振る舞いをするタグやプラグインが欲しい」、あるいは「このプラグインの動作はこのように改訂してほしい」というご要望がありましたら弊社までぜひご相談ください。
スキンをつくってみよう (1)
お客様の情報を示す部分のカスタマイズを行ってみましょう。
ターゲットとなるスキンは pin_user_status.html です。これはお客様のログイン状態に応じて表示を分けるために3つ用いられていますが、今回は cgi-bin\shop\skin\user\cgi\member\web\japanese\yen\default にあるものを変更します。
カスタマイズ前の表示
カスタマイズ前のHTMLソース (全体)
<div class='box_left' style=''>
<div class='user_status_box_crust' style=''>
<div class='user_status_box_line' style=''>
<div class='user_status_box_title' style=''>
あなたの情報
</div>
<div class='user_status_box_body' style=''>
<div class='user_status_line_a' style=''>
<###preview_user_type###>
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_d'>
ニックネーム
</div>
<div class='user_status_line_e'>
<###user_name###>
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_x' style=''>
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_s' style='display:<###temporal:display_submit_detail###>;'>
<form action='<###url_sslroot###><###path_cgi###>' method='post'>
<input type='hidden' name='execute' value='user_member_detail'>
<input type='submit' value='登録内容の確認と手続' class='left_submit'></form>
</div>
<div style='clear:both;display:<###temporal:display_submit_detail###>;'>
</div>
<div class='user_status_line_x' style='display:<###temporal:display_submit_detail###>;'>
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_s' style='display:<###temporal:display_submit_logout###>;'>
<form action='<###url_sslroot###><###path_cgi###>' method='post'>
<input type='hidden' name='execute' value='home'>
<input type='hidden' name='user_logout' value='1'>
<input type='submit' value='ログアウト' class='left_submit'></form>
</div>
<div style='clear:both;display:<###temporal:display_submit_logout###>;'>
</div>
<div class='user_status_line_x' style='display:<###temporal:display_submit_logout###>;'>
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_d' style=''>
カートの状態
</div>
<div class='user_status_line_e' style='text-align:right;'>
<##cart_stack##> 品目
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_d' style=''>
<br>
</div>
<div class='user_status_line_e' style='text-align:right;'>
<##cart_subtotal##> 円
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_x' style=''>
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_s' style='display:<###temporal:display_submit_cart###>;'>
<form action='<###url_sslroot###><###path_cgi###>' method='post'>
<input type='hidden' name='execute' value='user_cart_main'>
<input type='hidden' name='dummy' value='<###time###>'>
<input type='submit' value='カート確認・購入手続' class='left_submit'></form>
</div>
<div style='clear:both;display:<###temporal:display_submit_logout###>;'>
</div>
<div class='user_status_line_x' style='display:<###temporal:display_submit_cart###>;'>
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_d' style='display:<###temporal:display_point###>'>
所有ポイント
</div>
<div class='user_status_line_e' style='text-align:right;display:<###temporal:display_point###>'>
<##user_point##> ポイント
</div>
<div style='clear:both;'>
</div>
<div class='user_status_line_x' style='display:<###temporal:display_point###>;'>
</div>
<div style='clear:both;'>
</div>
</div>
</div>
</div>
</div>

HTMLソースをみるとわかるように、各要素が独自のタグによって指定されるというのが弊社製品の特徴です。このタグの位置は自由に移動することが可能で、これにより、ショップは自由にページのレイアウトを変更することができます。スキンが部品化(プラグイン化)されているのも弊社製品の特徴です。編集者は部品化されていないスキンにありがちな混乱を避けつつスキンのカスタマイズを行うことができます。しかも、こうして編集した pin_user_status.html の表示は <#####user_status#####> (#が4つ以上あるタグはプラグインを呼び出すタグ) というタグ一つでさまざまなところから呼び出せます。結果的に基本となるスキンはシンプルとなり、管理しやすくなります。
準備した画像素材は public_html\shop\skin\user\cgi\default\web\japanese\yen\default (style_cafemilk.cssがあるのと同じディレクトリ) に置きます。このパスを呼び出すタグは <##path_material##> です。
カスタマイズ後の表示
カスタマイズ後のHTMLソース (全体)
<div class='box_left' style=''>
<div style='width:234px;height:38px;margin:0px;margin-left:8px;margin-top:12px;'>
<img src='<##path_material##>skin_a_3.png' border='0' width='234' height='38' align='top>
</div>
<div style='clear:both;'>
</div>
<div style='width:234px;height:200px;margin-left:8px;border-left:solid 1px #000000;border-right:solid 1px #000000;background: #fffee7;'>
<div style='width:216px;height:19px;margin:8px;'>
<img src='<##path_material##>skin_a_9.png' border='0' width='149' height='19' align='top'>
</div>
<div style='clear:both;'>
</div>
<div style='width:216px;height:19px;margin:8px;font-size:14px;'>
<img src='<##path_material##>skin_a_10.png' border='0' width='75' height='19' align='top'> <span style='font-weight:bold;'><##user_name##></span>
</div>
<div style='clear:both;'>
</div>
<div style='width:224px;height:19px;margin:4px;font-size:14px;text-align:right;display:<##temporal:display_submit_detail##>;'>
<form action='<##url_sslroot##><##path_cgi##>' method='post'>
<input type='hidden' name='execute' value='user_member_detail'>
<input type='image' src='<##path_material##>skin_a_5.png' alt="登録内容の確認と手続">
</form>
</div>
<div style='clear:both;'>
</div>
<div style='width:224px;height:19px;margin:4px;font-size:14px;text-align:right;display:<##temporal:display_submit_logout##>;'>
<form action='<##url_sslroot##><##path_cgi##>' method='post'>
<input type='hidden' name='execute' value='home'>
<input type='hidden' name='user_logout' value='1'>
<input type='image' src='<##path_material##>skin_a_6.png' alt="ログアウトする">
</form>
</div>
<div style='clear:both;'>
</div>
<div style='width:216px;height:19px;margin:8px;margin-bottom:0px;'>
<img src='<##path_material##>skin_a_8.png' border='0' width='147' height='19' align='top'>
</div>
<div style='clear:both;'>
</div>
<div style='width:224px;height:32px;margin:4px;margin-top:0px;font-size:14px;text-align:right;'>
<span style='font-weight:bold;'><#cart_stack#></span> 品目 <span style='font-size:30px;font-weight:bold;'><#cart_subtotal#></span> 円
</div>
<div style='clear:both;'>
</div>
<div style='width:224px;height:19px;margin:4px;margin-top:8px;font-size:14px;text-align:right;display:<##temporal:display_submit_cart##>;'>
<form action='<##url_sslroot##><##path_cgi##>' method='post'>
<input type='hidden' name='execute' value='user_cart_main'>
<input type='hidden' name='dummy' value='<##time##>'>
<input type='image' src='<##path_material##>skin_a_7.png' alt="カート確認・購入手続">
</form>
</div>
<div style='clear:both;'>
</div>
</div>
<div style='clear:both;'>
</div>
<div style='width:234px;height:5px;margin-top:0px;margin-left:8px;'>
<img src='<##path_material##>skin_a_4.png' border='0' width='234' height='5' align='top'>
</div>
<div style='clear:both;'>
</div>
</div>

スキンをつくってみよう (2)
新着商品表示の部分のカスタマイズを行ってみましょう。
ターゲットとなるスキンは pin_user_item_news.html(本体) と pin_user_item_news_image.html(商品欄) と pin_user_item_news_border.html(区切り)です。また、商品説明を載せるためにpluginモジュール pin_user_item_news_lines.pl の追記も行います。
カスタマイズ前の表示
カスタマイズ前のHTMLソース 1 (pin_user_item_news.html)

<div class='box_right' style=''>
<div class='box_crust_wake' style=''>
<div class='box_line_wake' style=''>
<div class='box_title_wake' style=''>
新着商品
</div>
<div class='box_body_wake' style='padding:1px'>
<div style=''>
<br>
</div>
<div style='clear:both;'>
</div>
<#####user_item_news_lines#####>
<div style='clear:both;'>
</div>
<div style=''>
<br>
</div>
<div style='clear:both;'>
</div>
</div>
</div>
</div>
</div>

カスタマイズ前のHTMLソース 2 (pin_user_item_news.html)

<div class='box_item_news_body' style=''><br>
<div class='box_item_news_body_1' style=''><br>
<div class='box_item_news_body_1_1' style=''><br>
<a href='<##temporal:target_url##>'><img src='<##temporal:image_url##>' width='200' height='160' border='0'></a><br>
</div><br>
</div><br>
<div class='box_item_news_body_2' style=''><br>
<div class='box_item_news_body_2_1' style=''><br>
<##temporal:target_name##><br>
</div><br>
</div><br>
<div class='box_item_news_body_3' style=''><br>
<div class='box_item_news_body_3_1' style=''><br>
<b><##temporal:preview_price##></b><br><br>
</div><br>
</div><br>
<div class='box_item_news_body_4' style=''><br>
<div class='box_item_news_body_4_1' style=''><br>
<a href='<##temporal:target_url##>'>商品詳細・購入手続</a><br><br>
</div><br>
</div><br>
</div><br>
<div style='clear:both;'><br>
</div><br>

カスタマイズ前のHTMLソース 3 (pin_user_item_news_border.html)

<div style=''>
<br>
</div>
<div style='clear:both;'>
</div>
<div class='box_item_news_border' style='text-align:center;'>
<center><hr width='200'></center>
</div>
<div style='clear:both;'>
</div>
<div style=''>
<br>
</div>
<div style='clear:both;'>
</div>

今回は <##temporal:text_1##> という新しいタグを作ります。そして、そのタグの内容を発行するためにpluginに一行だけ追記します。
カスタマイズ後の表示
カスタマイズ後のHTMLソース 1 (pin_user_item_news.html)

<div class='box_right' style=''>
<div style='margin-top:8px;margin-left:8px;'>
<img src='<##path_material##>skin_b_1.png' border='0' width='234' height='40' align='top'>
</div>
<div style='background-color:#f4f4f8;margin-left:8px;margin-right:8px;margin-bottom:8px;width:234px;'>
<div style='width:234px;height:4px;'>
</div>
<#####user_item_news_lines#####>
<div style='width:234px;height:4px;'>
</div>
</div>
</div>
</div>

カスタマイズ後のHTMLソース 2 (pin_user_item_news.html)

<div>
<div style='margin-left:8px;margin-right:8px;font-size:18px;color:#270f5f;font-weight:bold;width:218px;max-width:218px;'>
<a href='<##temporal:target_url##>'><##temporal:target_name##></a>
</div>
<div style='clear:both;'>
</div>
<div style='margin-left:8px;margin-right:4px;width:100px;height:80px;max-width:100px;max-height:80px;float:left;'>
<a href='<##temporal:target_url##>'><img src='<##temporal:image_url##>' width='100' height='80' border='0'></a>
</div>
<div style='margin-left:4px;margin-right:8px;font-size:12px;width:110px;height:80px;max-width:110px;max-height:80px;float:left;line-height:21px;'>
<##temporal:text_1##>
</div>
<div style='clear:both;'>
</div>
</div>
<div style='clear:both;'>
</div>

カスタマイズ後のHTMLソース 3 (pin_user_item_news_border.html)

<div style='margin-left:8px;margin-right:8px;font-size:2px;width:218px;height:8px;'>
</div>
<div style='margin-left:8px;margin-right:8px;font-size:2px;width:218px;height:1px;border-top:solid 1px #444444;'>
</div>
<div style='margin-left:8px;margin-right:8px;font-size:2px;width:218px;height:8px;'>
</div>
<div style='clear:both;'>
</div>

pluginの追記 (pin_user_item_news_lines.pl)

$userdata->{tag_data}{temporal}{target_name} = $target_values{"name_$userdata->{language_type}"};
$userdata->{tag_data}{temporal}{text_1} = $target_values{"text_1_$userdata->{language_type}"};
スキン販売のお願い
弊社では、弊社V5製品用のスキンを製作して販売される、あるいはショップからのスキンの製作依頼を請け負う方や事業者を募集しています。




SOHO WORKSHOP CAFEMILK 全権留保