Component

[S] Color Config
- Test Color
- Example:
  - P.Light & S.Dark
  - P.Dark & S.Light
[S] Font & Heading
[S] Button & Text Style
[S] Form
[S] Carousel / Banner
[S] Carousel Referral
- Brand (Type 12)
- Menufacturer (Type 17)
- Vendor (Type 18)
[S] Text Slide
[S] Cover (Normal, Parralax)
[S] Homepage Video
[S] Page: Coming Soon
- Password: 1234
[S*] Page: About
[S*] Page: Contact
- Design A
- Design B
[S] Category Lists
- Design A
- Design B
- Design C
- Design D
[S] Product Card
- Design A
- Design B-1
- Design B-2
- Design C-1
- Design D-1
- Design All
[S] Product List
- P1
- P2
- P3
- P4
- P5
- P6
- P7
- P8
- P9
- P10
- P11 (B-1)
- P12 (B-2)
[S] Product Detail
- D1
- D2
- D3
- D4
- D5
- D6
- D7
- D8
- D9
- D10
[P] Post Lists (Blog)
[P] Post Lists Feature (Blog)
[P] Post Detail (Blog)
[P] Page Detail
[P] Product List
- By Badge
- By Feature (1)
- By Type
- By Feature (2)
[P] Product Detail
[P] Go to top
[P] View image
[P] Carousel แบบเก่า
[P] Head แบบใหม่
[P] Head แบบเก่า
[S] Footer แบบใหม่
[S] Footer
- Design A
- Design B
- Design C
- FT101
- FT102
- FT201
- FT202
- FT203
- FT204
- FT301
- FT302
- FT303
- l-m-c-s
- m-m-c-s
- l-m-m-s
- l-m&s
[S] Video Lists
[S*] Location (Branch)
- List
- Detail
[S] Gallery
[S] Gallery Id (มีลิสอัลบัม)

For Development

- [S] Share Component - คอมโพเน้นแยกประเภท แยกรูปแบบ สามารถนำไป REUSE กับหลายๆโปรเจ็ค (ไม่มีการ Config สีหรือรูปแบบสำหรับลูกค้าแต่ละเจ้า)

- [S*] Share Component - คอมโพเน้นเหมือน [S] เพิ่มเติมคือมีการ TRANSCLUDE HTML เพื่อส้งผ่านไปแสดงใน component ซึ่งง่ายต่อการ Overide/Reuse กับ ลูกค้าหลายๆเจ้า (ไม่ต้อง Create Css)

- [P] Private Component - คอมโพเน้นเฉพาะกิจ โดยรูปแบบในแต่ละอันจะสามารถ Copy ไปใช้แยกในแต่ละลูกค้า มี Pattern คล้ายๆกัน มีการ Config Css/Color แยกอย่างชัดเจน (ไม่สามารถนำมา Reuse ได้เหมือน [S])

= Component นี้เป็นเวอร์ชั่นใหม่ล่าสุด (กว่าเวอร์ขั่นเก่า? มีหลายเวอร์ขั่น? แต่อันนี้ใหม่ล่าสุด)

= Component นี้เก่าแล้ว (มีเวอร์ชั่นใหม่กว่า)

= Component นี้เก่าที่สุด (ถ้ามีหลายเวอร์ชั่นอันนี้เก่าสุด)

use="primary.light" usesub="secondary.dark" primary="#4F342E" secondary="#FFC107" special="#8f4bef" specialtext="#ffffff"

use="primary.dark" usesub="secondary.light" primary="#4F342E" secondary="#FFC107" special="#8f4bef" specialtext="#ffffff"

use="primary.light" usesub="secondary.dark" primary="#44b7ea" secondary="#ff07f5"

Primary.Light
Primary.Dark
Background Test เลือกสี
Color Code เลือกสี

Secondary.Light
Secondary.Dark
Background Test เลือกสี
Color Code เลือกสี

Carousel Main: 600px,left,filled_button_round, font=SANS-SERIF

Carousel Main: 600px,center,outlined_button_small

Carousel Main: 600px,right,border_button_large,margin=40px 0px;

Carousel Main A: 600px,left,filled_button_round, font=SANS-SERIF

Carousel Secondary: 300px,center,filled_button_round, font=SANS-SERIF

Carousel Secondary: 600px,center,filled_button_round, font=SANS-SERIF

Carousel Secondary: 800px,center,filled_button_round, font=SANS-SERIF

Carousel Secondary: 100%,center,filled_button_round, font=SANS-SERIF

Carousel Secondary: 100% - header,center,filled_button_round, font=SANS-SERIF

Main Banner: 250px, margin="20px 0px"

Top Page Banner: 200px, margin="100px 0px 30px 0px"

Bottom Page Banner: 200px, margin="20px 0px"

Mini Banner: 250px, margin="20px 0px"

Vendor slide:

Mini Box Banner: แสดงเป็นสีเหลี่ยม ธรรมดา ไม่มี Slide

Sirikhun

SEAFOOD SPIRIT OF THE SEA.

