Post by jonghwa » Mon Dec 10, 2012 5:16 pm

오픈카트 기반 쇼핑몰을 운영하면서 가장 처음에 듣는 이야기가 바로 왜 "장바구니에 담기"만 있고 "바로 구매" 버튼이 없느냐는 이야기일 것입니다.

오픈카트는 본래 "장바구니에 담기" -> "결제하기(checkout)"로 별도의 프로세스로 진행하게 되어 있습니다.

많은 한국 사용자가 요청하는 "바로 구매" 버튼이라는 것은 개념적으로 보면 선택한 아이템을 장바구니에 담고 바로 결제하기 페이지로 리다이렉트 해주는 것입니다.

내용은 별거 없는데 수정할 파일은 많습니다. 이유는 wishlist(찜한 목록), 상품, 상품 나열하는 모듈의 view를 모두 변경해줘야하기 때문입니다. 고치는 파일들을 보면 이해할 수 있을 것입니다.

1. 언어 파일에 다음과 같이 적당한 문자열을 정의해둡니다.

/catalog/language/korean/korean.php
/catelog/language/english/english.php

Code: Select all

$_['button_cart_purchase'] = '바로구매';
영문이면 당연히 Purchase now 뭐 이런 식으로 해야겠지요?

2. 컨트롤러에 앞서 정의한 문자열을 버튼의 문자열로 사용하도록 정의합니다.

/catalog/controller/account/wishlist.php
/catalog/controller/product/manufacturer.php
/catalog/controller/product/category.php
/catalog/controller/product/product.php
/catalog/controller/product/special.php
/catalog/controller/product/search.php
/catalog/controller/product/compare.php
/catalog/controller/module/latest.php
/catalog/controller/module/featured.php
/catalog/controller/module/bestseller.php
/catalog/controller/module/special.php

Code: Select all

$this->data['button_cart_purchase'] = $this->language->get('button_cart_purchase');
눈치껏 파일에 위 줄을 추가합니다.

3. 바로 구매하기 버튼을 동작하는 ajax 자바스크립트 함수 추가

Code: Select all

/catalog/view/javascript/common.js
원래 function addToCart(product_id, quantity) { } 함수가 존재하는데 이 내용을 그대로 복사해서 함수의 이름을 function addToCartPurchase(product_id, quantity) { } 이렇게 짓습니다. 원래 함수의 이름은 여러분의 자유입니다. 그리고 그 내용은 다음과 같습니다:

Code: Select all

function addToCartPurchase(product_id, quantity) {
	quantity = typeof(quantity) != 'undefined' ? quantity : 1;
	 
	$.ajax({
		url: 'index.php?route=checkout/cart/add',
		type: 'post',
		data: 'product_id=' + product_id + '&quantity=' + quantity,
		dataType: 'json',
		success: function(json) {
		$('.success, .warning, .attention, .information, .error').remove();
			if (json['redirect']) {
				location = json['redirect'];
			}
			if (json['success']) {
				// 이 부분이 핵심입니다.
				window.location='index.php?route=checkout/cart';
			}
		}
	});
}
4. addToCartPurchase() 자바스크립트 함수를 호출하는 바로 구매하기 버튼을 아래 파일에 추가합니다.

/catalog/view/theme/default/template/account/wishlist.tpl
/catalog/view/theme/default/template/product/manufacturer_info.tpl
/catalog/view/theme/default/template/product/category.tpl
/catalog/view/theme/default/template/product/product.tpl
/catalog/view/theme/default/template/product/special.php
/catalog/view/theme/default/template/product/search.php
/catalog/view/theme/default/template/product/compare.php
/catalog/view/theme/default/template/module/latest.tpl
/catalog/view/theme/default/template/module/featured.tpl
/catalog/view/theme/default/template/module/bestseller.php
/catalog/view/theme/default/template/module/special.php

기본 코드 컨셉은 다음과 같습니다.

Code: Select all

<div class="cart">
<a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart; ?></span></a>
<a onclick="addToCartPurchase('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart_purchase; ?></span></a>
</div>
클릭하면 자바스크립트 실행하는 것이죠. 템플릿에 따라 감싸는 태그가 table이기도 하고 div이기도 한데 본 게시물에서 이 부분까지 설명할 필요는 없다고 봅니다.

오픈카트로 쇼핑몰을 운영하는데 작은 도움이 되길 바랍니다. ::)

감사합니다.

핀코인 (http://pincoin.co.kr)

extensions by pincoin


User avatar
New member

Posts

Joined
Thu Oct 25, 2012 12:29 pm
Location - Seoul

Post by rodtango » Tue Dec 11, 2012 11:01 am

감사합니다 그리고 수고하셨습니다.

좀 전에 테스트 해 봤습니다. 아주 잘 됩니다

그런데 개인적으론 설치 했다가 지워야 했습니다

지금 작업중인 코드랑 오류가 나는군요. 코드 수정을 하면 되겠지만 아직 제것도 다 완성 된것이
아니라 잠시 보류하고 있습니다.

무엇이 문제냐면 제가 코딩하고있는 작업은 special 상품이 있으면 feature 와 다른 카테고리에
Sale 이미지가 위에 나타나게하고 제고가 없을 시 Sold Out 이라는 이미지를 띄워야하는데
텍스트로 나타나게 하는것은 문제가 없으나 이미지 출력시 div를 잡아주는데 님 팁의 버튼을
삽입하면 Parse Error가 뜨고 그문제를 해결하면 사이즈가 다 뒤틀려 버리는군요 ㅎㅎㅎ

당근 님의 팁이 문제가 있는게 아닙니다. 제가 하고자 하는것과 문제가 생긴다는것이지요

또 한가지는 바로구매를 클릭하면 첵아웃이 아니라 장바구니 보기로 가는군요
첵 아웃으로 가면 않될까요?

왜냐면

1. 바로구매 2.첵아웃
1. 장바구니 2.첵아웃
1. 장바구니 2. 헤더 장바구니 - 첵아웃

클릭수가 똑같습니다. 다른 이유가 있나요?

절대로 딴지 아닙니다. 오해마시길...

이곳에 자주 오는데 그래도 님이 가끔이라도 계셔서 너무 반갑습니다

http://ocart.limclothing.com


User avatar
Active Member

Posts

Joined
Wed Sep 19, 2012 5:34 am
Location - Argentina / Mexico

Post by jonghwa » Tue Dec 11, 2012 11:47 pm

rodtango wrote: 또 한가지는 바로구매를 클릭하면 첵아웃이 아니라 장바구니 보기로 가는군요
첵 아웃으로 가면 않될까요?
자바스크립트 코드에서 checkout/cart 부분을

Code: Select all

window.location='index.php?route=checkout/checkout';
으로 변경해주면 되겠지요.

그런데 사용자 입장에서 내가 뭐 구매하는지 한 번 정확히 확인시켜준다는 의미에서 장바구니로 이동시킨 것입니다. 이는 쇼핑몰의 정책 부분이니까 서로 이견이 있을 수 있다고 생각합니다.

그리고 저도 반갑습니다. :laugh:

핀코인 (http://pincoin.co.kr)

extensions by pincoin


User avatar
New member

Posts

Joined
Thu Oct 25, 2012 12:29 pm
Location - Seoul
Who is online

Users browsing this forum: No registered users and 5 guests