FC2のショッピングカートをカスタマイズしたいのですが。。。

質問

http://cart1.fc2.com/cart/sample/?tplid=4046
↑
商品が横に１列しかないこのテンプレートを、

http://cart1.fc2.com/cart/sample/?tplid=107246
↑
このように、商品を横に３つ並べたいのです。

HTMLとCSSをチェックして色々試してみたのですが、どこをどうすればいいかさっぱりわからず困っています。
（各ボックスの幅を変えることのみできました。）
誰か、どうすれば良いか教えていくれませんか。
よろしくお願いします。

回答No.1

naokita · ベストアンサー

このカートを手直ししてあげた経験がありますが、
一般的なカートでHTMLで全商品枠があってCGIで処理してあるのなら
質問者さんがやったように数値変更するだけで良いのですが、
このカート、
１列のカートは、商品のテーブルを作りTRの１行目だけつくり、
IF文で２つ目の以降の商品があった場合に
TR以降を生成し縦に商品数列で配置するようになっています。

３列のカートは、商品枠の1/3幅のDIVを１つ作りfloat:leftで
（同じくIF文で）２つ目以降の商品を流します。
４つ目以降の商品は勝手にカラム落ちして２行目左側から配置されます。

つまり、幅とか配置の問題ではなく、
tabale を div に変更しなければいけないという事です。
この意味がわからなければ、触らない方がいいでしょう。

<div class="item_list">
<div class="item">
<div class="name"><a href=""></a></div>
<a href=""><img src=""></a>
<div class="comment"></div>
<div class="other"></div>
<div class="other">注文数：
<select name='order_su'><option value='1'>1</option></select>
</div>
<div class="other">
<input type="hidden" name="Submit_cart" value="true">
<input type="hidden" name="" value="11">
<input type="image" src="">
</div>
</div>
</div>

ご希望のHTMLで表面上のFORM内テンプレートは、上記です。
これに、各変数、URI、画像パス、JS、を割り当て
CSSで幅や大きさを調整すれば完成します。幅は33%で良いでしょう。

お礼

ありがとうございます！
細かい質問のためなかば諦めていたのですが、具体的な回答でとても嬉しいです。
この機会にじっくり読んで理解してから実行したいと思います！

補足

すみません、もう一つ質問させていただきたいのですが。。。

このページはカートなどの画像は変更できないのでしょうか？

初歩的な質問で申し訳ございません。

回答No.2

naokita

#1です。補足への回答ですが、
可能です。
HTMLで<img　を入れるか、既存のCSSの画像を入れ替えるか、どちらかです。
HTML,CSS,が編集出来るという事は、
見た目部分のデザインを全て変更出来ます。
しかし、フォーム部分のCGIでの動作までは、変更出来ません・・・

１、適当な大きさの画像を作り、
２、管理画面からその画像を保存。
３、CSS（スタイルシート）編集で既存の画像を入れ替える。
ただ、
http://cart1.fc2.com/cart/sample/?tplid=4046
のテンプレートは、上部の花柄の画像が4.5枚で構成されているので
削除の部分もあるので初心者にはわかり難いかもしれませんね。

お礼

花柄の部分はわかったのですが、カート画像が見つかりません。

カート画像はURLでなく変数？になっているみたいなんですが。。。

補足

すみません。なんとか解決致しました。
とても参考になりました、どうもありがとうございました。