typeid="12" margin="0px 0px 40px" size="150px"

Example:

typeid="17" margin="0px 0px 40px" size="150px"

Example:

size="450px" position="right" margin="70px 50px"

Example:

Home Page Video

component="page-video" imgpath="{{home.imgPath}}"

name="wego" preload="true" imgpath="{{home.imgPath}}" imgcover="" imgsrc="" videowidth="100%" videoheight="300px"

{{c[0].name}} = {{c[0].total > 0}}

{{c[0].name}} = {{c[0].total > 0}}

ใส่ padding / margin

{{c[0].name}} = {{c[0].total > 0}}

Font & Heading config

Font Config
Name: ใส่ไว้เฉะๆ ไม่ได้นำมาคำนวน
Family: [font-family] คั่นโดยคอมม่า (,) เช่น Roboto,Open Sans
Thai: 1=ใช้ฟ้อนไทย (ถ้ามีและจำเป็นต้องใส่) / 0=ไม่ใช้
Overide: [font-family] บังคับ overide ทั้ง Body เท่าที่จะทำได้ / 0=ไม่ใช้ หรือไม่ต้องใส่

name="sirikhun" family="Roboto" thai="1" overide="Roboto"

# การเรียกใช้ Header แบบควบคุม Ratio (ซับพอร์ต h1,h2,h3 เท่านั้น)
- ใส่ data-ratio ตั้งแต่ 0.1 ถึง 2(ได้ทั้ง 2หรือ2.0) - ถ้าต้องการควบคุมความหนาให้ใส่ data-weight เป็น lighter,normal,bold
- Margin ของ ทั้ง h1,h2,h3 ที่มีการใช้ Ratio จะถูกปรับเป็น 0 อัตโนมัติ (เพราะฉะนั้นเราต้องเขียนเพิ่มเอง หรือใช้ component)
* h1,h2 มี line-height=1.6 ส่วน h3 ไม่ได้มีการกำหนดไว้
ตัวอย่างตามตารางด้านล่าง data-ratio="1" data-weight="normal" data-ratio="1" data-weight="normal" data-ratio="1" data-weight="normal"

Size	H1	H2
{{item.ratio}}	h1@{{item.ratio}} ({{item.text_first}}px)	h2@{{item.ratio}} ({{item.text_second}}px) -

Size	H3	H4
{{item.ratio}}	h3@{{item.ratio}} ({{item.text_first}}px) -

Button & Text Style

ต้องใช้ Config Color เสมอ

Text

การแสดงผล	การเรียกใช้
Primary Text	Primary Text เรียกใช้ attribute "data-font-color" ใน element แล้ว "data-font-color" ใส่ค่าเป็น "primary_text" <span data-font-color="primary_text">Primary Text</span> เพิ่มเติมการ Hover, Active ของสีต่างๆ <span data-font-color="primary_text" data-font-hover="primary" data-font-active="primary_darker">Primary Text</span> ลองเอาเม้ามาจี้ แล้วกดดูสิ 1 ลองเอาเม้ามาจี้ แล้วกดดูสิ 2 ลองเอาเม้ามาจี้ แล้วกดดูสิ 3 การทำ Hover ให้ใส่ data-font-hover และทำ Acive ให้ใส่ data-font-active โดยทั้งสอง attribute มีค่าให้ใส่ตามนี้ - primary - primary_darker - primary_darkest - secondary - secondary_darker - secondary_darkest - special - special_darker - special_darkest
Primary Text Reverse	Primary Text Reverse เรียกใช้ attribute "data-font-color" ใน element แล้ว ใส่ค่าเป็น "primary_text_reverse" <span data-font-color="primary_text_reverse">Primary Text Reverse</span>
Secondary Text	Secondary Text เรียกใช้ attribute "data-font-color" ใน element แล้ว "data-font-color" ใส่ค่าเป็น "secondary_text" <span data-font-color="secondary_text">secondary Text</span>
Secondary Text Reverse	Secondary Background Color เรียกใช้ attribute "data-font-color" ใน element แล้ว ใส่ค่าเป็น "secondary_text_reverse" <span data-font-color="secondary_text_reverse">secondary Text Reverse</span>
Special Text	Special Text, Special Text () เรียกใช้ attribute "data-font-color" ใน element แล้ว ใส่ค่าเป็น "special_text" <span data-font-color="special_text">Special Text</span>
Primary color on text	Primary color on text เรียกใช้ attribute "data-font-color" ใน element แล้ว "data-font-color" ใส่ค่าเป็น "primary" <span data-font-color="primary">Primary color on text</span>
Secondary color on text	Secondary color on text เรียกใช้ attribute "data-font-color" ใน element แล้ว "data-font-color" ใส่ค่าเป็น "secondary" <span data-font-color="secondary">Primary color on text</span>
Special color on text	Special color on text เรียกใช้ attribute "data-font-color" ใน element แล้ว "data-font-color" ใส่ค่าเป็น "special" <span data-font-color="special">Special color on text</span>
Primary Background Color	Primary Background Color เรียกใช้ attribute "data-background-color" ใน element แล้ว "data-background-color" ใส่ค่าเป็น "primary" ส่วนสีฟ้อนท์ให้เรียก attribute "data-font-color" ใน element แล้ว "data-font-color" ใส่ค่าเป็น primary_text, primary_text_reverse, secondary_text, secondary_text_reverse (ตามแต่จะใช้) <span data-background-color="primary" data-font-color="primary_text">Primary Background Color</span>
Secondary Background Color	Secondary Background Color เรียกใช้ attribute "data-background-color" ใน element แล้ว "data-background-color" ใส่ค่าเป็น "secondary" ส่วนสีฟ้อนท์ให้เรียก attribute "data-font-color" ใน element แล้ว "data-font-color" ใส่ค่าเป็น primary_text, primary_text_reverse, secondary_text, secondary_text_reverse (ตามแต่จะใช้) <span data-background-color="primary" data-font-color="secondary_text">Primary Background Color</span>
Special Background Color	Special Background Color เรียกใช้ attribute "data-background-color" ใน element แล้ว "data-background-color" ใส่ค่าเป็น "special" ส่วนสีฟ้อนท์ให้เรียก attribute "data-font-color" ใน element แล้ว "data-font-color" ใส่ค่าเป็น primary_text, primary_text_reverse, secondary_text, secondary_text_reverse,special_text (ตามแต่จะใช้) <span data-background-color="special" data-font-color="special_text">Special Background Color</span>

