どこでもカラーミーでスペック情報は残しつつ商品説明文だけ非表示にする方法

カラーミーにはカート機能を使ってサイトやブログ内にカートを設置できる機能があります。

どこでもカラーミー - カラーミーショップ ネットショップ運営サービス https://shop-pro.jp/func/cartjs/

どの項目を表示・非表示にするかは設定時に選択できるのですが、細かい調整はCSSで設定する必要があります。
今回、商品説明文章がひたすらに長かかったため説明文を非表示にしたかったのですが、スペックは表示したいという要望があがりました。

CSSだけではなくJavaScriptで非表示する必要があったためメモがてら残しておきます。

生成されるHTMLを確認する

カート機能のJSから生成されるHTMLを確認してみると、「cartjs_product_explain」という名前のclassがついたdivタグが生成され、そのなかにスペックと商品説明文章がはいっています。

<div class="cartjs_product_explain">
 <div class="spec">
  <p>スペック情報1</p>
  <p>スペック情報2</p>
  スペック情報3
 </div>
 ここに商品説明文章がはいります。（←こいつを消したい！）
</div>

商品説明文章とスペック情報が一緒になっています。切り離して表示したいのですが、スペックだけにclass名が付与されていて、商品説明文章にはありません。
.cartjs_product_explainをdisplay: none;にしてしまうと.specも非表示になってしまうため、困ります。

JavaScriptでHTMLを操作する

ということで、JavaScriptでHTMLを操作しましょう。

$(function() {
    $('.cartjs_product_explain').each(function(){
        var explain = $(this).find('.spec').html();
        $(this).html('<div class="spec">' + explain + '</div>');
    })
});

やっていることは、

• 各.cartjs_product_explainに対して実行（複数OK）
• .specのhtml要素を変数explainに格納
• div.specで囲んだ変数explainの内容で各.cartjs_product_explainを上書き

というようなことです。

上記のJavaScriptを該当するページから読み込むか、HTML内に記述します。
これで商品説明が消えて、スペック情報だけ表示するようになりました！

注意

読み込み後に実行するため、一瞬説明文章が見えてしまいます。ファーストビューじゃなければ大丈夫なんですが、
一瞬見えるカクツキが嫌だと言う場合はローディング画像を表示するなどして対応しましょう。

参考： jQueryでできる簡易ローディング画面の実装方法 | フロントエンド | kigiroku https://kigiroku.com/frontend/loder.html