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

Pin It

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

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

More DIY Articles

  • Automotive วันพฤหัสบดี, 16 กันยายน 2553

    คราวนี้เราจะมาประเมินสถานการณ์กันว่า Accord ตาเพชรจะสามารถสตาร์ทกับดับเครื่องยนต์ด้วยสวิตช์เพียงปุ่มเดียว แบบไม่ต้องใช้กุญแจได้หรือเปล่า อันนี้ยังไม่รวมระบบ Keyless Entry...

  • Alfa Romeo 156 วันศุกร์, 08 พฤษภาคม 2558

    คราวนี้มาถึงจุดที่โดดเด่นที่สุดอีกจุดในรถ Alfa Romeo 156 ก็คือ Infocenter display หรือจอแสดงผล ตรงกลางรถควบคุม บอกสถานะต่างๆ ที่ได้มานี่คือตัวอักษรแสดงผลมันจะเริ่มซีดจางแล้ว...

  • Honda Accord 1990 วันจันทร์, 29 ตุลาคม 2550

    วันนี้ลองเปลี่ยนสีกระจังหน้ารถเป็นสีเดียวกับตัวรถซะหน่อย แต่สีเปรย์ที่ใช้มันดันไม่ค่อยเข้ากับตัวรถเท่าไรเลย แถมต้องโป้วก่อนอีกนิดหน่อยเพราะว่ามันหัก แย่จริง...

  • Computer วันเสาร์, 07 มิถุนายน 2551

    "Format ลงใหม่" concept ง่ายๆคล้ายว่าจะสิ้นคิดของการซ่อมเครื่อง PC ทั่วๆไป ที่ใช้ได้ผล ลงแบบ Clean install ลงแบบ Partition ไม่ซ้ำซ้อน มีขั้นตอนง่ายๆที่จะปลุกผีเครื่องคอมพิวเตอร์เครื่องเก่าเก็บ...