Primary : Filled Button

การแสดงผล	การเรียกใช้
	Filled Button + Extra Small + Icon (Material Icon) <button data-button="filled_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Filled Button + Small + Icon (Material Icon) <button data-button="filled_button_small"><i class="material-icons"></i>small</button>
	Filled Button <button data-button="filled_button">Filled Button</button>
	Filled Button + Round <button data-button="filled_button_round">Filled Button Round</button>
	Filled Button + Large + Round <button data-button="filled_button_large_round">Filled Button Large Round</button>
	Filled Button + Extra Large + Round <button data-button="filled_button_xlarge_round">Filled Button Extra Large Round</button>

Primary : Outlined Button

การแสดงผล	การเรียกใช้
	Outlined Button + Extra Small + Icon (Material Icon) <button data-button="outlined_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Outlined Button + Small + Icon (Material Icon) <button data-button="outlined_button_small"><i class="material-icons"></i>small</button>
	Outlined Button <button data-button="outlined_button">Outlined Button</button>
	Outlined Button + Round <button data-button="outlined_button_round">Outlined Button Round</button>
	Outlined Button + Large + Round <button data-button="outlined_button_large_round">Outlined Button Large Round</button>
	Outlined Button + Extra Large + Round <button data-button="outlined_button_lxarge_round">Outlined Button Extra Large Round</button>

Primary : Border Button

การแสดงผล	การเรียกใช้
	Border Button + Extra Small + Icon (Material Icon) <button data-button="border_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Border Button + Small + Icon (Material Icon) <button data-button="border_button_small"><i class="material-icons"></i>small</button>
	Border Button <button data-button="border_button">Border Button</button>
	Border Button + Round <button data-button="border_button_round">Border Button Round</button>
	Border Button + Large + Round <button data-button="border_button_large_round">Border Button Large Round</button>
	Border Button + Extra Large + Round <button data-button="border_button_xlarge_round">Border Button Extra Large Round</button>

Secondary : Filled Button

การแสดงผล	การเรียกใช้
	Filled Button + Extra Small + Icon (Material Icon) <button data-button="secondary_filled_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Filled Button + Small + Icon (Material Icon) <button data-button="secondary_filled_button_small"><i class="material-icons"></i>small</button>
	Filled Button <button data-button="secondary_filled_button">Filled Button</button>
	Filled Button + Round <button data-button="secondary_filled_button_round">Filled Button Round</button>
	Filled Button + Large + Round <button data-button="secondary_filled_button_large_round">Filled Button Large Round</button>
	Filled Button + Extra Large + Round <button data-button="secondary_filled_button_xlarge_round">Filled Button Extra Large Round</button>

Secondary : Outlined Button

การแสดงผล	การเรียกใช้
	Outlined Button + Exra Small + Icon (Material Icon) <button data-button="secondary_outlined_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Outlined Button + Small + Icon (Material Icon) <button data-button="secondary_outlined_button_small"><i class="material-icons"></i>small</button>
	Outlined Button <button data-button="secondary_outlined_button">Outlined Button</button>
	Outlined Button + Round <button data-button="secondary_outlined_button_round">Outlined Button Round</button>
	Outlined Button + Large + Round <button data-button="secondary_outlined_button_large_round">Outlined Button Large Round</button>
	Outlined Button + Extra Large + Round <button data-button="secondary_outlined_button_xlarge_round">Outlined Button Extra Large Round</button>

Secondary : Border Button

