코스모스팜 회원관리 우편번호, 주소 검색 아이프레임 방식으로 변경 문의

코스모스팜의 회원관리 플러그인을 사용하고 있습니다.

회원가입시 우편번호를 입력할 때 팝업방식으로 되는데

http://www.kkomulkkomul.com/register/

이번에 하이브리드앱으로 구축하면서 웹브라우져가 아니라 웹뷰라서 팝업기능이 작동하지 않는다고 합니다.

그래서 회원가입시 다음 우편번호 팝업을 iframe의 레이어로 뜨도록 변경해야 하는데 방법을 알려주시기 바랍니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    우편번호, 주소 검색을 아이프레임 방식으로 뜨도록 하는 방법을 연구해보겠습니다.

    해당 옵션을 추가해서 빠른 시일내에 플러그인을 업데이트 하도록 하겠습니다.

    고맙습니다.

  • 다음API 의 개발자 가이드에 보면 관련해서 설명이 있는 것 같습니다.

    http://postcode.map.daum.net/guide

    급하게 처리를 해야하는 사안이라서요, 언제쯤 가능한 방법을 알 수 있을까요?

  • 안녕하세요~^^

    우편번호 서비스를 아이프레임으로 표시하시려면

    FTP로 접속해서 /wp-content/plugins/cosmosfarm-members/skin/사용중인스킨/script.js 파일에서

    아래의 코드를 찾아서

    function cosmosfarm_members_open_postcode(target){
    	var width = 500;
    	var height = 600;
    	new daum.Postcode({
    		width: width,
    		height: height,
    		oncomplete: function(data){
    			jQuery('.cosmosfarm-members-form input[name="zip"]').val(data.zonecode);
    			jQuery('.cosmosfarm-members-form input[name="addr1"]').val(data.roadAddress);
    			
    			if(target == 'billing'){
    				jQuery('#billing_postcode').val(data.zonecode);
    				jQuery('#billing_address_1').val(data.roadAddress);
    			}
    			else if(target == 'shipping'){
    				jQuery('#shipping_postcode').val(data.zonecode);
    				jQuery('#shipping_address_1').val(data.roadAddress);
    			}
    		}
    	}).open({
    		left: (screen.availWidth-width)*0.5,
    		top: (screen.availHeight-height)*0.5
    	});
    	return false;
    }

    아래의 코드로 교체해주세요.

    function cosmosfarm_members_open_postcode(target){
    	
    	if(jQuery('#postcode-layer').length == 0){
    		var element_layer_background = jQuery('<div id="postcode-layer-background" style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: black; z-index: 9999; opacity: 0.5;">test</div>');
    		var element_layer = jQuery('<div id="postcode-layer" style="display:block; background-color: white; position:fixed; overflow:hidden; z-index: 99999; -webkit-overflow-scrolling:touch;"></div>');
    		
    		var close_button = jQuery('<img src="//t1.daumcdn.net/localimg/localimages/07/postcode/320/close.png" id="btnCloseLayer" style="margin:0;cursor:pointer; position:absolute; right:-3px; top:-3px; z-index:1" alt="닫기 버튼">');
    		close_button.click(function(){
    			jQuery('#postcode-layer').hide();
    			jQuery('#postcode-layer-background').hide();
    		});
    		element_layer.append(close_button);
    		
    		jQuery('body').append(element_layer_background);
    		jQuery('body').append(element_layer);
    	}
    	else{
    		var element_layer_background = jQuery('#postcode-layer-background');
    		var element_layer = jQuery('#postcode-layer');
    	}
    	
    	if(window.innerWidth <= 600) {
    		element_layer.css('width', '100%');
    		element_layer.css('height', '100%');
    		element_layer.css('border', '5px solid');
    		element_layer.css('left', '0');
    		element_layer.css('top', '0');
    	}
    	else{
    		var width = 500;
    		var height = 600;
    		var borderWidth = 5;
    		
    		element_layer.css('width', width+'px');
    		element_layer.css('height', height+'px');
    		element_layer.css('border', borderWidth+'px solid');
    		element_layer.css('left', (((window.innerWidth || document.documentElement.clientWidth) - width)/2 - borderWidth) + 'px');
    		element_layer.css('top', (((window.innerHeight || document.documentElement.clientHeight) - height)/2 - borderWidth) + 'px');
    	}
    	
    	element_layer_background.show();
    	element_layer.show();
    	
    	new daum.Postcode({
    		oncomplete: function(data) {
    			jQuery('.cosmosfarm-members-form input[name="zip"]').val(data.zonecode);
    			jQuery('.cosmosfarm-members-form input[name="addr1"]').val(data.roadAddress);
    			
    			if(target == 'billing'){
    				jQuery('#billing_postcode').val(data.zonecode);
    				jQuery('#billing_address_1').val(data.roadAddress);
    			}
    			else if(target == 'shipping'){
    				jQuery('#shipping_postcode').val(data.zonecode);
    				jQuery('#shipping_address_1').val(data.roadAddress);
    			}
    			
    			element_layer_background.hide();
    			element_layer.hide();
    		},
    		width : '100%',
    		height : '100%',
    		maxSuggestItems : 5
    	}).embed(document.getElementById('postcode-layer'));
    }

    고맙습니다.

  • 위의 소스로 수정하여 반영했는데 아직 문제가 해결되지 않고 있습니다.

    iframe으로 레이어가 웹페이지 위에 떠야 합니다.
    웹으로는 되는데... 앱에선 안되는것 같습니다

    모바일웹과 앱과 다른것 같습니다. 첨부된 화면을 보시면 아실겁니다.
    이건 웹소스에 어딘가에 원인이 있는 것 같습니다.

  • 안녕하세요~^^

    올려주신 사진으로 저희가 테스트할 수 없습니다.

    테스트 방법이 있다면 알려주시겠어요?

    고객지원 쪽 이메일로 해당 앱을 보내주시면 분석 후 테스트해보겠습니다.

    고맙습니다.

  • 안녕하세요.

    해결을 하신 건가요?

    고객지원 쪽 이메일로 보내주신 apk 파일 설치해서 실행해봤지만,

    모바일 웹과 같은 화면을 출력하며 iframe 또한 정상 작동하는 걸로 파악됐습니다.

    올려주신 사진은 어떤 모바일 기기로 테스트를 하셨나요?

    다른 모바일 기기로 테스트 해보시겠어요?

    고맙습니다.

  • 아이프레임 방식으로 우편번호, 주소 검색을 하는 기능은

    코스모스팜 회원관리 플러그인에 적용되어 업데이트 되었습니다.

    설정 변경해서 바로 사용하실 수 있습니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요