カラーミースマホカスタマイズその②

Question

お世話になります。

カラーミー　スマホサイトについて引き続き、ご指導をお願いいたします。

①スマホで表示される商品画像ですが、拡大用商品画像サイズ(商品その他画像用)が説明文の後に表示されています、これを楽天のように商品画像のところでスライド式に表示させたいのですが。

②カラーバリエーションがある場合、バリエーションの表示・価格のみの表示になっている部分を可能であれば、選択できカートに入れることが出来るように したい。


カラーミー内で、制作パートナーとして業者がありますが、どうかな・・・って思いますし、最初にサイトを作っていただいたところにお願いしたところに言えばしてもらえますが、このようなことをするのは、できれば、ご指導をいただいて自分でしたいのですが、HTMLやCSSのことがほとんど分かっていないので、やはり業者にしてもらうことでしょうか。

Answer

ECマスターズの田中です。

それぞれ、特殊タグとjQueryを駆使して
実現できる方法がないか確認中ですので、
回答まで今しばらくお待ちください。

＞このようなことをするのは、できれば、ご指導をいただいて自分でしたいのですが、HTMLやCSSのことがほとんど分かっていないので、やはり業者にしてもらうことでしょうか。
今回いただいたご希望の内容も、
HTML、CSS、JavaScript、jQueryを駆使した処理が主になりますので、
既に使い方を理解している業者にご依頼いただくのが早いとは思いますが、

keiさんにてこれらの技術の使い方をご理解いただき、
ご希望のパーツを作成していただける知識をつけていただいた方が、

万が一既存のパーツに不具合が発生した場合の対応もすぐに行うことができますし、
こんなこともできるのでは、というアイデアが浮かびやすくなったり、
逆にこの処理を無理やり入れると以後不具合が起きそうだという判断ができるようになったりと、
様々な可能性が生まれてまいります。

楽天大学でも、コーディングを学ぶ意義の段階から、
動画によるわかりやすい説明が用意されており、
カラーミーでも応用できる内容となっておりますので、

まずは、下記URLの動画をご覧いただき、
https://daigaku.rms.rakuten.co.jp/rmsapp/watch/30252
同ページ下の「HTML基礎」から、１つずつ講座をご覧いただければと思います。

Answer

ECマスターズの田中です。

回答までにお時間をいただき、ありがとうございました。
改めて、具体的な方法をご案内いたします。


＞①スマホで表示される商品画像ですが、拡大用商品画像サイズ(商品その他画像用)が説明文の後に表示されています、これを楽天のように商品画像のところでスライド式に表示させたいのですが。

現在商品説明の中でご利用いただいている、
jQueryプラグイン「FlexSlider」を流用していただくと
わかりやすいかと思います。

FlexSliderにてスライドする画像をご設定いただく際は
カラーミーショップの特殊タグをご利用ください。

= この下の行から ====================






= 1}>






= 2}>






= 3}>
（以下略）
= この上の行まで ====================

このように、ifタグをご利用いただくことで、
その他画像が存在する分だけ、
タグを実際のHTMLにご記載いただくことができます。


＞②カラーバリエーションがある場合、バリエーションの表示・価格のみの表示になっている部分を可能であれば、選択できカートに入れることが出来るように したい。

バリエーションの部分をタップしていただくと、
バリエーションが自動的に選択された状態で
「カートに入れる」ボタンの位置までスクロールする、
という処理はいかがでしょうか。

商品詳細テンプレート、
「jquery-*.*.*.min.js」(*は数字、keiさんの場合はjquery-1.7.2.min.js)を
読み込ませるタグより後方に、
下記タグをご記載いただき、
動作をご確認いただけますでしょうか。

= この下の行から ====================

/* バリエーション表示から選択可能に */
$(function(){
$('#option_area2 table tr').click(function(){
$('select[name="option1"]').val(
$('select[name="option1"] option:nth-child(' + ($('#option_area2 table tr').index(this) + 1) + ')').val()
);
$('html,body').animate({scrollTop:$('.dtl_tbl').offset().top});
});
});

= この上の行まで ====================

Answer

お世話になります。

お忙しい中、いろいろとありがとうございます。

①と②は、スマホ用のテンプレート、デザイン設定の商品詳細の部分に上記のタグを貼り付ければいいのでしょうか。

Answer

ECマスターズの田中です。

＞①と②は、スマホ用のテンプレート、デザイン設定の商品詳細の部分に上記のタグを貼り付ければいいのでしょうか。
はい、その通りです。
①は商品画像と入れ替える形で、
②は先述の通り、jQueryよりも後の位置にご記載をお願いいたします。

その際は、問題が発生した場合にもとに戻せるよう、
テキストファイルなどに既存の状態を保存していただいてから
ご変更いただきますようお願いします。

カラーミー スマホ カスタマイズその②

カラーミースマホカスタマイズその②