iframeで埋め込み元の高さ計算して埋め込み先に反映させる方法

HTMLのインラインフレーム要素(iframe)で、他サイトのページを埋め込むアイデアはわりとよく使われます。たとえば、カラーミーショップ(EC)にWordPressのコンテンツを埋めこんだり。やってみると下の表示が切れる場面に遭遇しますが、高さ調整が重要です。

どこでもカラーミーで売切れ時にSOLD OUT表示する

「どこでもカラーミー」はブログなどの外部サービスにカートボタンをかんたんに設置する機能です。どこでもカラーミーの仕様では、売切れ時に「カートに入れる」ボタンが消えてしまい、売切れか、なんなのか、表示上わかりづらいです。これが不便で、SOLD OUT表示したいことがあります。

カラーミーのオプションごとにカートボタンを付けて、在庫数表示をする

オプションごとに「カートに入れる」ボタンを設置するレイアウトはときどき見かけます。これまでは、オプションを選択してからカートボタンで購入という手順でしたが、オプション選択の手間が一つ減りますので、購入しやすいかも、と思います。サンプルコードを書いてみました。

カラーミーのオプションのプルダウンで価格・在庫数表示する

プルダウンはコンパクトでスマートフォン時にページに収まりやすいですが、表形式と違って、オプション価格・オプション在庫数が表示されない弱点があります。今回は、プルダウンでオプション価格・オプション在庫数が表示する方法を考えてみます。