• ベストアンサー

ショッピングサイトの作成

http://codezine.jp/article/detail/3908 このページを参考に、ECサイトの作り方を学習しようと思いました。 そこで疑問点がでてきました。 流れとして、 　1.商品一覧ページ　で　購入したい商品を選択(ボタンによる選択) 　2.1で選択した、商品の詳細画面が出てくる。(ボタンを押すことで、カートに入る。) ここで気になったことが、 　1.の時に、商品一覧ページで　ボタンを押した時に、javascriptによるonclick処理が走っています。 　2.の時には、Fromによるsubmit　処理が走っています。 質問：基本ECサイトでの画面遷移は、「Formタグで起こすもの」と思っていたのですが、上記のような「商品一覧」　から　「商品詳細に画面を繊維する際」には、onclick、アイテムの確定にFormを使うほうがいいのでしょうか。 javascriptを無効にしてる人たちは、onclickが無効化されて、ECサイトとしてまずいのではと思いました。 どなたかお分かりの方がいられましたら ご教授お願いします。

  • PHP
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • shimix
  • ベストアンサー率54% (865/1590)
回答No.1

>1.の時に、商品一覧ページで　ボタンを押した時に、javascriptによるonclick処理が走っています。 なぜそう判断されたのでしょうか？anchor要素で商品コードを引き渡してページ遷移しているように思えます。 http://nextia.jp/tmp/ec/item_list.php5 http://nextia.jp/tmp/ec/item_detail.php5?code=1001 なお（当然ですが）JavaScriptを使う場合には「無効な場合でも破綻しない」ように作成するのが基本です。

ShiftTail
質問者

お礼