การแสดงผล	การเรียกใช้
	Border Button + Extra Small + Icon (Material Icon) <button data-button="secondary_border_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Border Button + Small + Icon (Material Icon) <button data-button="secondary_border_button_small"><i class="material-icons"></i>small</button>
	Border Button <button data-button="secondary_border_button">Border Button</button>
	Border Button + Round <button data-button="secondary_border_button_round">Border Button Round</button>
	Border Button + Large + Round <button data-button="secondary_border_button_large_round">Border Button Large Round</button>
	Border Button + Extra Large + Round <button data-button="secondary_border_button_xlarge_round">Border Button Extra Large Round</button>

Special : Filled Button

การแสดงผล	การเรียกใช้
	Filled Button + Extra Small + Icon (Material Icon) <button data-button="special_filled_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Filled Button + Small + Icon (Material Icon) <button data-button="special_filled_button_small"><i class="material-icons"></i>small</button>
	Filled Button <button data-button="special_filled_button">Filled Button</button>
	Filled Button + Round <button data-button="special_filled_button_round">Filled Button Round</button>
	Filled Button + Large + Round <button data-button="special_filled_button_large_round">Filled Button Large Round</button>
	Filled Button + Extra Large + Round <button data-button="special_filled_button_xlarge_round">Filled Button Extra Large Round</button>

Special : Outlined Button

การแสดงผล	การเรียกใช้
	Outlined Button + Extra Small + Icon (Material Icon) <button data-button="secondary_outlined_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Outlined Button + Small + Icon (Material Icon) <button data-button="secondary_outlined_button_small"><i class="material-icons"></i>small</button>
	Outlined Button <button data-button="secondary_outlined_button">Outlined Button</button>
	Outlined Button + Round <button data-button="secondary_outlined_button_round">Outlined Button Round</button>
	Outlined Button + Large + Round <button data-button="secondary_outlined_button_large_round">Outlined Button Large Round</button>
	Outlined Button + Extra Large + Round <button data-button="secondary_outlined_button_xlarge_round">Outlined Button Extra Large Round</button>

Special : Border Button

การแสดงผล	การเรียกใช้
	Border Button + Extra Small + Icon (Material Icon) <button data-button="secondary_border_button_xsmall"><i class="material-icons"></i>xsmall</button>
	Border Button + Small + Icon (Material Icon) <button data-button="secondary_border_button_small"><i class="material-icons"></i>small</button>
	Border Button <button data-button="secondary_border_button">Border Button</button>
	Border Button + Round <button data-button="secondary_border_button_round">Border Button Round</button>
	Border Button + Large + Round <button data-button="secondary_border_button_large_round">Border Button Large Round</button>
	Border Button + Extra Large + Round <button data-button="secondary_border_button_xlarge_round">Border Button Extra Large Round</button>

Invert เรียกใช้ button สลับสี

การแสดงผล	การเรียกใช้
	<button data-button="primary_invert_outlined_button" data-font-color="primary_text"> (Primary Invert) Outlined Button + Primary Text</button>
	<button data-button="primary_invert_outlined_button" data-font-color="primary_text_reverse"> (Primary Invert) Outlined Button + Primary Text</button>
	<button data-button="primary_invert_border_button" data-font-color="primary_text"> (Primary Invert) Border Button + Primary Text</button>
	<button data-button="primary_invert_border_button" data-font-color="primary_text_reverse"> (Primary Invert) Border Button + Primary Text Reverse</button>
	<button data-button="secondary_invert_outlined_button" data-font-color="secondary_text"> (Secondary Invert) Outlined Button + Secondary Text</button>
	<button data-button="secondary_invert_outlined_button" data-font-color="secondary_text_reverse"> (Secondary Invert) Outlined Button + Secondary Text Reverse</button>
	<button data-button="secondary_invert_border_button" data-font-color="secondary_text"> (Secondary Invert) Border Button + Secondary Text</button>
	<button data-button="secondary_invert_border_button" data-font-color="secondary_text_reverse"> (Secondary Invert) Border Button + Secondary Text Reverse</button>

