商品選択におけるチェックボックスの有用性と書き方について

Question

お世話になっております。

条件が3つ以上ある商品を選ぶ時に、どう表示させたら分かりやすいかを悩んでいます。

・Mサイズ　Lサイズ
・カバー付き　カバーなし
・和柄　花柄　かわいい　かっこいい　猫　……

これらを、
Mサイズ　＆　カバー付き　＆　花柄　＆　かわいい
の様に選択した結果に飛ばしたいと思っています。

チェックボックスにチェックを入れて検索ボタンを押す、というやり方はどうかと考えました。

　□Mサイズ　■Lサイズ
　■カバー付き　□カバーなし
　□和柄　■花柄　■かわいい　□……
　　
　　検索


のようなイメージです。
店舗内検索で、チェックしたワードの入った検索結果に飛ばします。


質問としては、
・そもそもこれはお客さんの立場として分かりやすいのか
・これをカテゴリ説明文かGOLDのページで作れるのか
・分かりやすい、かつ作れる場合のソースコードについて
となります。

購入者のトラッキングを見ると、カテゴリページと商品ページを行ったり来たりして柄を選んでいるらしい方が多いので、
こういったことが出来ないかと考えました。

よろしくお願いいたします。

Answer

ECマスターズの菅原です。

いただいたご質問につきまして
お調べした上でご回答させていただきます。

恐れ入りますが、ご回答まで
もう少々お時間いただけますと幸いです。

Answer

ECマスターズの菅原です。

大変お待たせいたしました。

> ・そもそもこれはお客さんの立場として分かりやすいのか

具体的にご教示いただきましてありがとうございます。

kami-kyotoさんと同じように数種類のサイズや柄の
用意がございます商品に関しましては、
項目選択肢別在庫を活用される方法をおすすめいたします。

実際にランキング上位のショップさんを見てみますと、
https://item.rakuten.co.jp/pinktrick/sf00165p/
https://item.rakuten.co.jp/la-gemme/lgww-ah0115/

項目選択肢別在庫を活用されて、
お客様に分かりやすく案内されているショップさんが多いようですので、
kami-kyotoさんもぜひご参考にされてみてください。

設定方法につきましては以下マニュアルに
詳細が記載されておりますので、
ご確認くださいませ。

[商品ページ設定 商品個別編集] 項目選択肢別在庫を編集する
https://navi-manual.faq.rakuten.net/item/000033021

> ・これをカテゴリ説明文かGOLDのページで作れるのか
> ・分かりやすい、かつ作れる場合のソースコードについて

上述させていただきました方法ですと、
お客様にとって分かりやすい案内となり、
転換率アップにつながる対策にもなりますので
ぜひご検討いただければ存じますが、

もしご検討いただいた上で、
ご教示いただいた方法で案内されるということでしたら
ソースコードなどお調べいたしますので
ご教示くださいませ。

Answer

ご回答・ご提示ありがとうございます。

対象の商品が300商品以上ありますので、項目選択肢別在庫で行うには向いていないかな、と感じました。

ですので、やはり前述した方法で案内したいと存じます。
よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> ですので、やはり前述した方法で案内したいと存じます。

> チェックボックスにチェックを入れて検索ボタンを押す、というやり方はどうかと考えました。

になるかと思いますが、

ご希望の動作を作成することは可能ですが、

> ・これをカテゴリ説明文かGOLDのページで作れるのか

につきまして、カテゴリ説明文等、RMSから作成するページに対応しておらず、
GOLDページで作成、iframeでページ内に表示いただくようになります。

また、GOLDでページを作成いただいても
スマホは、RMSから作成するページはiframeタグが使用できないため、
『詳細を検索する』などのリンクから
別ページ（GOLDページ）にリンクをする、といった形になります。

上記動作でも問題ございませんでしょうか。

Answer

PC→カテゴリ説明文内にiframeで表示させる
スマホ→GOLDのページに飛ばす必要がある
という事でしょうか。

PC
　カテゴリページ　[■Mサイズ　□Lサイズ　■かわいい　□……　[検索]]
　↓
　検索結果　[商品A]　[商品B]
　↓
　商品Aの商品ページ

