2016年11月13日
【カラーミー】「カートに入れる」を複数設置する方法
ネットショップの作成・運営が簡単にできる人気のサービス「カラーミーショップ」ですが、商品を購入するページで、標準では「カートに入れる」ボタンが1つしか置けません。
スマートフォン等、ページが長くなるときに上下2つ設置したい場合があると思います。その方法をメモメモ。
▼テンプレート「商品詳細」
<form name="product_form" method="post" action="<{$cart_url}>"> (中略) <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }> <tr> <th>購入数</th> <td style="padding: 0px 5px;"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding: 0px;"> <input type="text" name="product_num" value="<{$product.init_num}>" style="width: 50px;" onKeyUp="change_key_num()"/> </td> <td style="padding: 0px;"> <div style="width: 15px; margin: 0px;"> <a href="<{$num_up_url|regex_replace:'/f_change_num2/':'change_button_num'}>"><img src="<{$num_up_img_url}>"></a> <a href="<{$num_dw_url|regex_replace:'/f_change_num2/':'change_button_num'}>"><img src="<{$num_dw_img_url}>"></a> </div> </td> <td style="padding: 0px;"><{$product.unit}></td> </tr> </table> </td> </tr> <{/if}> (中略) <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false }> <tr> <th>購入数</th> <td style="padding: 0px 5px;"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="padding: 0px;"> <input type="text" name="product_num2" value="<{$product.init_num}>" style="width: 50px;" onKeyUp="change_key_num2()" /> </td> <td style="padding: 0px;"> <div style="width: 15px; margin: 0px;"> <a href="<{$num_up_url|regex_replace:'/f_change_num2\(document.product_form.product_num/':'change_button_num(document.product_form.product_num2'}>"><img src="<{$num_up_img_url}>"></a> <a href="<{$num_dw_url|regex_replace:'/f_change_num2\(document.product_form.product_num/':'change_button_num(document.product_form.product_num2'}>"><img src="<{$num_dw_img_url}>"></a> </div> </td> <td style="padding: 0px;"><{$product.unit}></td> </tr> </table> </td> </tr> <{/if}> (中略) </form>
▼JavaScript
function change_key_num(){ document.product_form.product_num2.value = document.product_form.product_num.value; } function change_key_num2(){ document.product_form.product_num.value = document.product_form.product_num2.value; } //*********************************** //個数UP・DOWNボタン処理(差し替え版) //*********************************** function change_button_num(select, pType, pMinNum, pStockNum) { if( select.value.match(/[^0-9]/)){ select.value = pMinNum; return; } wNum = parseInt(select.value); if (pType == "0" && wNum > pMinNum) { document.product_form.product_num.value = String(wNum-1); document.product_form.product_num2.value = String(wNum-1); } if (pType == "1") { if (pStockNum) { if (wNum >= pStockNum) return; } document.product_form.product_num.value = String(wNum+1); document.product_form.product_num2.value = String(wNum+1); } }
さらにサイズやカラーなどのオプション項目も連動させる方法をメモメモ。
▼テンプレート「商品詳細」
<!--1つ目--> <{section name=num loop=$option}> <div class="cell_mar"> <select name="<{$option[num].select_name}>" onchange="option_change(<{$option[num].id}>, 1)" id="s<{$option[num].id}>1"> <option value="">選択してください</option> <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key }> </select> </div> <{/section}> <!--2つ目--> <{section name=num loop=$option}> <div class="cell_mar"> <select name="<{$option[num].select_name}>2" onchange="option_change(<{$option[num].id}>, 2)" id="s<{$option[num].id}>2"> <option value="">選択してください</option> <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key }> </select> </div> <{/section}>
▼JavaScript
<script type="text/javascript"> <!-- function option_change(oid, p){ if(p==1){ var n = $("#s" + oid + "1")[0].selectedIndex; $("#s" + oid + "2")[0].selectedIndex=n; } else if(p==2) { var n = $("#s" + oid + "2")[0].selectedIndex; $("#s" + oid + "1")[0].selectedIndex=n; } } // --> </script >
関連記事
-
【CSS】BODY内で外部CSSを読み込む方法
【CSS】BODY内で外部CSSを読み込む方法
<head>内を変更できない場合、<body>の中で<link>を使ってCSSを読み・・・ -
【PHP】ユーザエージェント(デバイス)判定をして処理を行う方法
【PHP】ユーザエージェント(デバイス)判定をして処理を行う方法
PC・スマートフォン・タブレット等のユーザーエージェント(デバイス)を判定して、処理を行う方法をメモメモ。 ▼ユーザーエ・・・ -
【WordPressプラグイン】「MW WP Form」のよく使う便利なTIPS(利用規約・日付ピッカー・URLパラメーター等)
【WordPressプラグイン】「MW WP Form」のよく使う便利なTIPS(利用規約・日付ピッカー・URLパラメーター等)
日ごろから大変お世話になっている「MW WP Form」。 言わずとも、柔軟にメールフォームを作成することがプラグインで・・・ -
【Web】postion:fixedだけど、スクロールしたい。しかもスクロールバーは非表示
【Web】postion:fixedだけど、スクロールしたい。しかもスクロールバーは非表示
「positon:fixed」だけどスクロールしたい、しかもスクロールバーバ非表示にしたい場合のメモメモ。 ▼HTML ・・・ -
【WordPressプラグイン】「MW WP Form」でチェックを入れたら入力ができるようになる項目を作成する方法
【WordPressプラグイン】「MW WP Form」でチェックを入れたら入力ができるようになる項目を作成する方法
簡単にフォームが作成でき、確認・完了画面や入力エラーメッセージのカスタマイズ、ファイルの送信機能などなど、いつも大変お世・・・ -
【JS】jQueryでブラウザの画面サイズで処理を判定する方法
【JS】jQueryでブラウザの画面サイズで処理を判定する方法
レスポンシブサイト等で、スマホのときには特定の処理をして、PCの場合は処理をしたくない場合がありますよね。 例えば、スマ・・・