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

More DIY Articles

  • AP Pleno วันอังคาร, 10 ธันวาคม 2562

    DIY How-to create a thing with 3D printer การใช้งานเครื่องพิมพ์ 3มิติ ออกแบบชิ้นงานของตนเอง บทความนี้จะนำเสนอขั้นตอนหลักๆ ในการออกแบบชิ้นงานที่ต้องการ แล้วพิมพ์ออกใช้เองได้จริงด้วยเครื่องพิมพ์ 3 มิติ

  • Computer วันพุธ, 20 มกราคม 2553

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

  • Honda Accord 1990 วันพุธ, 31 ธันวาคม 2512

    มาดูวิธีการเปลี่ยน Timing belt กับ Balance shafts belt กันนะครับ ส่วนใหญ่ก็จะเปลี่ยนกันที่แสนโลนะครับ แต่ผมว่า 60,000-70,000 โล ก็พอแล้วนะครับ ไม่งั้นถ้าขาดก็ต้องเปิด Cylinder head หรือที่เราเรียกกันทั่วไปว่า...

  • Automotive วันจันทร์, 10 สิงหาคม 2552

    คราวนี้มาลองทำวงจรกรองความถี่สัญญาณรบกวนไฟกระแสตรงสำหรับใช้ในรถกัน วงจรก็ไม่มีอะไรมาก C ล้วนๆ เพราะว่าเนื่องจากในรถยนต์ตอนที่เครื่องติดอยู่...