テーマVOLLで商品画像サムネイルが大きくなる

ホーム フォーラム テンプレート(テーマ) テーマVOLLで商品画像サムネイルが大きくなる

このトピックには12件の返信が含まれ、2人の参加者がいます。3 週間、 1 日前 dswdsw123456 さんが最後の更新を行いました。

13件の投稿を表示中 - 1 - 13件目 (全13件中)
  • 投稿者
    投稿
  • #85927

    dswdsw123456
    参加者

    ——————————————-
    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では問題ありませんでした。

    修正する方法をお教えください。

    #85933

    welcart
    キーマスター

    こんにちは

    申し訳ございません。
    症状が確認できませんでしたので、
    上記で添付し忘れた画像をお送りいただけますでしょうか。

    どうぞよろしくお願いいたします。

    #85945

    dswdsw123456
    参加者

    スクリーンショットpngだと
    うまく添付できないようですね。
    jpgを添付します。

    テーマVOLLデモページ下記URLで
    スクリーンショットしています。
    https://themes.welcart.info/basic-voll/?p=528

    ご確認よろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
    #85959

    welcart
    キーマスター

    症状のほう確認いたしました。
    次期バージョンにて修正させていただきますので、
    お急ぎの場合は、以下のテンプレートを修正くださいませ。
    原因としては、
    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,
    		}						
    	}]
    });
    

    上記内容で、一度ご確認いただければと思います。
    どうぞよろしくお願いいたします。

    #85964

    dswdsw123456
    参加者

    お教えいただいた内容で、
    問題が解決いたしました。

    大変助かりました。
    ありがとうございます。

    #85968

    dswdsw123456
    参加者

    問題解決と思われたのですが

    他でエラーがでてしまいますので
    もう一度ご質問いたします。

    教えていただいた内容を変更すると

    TypeError: null is not an object
    が出るのと
    レビュー表示ができなくなります。

    以下の編集を行いました。
    編集方法が間違っている場合は、ご指摘ください。

    wcct-itemsingle.js
    14行目〜37行目までを削除し
    >以下のように書き換えてください。
    の内容をペースト

    で問題ないでしょうか?

    #85976

    welcart
    キーマスター

    > wcct-itemsingle.js
    > 14行目〜37行目までを削除し

    とございますが、
    14行目から20行目の

    
    $('.slider-for').slick({
    .....
    
    });
    

    は削除しないでください。
    あくまで、変更する箇所は22行目の

    
    $('.slider-nav').slick({
    .....
    
    });
    

    となります。

    どうぞよろしくお願いいたします。

    #86015

    dswdsw123456
    参加者

    環境による改行の違いでしょうか?
    こちらで確認している下記のファイルは

    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({
    
    });

    上記箇所を、お教えいただいた内容に書き換えています。

    前回質問させていただいた
    エラーが発生します。

    ご回答をよろしくお願いいたします。

    #86047

    dswdsw123456
    参加者

    教えていただいた内容は、
    以下のエラーが発生します。

    ・商品ページのレビューが表示されなくなります。
    ・slick.min.jsでエラーがでます。

    解決方法をお教えいただけますよう
    お願い申し上げます。

    #86056

    welcart
    キーマスター

    大変失礼いたしました。

    welcart_basic-voll/js/wcct-itemsingle.js/

    の7行目から13行目に記述してある

    
    $('.slider-for').slick({
    .....
    });
    

    は削除せず、
    14行目から37行目の

    
    $('.slider-nav').slick({
    .....
    });
    

    を上記に記したコードに修正いただければと思います。
    どうぞよろしくお願いいたします。

    #86131

    dswdsw123456
    参加者

    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 );

    よろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.
    #86136

    welcart
    キーマスター

    ご連絡が遅くなり申し訳ございません。

    大変失礼いたしました。
    上記症状を確認させていただきました。

    お使いの「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 );
    
    #86139

    dswdsw123456
    参加者

    問題解決いたしました。
    ありがとうございます。

13件の投稿を表示中 - 1 - 13件目 (全13件中)

このトピックに返信するにはログインが必要です。