情報ありがとうございます。 応用の一番初めのソースにはonclickが入っていてjavascriptが無効になった場合 システムとして成り立たないと思ったのです。 ただ、 >JavaScriptを使う場合には「無効な場合でも破綻しない」ように作成するのが基本です。 これがやはり基本ですよね。 情報ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

  • javascriptで次のような事がしたいのですが、どの様にすれば良い

    javascriptで次のような事がしたいのですが、どの様にすれば良いのかわかりません。 Ｗｅｂサイト制作をしているのですが、次の様に出来たら便利と思い、今回初めて質問させて頂きます。 例えばECサイトを次の流れで閲覧していたとします。 (1)　商品一覧ページ 　　　↓一覧の中の気になった商品Ａをクリック (2)　商品Ａの詳細ページ 　　　↓ (3)　ブラウザの戻るボタンで(1)のページに戻る この様な場合、(3)で(1)に戻った時に、一覧ページがヘッダー部分（通常画面上部）から表示されます。 一覧の商品を順番に閲覧　→　気になる商品Ａが目に留まる　→　商品Ａをクリック　→　 商品Ａ詳細を閲覧　→　ブラウザの戻るボタンで一覧に戻る　→　一覧で続きの商品を見る といった流れで見ている場合、商品Ａが一覧の下の方に掲載されていた場合（また商品一覧の数が多い場合）続きの一覧商品を閲覧するのに、スクロールしなければなりませんので、 何度も繰り返していると、わずらわしくなってきます。 出来れば、クリックして商品Ａの詳細を見た後、ブラウザで一覧ページに戻った時に 商品Ａの場所に移動出来れば閲覧者の方に親切だと思います。 その様に作ってあるサイトを以前に見た事があったのですが、どのサイトだったか忘れてしまいました。 多分、javascriptでしてあるのだと思いますが、私はjavascriptは書けません。 prototypeやjQueryを使用して出来るのでしたら、どのライブラリを使用すれば良いのかとか教えて頂けませんでしょうか？ また、javascriptで作るのではない場合は、何を使えば良いのか・・・から親切に教えて頂ければ助かります。

  • WEBブラウザで、ページを戻っても最後に表示したタブ切替コンテンツ（javascriptで作成）を表示する方法を教えてください。

    javascriptで、ページ遷移せずに内容をタブ切替できるページを作成していますが、別ページへリンクしたあと、ブラウザでの「戻る」やjavascriptの「history.back」で戻ったときにタブコンテンツが最後の状態で表示できる方法がありましたら教えてください。 そのページはECサイトの商品紹介のページで、一覧のカテゴリをタブで切り替えられるようにしています。 一覧から詳細ページへ遷移し、そこから一覧へ戻った時に、最後に見ていた内容がリセットされてしまうことを回避したいです。 ユーザーはついさっきまで見ていた内容にたどり着くまでに不要な煩わしさが生じてしまうので良くないのです。 どうぞよろしくお願いいたします。

  • HTML、Javascriptでトグルボタンを作成する方法について質問

    HTML、Javascriptでトグルボタンを作成する方法について質問です。 自分が考えた動作としては ひとつのform内に複数のボタンを設置　初期値(表示)は"有効" ボタンを押すと値(表示)が"無効"に変わる もう一度押すと"有効"に変わる これの繰り返しがしたい というものです。 書いたコードは <javascript部分> function dspmsg(btnObject){ status = btnObject.value; if(status=="有効"){ document.btnObject.value = "無効"; }else{ document.btnObject.value = "有効"; } } <html部分> <form> <input type="button" name="yuko_FLG1" value="有効" onclick="dspmsg(this)" /> <input type="button" name="yuko_FLG2" value="有効" onclick="dspmsg(this)" /> ・・・・・ </form> 当然のことながら動きませんでした。 自分でも間違っていることはわかるのですが、修正の仕方がわかりません。 よろしくお願いします。

  • URLにパラメータがついてしまうんです・・・

    何方か英知をお貸し下さいませ。。。 (要望) web画面にコンボボックスが一つ有り、商品コード+商品名(例.100　ポルシェ)を一つ選択した状態で、更新か削除ボタンを押して、変更したり、削除したりしたい。 つまり、formの送信先をボタンによって変えたいのです。 (現状) 以下のjavascriptソースをservletに埋め込んでいるのですが、URLにパラメータがひっついてしまって、各処理実行クラスにうまくpostされません。 例.http://****/Servlet/**?box=100%A%A%D%B%S%S ~~~~~~~~~~~~~~~~~~~~ ----<HEAD>----- <script language="JavaScript"> <!-- function update() { 　　document.formname.action="変更処理実行class"; 　　 } function delete() { 　　document.formname.action="削除処理実行class"; 　　 } --> </script> ----</HEAD>----- <form method="post" name="formname"> 　　ここにコンボボックス </form> ボタンには <input type="submit" value="update" onClick="update()"> <input type="submit" value="delet" onClick="delete()"> としています。 各処理実行classでgetParameter()して、コンボボックスで選択した値を取得するようにできませんでしょうか？ よろしくお願いします。

  • .NET(VB)でボタンの連打を防止する方法

    お世話になります。 以前開発したVB.NETのアプリケーションでボタン(submit)を連打すると「ページを表示できません。現在、多数の人が Web サイトにアクセスしています。」という現象が出てその対応策を考えています。 実際にはボタンのクリック連打ではなく、ボタンにフォーカスを当ててキーボードのリターンキーを押しっぱなしにするとリクエストが何度もサーバーへ送られて上記のような現象となります。 対応策としてボタンが押された瞬間にJavaScriptでフラグをONにし、そのフラグがONである間は次のJavaScript:onClickイベントをreturn falseするような作りとしてみました。 ボタンは何個かあり、submit後の処理に時間が掛かるもの（情報検索）はそれで対応できたのですが比較的応答が早い処理（検索条件フォームのクリア機能）ではやはり同様のエラーとなってしまいます。 JavaScriptを使い、ボタンそのものを無効化（form.ボタン名.disabled = false）を試みましたが.netの場合はボタンを無効化させるとサーバーサイド(VB)でのpage_load処理が止まってしまうようで無応答となります。 押した瞬間にボタンを無効化させて見た目にも押した状態を表現できるのが一番好ましいのですが、連打を防止しつつボタンを無効化させる方法は無いでしょうか？ また、ボタン無効化は無理としても他に連打の対応策がありましたらご教示願えたらと思います。

  • ボタンを動的にdisabledさせたいのですが

    お世話になります。 ある画面に複数ボタンがあって 押されたボタンをdisabledにしたいなと思っています。 ただしどのボタンがおされても同じ関数に飛んでほしいのですが いまいち解決できません。 <form name="form"> <input type="button" name="syori1" value="ボタン1" onClick="javascript:hogehoge()"> <input type="button" name="syori2" value="ボタン2" onClick="javascript:hogehoge()"> <input type="button" name="syori3" value="ボタン3" onClick="javascript:hogehoge()"> </form > とあった場合 function hogehoge(){ document.form.ボタンの名前.disabled=true; } としたいのですが 名前の部分は動的に変えることは可能なのでしょうか？ 普通に document.form.syori1.disabled=true; と書けば簡単なのですが、ボタンの数が決まっていないためボタン名を指定して書くことはできません。 ボタン名は onClick="javascript:hogehoge(document.form.ボタンの名前.name)" で、送ることができるのは確認したのですが hogehoge(ボタンの名前) の方でどうやってdisabledのところに入れればいいか解りません。 よろしくお願い致します。

  • JavaScriptで簡易お買い物サイト

    すっかり、JavaScriptを忘れてしまっていて、それでも即答が求められているので質問させていただきます。 PHPやCGIは使用することは出来ない状態で簡易お買い物サイト制作を依頼されました。PHPやCGIが使用出来ないってことはJavaScriptしか使えない？と思っています。このようなサイト構築はJavaScriptだけで可能でしょうか？（cookieを使用する予定です）ご教授いただけると助かりますのでよろしくお願いいたします！ 流れはこんな感じです。 １）商品ページ（商品の詳細の掲載されているページ）＋「注文」ボタン 注文ボタンをクリック ２）注文ページ（メールフォームで最終的には送る） 　　商品名（※）、単価（※）、個数（デフォルトで1個。セレクタで選べるようにする）、削除ボタン 　　（※）商品ページの「商品名」「単価」が自動表示 　　合計金額が自動反映 　　注文に必要なテキストフィールド（送り先住所やお名前など） 　 他に欲しい商品があれば商品ページに戻って注文ボタンをクリックして追加していく仕組みです。

  • ショッピングサイトにピッタリなＣＭＳを教えてください。

    お世話になります。 htmlやCSSなどの知識が全くなスタッフでもサイト更新ができるような CMSを探しております。なお、一つの商品ページに複数のショッピング カートが設置できるものが理想です。 EC-CUBEやZEN-ZARTなどは、ショッピングサイトに向いているよう ですが、１ページに複数のカートを設置できなかったので、 導入を断念した経緯があります。 １０００アイテムほどありますので、商品情報をCSVファイルに 書いてアップロードすれば商品ページが生成されていくものが 理想です。 どなたかご存知の方はいらっしゃいませんか。 アドバイスよろしくお願いいたします。

    • 締切済み
    • PHP
  • javaで　name=id［?］　を指定する方法とは？

    ショップ運営で、商品一覧から＋－ボタンでそれぞれ数の増減をさせるよう、ほかのサイトを参考にして下記のようにjavascriptで記述してみました。 このうち、商品２と３はボタンが機能したのですが、商品１は数の増減ができません。 おそらく要素名に（name=id[1]）と［］で囲っているからだと思うのですが、この［］を取らないまま、ボタンを機能させる方法はありますでしょうか？ よろしくお願いします。 <FORM> 商品１：<INPUT type=text name=id[1] value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id[1])"> <INPUT type=button value="－" onClick="minus(this.form.id[1])"> <BR> 商品２：<INPUT type=text name=id2 value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id2)"> <INPUT type=button value="－" onClick="minus(this.form.id2)"> <BR> 商品３：<INPUT type=text name=id3 value=3 size=4> <INPUT type=button value="＋" onClick="plus(this.form.id3)"> <INPUT type=button value="－" onClick="minus(this.form.id3)"> </FORM> <SCRIPT language="JavaScript"> <!-- function plus(chk){chk.value++; if (chk.value==6) {chk.value=5} } function minus(chk){chk.value--; if (chk.value==0) {chk.value=1} } // --> </SCRIPT>

  • ショッピングカートの不具合

    あるフリーサイトのショッピングカートが機能面で気に入り 使用させていただこうと思ってるのですが、 1点だけ不具合がありどうにか直らないかと ご相談させていただきました。 設置は終わったのですが、商品一覧画面で 商品写真をクリックすると、 その商品の詳細画像が 別ウィンドウで表示され、その画面でも 「買い物かごに入れる」ボタン、 「現在のお買い物金額が表示されているのですが、 この別ウィンドウでは購入ボタンを押してもかごに反映されないのです。 そのサイトのサンプル画面でもその不具合がでていますので、 設置方法に問題はないと思います。 私のPC環境が悪いのでしょうか？ もしそうでなければこの部分だけ改善する方法を教えて下さい。 最悪、詳細画面での買い物ボタンは失くしてもよいです。 本来はそのサイト様にメールで伺えばよいのですが とにかく急いでいますのでお願いします。 以下にそのサンプル画面(CGI配布サイト様の)を記載しますので宜しくお願い致します。http://www.cgis.biz/script_web_cart/sample/web_cart/view.php

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する