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

  • Do it yourself วันอังคาร, 27 ธันวาคม 2554

    Zinc plating is done for a number of reasons, often for practical surfacing and sometimes for decorative purposes. Many times, things such as screws and car parts are plated with zinc during repair or to keep them in better shape, because this plating lasts so much longer than other surfaces and resists damage and corrosion. You can have this done at a shop, but you can also do it yourself at home.

  • Automotive วันพฤหัสบดี, 28 มิถุนายน 2555

    คราวนี้มาดูวิธีเปลี่ยนไดชาร์จของ Optra กันบ้าง ตามคู่มือจะเรียกว่าเจนเนอร์เตอร์ บางยี่ห้อก็เรียกว่า Alternator แต่บ้านเราเรียกกันทั่วไปว่าไดชาร์จ...

  • Computer วันอังคาร, 01 กุมภาพันธ์ 2554

    พอดีเพิ่งจะได้เล่น Android PAD กับเขาบ้าง เลยเขียนเอาไว้เผื่อคนอื่นๆ ถึงแม้จะเป็น Android PAD จากแดนมังกร แต่พอได้เล่นแล้วก็ถือว่าน่าสนใจเลยทีเดียว เพราะว่ามีราคาถูก...

  • Joomla วันจันทร์, 26 มีนาคม 2555

    Today, we will review how to use Page Class Suffix in Joomla. If we define the Page Class Suffix in the menu parameter when we click to the page that page is displayed vary according to the Style Sheet which it was defined by Page Class Suffix inside menu parameter. For example, if we visit Gallery or Sport Leagues pages. We will see the background page will be different from the home page. We can customize any differently if required.