[팁] 바로구매하기 버튼 만들기
Posted: Mon Dec 10, 2012 5:16 pm
오픈카트 기반 쇼핑몰을 운영하면서 가장 처음에 듣는 이야기가 바로 왜 "장바구니에 담기"만 있고 "바로 구매" 버튼이 없느냐는 이야기일 것입니다.
오픈카트는 본래 "장바구니에 담기" -> "결제하기(checkout)"로 별도의 프로세스로 진행하게 되어 있습니다.
많은 한국 사용자가 요청하는 "바로 구매" 버튼이라는 것은 개념적으로 보면 선택한 아이템을 장바구니에 담고 바로 결제하기 페이지로 리다이렉트 해주는 것입니다.
내용은 별거 없는데 수정할 파일은 많습니다. 이유는 wishlist(찜한 목록), 상품, 상품 나열하는 모듈의 view를 모두 변경해줘야하기 때문입니다. 고치는 파일들을 보면 이해할 수 있을 것입니다.
1. 언어 파일에 다음과 같이 적당한 문자열을 정의해둡니다.
/catalog/language/korean/korean.php
/catelog/language/english/english.php
영문이면 당연히 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
눈치껏 파일에 위 줄을 추가합니다.
3. 바로 구매하기 버튼을 동작하는 ajax 자바스크립트 함수 추가
원래 function addToCart(product_id, quantity) { } 함수가 존재하는데 이 내용을 그대로 복사해서 함수의 이름을 function addToCartPurchase(product_id, quantity) { } 이렇게 짓습니다. 원래 함수의 이름은 여러분의 자유입니다. 그리고 그 내용은 다음과 같습니다:
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
기본 코드 컨셉은 다음과 같습니다.
클릭하면 자바스크립트 실행하는 것이죠. 템플릿에 따라 감싸는 태그가 table이기도 하고 div이기도 한데 본 게시물에서 이 부분까지 설명할 필요는 없다고 봅니다.
오픈카트로 쇼핑몰을 운영하는데 작은 도움이 되길 바랍니다.
감사합니다.
오픈카트는 본래 "장바구니에 담기" -> "결제하기(checkout)"로 별도의 프로세스로 진행하게 되어 있습니다.
많은 한국 사용자가 요청하는 "바로 구매" 버튼이라는 것은 개념적으로 보면 선택한 아이템을 장바구니에 담고 바로 결제하기 페이지로 리다이렉트 해주는 것입니다.
내용은 별거 없는데 수정할 파일은 많습니다. 이유는 wishlist(찜한 목록), 상품, 상품 나열하는 모듈의 view를 모두 변경해줘야하기 때문입니다. 고치는 파일들을 보면 이해할 수 있을 것입니다.
1. 언어 파일에 다음과 같이 적당한 문자열을 정의해둡니다.
/catalog/language/korean/korean.php
/catelog/language/english/english.php
Code: Select all
$_['button_cart_purchase'] = '바로구매';
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
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';
}
}
});
}
/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>
오픈카트로 쇼핑몰을 운영하는데 작은 도움이 되길 바랍니다.
감사합니다.