User Rating: 5 / 5

ขั้นตอนการเพิ่ม Tiktok Font Awesome Icon ใน Prestashop Blocksocial Module จากของเดิมที่มีอยู่ 8 Social Links สามารถทำได้โดยการ Edit file blocksocial.php, blocksocial.tpl,  header.tpl, และ global.css ที่อยู่ใน Path folder ต่างๆกันได้ดังนี้

แก้ไข files blocksocial.php กับ blocksocial.tpl ที่ path /modules/blocksocial โดยทำการเพิ่ม Function ต่างๆให้เหมือนกับของเดิมที่มีอยู่ Copy มากจาก Code เดิมก็ได้

  • blocksocial.php จะเพิ่มในส่วนของ Function -->> install, uninstall, getContent, hookDisplayFooter, renderForm, และ getConfigFieldsValues

 วิธีเพิ่ม Tiktok Font Awesome Icon ใน Prestashop Blocksocial Module

  • blocksocial.tpl จะเพิ่มตามรูปด้านล่าง เพื่อ check ว่าถ้ามีการกำหนดค่า Url ของ Tiktok เอาไว้ให้นำ List Icon ออกมาแสดง

วิธีเพิ่ม Tiktok Font Awesome Icon ใน Prestashop Blocksocial Module

แก้ไขไฟล์ blocksocial.tpl อีกไฟล์ อยู่ที่ Path /var/www/elec2rak.com/public_html/themes/default-bootstrap/modules/blocksocial  เพิ่มในลำดับแสดงผลที่ต้องการ

{if isset($tiktok_url) && $tiktok_url != ''}
<li class="tiktok">
<a class="_blank" href="/{$tiktok_url|escape:html:'UTF-8'}">
<span>{l s='Tiktok' mod='blocksocial'}</span>
</a>
</li>
{/if}

Tiktok Font Awesome Icon มีรหัส Content เป็น e07b เป็น Font awesome Version 5.0 เป็น Vesion ใหม่กว่าที่ Module Load ใช้งาน อยู่ที่ Path /themes/default-bootstrap/fonts ซึ่งเป็น Version 4.3.0 

  • จึงต้อทำการ Load stylesheet version ใหม่ที่รองรับ Icon Tiktok ในส่วนของ header.tpl ที่อยู่ที่ /themes/default-bootstrap ก่อน 

Upgrading from Version 4

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/v4-shims.css">  

  • จากนั้นจึงทำการเพิ่ม CSS ใน global.css ที่ /themes/default-bootstrap/css ให้ใช้ font-family เป็น Font Awesome 5 Brands สำหรับ Font Awesome Version 5

.footer-container #footer #social_block ul li.tiktok a:before {
content: "\e07b";
font-family: "Font Awesome 5 Brands"}

เราก็จะได้ Tiktok Font Awesome Icon ใน Prestashop Blocksocial Module Link ไปยัง Tiktok channle ของเราตามรูปตัวอย่างด้านล่าง

วิธีเพิ่ม Tiktok Font Awesome Icon ใน Prestashop Blocksocial Module

Reference: [solved] How to add new social icons

เพิ่มคอมเมนต์ใหม่

รหัสป้องกันความปลอดภัย
รีเฟรช

  • Honda Accord 1990 วันจันทร์, 22 พฤศจิกายน 2553

    พอดี LED สีขาวเหลืออยู่ เลยของเอามาทำเป็นไฟหน้า LED โดยใช้วงจรเดียวกับที่ทำไฟเลี้ยว เวอร์ชั่นแรกนี้เอาแบบธรรมดาไปก่อน ใช้ Module 4 ชุด ชุดละ 8 ตัว รวมทั้งหมด 32 ตัว ใส่ออกมาแล้วสีขาวใสดี...

  • Honda Accord 1990 วันอังคาร, 23 มกราคม 2550

    แอคคอร์ดตาเพชร จะมีวงจรเอาไว้คอยตรวจสอบไฟเบรคด้านท้ายทั้ง 5 ดวง ในกรณีที่มีไฟเบรคดวงได้ดวงหนึ่งทำงานผิดพลาดคือ ไม่ติด เนื่องจากสาเหตุอะไรก็แล้วแต่ อย่างเช่น หลอดไฟขาด...

  • Honda Accord 1990 วันจันทร์, 21 กุมภาพันธ์ 2554

    หลังจากติดตั้ง LPG ระบบดูด หรือ Fix mixer ไปเมื่อปี 2007 ปรากฎว่าประสิทธิภาพในการทำงานไม่ดีเท่าที่ควร คือ MPG ต่ำเกินไป คราวนี้เราจะมา Upgrade ให้เป็นระบบหัวฉีด...