การแสดงผล	การเรียกใช้
Username	Text field ธรรมดา <div class="form_block"> <label>Username</label> <input placeholder="Username" type="text" class="round" component-css-form/> <span class="after"></span> </div>
Username กรุณากรอกข้อมูลให้ครบถ้วน	Text field (Required) / Error จะเป็นสีแดง / Success สีเขียว <div class="form_block"> <label>Username</label> <input placeholder="Username" type="text" required class="round" component-css-form/> <span class="after">กรุณากรอกข้อมูลให้ครบถ้วน</span> </div>
Username กรุณากรอกข้อมูลให้ครบถ้วน	Text field (Required + Warning) / Error จะเป็นสีแดง / Warning เป็นสีส้ม (กำหนด length ด้วย) / Success สีเขียว <div class="form_block"> <label>Username</label> <input placeholder="Username" type="text" required warning="10" class="round" component-css-form/> <span class="after">กรุณากรอกข้อมูลให้ครบถ้วน</span> </div>
Password กรุณากรอกข้อมูลให้ครบถ้วน	Password (Required) / Error จะเป็นสีแดง / Success สีเขียว <div class="form_block"> <label>Password</label> <input placeholder="Password" type="password" required class="round" component-css-form /> <span class="after">กรุณากรอกข้อมูลให้ครบถ้วน</span> </div>
First checkbox Second checkbox	Checkbox <div class="form_block_control"> <div class="control-group"> <label class="control control__checkbox">First checkbox <input type="checkbox" checked="checked"/> <div class="control__indicator"></div> </label> <label class="control control__checkbox">Second checkbox <input type="checkbox"/> <div class="control__indicator"></div> </label> </div> </div>
First radio Second radio	Radio <div class="form_block_control"> <div class="control-group"> <label class="control control__radio">First radio <input type="radio" name="radio" checked="checked"/> <div class="control__indicator"></div> </label> <label class="control control__radio">Second radio <input type="radio" name="radio"/> <div class="control__indicator"></div> </label> </div> </div>
Choose your answer	Select <div class="form_block_control"> <div class="control-group"> <div class="select"> <label>Choose your answer</label> <select> <option selected> Select</option> <option>Answer A</option> <option>Answer B</option> </select> <div class="select__arrow"></div> </div> </div> </div>

Amimate Element

{{c[0].name}} = {{c[0].total > 0}}

Post List (Blog)

แสดงรายการโพสต์ทั้งหมด
ตัวอย่างแบบสวยงามให้ดูที่ https://tiresbid.getappeasy.com/blog?debug (มี ?debug ติดหลังด้วยเสมอ)
ถ้าดูปกติให้่เอา ?debug ออก (มีเฉพาะ tiresbid เจ้าอื่นไม่ได้ใส่ไว้)
ปล. การใช้ให้ใช้ใน Grid เสมอ ไม่ว่าจะ Full หรือ มี Container ตรงกลาง

เลือก Design

Post List Feature (Blog)

แสดงรายการโพสต์ทั้งหมด ที่เป็น Feature

{{c[0].name}} = {{c[0].total > 0}}

Post Detail (Blog)

# Code

name="" imgpath="{{home.imgPath}}" type="leftright" blogid="{ตัวแปร/ฟังก์ชั่น blog_id มาแสดง}" curpage="1" head="{{home._viewRouteParams().head}}" relate="true"

name - ชื่อลูกค้า
imgpath - path รูป
type - ดีไซน์ default, leftright
blogid - ตัวแปร/ฟังก์ชั่น blog_id มาแสดง
head - ดีไซน์ head (ถ้าไม่ใช้ ก็ไม่ต้องใส้ attribute นี้)
relate - ใส่ true เพื่อแสดงบทความที่เกี่ยวข้อง (ถ้าไม่ใช้ ก็ไม่ต้องใส้ attribute นี้)

# Design

แสดงรายระเอียดโพสต์ มี 2 แบบคือ
1. เนื้อหา (default)
2. เนื้อหา + ด้านข้างซึ่งมี Category,Recent Post (leftright)

# Header

1. make-it-clean-and-simple (คลิ๊กดูตัวอย่างที่ Tiresbid)

2. my-tech-travel-setup (คลิ๊กดูตัวอย่างที่ Tiresbid)

# Relate Post

- สามารถเลือกได้ว่า ใน Detail จะให้มีหรือไม่มี (คลิ๊กดูตัวอย่างที่ Tiresbid)

{{c[0].name}} = {{c[0].total > 0}}

Page Detail

แสดงรายระเอียด Page

{{c[0].name}} = {{c[0].total > 0}}

Product Category Badge

Component Slide (ดู Gaoyang หน้่าแรก) ที่เอา Product ติด badge มาแสดงเช่น New Arrival, Recommend, Featured Product

{{c[0].name}} = {{c[0].total > 0}}

Product Category Feature (1)

Component Slide (ดู Gaoyang หน้่าแรก) ที่ดึงเอา Category Feature มาแสดงแล้วนำเอาสินค้าในหมวดนั้นๆมาแสดงด้วย

{{c[0].name}} = {{c[0].total > 0}}

Product List (Product Grid Dark)

Component Product List ที่ตอนแรกที่ทำมาเฉพาะ Missmonribs (มันเลยมีคำว่า Dark) ทำไปทำมาเอามาปรับใช้ได้หลายเวอร์ชั่น และใช้กับลูกค้าหลายเจ้า ใน component นี้มีแยกหลาย Type

{{c[0].name}} = {{c[0].total > 0}}

Product List Feature (2)

Component Product List ที่ดึงเอาเฉพาะ Product ที่เป็น Feature มาแสดง

{{c[0].name}} = {{c[0].total > 0}}

Product Detail

Component Product Detail แยกลูกค้าแต่ละเจ้า

{{c[0].name}} = {{c[0].total > 0}}

Go to top

Component คลิ๊กแล้ว Go to top

{{c[0].name}} = {{c[0].total > 0}}