スマホ
　カテゴリページやレフトナビ、商品ページ　[詳細を検索する]
　↓
　GOLDのページ　[■Mサイズ　□Lサイズ　■かわいい　□……　[検索]]
　↓
　検索結果　[商品A]　[商品B]
　↓
　商品Aの商品ページ

こういった形という認識で合っていますでしょうか。

この形ならば大丈夫です。
よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

下記のコードにて、
チェックした単語を検索することができます。

value に検索キーワード
const sid = '261122'; // ショップIDを入力
のショップIDを変更

の修正をお願いいたします。
    

     赤
     青
     黄

クリックでリンクします


    function clickBtn1() {
      const sid = '261122'; // ショップIDを入力
      const arr1 = [];
      const keyword = document.form1.keyword;
  
      for (let i = 0; i < keyword.length; i++) {
        if (keyword[i].checked) { //(keyword[i].checked === true)と同じ
          arr1.push(keyword[i].value);
        }
      }
      let link = document.getElementById('link');
        let url = 'https://search.rakuten.co.jp/search/mall/' + decodeURI(arr1.join('+')) + '/?sid=' + sid;
        link.setAttribute('href', url);
    }

Answer

ありがとうございます。

こういうものがやりたかったのでありがたいです。
デザイン的な部分もこれからいじっていきたいと思います。

追加で質問させていただきたく存じます。

1.商品名のみで検索
商品名のみで検索する　の状態の検索結果に飛ばしたいです。
方法はありますでしょうか。


2.OR検索
一部ワードだけをOR検索したいのですか可能でしょうか。

　商品名　＆　Mサイズ　＆　かわいい　OR　かっこいい
という形です。


2.検索結果の表示形式
検索結果はおそらく、PCはブロック形式、スマホはリスト形式で表示されますが、
スマホもブロック形式を指定して表示させることは出来るのでしょうか。


3.既にチェックが入った状態のチェックボックス
あらかじめチェックが入っていて、そこから不要なものを削除していくイメージです。


4.表示させないキーワードを入れたい
特定の商品に関する検索なので、その商品名も検索ワードとして入れたく、
共通なので自動で入るようにしたいです。


まとめると
・商品名のみで検索する　にチェックを入れる検索の方法
・一部ワードを　いずれか　で検索する方法(OR検索)
・検索結果をリスト表示ではなくブロック表示にする方法
・既にチェックが入った状態のチェックボックスのつくり方
・表示させない特定のキーワードも合わせて検索する方法
となります。

たくさんで申し訳ありませんが、何卒よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 1.商品名のみで検索
> 商品名のみで検索する　の状態の検索結果に飛ばしたいです。
> 方法はありますでしょうか。

商品名のみであれば、チェックボックスではなく
リンクにて、ご対応いただけます。
商品名

商品名の部分は、下記サイトにて、URLエンコードをお願いいたします。
https://tech-unlimited.com/urlencode.html

例：商品名 → %E5%95%86%E5%93%81%E5%90%8D

https://search.rakuten.co.jp/search/mall/%E5%95%86%E5%93%81%E5%90%8D/?sid=ショップID


> 2.OR検索
> 一部ワードだけをOR検索したいのですか可能でしょうか。
> 
> 　商品名　＆　Mサイズ　＆　かわいい　OR　かっこいい
> という形です。

楽天の仕様上、
＆検索、もしくはOR検索　となります。


> 2.検索結果の表示形式
> 検索結果はおそらく、PCはブロック形式、スマホはリスト形式で表示されますが、
> スマホもブロック形式を指定して表示させることは出来るのでしょうか。

楽天の仕様上、スマホの表示形式は
選択することができません。

> 3.既にチェックが入った状態のチェックボックス
> あらかじめチェックが入っていて、そこから不要なものを削除していくイメージです。

htmlのタグに onload="clickBtn1()" の
追加をお願いします。


↓



> 4.表示させないキーワードを入れたい
> 特定の商品に関する検索なので、その商品名も検索ワードとして入れたく、
> 共通なので自動で入るようにしたいです。

下記のチェックボックス（非表示になります）を
追加いただくと、ご対応いただけます。

複数キーワードが入る場合は、半角スペースで区切って
ご入力ください。

Answer

ありがとうございます。

もろもろ承知いたしました。
助かります。

