ระบบออกเอกสาร SDS สำหรับ Wordpress + WooCommerce

ออกเอกสารข้อมูลความปลอดภัย (Safety Data Sheet) สำหรับสารเคมีต่าง ๆ ภายในร้านค้า โดยใช้ข้อมูลจาก PubChem โดยภายในปลั้กอินจะประกอบด้วยฟังก์ชั่น ค้นหาข้อมูลสารเคมีผ่านหน้าเว็บ ออกเอกสารข้อมูลความปลอดภัยผ่านหน้าเว็บ ออกเอกสารข้อมูลสารเคมีจากหน้าสินค้า โดยชื่อสินค้าต้องมี วงเล็บ โดยมีชื่อสามัญของสารเคมีอยู่ภายในวงเล็บ สามารถใส่ความเข้มข้นของสินค้าลงในวงเล็บได้ นอกเหนือจากนั้นต้องเพิ่มคำที่ต้องถูก "ตัดออก" ลงในหน้าตั้งค่าของปลั้กอิน

ระบบ Snapshot

เอกสารที่เคยถูกแปลแล้ว จะถูกเก็บเป็น Snapshot เพื่อที่จะไม่ถูกแปลซ้ำในอนาคตหากถูกค้นหาอีก

การติดตั้ง

1. สร้าง "หน้า" บน Wordpress โดยใช้ slug ว่า "/sds" โดยหน้านี้จะใช้เป็นหน้าค้นหา
2. เพิ่ม HTML Code ดังนี้ในบนหน้าเว็บ

   <div class="row">
   <div class="col-lg">
   <div class="row">
   <div class="col" style="padding-left: 0;">
   <h2 style="margin-top: 0 !important;">ค้นหาเอกสารข้อมูลความปลอดภัย (SDS : Safety data sheet)</h2>
   </div>
   <div class="col-auto"><button id="printPageBtn" class="btn btn-primary" style="opacity: 0;">พิมพ์หน้านี้</button> <button id="officialPrintPageBtn" class="btn btn-primary" style="opacity: 0;">ออกเอกสาร SDS</button> <button id="translateBtn" class="btn btn-secondary" style="opacity: 0;">แปลเอกสาร</button></div>
   </div>
   ค้นหาโดยใช้ชื่อเต็มเป็นภาษาอังกฤษ เช่น dichloromethane หรือ CAS Number เช่น 50-00-0 หรือสูตรทางเคมี เช่น KOH
   

</div> </div> <div class="row"><input id="chemical_name" class="col-lg form-control" style="margin-left: 15px;" type="text" placeholder="กรอกชื่อสารเคมีเป็นภาษาอังกฤษ CAS Number หรือสูตรเคมี" /> <button id="chemical_search_btn" class="btn btn-primary col-lg-auto">ค้นหา</button></div> <div class="row"> <div id="result" class="col-lg"></div> <div id="menuElement" class="col-lg-3" style="display: none; height: max-content;">

<strong>Sections</strong> <ul id="menuList"></ul> </div> </div>

3. สร้างหน้าสำหรับพิมพ์อย่าง่าย (ไม่ใช่เอกสารทางการ 16 ข้อ) โดยใช้ slug คือ "/sds-print"

<div class="container">
<input id="chemical_name" class="col-lg form-control" type="text" placeholder="กรอกชื่อสารเคมี CAS Number หรือสูตรเคมี" style="display: none;" />
<img src="https://www.worldchemical.co.th/wp-content/uploads/2022/06/Group-Custom.png&quot;&gt;
<div id="result" class="no-border"></div>
<div class="waitingScreen notranslate">
<h1>กรุณารอสักครู่ เรากำลังแปลเอกสารให้กับคุณ <span id="translatePercentage">0</span>%</h1>
</div>
</div>

4. สร้างหน้าสำหรับพิมพ์เอกสาร SDS ทางการ 16 ข้อ โดยใช้ slug คือ "/official-sds-print"

   <div class="waitingScreen notranslate">
   <h1>กรุณารอสักครู่ เรากำลังแปลเอกสารให้กับคุณ <span id="translatePercentage">0</span>%</h1>
   </div>
   <div id="official_result" class="container official_print">
   