View Image

Component ที่ Render อัตโนมัติ เมื่อเอาเมาส์จี้ที่รูป สามารถกดไปดูรูปใหญ่ และสามารถกดแชร์ Social ได้

{{c[0].name}} = {{c[0].total > 0}}

Carousel แบบเก่า (Layout Hero Transparent)

Component Render carousel แบบเก่า โดยมี main carousel, secondary carousel, mini banner, top-bottom banner มีการกำหนด css แยกลูกค้าแต่ละเจ้า

{{c[0].name}} = {{c[0].total > 0}}

Head แบบใหม่ (Header Desktop)

{{c[0].name}} = {{c[0].total > 0}}

Head แบบเก่า (Header Desktop)

Component Header แบบเก่า ที่มีการ coding แยกแต่ละเจ้า แต่มี Pattern คล้ายๆกัน

{{c[0].name}} = {{c[0].total > 0}}

Category Lists : Design A / Color=Text color, Primary=Head+Button Color

{{c[0].name}} = {{c[0].total > 0}}

Category Lists : Design B / Color=Text color, Primary=Head+Button Color

{{c[0].name}} = {{c[0].total > 0}}

Category Lists : Design C / Color=Text color, Primary=Head+Button Color, Name=Customer name

{{c[0].name}} = {{c[0].total > 0}}

Category Lists : Design D / text="Featured Category"

{{c[0].name}} = {{c[0].total > 0}}

Footer

Component Footer : Design A

{{c[0].name}} = {{c[0].total > 0}}

Component Footer : Design B

{{c[0].name}} = {{c[0].total > 0}}

Component Footer : Design C

{{c[0].name}} = {{c[0].total > 0}}

Component Footer : FT303

Example: missmonribs.com (tpl.footer.html)

Component Footer : FT101

Component Footer : FT102

home about contect

Component Footer : FT201

Component Footer : FT202

Latest Page 1 Latest Page 2 Latest Page 3

Component Footer : FT203

Component Footer : FT204

Component Footer : FT301

<component-footer-code code="FT301" imgpath="{{home.imgPath}}" imglogo="dark" name="gaedemo101" backgroundcolor="#111" headline="#fff" textcolor="#fff" textcolorhover="#504c4c">
						<footer-one>
							<h3 class="headline">PAGES</h3>
							<ul class="items_lists">
								<li><a href="#">Latest Page 1</a></li>
								<li><a href="#">Latest Page 2</a></li>
								<li><a href="#">Latest Page 3</a></li>
							</ul>
						</footer-one>
						<footer-two>
							<h3 class="headline">BLOGS</h3>
							<ul class="items_lists">
								<li><a href="#">Blog Title 1</a></li>
								<li><a href="#">Blog Title 2</a></li>
								<li><a href="#">Blog Title 3</a></li>
							</ul>
						</footer-two>
						<footer-three>
							<h3 class="headline">PRODUCT</h3>
							<ul class="items_lists">
								<li><a href="#">Main Cat 1</a></li>
								<li><a href="#">Main Cat 2</a></li>
								<li><a href="#">Main Cat 3</a></li>
							</ul>
						</footer-three>
						<footer-four>
							<h3 class="headline">SHOP DISPLAY NAME</h3>
							<ul class="items_lists">
								<li><a href="#">Home</a></li>
								<li><a href="#">All Products</a></li>
								<li><a href="#">All Categories</a></li>
								<li><a href="#">Blog</a></li>
								<li><a href="#">Gallery</a></li>
							</ul>
						</footer-four>
					</component-footer-code>

BLOGS

PRODUCT

SHOP DISPLAY NAME

Component Footer : FT302

<component-footer-code code="FT302" imgpath="{{home.imgPath}}" imglogo="dark" name="gaedemo101" backgroundcolor="#111" headline="#fff" textcolor="#fff" textcolorhover="#504c4c">
						<footer-two>
							<h3 class="headline">BLOGS</h3>
							<ul class="items_lists">
								<li><a href="#">Blog Title 1</a></li>
								<li><a href="#">Blog Title 2</a></li>
								<li><a href="#">Blog Title 3</a></li>
							</ul>
						</footer-two>
						<footer-three>
							<h3 class="headline">PRODUCT</h3>
							<ul class="items_lists">
								<li><a href="#">Main Cat 1</a></li>
								<li><a href="#">Main Cat 2</a></li>
								<li><a href="#">Main Cat 3</a></li>
							</ul>
						</footer-three>
						<footer-four>
							<h3 class="headline">SHOP DISPLAY NAME</h3>
							<ul class="items_lists">
								<li><a href="#">Home</a></li>
								<li><a href="#">All Products</a></li>
								<li><a href="#">All Categories</a></li>
								<li><a href="#">Blog</a></li>
								<li><a href="#">Gallery</a></li>
							</ul>
						</footer-four>
					</component-footer-code>

BLOGS

PRODUCT

SHOP DISPLAY NAME

Component Footer : logo-menu-contact-socialnetwork

