いいね周り効率化:商品をいいねすると、別の商品がスライドしてくる仕掛け

楽天ROOM

前回の記事でフィードと検索画面のいいねを大きくしました。
今回はいいねを押したらその商品を消し、上にスライドするようにしてみます。

まずは動画で説明

PC画面を録画したものです。StylusでCSSを設定するだけで、こんな感じの動きができます。

具体的な設定方法

今回もStylusを使ってCSSを追加しています。いいねを押したときに起きる反応を捉えて、そのブロックを非表示にするだけです。スペースが空いたら自動で詰まるようになっていたので、位置の調整には何も手を入れていません。楽ちんでした。

今回作る設定をONにしている間はいいね💗した商品がずっと見えません。これはこれで不便なので、通常は使わないけど消したいときだけONにする設定に追加します。

Stylusの設定を1つ追加

ON/OFFが切り替えられるように1つ追加します。スタイル名は「いいねしたら消える」というベタな設定にしました。自由にして決めてよいです。

セクションを追加して2つにする

スタイルを新しく作ると、コードの入力枠が1つ追加されます(右側に表示されている部分)
今回の仕組みはコードのエリアが2つ必要なので、セクションを追加します。

セクションにコードを設定する

セクションができたらコードを2つ入力します。以下のスクショのようになればOKです。気を付ける点は、セクションごとにURLの設定が変わっているところです。

フィード用の設定

フィード用の設定は4行だけです。コードが分からない人はそのまま貼ればOKです。

CSS
/** Feedからいいねを非表示 **/
div.item:has(a.isLiked) {
    display: none !important;
}

Aタグ(リンク用のタグ)にisLikedクラスが設定されていたら、div.itemを非表示にするだけですね

URLの設定は2つです。

URLの左の設定URLの右の設定
1次で始まるURLhttps://room.rakuten.co.jp/items
2次で始まるURLhttps://room.rakuten.co.jp/discover/recommendItems

検索結果用の設定

検索結果の設定も4行だけです。これだけでいいね💗をすると消えちゃうのだから不思議ですね。

CSS
/** 検索結果 からいいねしたら消える**/
div.item-new-holder:has(a.isLiked) {
    display: none !important;
}

このCSSを有効にする範囲は下のようにします。検索結果のページ全般に効く設定にしてあります。

URLの左の設定URLの右の設定
1次で始まるURLhttps://room.rakuten.co.jp/search/item?

最後に保存

Stylusの設定ができたら、左上にある保存ボタンを押して完了です。

確認する

Stylusの設定が終わったら、フィード画面か検索画面に行きましょう。商品がずらずらっと並びますので、ツールバーに出ているStylusの設定をONに変更します。

すでにいいね💗をしてある商品があれば、設定をONにした瞬間に消えます。そのあとにいいね💗をした場合は、最初の動画のように押すたびに消えていくと思います。

検索結果やフィードからいいね💗をするスタイルのルム活メンバーには、作業の効率が爆上がりするのではないでしょうか。

いいね💗したら消える!作業がはかどりますわー

コメント

タイトルとURLをコピーしました