Lightbox shortcode Flatsome là gì?
Lightbox shortcode Flatsome là mã lập trình ngắn được tạo sẵn trong Flatosme cho phép bạn mở popup bất kỳ nội dung nào bên trong lightbox bằng cách nhấp vào nút hoặc một liên kết với href là #link-id
Flatsome là theme WordPress phổ biến nhất hiện nay trên thế giới với những ưu điểm nổi bật như: tương thích với SEO, load cực nhanh, hỗ trợ UX-Builder, ...
Ví dụ về Lightbox shortcode
Tạo lightbox đơn giản
Tạo một lightbox đơn giản, mở khi click button
Bước 1: tạo một button với href là "#test"
[button text="Lightbox button" link="#test"]Bước 2: Taọ một lightbox short code đơn giản
[lightbox id="test" width="600px" padding="20px"]
Thêm nội dung lightbox ở đây ....
[/lightbox]Trong đó: width là chiều dài của lightbox, padding là padding 4 bên của light box và id là id unique của lightbox
Như vậy bạn đã có một light box đơn giản mà đã thấy ở hình trên.
Nếu bạn không thể hiểu có thể xem thêm tại đây : Tạo popup trong Flatsome bằng Lightbox
Tạo Newsletter lightbox
Mở một lightbox chứa các element khác như ux_banner, html tag, hay form contact ...
Bước 1: tạo một link mở lightbox
<a href="#newsletter-signup-link"><span class="icon-envelop"></span> Newsletter Signup</a>Bước 2: tạo lightbox chứa một ux_banner để hiển thị banner và một form để lấy email của người đăng ký Newsletter
[lightbox id="newsletter-signup-link" width="600px" padding="20px"]
[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Signup for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]
[/ux_banner]
[/lightbox]Trong đó có id lightbox cũng là href của link, bên trong lightbox lần lượt là các element như ux_banner, thẻ div html, ninja form
Để lightbox luôn tự động mở
Để lightbox luôn tự mở khi người dùng ghé qua trang của bạn, hãy dùng option auto_show="always"
Ví dụ:
[lightbox auto_open="true" auto_timer="3000" auto_show="always" id="newsletter-signup-link" width="600px" padding="20px"]
[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Signup for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]
[/ux_banner]
[/lightbox]Để lightbox luôn tự động mở nhưng chỉ một lần mở duy nhất
Để lightbox luôn tự mở khi người dùng ghé qua trang của bạn nhưng chỉ mở một lần duy nhất, hãy dùng option auto_show="once"
Ví dụ
[lightbox auto_open="true" auto_timer="3000" auto_show="once" id="newsletter-signup-link" width="600px" padding="20px"]
[ux_banner bg="http://imageurl" height="400px" link="" animation="fadeInLeft" text_align="left" text_pos="left top" text_color="dark" text_width="40%"]
<h3>Signup for Newsletter</h3>
<div class="tx-div medium"></div>
[ninja_forms_display_form id=1]
[/ux_banner]
[/lightbox]Nếu bạn không thể hiểu có thể xem thêm tại đây : Tạo popup trong Flatsome bằng Lightbox
Tạo lightbox mở Hướng dẫn chọn size sản phẩm
Trong ví dụ này sẽ tạo một lightbox hiển thị bảng size sản phẩm trong trang sản phẩm, khi click button sẽ hiển thị bảng này, như ví dụ
Bước 1: Tạo một Block có tên là " Size Guide", lúc này bạn sẽ có một shortcode block tên là [block id="size-guide"] với nội dung sau
[title style="center" text="Size Guide"]
<div class="size-guide">
<table class="size-guide-table">
<thead>
<tr>
<th class="tooltip" title="United States">US</th>
<th class="tooltip" title="United Kingdom">UK</th>
<th class="tooltip" title="Italy">IT</th>
<th class="tooltip" title="France">FR</th>
<th class="tooltip" title="Germany">DE</th>
<th class="tooltip" title="Japan">JP</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>6</td>
<td>38</td>
<td>34</td>
<td>32</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>40</td>
<td>36</td>
<td>34</td>
<td>9</td>
</tr>
<tr>
<td>6</td>
<td>10</td>
<td>42</td>
<td>38</td>
<td>36</td>
<td>11</td>
</tr>
<tr>
<td>8</td>
<td>12</td>
<td>44</td>
<td>40</td>
<td>38</td>
<td>13</td>
</tr>
<tr>
<td>10</td>
<td>14</td>
<td>46</td>
<td>42</td>
<td>40</td>
<td>15</td>
</tr>
<tr>
<td>12</td>
<td>16</td>
<td>48</td>
<td>44</td>
<td>42</td>
<td>17</td>
</tr>
<tr>
<td>14</td>
<td>18</td>
<td>50</td>
<td>46</td>
<td>44</td>
<td>19</td>
</tr>
<tr>
<td>16</td>
<td>20</td>
<td>52</td>
<td>48</td>
<td>46</td>
<td>21</td>
</tr>
<tr>
<td>18</td>
<td>22</td>
<td>54</td>
<td>50</td>
<td>48</td>
<td>23</td>
</tr>
<tr>
<td>20</td>
<td>24</td>
<td>56</td>
<td>52</td>
<td>50</td>
<td>25</td>
</tr>
<tr>
<td>22</td>
<td>26</td>
<td>58</td>
<td>54</td>
<td>52</td>
<td>27</td>
</tr>
<tr>
<td>24</td>
<td>28</td>
<td>60</td>
<td>56</td>
<td>54</td>
<td>29</td>
</tr>
</tbody>
</table><!-- /.size-guide-table -->
</div><!-- /.size-guide -->
[gap]
<p style="text-align: center;">
<small>This is a size guide demo (sizes may be incorrect).</small>
</p>Bước 2: sử dụng hook của woocomerce để tạo button hiển thị bảng chọn size, có thể viết nó vào file functions.php của child theme
<?php // Do not include this if already open!
/**
* Code goes in theme functions.php
*
* Hook up Size Guide button on single product page summary.
* (This hook will not work on a Custom Product layout if the hook is not added to the page)
*/
add_action( 'woocommerce_single_product_summary', function () {
echo do_shortcode( '[button text="Size Guide" size="xsmall" radius="99" link="#size-guide"][lightbox id="size-guide" width="600px" padding="20px"][block id="size-guide"][/lightbox]' );
}, 12 );Bước 3: Thêm CSS như sau vào file styles.css hoặc vào global css trong config
.size-guide-table tr th,
.size-guide-table tr td {
text-align: center;
width: 100px;
}
.size-guide-table tr:nth-child(even) {
background-color: #fbfbfb;
}
.size-guide-table th {
background-color: #f5f5f5;
}Trở lại trang sản phẩm kiểm tra xem giống như ví dụ của Flatsome trên không.
Tuỳ chỉnh button close trong Lightbox shortcode
Để có thể tuỳ chỉnh button close mặc định của Flatsome, bạn có thể can thiệp bằng action filter
- flatsome_lightbox_close_btn_inside để thay đổi vị trí button ( true :bên trong và false là bên ngoài)
- flatsome_lightbox_close_button để thay đổi html của button
Ví dụ, thay đổi html button bằng một svg như sau:
<?php
// thay đổi html
add_filter( 'flatsome_lightbox_close_button', function ( $html ) {
$html = '<button title="%title%" type="button" class="mfp-close">';
/* f.ex. We're replacing the SVG icon into another one. */
$html .= '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.2 475.2" width="28" height="28"><path d="M405.6 69.6C360.7 24.7 301.1 0 237.6 0s-123.1 24.7-168 69.6S0 174.1 0 237.6s24.7 123.1 69.6 168 104.5 69.6 168 69.6 123.1-24.7 168-69.6 69.6-104.5 69.6-168-24.7-123.1-69.6-168zm-19.1 316.9c-39.8 39.8-92.7 61.7-148.9 61.7s-109.1-21.9-148.9-61.7c-82.1-82.1-82.1-215.7 0-297.8C128.5 48.9 181.4 27 237.6 27s109.1 21.9 148.9 61.7c82.1 82.1 82.1 215.7 0 297.8z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFF"/><path d="M342.3 132.9c-5.3-5.3-13.8-5.3-19.1 0l-85.6 85.6-85.6-85.6c-5.3-5.3-13.8-5.3-19.1 0-5.3 5.3-5.3 13.8 0 19.1l85.6 85.6-85.6 85.6c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4s6.9-1.3 9.5-4l85.6-85.6 85.6 85.6c2.6 2.6 6.1 4 9.5 4 3.5 0 6.9-1.3 9.5-4 5.3-5.3 5.3-13.8 0-19.1l-85.4-85.6 85.6-85.6c5.3-5.3 5.3-13.8 0-19.1z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFF"/></svg>';
$html .= '</button>';
return $html;
} );
// thay đổi vị trí
add_filter( 'flatsome_lightbox_close_btn_inside', '__return_true' );Nhớ là viết trong file functions.php của child theme flatsome