Component Footer : menu-menu-contact-socialnetwork

<component-footer-code code="menu-menu-contact-socialnetwork" imgpath="{{home.imgPath}}" imglogo="dark" name="gaedemo101" backgroundcolor="#111" headline="#fff" textcolor="#fff" textcolorhover="#504c4c">
						<footer-one>
							<h3 style="color:#fff;">Menu</h3>
							<ul class="footer">
								<li><a href="home" title="Home">Home</a></li>
								<li><a href="about" title="About">About</a></li>
								<li><a href="home?section=news" title="News">News</a></li>
								<li><a href="portfolio" title="portfolio">Portfolio</a></li>
								<li><a href="career" title="Career">Career</a></li>
								<li><a href="contact" title="Contact">Contact</a></li>
							</ul>
						</footer-one>
						<footer-two>
							<h3 style="color:#fff;">About</h3>
							<ul class="footer">
								<li><a href="about?section=1" >History</a></li>
								<li><a href="about?section=2" >Vision</a></li>
								<li><a href="about?section=3" >Mission</a></li>
								<li><a href="about?section=4" >Core Value</a></li>
							</ul>
						</footer-two>
					</component-footer-code>

About

Component Footer : logo-menu-menu-socialnetwork

<component-footer-code code="logo-menu-menu-socialnetwork" imgpath="{{home.imgPath}}" imglogo="dark" name="gaedemo101" backgroundcolor="#111" headline="#fff" textcolor="#fff" textcolorhover="#504c4c">
						<footer-one>
							<h3 style="color:#fff;">Menu</h3>
							<ul class="footer">
								<li><a href="home" title="Home">Home</a></li>
								<li><a href="about" title="About">About</a></li>
								<li><a href="home?section=news" title="News">News</a></li>
								<li><a href="portfolio" title="portfolio">Portfolio</a></li>
								<li><a href="career" title="Career">Career</a></li>
								<li><a href="contact" title="Contact">Contact</a></li>
							</ul>
						</footer-one>
						<footer-two>
							<h3 style="color:#fff;">About</h3>
							<ul class="footer">
								<li><a href="about?section=1" >History</a></li>
								<li><a href="about?section=2" >Vision</a></li>
								<li><a href="about?section=3" >Mission</a></li>
								<li><a href="about?section=4" >Core Value</a></li>
							</ul>
						</footer-two>
					</component-footer-code>

About

Component Footer : logo-menu&socialnetwork

Home Product Blogs About Us Contact Us Video

Component Video Lists

* อย่าลืมใส่ Grid *
margin = ระยะ
column = 2,4, หรือไม่ใส่
maxresult = จำนวนวีดีโอ
headtext = ข้อความที่แสดงบนหัว
morebutton = Load More สำหรับหน้าใน

แปะหน้า /video-lists

แปะหน้าแรก /home (มีปุ่ม Show All สำหรับไปหน้าใน)

Example: honda.getappeasy.com

{{c[0].name}} = {{c[0].total > 0}}

Component Product Card (Design A) / productdata=item object

{{c[0].name}} = {{c[0].total > 0}}

Component Product Card (Design B-1)

Ref: zoomcamera

imgpath="{{home.imgPath}}" badgeid="75" text="Special Price | สินค้าราคาพิเศษ"

{{c[0].name}} = {{c[0].total > 0}}

Component Product Card (Design B-2)

Ref: zoomcamera

imgpath="{{home.imgPath}}" referralid="5362" text=" โทรศัพท์มือถือ"

{{c[0].name}} = {{c[0].total > 0}}

Component Product Card (Design C-1)

Ref: rmaphone

name="demo101" textheader="สินค้า" btnstyle="filled_button_small" textbuy="Show Now"

{{c[0].name}} = {{c[0].total > 0}}

Component Product Card (Design C-1)

Ref: rmaphone

name="demo101" childcomponent="product-grid-type-b" badgeid="74" imgpath="{{home.imgPath}}" img="bg_recommend.jpg" text="Recommend"

{{c[0].name}} = {{c[0].total > 0}}

Component Product Card All

Ref: all

Component Location (Branch) List / margin=""

{{c[0].name}} = {{c[0].total > 0}}

Component Location (Branch) Detail / margin=""

{{c[0].name}} = {{c[0].total > 0}}

Component Text Slide

{{c[0].name}} = {{c[0].total > 0}}

Component Gallery : Boxed Grid

ต้องมีการแก้ config.js ของ /gallery ใหม่เสมอ ให้ดูตัวอย่าง config.js ของ gae_demo101/staticfiles/app/controller/config.js

ต้นฉบับ เว็บต้นฉบับ
ดูตัวอย่างใช้จริงได้ที่ Gallery

type - ใส่ type เป็น "portfolio-boxed-grid"
imgpath - ใส่ path รูป
uselightbox - ใส่ uselightbox="true" ถ้าต้องการใช้ lightbox (plugin)
(อย่าลืมเอาไปใช้ใน Grid เสมอ)

