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

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

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

  • Social and Culture วันเสาร์, 27 กุมภาพันธ์ 2553

    มาว่ากันถึงเรื่องการจอดรถในพื้นที่สาธารณะกันต่อ ไม่ว่าจะเป็นตามห้าง อาคารต่างๆ คอนโด หอพัก ซึ่งเมื่อเกิดมีปัญหาการทรัพย์สินเสียหาย...

  • Social and Culture วันจันทร์, 20 ตุลาคม 2557

    ต่อเนื่องจากเหตุการณ์ก่อความไม่สงบยามวิกาลของ นายณรงค์ฤทธิ์ สโมสร ที่อยู่บ้านเลขที่ 50/48 บางคูรัด บางบัวทอง นนทบุรี หลังจากนั้น ผมซึ่งอาศัยอยู่ข้างบ้าน 50/47...

  • House วันอังคาร, 26 พฤษภาคม 2563

    Whether it’s slightly green or thick like pea soup, where you can’t see the bottom and only get glimpses of the fish, this quick cleaning method for pond water may work for you. While, I’ve only tested it on ponds smaller than 1000 gallons, it may work on larger ponds if you have the appropriate strength of recirculating pump and you allow enough time for all of the water to be filtered.  In other words, the larger the pond and the grosser the water, the longer it will probably take. A...