<input id="chemical_name" class="col-lg form-control" style="display: none;" type="text" placeholder="กรอกชื่อสารเคมี CAS Number หรือสูตรเคมี" /> <h3 class="text-center mb-0">ข้อมูลความปลอดภัย (Safety Data Sheet) <span id="chemical_name_title"></span></h3> <span class="font-weight-bold">1. การชี้บ่งสารเดี่ยวหรือสารผสม และผู้ผลิต (Identification of the substance or mixture and of the supplier)</span> <div class="space"><span class="font-weight-bold">1.1 ตัวบ่งชี้ผลิตภัณฑ์ตามระบบ GHS (GHS product identifier)</span> <div class="row"><span class="col-4">- ชื่อผลิตภัณฑ์</span> <span id="product_name" class="col-8">ไม่มีข้อมูล</span></div> <div class="row notranslate"><span class="col-4">- ชื่อทางเคมี</span> <span id="sec1_chemical_name" class="col-8">ไม่มีข้อมูล</span></div> <div class="row notranslate"><span class="col-4">- ชื่อเรียกอื่น</span> <span id="sec1_synonyms" class="col-8">ไม่มีข้อมูล</span></div> <div class="row notranslate"><span class="col-4">- สูตรเคมี</span> <span id="sec1_formula" class="col-8">ไม่มีข้อมูล</span></div> <div class="row notranslate"><span class="col-4">- น้ำหนักโมเลกุล</span> <span id="sec1_molecular_weight" class="col-8">ไม่มีข้อมูล</span></div> <div class="row"><span class="col-4">- CAS number</span> <span id="sec1_cas_number" class="col-8">ไม่มีข้อมูล</span></div> <span class="font-weight-bold">1.2 ข้อแนะนำและข้อจำกัดต่าง ๆ ในการใช้</span> <p id="sec1_use_restrictions" class="indent">ไม่มีข้อมูล</p>

</div> <span class="font-weight-bold">2. การบ่งชี้ความเป็นอันตราย (Hazards indentification)</span> <div class="space"><span class="font-weight-bold">2.1 การจำแนกสารเดี่ยวหรือสารผสม</span> <p id="chemical_properties" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">2.2 องค์ประกอบของฉลาก</span> <span class="font-weight-bold">การติดฉลากตามข้อกำหนด (EC) No.1272/2008</span> รูปสัญลักษณ์แสดงความอันตราย <div id="ghs_pictograms">ไม่มีข้อมูล</div> ข้อความแสดงความอันตราย <div id="ghs_hazard_statements">ไม่มีข้อมูล</div> ข้อความแสดงข้อควรระวัง <div id="ghs_precautionary_statements" class="notranslate"></div> <span class="font-weight-bold">2.3 อันตรายอื่น ๆ</span> <p id="additional_statements" class="indent">ไม่มีข้อมูล</p>

</div> <span class="font-weight-bold">3. องค์ประกอบและข้อมูลเกี่ยวกับส่วนผสม (Composition / information on ingredients)</span> <div class="space"><span class="font-weight-bold">3.1 ชื่อทางเคมี (Chemical name) และความเข้มข้น</span> <p id="chemical_name_and_concentration" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">3.2 ชื่อสามัญ (Common name) และชื่อเรียกอื่น (Synonym)</span> <div class="row"><span class="font-weight-bold col">ชื่อสามัญ</span> <span id="chemical_name_2" class="col">ไม่มีข้อมูล</span></div> <div class="row notranslate"><span class="font-weight-bold col">ชื่อเรียกอื่น</span> <span id="chemical_synonym" class="col">ไม่มีข้อมูล</span></div> <div class="row notranslate"><span class="font-weight-bold col">สูตรเคมี</span> <span id="chemical_formula" class="col">ไม่มีข้อมูล</span></div> <div class="row"><span class="font-weight-bold col">ปริมาณร้อยละ</span> <span id="percentage" class="col">ไม่มีข้อมูล</span></div> <div class="row notranslate"><span class="font-weight-bold col">น้ำหนักโมเลกุล</span> <span id="molecular_weight" class="col">ไม่มีข้อมูล</span></div> <div class="row"><span class="font-weight-bold col">CAS Number</span> <span id="cas_number" class="col">ไม่มีข้อมูล</span></div> <div class="row"><span class="font-weight-bold col">หมายเลขสหประชาชาติ (UN number)</span> <span id="un_number" class="col">ไม่มีข้อมูล</span></div> <div class="row"><span class="font-weight-bold col">หมายเลข EC (EINECS)</span> <span id="ec_number" class="col">ไม่มีข้อมูล</span></div> <div id="composition_table"></div> สำหรับข้อความแบบเต็มของข้อความแสดงความอันตรายที่แสดงไว้ในส่วนนี้ให้ดูส่วนที่ 16