type="portfolio-boxed-grid" imgpath="{{home.imgPath}}" uselightbox="true"

Component Gallery : Carousel Boxed (มี Animate มาจากทางขวา fate-in slide)

ต้นฉบับ เว็บต้นฉบับ
ดูตัวอย่างใช้จริงได้ที่ Gallery

type - ใส่ type เป็น "portfolio-carousel-boxed"
imgpath - ใส่ path รูป
uselightbox - ใส่ uselightbox="true" ถ้าต้องการใช้ lightbox (plugin)
(อย่าลืมเอาไปใช้ใน Grid เสมอ)

type="portfolio-carousel-boxed" imgpath="{{home.imgPath}}" uselightbox="true"

Component Gallery : Images Boxed (มี Animate Zoom-in เล็ก -> ปกติ)

ต้นฉบับ เว็บต้นฉบับ
ดูตัวอย่างใช้จริงได้ที่ Gallery

type - ใส่ type เป็น "portfolio-images-boxed"
imgpath - ใส่ path รูป
uselightbox - ใส่ uselightbox="true" ถ้าต้องการใช้ lightbox (plugin)
(อย่าลืมเอาไปใช้ใน Grid เสมอ)

type="portfolio-images-boxed" imgpath="{{home.imgPath}}" uselightbox="true"

Component Gallery Id : ดึง Manual เอา Gallery Id มาแสดง (คือข้างในจะมีลิสอัลบัม แลช้วกดเข้าไปถึงจะมีลิสรูปอีกที)

ต้องมีการแก้ config.js ของ /gallery ใหม่เสมอ ให้ดูตัวอย่าง config.js ของ gae_demo101/staticfiles/app/controller/config.js
จำเป็นต้องมีหน้า /gallery รองรับ

galleryid = ไอดีของแกลเลอรี่นั้นๆ เช่น 157 (ตัวอย่างของ allbestk)
galleryname = ชื่อของแกลลอรี่นั้นๆ (ตัวอย่างของ allbestk)

galleryid="157" galleryname="Siberian-Husky" uselightbox="true"

Carousel Main: 600px,left,filled_button_round, font=SANS-SERIF

Carousel Main: 600px,center,outlined_button_small

Carousel Main: 600px,right,border_button_large,margin=40px 0px;

Carousel Main A: 600px,left,filled_button_round, font=SANS-SERIF

Carousel Secondary: 300px,center,filled_button_round, font=SANS-SERIF

Carousel Secondary: 600px,center,filled_button_round, font=SANS-SERIF

Carousel Secondary: 800px,center,filled_button_round, font=SANS-SERIF

Carousel Secondary: 100%,center,filled_button_round, font=SANS-SERIF

Carousel Secondary: 100% - header,center,filled_button_round, font=SANS-SERIF

Main Banner: 250px, margin="20px 0px"

Top Page Banner: 200px, margin="100px 0px 30px 0px"

Bottom Page Banner: 200px, margin="20px 0px"

Mini Banner: 250px, margin="20px 0px"

Vendor slide:

Mini Box Banner: แสดงเป็นสีเหลี่ยม ธรรมดา ไม่มี Slide

Home Page Video

ใส่ padding / margin

Font & Heading config

h1@{{item.ratio}} ({{item.text_first}}px)

h2@{{item.ratio}} ({{item.text_second}}px)

h3@{{item.ratio}} ({{item.text_first}}px)

Button & Text Style

Text

Primary Text

เพิ่มเติมการ Hover, Active ของสีต่างๆ

Primary Text Reverse

Secondary Text

Secondary Background Color

Special Text, Special Text ()

Primary color on text

Secondary color on text

Special color on text

Primary Background Color

Secondary Background Color

Special Background Color

Primary : Filled Button

Primary : Outlined Button

Primary : Border Button

Secondary : Filled Button

Secondary : Outlined Button

Secondary : Border Button

Special : Filled Button

Special : Outlined Button

Special : Border Button

Invert เรียกใช้ button สลับสี

CSS Form

ตําแหน่ง สมัครงาน

Select

Checkboxes

Radio buttons

Amimate Element

Post List (Blog)

Post List Feature (Blog)

Post Detail (Blog)

# Code

# Design

# Header

# Relate Post

Page Detail

Product Category Badge

Product Category Feature (1)

Product List (Product Grid Dark)

Product List Feature (2)

Product Detail

Go to top

View Image

Carousel แบบเก่า (Layout Hero Transparent)

Head แบบใหม่ (Header Desktop)

Head แบบเก่า (Header Desktop)

Category Lists : Design A / Color=Text color, Primary=Head+Button Color

Category Lists : Design B / Color=Text color, Primary=Head+Button Color

Category Lists : Design C / Color=Text color, Primary=Head+Button Color, Name=Customer name

Category Lists : Design D / text="Featured Category"

Footer

Component Footer : Design A

Component Footer : Design B

Component Footer : Design C

Component Footer : FT303

Component Footer : FT101

Component Footer : FT102