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

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

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

  • Learning and Education วันเสาร์, 19 พฤศจิกายน 2554

    10 ways to protect the car engine damage after the flood before starting the engine again. 

  • Electronics วันอังคาร, 17 มิถุนายน 2551

    วันนี้เราจะมาทำป้ายเชียร์ Concert แบบมีไฟกระพริบๆปี้บๆกัน โดยใช้หลอด LED เอาแบบ simpleๆ แต่เน้นอลังการงานสร้างไว้ก่อน คือแบบว่าให้กำลังใจนักร้องกันแบบเห็นมาแต่ไกล เอาให้แดงกันไปทั้ง Hall...

  • Automotive วันอาทิตย์, 05 เมษายน 2552

    หลังจากลอง HHO cell แบบเปียกไปแล้ว ทีนี้เราจะมาลองทำแบบ Dry cell บาง หลักการคราวๆของมันก็จะทำการแยก ส่วนที่เป็นตัวนำ ในที่นี้ก็คือ stainless steel ออกมาไว้ตากหากจาก Electrolyte ซึ่งก็คือ น้ำกลันผสม baking soda...