futureshop FAQ

本サイトは、弊社サービス「futureshop」ご契約店舗様用のFAQサイトです。
お困り事やご不明点等ございましたら、お気軽にフューチャーショップサポートまでご連絡ください。

  • 電話でのお問合せ番号(平日10:00~17:00)
  • メールでのお問合せ
  • 文字サイズ変更
  • S
  • M
  • L
  • No : 274
  • 公開日時 : 2017/10/06 20:17
  • 更新日時 : 2019/12/25 14:00
  • 印刷

商品ページの右下に、「カートボタンへ移動」を固定表示したいです。

回答

コマースクリエイター未利用店舗様専用の記事です

ブラウザの右下に「カートボタンへ移動」を固定表示し、縦長の商品ページでもすぐにカートボタン付近に移動する設定をご案内します。


※PC版のみ実現可能です。

 

▼設定例

目次

Step1. 商品の価格上部コメントにHTMLを記述する

Step2. オリジナルCSS/JavaScriptに追記する

Step3. ボタン画像を画像ファイル管理に登録する

Step4. コメントパターンを作成し、商品詳細ページに設置する

 

Step1. 商品の価格上部コメントにHTMLを記述する

運用メニュー>商品管理>商品基本情報編集>上級デザイン の「価格上部コメント」にて、

□ HTMLタグを使用する にチェックを入れて、下記を入力してください。

<div id="cart"></div>


 

全商品に記述する場合は、一括登録も可能です。

CSV一括データマニュアル

 

Step2. オリジナルCSS/JavaScriptに記述する

構築メニュー>デザイン設定>編集>オリジナルCSS/JavaScript編集 にて、以下2つを記述してください。


オリジナルCSS編集に下記を記述してください。
(※既に記述がある場合は、最下部に追記)

#cart_img {
bottom : 0px;
right : 0px;
padding : 0px;
margin : 0px;
position : fixed;
zindex : 500;
}

 

オリジナルJavaScript編集に下記を記述してください。
(※外部読み込みにする場合は、JavaScriptファイルをSSLサーバにアップロードし、document.write()にて読み込んでください。)

/* Smooth scrolling*/
var ss = {
fixAllLinks: function() {
// Get a list of all links in the page
var allLinks = document.getElementsByTagName('a');
// Walk through the list
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf('#') != -1) &&

( (lnk.pathname == location.pathname) || ('/'+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
// If the link is internal to the page (begins in #)
// then attach the smoothScroll function as an onclick
// event handler
ss.addEvent(lnk,'click',ss.smoothScroll);
}
}
},

smoothScroll: function(e) {
// This is an event handler; get the clicked on element,
// in a cross-browser fashion
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;

// Make sure that the target is an element, not a text node
// within an element
if (target.nodeName.toLowerCase() != 'a') {
target = target.parentNode;
}

// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != 'a') return;

// Find the <a name> tag corresponding to this href
// First strip off the hash (first character)
anchor = target.hash.substr(1);
// Now loop all A tags until we find one with that name
var allLinks = document.getElementsByTagName('a');
var destinationLink = null;
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk;
break;
}
}
if (!destinationLink) destinationLink = document.getElementById(anchor);

// If we didn't find a destination, give up and let the browser do
// its thing
if (!destinationLink) return true;

// Find the destination's position
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}

// Stop any current scrolling
clearInterval(ss.INTERVAL);

cypos = ss.getCurrentYPos();

ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',1);

// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
},

scrollWindow: function(scramount,dest,anchor) {
wascypos = ss.getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss.getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we've just scrolled past the destination, or
// we haven't moved from the last scroll (i.e., we're at the
// bottom of the page) then scroll exactly to the link
window.scrollTo(0,dest);
// cancel the repeating timer
clearInterval(ss.INTERVAL);
// and jump to the link directly so the URL's right
location.hash = anchor;
}
},

getCurrentYPos: function() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (window.pageYOffset)
return window.pageYOffset;
return 0;
},

addEvent: function(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
}

ss.STEPS = 50;//ここの数字で速さを調整します。小さくなるほど早くなります。

ss.addEvent(window,"load",ss.fixAllLinks);


//$(document).ready(function() {
// $("body").ScrollToAnchors(1000);
//});
 

Step3. ボタン画像を登録する

構築メニュー>デザイン設定>画像ファイル管理 にて、
ページ右下に表示するボタン画像をに登録します。

 

※画像ファイルをFTPサーバにアップロードして利用することもできます。

 

Step4. コメントパターンを作成し、商品詳細ページに設置する

構築メニュー>ページ設定>コメントパターン一覧 にて、
「パターン新規登録」をクリックします。


□ HTMLタグを使用する にチェックを入れて、下記を入力したコメントパターンを作成してください。

<p id="cart_img"><span style="z-index:500;"><br/> <a href="#cart"><img src="画像ファイル名" alt="カートへ" border="0"></a><br/> </span></p>
■「画像ファイル名」部分について
Step3にて画像ファイル管理に画像をアップロードした場合、
/shop/item/店舗KEY/design/img**/画像名 で記述します。
(店舗KEY、img**、画像名は、適宜変更してください。もしくは画像ファイル管理画面のコピー機能を利用してください。)
 

次に、作成したコメントパターンを設置します。

構築メニュー>ページ設定>各ページ設定
「商品」タブ内「商品詳細」の上部もしくは下部にて、作成したコメントパターンを選択して登録します。

 

以上で、ブラウザ画面の右下に常に「カートボタンへ移動」が表示されます。

スムーズに解決できなかった場合、記事改善のため解決できなかった理由をお聞かせください。

ご意見・ご感想をお寄せください お問い合わせを入力されましてもご返信はいたしかねます

フューチャーショップサポート

「虎の巻」でお悩みが解決できない場合や、ご不明点等がございましたらお気軽にご連絡ください。

  • お電話でのお問い合わせ(平日10:00~17:00)お電話でのお問い合わせ(平日10:00~17:30)
  • メールフォームをご利用くださいお問い合わせフォーム

※弊社サービスと類似した名称の通販サイトとの問い合わせ先間違いが増えております。
 弊社では通販サイトの運営は一切行っておりません。

ページ
トップへ