# 코드 삽입

## 목차

* [코드 삽입이란?](#id-1)
* [코드 삽입 활용하기](#id-2)&#x20;
  * [로그인 페이지 - 회원 가입 버튼 숨기기](#id-2-1)
  * [주문 내역 - 취소 요청/반품 요청 버튼 항상 숨기기](#id-2-2)
  * [페이지별 변수 확인하기](#id-2-3)

## 1. 코드 삽입이란?

사이트 공통 또는 개별 페이지의 head, body 태그 내에 원하는 코드를 삽입할 수 있는 기능입니다.&#x20;

코드를 입력 후 "변경사항 저장하기" 버튼을 클릭하면 즉시 사이트에 반영됩니다.&#x20;

주로 디자인을 수정하거나 다양한 리타게팅 광고 집행을 위해 사용됩니다.

## 2. 코드 삽입 활용하기&#x20;

식스샵 고객들이 주로 문의하는 코드 삽입 모음입니다.

[코드삽입 참고 자료 보기](https://docs.google.com/spreadsheets/d/1-Q9bYrM5ojfUF_BVwYnkQ6LqFEpjxdEiZjRKmi2dKV0/edit?usp=sharing)

### 2-1. 로그인 페이지 - 회원 가입 버튼 숨기기

**공통 - \<head>**

```css
<style>		
.wrapper .field .btn-wrapper .btn_signup {		
display: none;		
}		
</style>		
```

### 2-2. 주문 내역 - 취소 요청/반품 요청 버튼 항상 숨기기

**공통 - \<head>**

```css
<style>	
#orderReqButtonDiv {		
display: none !important;		
}		
</style>
```

### 2-3. 페이지별 변수 확인하기

페이지별로 제공되는 변수 목록입니다.

#### 2-3-1. 전체 페이지 공통 변수

**페이지 구분 변수**

${customerVar\_pageClass}

| 이름             | 변수               |
| -------------- | ---------------- |
| 상품 상세 페이지      | product          |
| 상품 후기 / 질문 페이지 | productReivewQna |
| 블로그 포스트 페이지    | blogPost         |
| 게시판 글 페이지      | boardPost        |
| 회원 가입 완료 페이지   | signupComplete   |
| 장바구니 페이지       | cart             |
| 주문 / 결제 페이지    | order            |
| 결제 요청 페이지      | paymentRequest   |
| 결제 완료 페이지      | paymentComplete  |

**접속 고객 정보**

| 이름                   | 변수                                     |
| -------------------- | -------------------------------------- |
| 고객 아이디               | ${customerVar\_string\_customerId}     |
| 고객 이메일               | ${customerVar\_string\_customerEmail}  |
| 고객 이름                | ${customerVar\_string\_customerName}   |
| 고객 휴대폰 번호            | ${customerVar\_string\_customerPhone}  |
| 고객 장바구니에 담긴 상품 금액 합계 | ${customerVar\_double\_cartTotalPrice} |

**사이트 정보**

| 이름               | 변수                               |
| ---------------- | -------------------------------- |
| 사이트 통화(KRW, USD) | ${customerVar\_string\_currency} |

**예시**

```markup
<script>
    var pageClass = "${customerVar_pageClass}"
    if(pageClass == "product") {
        /* 상품 페이지에서 사용할 스크립트 */
    } else if(pageClass == "blogPost") {
        /* 블로그에서 사용할 스크립트 */
    }
</script>
```

#### 2-3-2. 상품 상세 페이지 전용 변수

**변수 목록**

| 이름           | 변수                                       |
| ------------ | ---------------------------------------- |
| 상품 코드        | ${customerVar\_string\_productSKU}       |
| 상품 이름        | ${customerVar\_string\_productName}      |
| 상품 판매가       | ${customerVar\_double\_productPrice}     |
| 상품 정가        | ${customerVar\_double\_productListPrice} |
| 상품 주소        | ${customerVar\_string\_productAddress}   |
| 상품 대표 이미지 주소 | ${customerVar\_string\_productThumbnail} |

{% hint style="warning" %}
상품 가격 변수를 1개만 사용해야 할 때는 '상품 판매가'를 사용하세요. \
할인가(판매가) 정보가 설정된 상품의 경우, '상품 판매가' 변수에 할인가(판매가) 정보가 적용되며, 할인가(판매가)를 따로 설정하지 않은 상품의 경우, 정가(소비자가) 정보가 적용됩니다. \
반면에 '상품 정가' 변수에는 늘 상품의 정가(소비자가) 정보가 반영됩니다.
{% endhint %}

**예시**

```markup
<script>
   var productSKU = "${customerVar_string_productSKU}";
   var productName = "${customerVar_string_productName}";
   var productPrice = "${customerVar_double_productPrice}";

   sample(productSKU, productName, productPrice);

</script>
```

#### 2-3-3. 결제 완료 페이지 전용 변수

**주문 전체 정보 변수 목록**

| 이름       | 변수                                          |
| -------- | ------------------------------------------- |
| 주문 번호    | ${customerVar\_string\_orderNo}             |
| 전체 주문 금액 | ${customerVar\_double\_orderTotalPrice}     |
| 배송비      | ${customerVar\_double\_orderShippingCharge} |

**구글 애널리틱스 전자상거래로 살펴본 결제 완료 페이지 예시**

```javascript
ga('ecommerce:addTransaction', { 
    'id': '${customerVar_string_orderNo}', 
    'revenue': '${customerVar_double_orderTotalPrice}',
    'shipping': '${customerVar_double_orderShippingCharge}',
    'currency': '${customerVar_string_orderCurrency}'
 });
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.sixshop.com/learn-sixshop/store-manager/add-ons/code-injection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
