EC-CUBE4.0系デザインテンプレートの修正内容

(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>