備忘録 JSで追記したmicordataは認識されない

経緯 カラーミーショップのテンプレートでは、販売価格の変数が「円(税込)」まで含んでいるので そのままだと構造化データ(itemprop)の値として使えない。 java scriptで変数から数字だけ取り出し、itempropの値を追記すれば良いのではと考えた

replaceで文字列から数字だけ抽出する

テンプレート側の販売価格変数は $price 。 $price は「円(税込」や「円(税○円)」のように、ショップごとに記述が分かれるので数字だけを抽出します。
const price = ‘ $price ‘ ; const num = price.replace(/[^0-9]/g , ‘ ‘ ) ;
最後のgはglobalフラグで、条件に一致したもの全てを返す(無いと1つ目が見つかった時点で終了)。 フラグが i だと大文字小文字の区別なし。m なら複数行を検索。

setAttributeでitempropの値に追記する

価格の構造化データは数字だけである必要があるのでmicrodataで記述する場合
<p><span itemprop=”price”>1000</span>円</p>

が一般的ですが、
<p itemprop=”price” content=”1000″>1,000円</p>

のようにcontent=”xxxx” でも認識してくれます。
 
そこで先ほど取得した数字(num)をsetAttributeで追加します。
仮に、itemprop のタグに id=”nedan” があるとします。(<p itemprop=”price” id=”nedan”>)
const element = document.getElementById(‘ nedan’ ); element.setAttibute(‘content’ , num );

結果:認識されない

結果、ブラウザで確認すると
<p itemprop=”price” content=”1000″ id=”nedan”>1,000円</p>
と期待通りにはなっているものの、構造化データテストで確認するとjsで生成したcontent=”1000″は認識されませんでした。 残念ながら失敗。

おとなしくphpで処理する

カラーミーはsmarty(php)テンプレートなので、大人しくテンプレートを編集します。 やること自体は先ほどと全く同じで、変数$priceから数字だけを取り出します。
<{$price|regex_replace:”/[^0-9]/”:””}>
構造化データのサンプルでは少数第2位まで書いてあるので、ついでに足しておきます。
<{$price|regex_replace:”/[^0-9]/”:””}>.00
結論としては、jsで処理しようとせず最初からテンプレート編集した方が早いということで。

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。