(1)商品一覧の商品にカーソルを乗せると、「カートに入れる」がボタンとして表示されるように変更。
対象:IBN4001(ver.4.0.51)、IBN4002(ver4.0.52)、IBN4003(ver4.0.51)共通
■style.css
「カートボタン」のコードの下に追加。
/* カートボタン */ .ec-shelfGrid .ec-blockBtn--action { height:46px; line-height:46px; font-size: 14px; }
↓【追加】
/* カートボタン */ .ec-shelfGrid .ec-blockBtn--action { height:46px; line-height:46px; font-size: 14px; } @media only screen and (min-width: 768px){ .ec-shelfGrid .ec-blockBtn--action { background:none; color:#999; } li.ec-shelfGrid__item:hover .ec-blockBtn--action { border:1px solid #999; } li.ec-shelfGrid__item:hover .ec-blockBtn--action:hover { background:#DE5D50; border:1px solid #DE5D50; color:#FFF; } }
(2)スマホ閲覧時、商品詳細ページのメイン画像(slick.js)をピンチアウトできるようにする。(オリジナルEC-CUBEにも適用できます)
対象:IBN4001(ver.4.0.51)、IBN4002(ver4.0.52)、IBN4003(ver4.0.51)共通
■style.css
最後に追加
/* ================================= slick.jsのスライドショーで、スマホによるピンチイン・アウトを可能にする ================================= */ .slick-slider { -ms-touch-action:auto; touch-action:auto; }
(3)商品が多数購入された時、ヘッダー部のカートブロックにスクロールバーを表示する。
対象:IBN4001(ver.4.0.51)
① ■style.css
9298行目付近、overflow:auto; 追加
/* 展開 */ @media only screen and (min-width: 768px){ .ec-cartNaviIsset { margin-top: 12px; min-width: 400px; max-width: 400px; right:-20px; border:1px solid #999; background: #fff; } ↓【追加】 1 /* 展開 */ @media only screen and (min-width: 768px){ .ec-cartNaviIsset { margin-top: 12px; min-width: 400px; max-width: 400px; right:-20px; border:1px solid #999; background: #fff; overflow:auto; }
② ■default_frame.twig
最後の方に追加
{# ▼ブラウザの高さとカート #} <script> if (window.matchMedia('(min-width:768px)').matches) { $('.ec-modal').click(function() { var h = $(window).height(); $('.ec-cartNaviIsset').css('max-height', (h-40) + 'px'); }); $(window).on('load',function(){ var h = $(window).height(); $('.ec-cartNaviIsset').css('max-height', (h-40) + 'px'); }); $(window).on('resize',function(){ var h = $(window).height(); $('.ec-cartNaviIsset').css('max-height', (h-40) + 'px'); }); } </script>