開発マトリョーシカ

ショップサーブで「▼ 商品説明の続きを見る ▼」ボタンを無効にする方法

2018.09.03EC

ECサイトを構築させたら右に出る者はそれなりしかいない。マトリョーシカだよ。それなりって何だ。

ECサイト、構築してる? そのサイト、儲かってる? 最低でもネットでの売上が100万円はないとダメだからね。そのつもりで構築しようね。それと、当たり前だけど、そもそもネットで売れる商品かどうか見極めるようにね。
ECサイトを構築するときは、利用するサービスによって特徴があるから、どんなサービスを利用するか適切に選択するようにね。

今回は、ショップサーブの話。

ショップサーブはいろいろ機能があって便利なんだけど、場合によってはその機能をなくしたい場合がある。今回、ちょっと事情があって、スマートフォンの場合に登場するこれを無くすことにした。

seemore.png

長すぎる商品紹介文を隠してくれるんだけど、今回は違う方法で調整するので、隠さなくていいんだ。

なお、これから説明することを実施したことによって何か問題があっても責任は取れないから、自己責任でね。

まず、FTPで接続しよう。接続方法はショップサーブオンラインサポート FTPについて に書かれているよ。

修正対象となるファイルは以下の二つ。
/docs/hpgen/smp/js/default.js
/docs/hpgen/smp/css/default.css

/docs/hpgen/smp/js/default.js
には、自動的に商品説明文を隠すための処理が書かれている。これを削除する。

$(window).load(function () {
  var dh = $('#main_text').height();
  if (!dh) return;
  var ah = $('.description aside').height();
  if (dh < ah) {
    $('.description .shopcomment').hide();
    $('.description aside').height(dh);
  }
});
$(window).resize(function () {
  var dh = $('#main_text').height();
  if (!dh) return;
  var ah = $('.description aside').height();
  if (ah > 120) {
    $('.description aside').height(dh);
  }
});

/docs/hpgen/smp/css/default.css
には、高さを固定するための処理が書かれている。これを削除する。
「#contents .description aside」というところに「height:120px」という記述があるので削除する。

これで商品説明文を隠さなくなったので、あとは機能しなくなった「▼ 商品説明の続きを見る ▼」ボタンを無くせばいい。

/docs/hpgen/smp/css/default.css
の「.description .seemore」に「display:none」を追加する。これでボタンが見えなくなる。

これで完成。簡単でしょ? ここまで調べるのは大変だったけどね。

ECサイトの売上を100万円以上にしたい方はご相談ください

執筆者

マトリョーシカの中の人

マトリョーシカの中の人

株式会社JBN 制作部副部長

「難しそうなことはきっとマトリョーシカがなんとかしてくれるはず。」
そんな都市伝説を形にするため地上に降り立ったクリーチャー。
年齢も性別もみんな不明。一体お前は何なんだ。
手も足も出ないし、首も回らない。
それなのに、いつもどうやって設計しているんだろう。
どうやってプログラム書いているんだろう。
そっちのほうが都市伝説。