Eストアー ショップサーブで「内部用キャッチコピー」をカスタマイズする

  JavaScript, jQuery, ショップサーブ 

photo credit: Simon & His Camera via photopin cc

梅雨のじめじめで頭からきのこ生えそう。
ショップサーブの小ネタでございます。

ショップサーブの商品一覧ページやカテゴリーページに表示されるテキストは、商品情報登録画面の「内部用キャッチコピー 」に入力したものが反映されます。

この「内部用キャッチコピー」が曲者でHTMLタグ利用不可なんですね。
ってことはテキストの装飾や画像の挿入ができない!と。

ちょっと前にクライアントさんから内部用キャッチコピーをどうにかしたいというご要望をいただいたので、jQueryを使ってコチョコチョとカスタマイズしてみた備忘録です。。

とりあえずjQueryはもう読み込まれている前提でいきます!

photo credit: Simon & His Camera via photopin cc

「内部用キャッチコピー」カスタマイズの基本

ショップサーブのhtmlは基本的にtableコーディングですが、
商品一覧ページは商品ごとに下記パターンのhtmlで商品情報がマークアップされています。

全体を囲んでいるdiv要素には「layout1」、
内部用キャッチコピーを囲んでいるdiv要素に「expl」と、
ショップサーブ側でCSSクラスが付加されています。
ありがたや。ありがたや。

これを利用するのがカスタマイズの基本になります。

「詳細ページへ」ボタンを付ける

画像や商品名をクリックしたら商品詳細ページには遷移できますが、
もう少しパッと見で詳細ページへの移動や購入を促したいこともあると思います。

そこで、ショッピングサイトっぽい「詳細ページへ」的な画像を挿入できるようにしましょう。

下記を読み込んでいる任意の外部jsファイルに記述します。

■javascript

画像は自身でサーバにアップしたものでも管理画面からアップしたものでも大丈夫です。
お好きな画像を指定してください。

テキストを装飾する

大事な文言、例えば「お一人様2個まで」みたいなテキストを装飾したいときはこんな感じで。

下記を読み込んでいる任意の外部jsファイルに記述します。

■javascript

文字列の抽出がかなりざっくりしてますが、ピンポイントで装飾する際にはこれで十分かと思います。

 

HTMLぐらい自由に使わせてくれよ!!と思うのですが、
様々な事情があるのでしょう・・・。
地味なカスタマイズですが、お役に立てれば幸いです!

 

コレ聴きながら書きました!

爽やかな美メロとひねくれた展開にうっとりします。

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
PAGE TOP ↑