본문 바로가기
Etc

워드프레스 우커머스 버튼 추가

by NaHyungMin 2020. 7. 27.

파일 경로 /www/wp-content/themes/flatsome-child

<?php
// Add custom Theme Functions here

//jquery 사용하도록 변경
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script( 'jquery' );
}

// wp_head()에 스크립트 추가
function child_theme_head_script() { ?>
	<script type="text/javascript">
		function clicktest(){
			jQuery(document).ready( function($){
				$.ajax({
					url: 'https://jsonplaceholder.typicode.com/todos/3?key=hello', // this is the object instantiated in wp_localize_script function
					type: 'Get',
					dataType: 'jsonp',
					success: function( data ){
						alert('전송!');
					},
					error:function(jqXHR, textStatus, errorThrown){
						alert(jqXHR);
						alert(textStatus);
						alert(errorThrown);
					}
				});
			});
		}
	</script>
<?php }
add_action( 'woocommerce_before_add_to_cart_form', 'child_theme_head_script' );

// Add a button to the right of the “add to cart” button in the single product page in WooCommerce
// "장바구니" 버튼 오른쪽에 버튼 추가하기
add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {
	echo '<button type="submit" onclick="clicktest()" class="button alt" id="testBtn">테스트</button>';
}

 

woocommerce_after_add_to_cart_button 같은 경우 여러개의 예약 명령어다.

괜히 저기에 타이핑하려고 하지 말고, woocommerce... 으로 검색해서 맞는 명령어를 쓰길 바람.

 

다른 도메인 주소로 이동하려고 하면, 크로스도메인 오류 남

jsonp http로 다른 도메인 이동하려고 하면 보안 오류 난다.

 

그래서 변경한게 

 

<?php
// Add custom Theme Functions here

//jquery 사용하도록 변경
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
function my_enqueue_scripts() {
    wp_enqueue_script( 'jquery' );
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

// wp_head()에 스크립트 추가
function child_theme_head_script() { ?>
	<script type="text/javascript">

		function cc_popup_script() {
			wp_register_script( 'popup', get_stylesheet_directory_uri() . '/js/popup.js', array( 'jquery' ), '1.0.0', false );
			wp_enqueue_script( 'popup' );
		}

	</script>
<?php }
add_action('wp_enqueue_scripts', 'cc_popup_script');
add_action( 'woocommerce_before_add_to_cart_form', 'child_theme_head_script' );

// Add a button to the right of the “add to cart” button in the single product page in WooCommerce
// "장바구니" 버튼 오른쪽에 버튼 추가하기
add_action('woocommerce_after_add_to_cart_button','cmk_additional_button');
function cmk_additional_button() {
	echo '<a href="http://www.abc.com" type="button" class="button alt popup" id="testBtn">테스트</button>';
}
jQuery(document).ready(function($) {
   $('.popup').click(function() {
     var NWin = window.open($(this).prop('href'), '', 'scrollbars=1,height=400,width=400');
     if (window.focus)
     {
       NWin.focus();
     }
     return false;
    });
});

popup.js를 만들어 flatsom-child 폴더 안에 js 폴더 생성 후 넣어둔다.

그리고 해당 버튼 class에 popup을 추가 하면 새로운 창으로 이동한다.

 

4~5시간 동안 처음보는 워드프레스 우커머스에 대해 알아보고 처리한 결과 어렵다. -..-