# 3. [PC] 프로모션 상품링크

## 🔵 파일명 : PROMOTION1.html

# 👉🏻 1. Intro

> 📌 프로모션 페이지는 아래 2개의 코드로 나누어져 있어요
> 📌 아래 **2.프로모션 이미지 레이아웃** 과
> 📌 그리고  연관된 상품을 보여주는 **3.상품 연동 코드 레이아웃**
> 📌 아래 HTML 설명을 보면 이미지와 링크를 쉽게 수정하실수 있을거에요!
> 

# 👉🏻 2. 프로모션 페이지 이미지 

```
<div style="display: flex; justify-content: center;">
<img src="https://kwangjuyo2012.cafe24.com/web/product/kjy2020/4-1-PROMOTION_0_100.jpg"></img>
</div>
```

> **HTML 설명**
> - line 1) div 레이아웃 시작, 가운데 정렬
> - line 2) 프로모션에 보여줄 이미지 URL
> - line 3) div 레이아웃 종료
> 

# 👉🏻 3. 상품 연동 코드

```
<div module="product_listmain_1" class="ec-base-product">
    <!--
        $count = 4
		$moreview = yes
    -->
    <div class="title">
        <h2><span>{$category_title_text}</span></h2>
    </div>
    <ul class="prdList grid4">
        <!--@import(/weskin_import/prdList.html)-->
    </ul>
    <div module="product_listmore_1" class="btn_moreview">
        <a href="#none" onclick="{$more_action}">
            더보기(<span id="more_current_page_{$display_group}">{$current_page}</span>/<span id="more_total_page_{$display_group}">{$total_page}</span>)
        </a>
    </div>
</div>
```

> **HTML 설명**
> - line 1) 메인분류 상품번호 호출 모듈 
> - line 3)  `$count = 4` 화면에 보여줄 상품의 **Count
> **- line 4)  `$moreview = yes` 화면에 상품** 더보기 버튼 선택 여부 (Value : yes , no) **
> - line 9)  `<ul class="prdList grid2">` 한 라인에 보여줄 상품의 갯수 **grid4는 4개, grid3은 3개 
> **- line 12)** 더보기 모듈로 **`product_listmain_1`와 `product_listmore_1`의** 끝 번호**는 맞춰주셔야해요
> 📍 **중요)** 프로모션 상품 바꾸고 싶으면 아래 사진처럼 (1)메인진열 → (2)메인분류 관리 → (3)추가 → (4)**모듈코드 번호**를  `product_listmain_1`  이 모듈번호를 대신해서 입력해주셔야 해요 
> 

![Image](https://upload.cafenono.com/image/slashpageHome/20240429/000126_EDvDZkEBGtw7cTtdLH?q=75&s=1280x180&t=outside&f=webp)

For the site tree, see the [root Markdown](https://slashpage.com/ekwangjuyo.md).