</div> <span class="font-weight-bold">4. มาตรการปฐมพยาบาล (First measures)</span> <div class="space"><span class="font-weight-bold">4.1 คำอธิบายของมาตรการการปฐมพยาบาล</span> <div class="row"><span class="col-4"><span class="font-weight-bold">ข้อมูลแนะนำทั่วไป</span></span> <span id="first_aid_general" class="col-8">ไม่มีข้อมูล</span></div> <div class="row"><span class="col-4"><span class="font-weight-bold">การหายใจเข้าไป</span></span> <span id="first_aid_inhalation" class="col-8">ไม่มีข้อมูล</span></div> <div class="row"><span class="col-4"><span class="font-weight-bold">การสัมผัสผิวหนัง</span></span> <span id="first_aid_skin" class="col-8">ไม่มีข้อมูล</span></div> <div class="row"><span class="col-4"><span class="font-weight-bold">การสัมผัสดวงตา</span></span> <span id="first_aid_eye" class="col-8">ไม่มีข้อมูล</span></div> <div class="row"><span class="col-4"><span class="font-weight-bold">การกินหรือกลืนเข้าไป</span></span> <span id="first_aid_ingestion" class="col-8">ไม่มีข้อมูล</span></div> <span class="font-weight-bold">4.2 อาการและผลกระทบที่สำคัญทั้งที่เกิดแบบเฉียบพลันและที่เกิดภายหลัง</span> <p id="section4_2" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">4.3 ข้อควรพิจารณาทางการแพทย์ที่ต้องทำทันทีและการดูแลรักษาเฉพาะที่สำคัญที่ควรดำเนินการ</span> <p id="first_aid_medical_attention" class="indent">ไม่มีข้อมูล</p>

</div> <span class="font-weight-bold">5. มาตรการผจญเพลิง (Fire - fighting measure)</span> <div class="space"><span class="font-weight-bold">5.1 สารดับเพลิง</span> <span class="font-weight-bold">สารดับเพลิงที่เหมาะสม</span> <p id="fire_fighting_extinguishing_media" class="indent">เลือกใช้สารที่ใช้ดับไฟอย่างเหมาะสมกับวัสดุที่อยู่ในบริเวณใกล้เคียง</p> <span class="font-weight-bold">5.2 ความเป็นอันตรายเฉพาะที่เกิดจากสารเคมี</span> <p id="fire_fighting_specific_hazards" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">5.3 คำแนะนำสำหรับนักดับเพลิง</span> <p id="fire_fighting_advice" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">5.4 ข้อมูลเพิ่มเติม</span> <p id="fire_fighting_additional_info" class="indent">ไม่มีข้อมูล</p>

</div> <span class="font-weight-bold">6. มาตรการจัดการเมื่อมีการหกรั่วไหลของสาร (Accident release measures)</span> <div class="space"><span class="font-weight-bold">6.1 ข้อควรระวังส่วนบุคคล อุปกรณ์คุ้มครองความปลอดภัย และขั้นตอนปฏิบัติงานฉุกเฉิน</span> <span class="font-weight-bold">ข้อควรระวังส่วนบุคคล</span> <p id="sec6_personal_precautions" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">อุปกรณ์คุ้มครองความปลอดภัย</span> <p id="sec6_protective_equipment" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">ขั้นตอนปฏิบัติงานฉุกเฉิน</span> <div id="sec6_emergency_procedures">ไม่มีข้อมูล <span class="font-weight-bold">6.2 ข้อควรระวังทางสิ่งแวดล้อม</span> <p id="sec6_environmental_precautions" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">6.3 วิธีการและวัสดุสำหรับกักเก็บและทำความสะอาด (Cleaning up)</span> <p id="sec6_cleanup_methods" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">6.4 อ้างอิงไปยังส่วนอื่น</span> <p class="indent">สำหรับการกำจัดของเสียให้ดูในข้อที่ 13</p>

</div> </div> <span class="font-weight-bold">7. การขนถ่าย เคลื่อนย้ายใช้งาน และเก็บรักษา (Handling and Storage)</span> <div class="space"><span class="font-weight-bold">7.1 ข้อควรระวังในการใช้งาน</span> <p id="sec7_handling_precautions" class="indent">ไม่มีข้อมูล</p> <span class="font-weight-bold">7.2 สภาวะในการจัดเก็บที่ปลอดภัย รวมทั้งวัสดุที่เข้ากันไม่ได้</span> <p id="sec7_safe_storage" class=&quo