MENU

シュゼット_全_商品詳細強化(TTR)

目次

本店

1.下記ディレクトリもしくは過去作成したものでパターンが似ているものをコピーして複製し、ファイル名をリリース日_商品名or商品コードに変更する。
G:\80.coding\cynosura.jp\suzette-ec\public_html\products\2021\template
http://suzette-ec.cynosura.jp/products/2021/template/index_pc.php
http://suzette-ec.cynosura.jp/products/2021/template/index_sp.php

2.今回使用する画像を本番環境の下記ディレクトリ配下に商品IDの名前又は商品名等でディレクトリを作り、画像を格納する。
https://www.suzette-shop.jp/img/goods/
例)https://www.suzette-shop.jp/img/goods/hpg/cat3_210115a.jpg
上書きの場合は同じ画像名で登録、全く異なる場合は画像名の日付を変更して登録する。

3.comment7.htmlがカート上部、comment3.htmlがカート下部のコンテンツ調整箇所となっているので、画像URLとテキストの調整をする。comment4.htmlはボトム部分のjsで表示させているカート部分。

4.キノスラテストサーバーへアップして表示確認。
改行が必要な場合PCのみ改行したい場合<br class=”d_pc”>、SPのみ改行したい場合は<br class=”d_pc”>を使用する。

5.csv等で本番環境へ登録する際には、画像URLを//ddyf877fi2kbt.cloudfront.net/へ向けてから登録する。(アクセスによる負荷の分散のため。)
例)https://ddyf877fi2kbt.cloudfront.net/img/goods/hpg/cat1_210115a.jpg

楽天

PCキノスラテストサーバー

1.使用する画像をRMSへ登録する。ディレクトリは下記ディレクトリ配下に商品IDの名前又は商品名等でディレクトリを作り、画像を格納する。
ユーザーフォルダ>TTR
https://image.rakuten.co.jp/henri-charpentier/cabinet/ttr/
例)https://image.rakuten.co.jp/henri-charpentier/cabinet/ttr/cake/pc_mall_01c.jpg

2.過去(最近)作成したページをコピーし複製。商品ID又は商品名等の名前を付ける。
http://hc_gold.cynosura.jp/gold/henri-charpentier/ctg/hsf-39fg_210802.html

2021年8月ごろより
/ctg/内がごちゃついてきたためTTRを下記ディレクトリへ入れるようにしています。
(/ctg/内はカテゴリのみに使用しているものを入れておくようにしたい。)
http://hc_gold.cynosura.jp/gold/henri-charpentier/ttr/

例)http://hc_gold.cynosura.jp/gold/henri-charpentier/ttr/htm-maroncake.html

3.エンコードはEUC-JPでファイルを編集。Titleと<!–ここまで商品名&キャッチコピー–>より下部を編集。
本店のコード(コメント7とコメント3)をそのまま持ってきて、画像URLのみ置換で概ねOK。
本店はTTRの幅が800pxなのに対し、楽天は680pxしかないため、改行等で調整が必要な場合もあります。

SPキノスラテストサーバー

1.SPはキャプチャでの対応の為、上記で作成したページを開発者ツールでSP表示で開き、ctrl + Shift + P でキャプチャを取り、フォトショップでセクションごとに切り分ける。

2.htmlのソースからsp用画像の記述を削除する。

3.SP用の画像をRMSに登録。
https://glogin.rms.rakuten.co.jp/?sp_id=1

4.キノスラテストサーバーの下記ファイルを複製し、名前を変更する。
http://hc_gold.cynosura.jp/gold/henri-charpentier/ctg/sp_test.html
htmlの画像URLとaltを差し替える。altはセクションタイトルのみでOK。

RMSへの登録

1.対象商品の「スマートフォン用商品説明文」と「PC用販売説明文」へ作成したhtmlを入れる。
PCはiframeでいれているので、下記のような記述で、srcと商品名、heightを変更して登録します。

<iframe src=”https://www.rakuten.ne.jp/gold/henri-charpentier/ctg/terrine/htf_assort.html” width=”680″ height=”7400″ scrolling=”no” frameborder=”0″>テリーヌ・ドゥ・フリュイ</iframe>

SPは<!– TTR商品強化部分 –>という記述があるかと思うので、その部分を差し替えます。ない場合は<!– スマホバナー –>のバナーの記述の後に入れるかたちになります。

2.更新をしたらsokoに入った状態で、PC,SPの表示確認をする。

サムネイル画像の変更方法

1.RMSの画像 ユーザーフォルダ>サムネイル>regularimg内に画像を保存
2.商品ページの「商品画像(1)」を登録した画像に差し替える。

Yahoo

PC&SPキノスラテストサーバー

1.PC用の画像とSP用の画像(楽天で使用したもの)をトリプルの下記ディレクトリ配下にフォルダを作成して格納する。
フォルダの名前は楽天店と同様にする。
https://shopping.geocities.jp/henri-charpentier/ttr/
例)https://shopping.geocities.jp/henri-charpentier/ttr/cake/hsf_pc_01_210802a.jpg

2.Yahooは本番登録の際の登録のしやすさを考慮し、キノスラテストサーバーではPCとSPを同じページで構築しています。
下記ファイルを複製し、商品名とリリース日へ名前を変更する。
http://hc_yahoo.cynosura.jp/henri-charpentier/ttr/2021/cake_shortCake_210805.html

3.PCもSPも楽天のソースをコピペして、画像URLを置換する。
PCはh2やh3タグなどが使用できないため、divへ置換する。

登録方法

1.管理画面の商品ページ「追加表示情報」タブを開き、PC用フリースペース2の欄にPCのソースを、スマートフォン用フリースペースの<!— TTR商品強化部分 —>もしくは<!— TTR —>の間にSPのソースを入れる。
商品によっては強化部分の記述(PCの場合は、PC用フリースペース1とPC用フリースペース3、SPは<!— イベントバナー —>直下(2箇所))が古い場合もあるので、他商品を参考にソースを持ってくる。

2.「保存してプレビュー」を押し、「パソコン版」と「スマートフォン版」をそれぞれ確認し、問題なければ「反映管理」>反映ボタンを押す。ここで反映ボタンを押さないと表には表示されないので注意が必要。

この記事を書いた人

目次