1番の 商品名のみの結果に飛ばす という点についてですが、
商品名のみを検索対象にした結果に飛ばしたい、ということになります。

説明文などを検索対象にしないものです。

書き方が悪く、すみませんでした。
よろしくお願いいたします。

Answer

ECマスターズの星です。

こちらのご質問に関しましては
週明け担当よりご案内いたしますので
今しばらくお待ちください。

お時間いただきまして申し訳ございませんが、
何卒よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 1番の 商品名のみの結果に飛ばす という点についてですが、
> 商品名のみを検索対象にした結果に飛ばしたい、ということになります。
> 
> 説明文などを検索対象にしないものです。

こちらはすべて商品名のみが検索対象ということでしょうか。

ちいさめ(商品のみ)　＆　Mサイズ　＆　かわいい
→上記の場合は楽天の仕様上できません

ちいさめ(商品のみ)　＆　Mサイズ(商品のみ)　＆　かわいい(商品のみ)
→上記の場合は可能です

上記でよろしい場合、表示は

＝＝＝＝
□ちいさめ
□Mサイズ
□かわいい

検索（テキストリンク）
商品名のみで検索（テキストリンク）
＝＝＝＝
検索 → クリックで説明文等も対象にした検索結果にリンク
商品名のみで検索 → クリックで商品名のみ対象とした検索結果にリンク

といった形式でよろしいでしょうか。

Answer

ちいさめ(商品のみ)　＆　Mサイズ(商品のみ)　＆　かわいい(商品のみ)

こちらの、すべて商品名のみを対象にした検索結果で間違いありません。

　＝＝＝＝
　□ちいさめ
　□Mサイズ
　□かわいい

　検索（テキストリンク）
　商品名のみで検索（テキストリンク）
　＝＝＝＝
　検索 → クリックで説明文等も対象にした検索結果にリンク
　商品名のみで検索 → クリックで商品名のみ対象とした検索結果にリンク
これでお願いいたします。

Answer

>> 3.既にチェックが入った状態のチェックボックス
>> あらかじめチェックが入っていて、そこから不要なものを削除していくイメージです。

>htmlのタグに onload="clickBtn1()" の
>追加をお願いします。

>
>↓
>

htmlのタグというのは、どこの事になるのでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> ちいさめ(商品のみ)　＆　Mサイズ(商品のみ)　＆　かわいい(商品のみ)
> 
> こちらの、すべて商品名のみを対象にした検索結果で間違いありません。

修正したコードを下部に記載しました、
こちらに差し替えをお願いいたします。

> htmlのタグというのは、どこの事になるのでしょうか。

htmlページを作成いただくには
https://codemy-lesson.office-ing.net/archives/402
のような構造が必要になります。

こちらに記載されている

を

と変更して頂く必要がございます。


以下修正したコードになります。


     赤
     青
     黄
 

検索
商品名で検索


function clickBtn1() {
const sid = '261122'; // ショップIDを入力
const arr1 = [];
const keyword = document.form1.keyword;

for (let i = 0; i < keyword.length; i++) {
if (keyword[i].checked) { //(keyword[i].checked === true)と同じ
arr1.push(keyword[i].value);
}
}
let link = document.getElementById('link');
let linkitem = document.getElementById('linkitem');
let url = 'https://search.rakuten.co.jp/search/mall/' + decodeURI(arr1.join('+')) + '/?sid=' + sid;
link.setAttribute('href', url);
console.log(url)
linkitem.setAttribute('href', url + '&sf=1');
}

Answer

チェックボックスではなくラジオボタンにして検索をかけようと思います。

HTMLの形にしてアップロードしてみたのですが、うまくいきません。
チェックを入れて検索ボタンを押しても検索結果ではなく同じページに行ってしまいます。

どこがおかしいでしょうか。
よろしくお願いいたします。

アップロードしたページ
https://www.rakuten.ne.jp/gold/kamimon/goshuinchou-sentaku.html

HTML



    
    
    楽天市場 御朱印帳を選ぶ


    楽天市場
    御朱印帳を選ぶ
    
サイズを選ぶ


    
     
    
    
     
        M　(11×16cm)

      L　(12×18cm)

     指定しない 
    

