テーマVOLLで商品画像サムネイルが大きくなる
- このトピックには12件の返信、2人の参加者があり、最後に
により6年、 4ヶ月前に更新されました。
-
投稿
-
——————————————-
WordPress のバージョン：4.9.6–ja
Welcart のバージョン：1.9.10ご利用のテーマ：Welcart VOLL 1.0.2
ブラウザ/OS：safari/mac10.13
——————————————–テーマ：Welcart VOLL 1.0.2
についてご質問いたします。商品詳細ページの
商品画像サムネイルがブラウザのサイズが620pxぐらいのところで
画面幅いっぱいになります。
（参考：添付ファイル）macのsafariでこの状態が起こるようです。
chrome・Firefoxでは問題ありませんでした。修正する方法をお教えください。
スクリーンショットpngだと
うまく添付できないようですね。
jpgを添付します。テーマVOLLデモページ下記URLで
スクリーンショットしています。
https://themes.welcart.info/basic-voll/?p=528ご確認よろしくお願いいたします。
症状のほう確認いたしました。
次期バージョンにて修正させていただきますので、
お急ぎの場合は、以下のテンプレートを修正くださいませ。
原因としては、
Safari のメディアクエリの解釈が異なるために起きた不具合と見られます。/お使いのテーマ（welcart_basic-voll）/js/wcct-itemsingle.js/
◆wcct-itemsingle.js 22行目あたり
$('.slider-nav').slick({ ..... });を以下のように書き換えてください。
var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('safari') !== -1 && userAgent.indexOf('chrome') === -1){ $('.slider-nav').slick({ slidesToShow: 5, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, arrows: false, centerMode: false, focusOnSelect: true, vertical: true, verticalSwiping: true, responsive: [{ breakpoint: 1000, settings: { vertical: true, verticalSwiping: true, } }, { breakpoint: 637, settings: { vertical: false, verticalSwiping: false, } }] }); } $('.slider-nav').slick({ slidesToShow: 5, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, arrows: false, centerMode: false, focusOnSelect: true, vertical: true, verticalSwiping: true, responsive: [{ breakpoint: 1000, settings: { vertical: true, verticalSwiping: true, } }, { breakpoint: 620, settings: { vertical: false, verticalSwiping: false, } }] });上記内容で、一度ご確認いただければと思います。
どうぞよろしくお願いいたします。問題解決と思われたのですが
他でエラーがでてしまいますので
もう一度ご質問いたします。教えていただいた内容を変更すると
TypeError: null is not an object
が出るのと
レビュー表示ができなくなります。以下の編集を行いました。
編集方法が間違っている場合は、ご指摘ください。wcct-itemsingle.js
14行目〜37行目までを削除し
＞以下のように書き換えてください。
の内容をペーストで問題ないでしょうか？
＞ wcct-itemsingle.js
＞ 14行目〜37行目までを削除しとございますが、
14行目から20行目の$('.slider-for').slick({ ..... });は削除しないでください。
あくまで、変更する箇所は22行目の$('.slider-nav').slick({ ..... });となります。
どうぞよろしくお願いいたします。
環境による改行の違いでしょうか？
こちらで確認している下記のファイルはwelcart_basic-voll/js/wcct-itemsingle.js/
の1行目から13行目は( function( $ ) { $( window ).load( function() { /* wc_item_single.php */ $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' });となっています。
その次の行の$('.slider-nav').slick({ });上記箇所を、お教えいただいた内容に書き換えています。
前回質問させていただいた
エラーが発生します。ご回答をよろしくお願いいたします。
教えていただいた内容は、
以下のエラーが発生します。・商品ページのレビューが表示されなくなります。
・slick.min.jsでエラーがでます。解決方法をお教えいただけますよう
お願い申し上げます。大変失礼いたしました。
welcart_basic-voll/js/wcct-itemsingle.js/
の7行目から13行目に記述してある
$('.slider-for').slick({ ..... });は削除せず、
14行目から37行目の$('.slider-nav').slick({ ..... });を上記に記したコードに修正いただければと思います。
どうぞよろしくお願いいたします。2018年7月3日 9:45 AM の 投稿を
見ていただけていますか？ご質問させていただいた最初から
$('.slider-for').slick({ ..... });上記は削除していません。
$('.slider-nav').slick({ ..... });の箇所のみを
お教えいただいた内容に書き換えています。何度もお伝えしていますが、
この編集を行うと
レビューが表示されなくなります。商品画像を複数枚入れない状態（ギャラリー機能を使わない状態）だと
レビューは正しく動作するようですので、動作確認もれがあるのかもしれませんが、
お教えいただいた内容で問題がないか、もう一度ご確認下さい。wcct-itemsingle.js編集後の全文は以下です。
( function( $ ) { $( window ).load( function() { /* wc_item_single.php */ $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('safari') !== -1 && userAgent.indexOf('chrome') === -1){ $('.slider-nav').slick({ slidesToShow: 5, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, arrows: false, centerMode: false, focusOnSelect: true, vertical: true, verticalSwiping: true, responsive: [{ breakpoint: 1000, settings: { vertical: true, verticalSwiping: true, } }, { breakpoint: 637, settings: { vertical: false, verticalSwiping: false, } }] }); } $('.slider-nav').slick({ slidesToShow: 5, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, arrows: false, centerMode: false, focusOnSelect: true, vertical: true, verticalSwiping: true, responsive: [{ breakpoint: 1000, settings: { vertical: true, verticalSwiping: true, } }, { breakpoint: 620, settings: { vertical: false, verticalSwiping: false, } }] }); if ( 620 <= $(window).width() ) { var itemmain = document.getElementById('itemimg-main').clientHeight; var itemsub = $('#itemimg-sub'); itemsub.css('height', itemmain + 'px'); } if( $('.tab-list').length ){ $('.tab-list li:first,.tab-box:first').addClass('select'); $('.tab-list li').click(function() { var num = $('.tab-list li').index(this); $('.tab-list li,.tab-box').removeClass('select'); $(this).addClass('select'); $('.tab-box').eq(num).addClass('select'); }); } } ); } )( jQuery );よろしくお願いいたします。
ご連絡が遅くなり申し訳ございません。
大変失礼いたしました。
上記症状を確認させていただきました。お使いの「wcct-itemsingle.js」を以下の内容に書き換えていただければと思います。
( function( $ ) { $( window ).load( function() { /* wc_item_single.php */ $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.slider-nav' }); var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf('safari') !== -1 && userAgent.indexOf('chrome') === -1){ $('.slider-nav').slick({ slidesToShow: 5, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, arrows: false, centerMode: false, focusOnSelect: true, vertical: true, verticalSwiping: true, responsive: [{ breakpoint: 1000, settings: { vertical: true, verticalSwiping: true, } }, { breakpoint: 637, settings: { vertical: false, verticalSwiping: false, } }] }); } else { $('.slider-nav').slick({ slidesToShow: 5, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, arrows: false, centerMode: false, focusOnSelect: true, vertical: true, verticalSwiping: true, responsive: [{ breakpoint: 1000, settings: { vertical: true, verticalSwiping: true, } }, { breakpoint: 620, settings: { vertical: false, verticalSwiping: false, } }] }); } if ( 620 <= $(window).width() ) { var itemmain = document.getElementById('itemimg-main').clientHeight; var itemsub = $('#itemimg-sub'); itemsub.css('height', itemmain + 'px'); } if( $('.tab-list').length ){ $('.tab-list li:first,.tab-box:first').addClass('select'); $('.tab-list li').click(function() { var num = $('.tab-list li').index(this); $('.tab-list li,.tab-box').removeClass('select'); $(this).addClass('select'); $('.tab-box').eq(num).addClass('select'); }); } } ); } )( jQuery );
- このトピックに返信するにはログインが必要です。
PAGE TOP