バージョン選択

フォーラム

メニュー

オンライン状況

80 人のユーザが現在オンラインです。 (73 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 80
もっと...

サイト内検索

質問 > フロント機能 > 商品ステータスの位置を名前の横にしたい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
anpan
投稿日時: 2013/3/11 16:21
対応状況: −−−
半人前
登録日: 2013/2/26
居住地:
投稿: 12
商品ステータスの位置を名前の横にしたい
はじめまして。
eccubeの存在を知ってからphpなどの勉強を始めたweb作成初心者です。

環境はxamppです。
システム情報
EC-CUBEバージョン 2.12.3
PHPバージョン PHP 5.3.5
DBバージョン MySQL 5.5.8

商品一覧ページを表示したときにリストの商品名のツラが合うようにしたいのです。
つまり、「オススメ」とか「NEW」などの商品ステータスが商品名の後にくるようにしたいのですが(下の段ではなく同じ行にということです)、どうすればできますか?

/data/Smarty/templates/default/products/list.tpl と
/html/user_data/packages/default/css/contents.css をいじってみるものの結果が出ていません。

宜しくお願いいたします。
dimaggio
投稿日時: 2013/3/11 16:39
対応状況: −−−
一人前
登録日: 2011/3/30
居住地: Tokyo
投稿: 120
Re: 商品ステータスの位置を名前の横にしたい
/data/Smarty/templates/default/products/list.tplの
156行目〜166行目を、172行目の<!--★価格★-->の前に移動させても、並び順は変わらない感じですかね。


----------------
dimaggio
----------------------------
EC-CUBEのご相談、承ります。
http://ec-cube.bitmop.co.jp/

anpan
投稿日時: 2013/3/11 17:01
対応状況: −−−
半人前
登録日: 2013/2/26
居住地:
投稿: 12
Re: 商品ステータスの位置を名前の横にしたい
dimaggio様、ありがとうございます。

list.tplの今みているものがすでに書き込み等してありオリジナルでないので確認ですが、
<!--▼商品ステータス-->から<!--▲商品ステータス-->を<!--★価格★-->の前に、ということでしょうか。

もしそうでしたら、残念ながら
【商品名】
【商品ステータス】
【価格】
となってしまい、イメージしている
【商品名】【商品ステータス】
【価格】
とは表示されておりません。

ありがとうございました。
kato-sc
投稿日時: 2013/3/11 18:50
対応状況: −−−
一人前
登録日: 2013/1/15
居住地:
投稿: 87
Re: 商品ステータスの位置を名前の横にしたい
dimaggio様が仰っているtplの変更とあわせ、CSSの変更が必要です。

対象のCSSファイルは/html/user_data/packeges/default/css/contents.cssとなります。

次の場所を、以下の様に変更して見て下さい。
(行番は参考程度でお願いします)
・262行目
/* 商品名 */
div.listrightbloc h3 {
font-weight: bold;
font-size: 120%;
float:left;
margin:0 20px 0 0;
}

・284行目
/* 価格 */
div.listrightbloc .pricebox {
margin: 0 0 10px 0;
clear:left;
}


「div.listrightbloc h3」のmargin:0 20px 0 0;を調整する事で、商品名とアイコンのスペースを調整する事ができます。

※商品名が長くなった場合カラム落ちして表示が崩れる可能性がある事をご理解下さい。
dimaggio
投稿日時: 2013/3/11 19:37
対応状況: −−−
一人前
登録日: 2011/3/30
居住地: Tokyo
投稿: 120
Re: 商品ステータスの位置を名前の横にしたい
言葉足らずですみません。

kato-sc様がご指摘のように、<ul class="status_icon clearfix">商品ステータス</ul>と<h3><a>商品名</a></h3>の順序は.tplで変更し、<h3>タグによる改行などはCSSで調整する必要があります。


----------------
dimaggio
----------------------------
EC-CUBEのご相談、承ります。
http://ec-cube.bitmop.co.jp/

anpan
投稿日時: 2013/3/12 4:35
対応状況: 解決済
半人前
登録日: 2013/2/26
居住地:
投稿: 12
Re: 商品ステータスの位置を名前の横にしたい
kato-sc様、ありがとうございます。

ご指摘いただいた箇所を変更したところ、イメージ通りに表示されました。
floatの使い方が適切でなかったことも原因でした。
あわせてcssも勉強します。

ありがとうございました。
anpan
投稿日時: 2013/3/12 4:49
対応状況: 解決済
半人前
登録日: 2013/2/26
居住地:
投稿: 12
Re: 商品ステータスの位置を名前の横にしたい
dimaggio様、ありがとうございます。

同じ行にのせるだけだからと.tplの商品名と商品ステータスのところだけをいじって表示できるのではと思い込んでいたのが間違いの元でした。
あわせてcssの使い方も勉強します。

ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,858名です
総投稿数は109,996件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2313
5
umebius
2085
6
yuh
1819
7
h_tanaka
1646
8
red
1570
9
mcontact
1294
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.