カバーの有無を選ぶ

      カバー付き

      カバーなし

      指定しない
     

雰囲気を選ぶ

  かわいい

  かっこいい

  珍しい

  無地

  指定しない





検索
商品名で検索



    function clickBtn1() {
    const sid = '348629'; // ショップIDを入力
    const arr1 = [];
    const keyword = document.form1.keyword;
    
    for (let i = 0; i < keyword.length; i++) {
    if (keyword[i].checked) { //(keyword[i].checked === true)と同じ
    arr1.push(keyword[i].value);
    }
    }
    let link = document.getElementById('link');
    let linkitem = document.getElementById('linkitem');
    let url = 'https://search.rakuten.co.jp/search/mall/' + decodeURI(arr1.join('+')) + '/?sid=' + sid;
    link.setAttribute('href', url);
    console.log(url)
    linkitem.setAttribute('href', url + '&sf=1');
    }

Answer

ECマスターズの伊藤です。

> チェックボックスではなくラジオボタンにして検索をかけようと思います。
> 
> HTMLの形にしてアップロードしてみたのですが、うまくいきません。
> チェックを入れて検索ボタンを押しても検索結果ではなく同じページに行ってしまいます。
> 
> どこがおかしいでしょうか。

ラジオボタンの場合は、
先述している方法では
ご対応いただくことができません。

JSの書き換えが必要になり、
作成にお時間がかかるため、
ラジオボタンで動作する
ページの作成をご希望の場合は

グループ会社となります

EC WORKS
https://ec-works.co.jp/

にご依頼をご検討くださいませ。

Answer

そうなのですね。
承知いたしました。

検討させていただきますが、
まずはチェックボックスにて作りたいと思います。
ですが上記タグをチェックボックスに変えてもうまくいきません。

どこが間違っているのでしょうか。

Answer

ECマスターズの伊藤です。

> 検討させていただきますが、
> まずはチェックボックスにて作りたいと思います。
> ですが上記タグをチェックボックスに変えてもうまくいきません。

わたしからお送りしているタグが
問題なく動作するか、ご確認くださいませ。

問題なく動作する場合は、
一気に変更せず、
すこしずつ変更しながら、
動作のご確認をお願いいたします。

躓いた箇所がございましたら、
その時点のタグをご連絡くださいませ。

Answer

お送りいただいたタグそのままでも、検索画面に飛びません。
おなじ画面が表示されます。
あらかじめ入っているチェックを1つでも外すと検索されます。

また、あらかじめチェックを入れておくかどうかは選択肢によって変えたいので、
基本はチェックなしの状態にしたいです。

長くなってしまい大変申し訳ありません。
何卒よろしくお願いいたします。

※間違えて解決済みを押してしまいました。

Answer

ECマスターズの伊藤です。

> お送りいただいたタグそのままでも、検索画面に飛びません。
> おなじ画面が表示されます。
> あらかじめ入っているチェックを1つでも外すと検索されます。


を

に変更するご対応がいただけていないようですので、
ご確認くださいませ。


> また、あらかじめチェックを入れておくかどうかは選択肢によって変えたいので、
> 基本はチェックなしの状態にしたいです。

inputにcheckedが記述されていると、
チェックが入るようになりますので、
内容にあわせて修正をお願いいたします。

チェックあり
 赤
チェックなし
 赤


> ※間違えて解決済みを押してしまいました。

こちら、解決済みを取り消しいたしました。

Answer

チェックなしの状態にしたら、検索結果に飛ぶようになりました。
ありがとうございます。

先は長そうですが、ひとまず解決とさせていただきます。
知識不足でご迷惑をおかけしてしまい大変申し訳ありませんでした。

丁寧に教えてくださり誠にありがとうございました。


>こちら、解決済みを取り消しいたしました。
すみません。ありがとうございます。

Answer

ECマスターズの伊藤です。

> チェックなしの状態にしたら、検索結果に飛ぶようになりました。
> ありがとうございます。

無事、検索結果に飛ぶようになったようで良かったです。

> 先は長そうですが、ひとまず解決とさせていただきます。
> 知識不足でご迷惑をおかけしてしまい大変申し訳ありませんでした。

とんでもございません、
またご不明な点がございましたら
ご相談くださいませ。