解決!複数のショッピングモールへ出品する時のタグ生成を楽々こなす!

解決した~い!複数のショッピングモールに商品を出品する作業を効率化!


楽天市場、ヤフオク、Yahoo!ショッピング、
・・・などなど

複数のネットショップを運営する時に、まず、直面する問題は、これ!ですよね。

      ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
在庫調整が難しい。(売却済みとなった商品は全サイトで「在庫0」にする必要がある。)
モールごとに出品する作業(タグ生成)に時間がかかる。

まだ、開店したばかりの店舗、特に、中古品など1点物の商品を扱っている場合は、作業の効率化が悩みの種です。私たちもそうでした。地道に在庫調整をしながら、せっせと売り消し作業をしています。
一元管理ソフトを使えばいいのだけれど、色々と制約があるし、お金もかかりますよね。
作業する人数も少ないので、とりあえず、出品作業を楽にこなしたいなーってことで、楽にする方法を考えました!
・・・あ。ブラウザ上でデータバインディングできる機能を使ってできるかも。
これで、モール別に『商品ページ作成用のHTMLタグ』を自動生成させちゃいます。

ショッピングモールによって、使える「タグ」や「プロパティ」が違う。

モールに商品を登録する際には、HTMLコードを挿入して商品ページを作成します。HTMLとか詳しい知識がなくても、ホームページ作成支援ソフト(Dreamweaver etc.)があって、勝手にタグを生成してくれます。でも、ショッピングモールによっては、使えるタグやプロパティが違ったり、文字数の制限等があって、そのために自動生成されたタグを手動で手直ししないと、それぞれのモールの出品システムに商品内容の登録ができませーん!(TT)。。。
そうなると、結構、作業が面倒になってきますよね。

楽天GOLDページで、店舗は、作成したHTMLコンテンツを自由にアップロードできる。

私たちは現在、「楽天市場」、「ヤフオク」、「Yahoo!ショッピング」に出店していて、楽天市場は、国内サイトと海外サイトに商品を出しています。海外サイトの商品ページは、国内サイトの商品ページの内容を自動的に翻訳、ドル変換して表示されます。

商品ページは、各ショッピングモールの出品システムを使って作りこんでいくので、各モールのシステムの制約を受けるんですが、楽天には『楽天GOLDページ』があり、より自由にページがデザインできちゃいます。

楽天GOLDページとは
楽天GOLDページは、店舗が作成したHTMLなどのコンテンツを自由にアップロードできる、ディスクスペースを提供してくれるサービスなので、TOPページや商品ページのカスタマイズができます。

使い方イメージ

1)[楽天GOLD]の利用を申請して、「ユーザ名」「パスワード」を取得する。
2)HTMLファイルを用意する。
※CGI・PHP・SSLなどプログラムとして動作するものは使用できません。
3)FTPソフトで[楽天GOLD]サーバへ接続して、ファイルをアップロードする。

商品登録を簡単に!AngularJSを使って、モール別にHTMLタグを自動生成。

例えば、作りたい物を、下の【図1】、2つのサイトの商品ページとします。

      【ヤフオク】             【楽天市場】

上記のように、ショッピングモールごとに商品ページのデザインが違っても、ブラウザ上で表に入れる要素を入力するだけで、複数のモール別にHTMLタグが生成されるようにします。ここで追加ですが、PC表示用の商品ページとスマフォ表示用の商品ページを作成する際に、『ヤフオク』では同じHTMLタグでOKですが、『楽天市場』では別々のHTMLタグを作る必要があります。つまり、上記2種類のPC表示用のサイトの他に、スマフォ表示用のサイトのHTMLタグ1つを作成する必要があります。

要素を入力する欄を、下の【図2】とします。
これから、作成する《モール別商品詳細タグを生成》ページ【図3】では、【図2】に入力した要素が、即座に【図1】の表内に表示されて、レイアウトを目で見て確認できます。さらに、ページ下には、
・ヤフオク用のHTMLタグ(PC版、スマフォ版共用)
・楽天GOLDページ用のHTMLタグ(PC版)
・楽天GOLDページ用のHTMLタグ(スマフォ版)
が、同時に生成されるので、レイアウトを見て修正箇所がなけれれば、生成されたタグを、各モールの商品登録システムに投入します。

     モール別商品詳細タグを生成》ページ【図3】

 

まずは、AngularJSの基本構文をマスター!これだけ知ってれば、超~簡単です!

AngularJSとは、JavaScriptのMVCフレームワークですが、難しいことはさておき、使うために必要なことは、以下の2つです。
①HTMLファイルがAngularJSのアプリケーションであることを宣言します。
⇒<html lang=”ja” ng-app>とします。
②公式サイトから、オンラインでAngularJS のスクリプトを読み込みます。
⇒ <script src=”http://code.angularjs.org/angular-1.0.1.min.js”></script>を<head>タグの間に挿入します。

下のHTMLファイルは簡単な基本構文で、テキストボックスに入力した値が、同じブラウザ上で別の場所に表示されます。

次に、実際にAngularJSを使った商品登録用のHTMLファイルをつくります。

 

AngularJS+PHPで応用!TOPページのNEWアイテムや、レフトナビの作成をもっと簡単に

 

更にPHPでステップアップして、企画ページを作る!スカーフ一覧ページのアイテムに商品ページの価格変更や売り切れを反映させる。

 

About

You may also like...

Your email will not be published. Name and Email fields are required