AmazonJSのカスタマイズが表示されない!そんなときに最初に確認したいこと

投稿者:
コージ
この記事は約3分で読めます。
AmazonJSをカスタマイズしたら動かない!そんなときに確認するべきこと

AmazonJSをカスタマイズしたけどうまく表示されない、と困ったことはありませんか?

WordPressでブログを運営する人にとってはAmazonの商品をいい感じに紹介できるAmazonJSは重宝するプラグインの1つですよね。このサイトでもAmazonJSのテンプレートをカスタマイズして使用していますが、ある商品を紹介した記事でカスタマイズしたテンプレートを使用した商品が表示されないという状態になってしましました。

表示に不具合を起こしてしまった商品

紹介する商品によって表示されない状態になるとは思っていなかったので、最初はテンプレートの記述ミスだろうと原因を調べていたのですが、どうやら紹介する商品に原因がありました。

どんな商品かというと画像が用意されていない商品です。

具体的にどんな商品を紹介しようかと思ったかというこれです。

この記事を執筆時点では商品の画像が表示されていますが、表示されない自体に陥ったときは画像が表示されなかったんですよね。一時的に表示されなかったのか、そのときに画像がなかったのかは定かではありません。

カスタマイズしたテンプレートでは画像を表示するようにしていたのですが、取得する商品のデータに画像が含まれておらずエラーになったことで、その記事内で紹介した全ての商品が表示されない状態になりました。

画像がない商品に対応するためのテンプレートの記述方法

AmazonJSでは画像サイズが複数用意されていますが、カスタマイズしたテンプレートでは下記のように記述していました。

<img src="${MediumImage.src}">

大中小とある画像サイズの中のサイズの画像を表示するような指定ですが、画像が用意されていない場合はこの記述ではエラーになってしまいます。そこで修正したのが下記です。

{{if MediumImage}}<img src="${MediumImage.src}">{{/if}}

元々の記述に中サイズの画像が用意されていれば表示するという記述にすることで、問題が解消されます。AmazonJSではテンプレートの表示にjQuery Templatesが使われているので、ifの部分はAmazonJS内で定義されているものではありません。

カスタマイズする際は自己責任で慎重に!

カスタマイズするのは楽しく、自分のブログやサイトに合ったデザインや動きにすることができますが、不具合が起こってしまった場合には自分で対応する必要があります。

よくわかんないけど、うまくいったからいいや!とカスタマイズしていると時に困った状態になってしまいますね。

今回画像がない場合もあるという知見がたまったので、これはこれでよかったかなと思いますが(笑)AmazonJSのテンプレートカスタマイズでうまく表示されない場合は、まずはどんな商品でも表示されないか確認してみると解決のヒントが見つかるかもしれませんよ!

スポンサーリンク
この記事を書いた人
コージ

兵庫県出身で神奈川県在住。ディズニーと文房具が大好き!2016年4月からフリーランスでお仕事しています。