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

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

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

10件の投稿を表示中 - 1 - 10件目 (全10件中)
  • 投稿者
    投稿
  • #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({
    .....
    });
    

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

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

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