ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-21, Tuesday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

Shopify Checkout UI Extension නිර්මාණය: පියවරෙන් පියවර මාර්ගෝපදේශය

Shopify Checkout UI Extension නිර්මාණය: පියවරෙන් පියවර මාර්ගෝපදේශය

Shopify හි Checkout UI Extension යනු, React හෝ Preact භාවිතා කරමින් සාදන කුඩා, සුරක්ෂිත කොම්පොනන්ට් එකක් වේ. මෙය Checkout පිටුවේ නියමිත ස්ථානයක (උදා: Thank‑you පිටුවේ බ්ලොක් එකක්) පෙන්වයි. මෙම ලිපියෙන් ඔබට Shopify CLI පදනමකින් අලුත් Extension එකක් සකස් කර, Checkout දත්ත කියවීම හා ලිවීම, දේශීය පරික්ෂාව, සහ නිෂ්පාදන පරිසරයට යාවත්කාලීන කිරීමේ පියවර සම්පූර්ණ කර ගත හැක.

මෙම මාර්ගෝපදේශයේ අරමුණ, ගනුදෙනුකරුවෙකුට කූරියර්ට පණිවිඩයක් ලබාදීමට අවසර දෙන Text Field එකක් සහ එහි ඉහළින් වර්තමාන Order Subtotal එක පෙන්වන UI Extension එකක් නිර්මාණය කිරීමයි. එයින් ඔබට Extension එකේ මූලික අංග තුනක් – Target, Shopify ගෝලීය object එකෙන් කියවීම, සහ Order එකට ලිවීම – පරික්ෂා කරගත හැක.

මෙම මාර්ගෝපදේශය Shopify Functions, Branding API, හෝ post‑purchase upsell වැනි අංග ආවරණය නොකරයි. ඒවා වෙනම විස්තරාත්මක මාර්ගෝපදේශයක් අවශ්‍ය වේ. ඔබට අවශ්‍ය නම් Shopify විසින් සපයන Custom Fields tutorial එකද බලන්න.

Shopify Checkout UI Extensions vs. Shopify Functions: ඔබට කුමන එක අවශ්‍ය?

ගනුදෙනුකරුවාට දර්ශනීය අන්තර්ක්‍රියා අවශ්‍ය නම් UI Extension භාවිතා කරන්න. මිල, discount, shipping rate වැනි ගණිතමය වෙනස්කම් අවශ්‍ය නම් Functions යොදා ගන්න. UI Extension එකක් Client‑side Web Worker sandbox තුළ ක්‍රියා කරන අතර Functions Server‑side මත පවත්නා නිසා රේන්ඩරින් නොවේ.

  • UI Extensions: UI පෙන්වයි, Checkout දත්ත කියවයි/ලියයි, සියලු සැලසුම් මට්ටමට ලබා ගත හැක.
  • Shopify Functions: Discount, shipping, payment logic වෙනස් කරයි, Server‑side ක්‍රියාකාරී.

2026 ජූනි 30 වන දින පරණ Shopify Scripts අවසන් වීම නිසා, පරණ Scripts භාවිතා කරන සංවර්ධකයන් Functions වෙත මාරු විය යුතුය.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

ශ්‍රී ලංකාවේ ව්‍යාපාරිකයින්, ඩිජිටල් වෙළඳපලේ Shopify භාවිතා කරමින් සිටින්නේ නම්, Checkout UI Extension නිර්මාණය කිරීමෙන් ගනුදෙනුකරුවන්ගේ අත්දැකීම පුළුල් කරගත හැක. උදාහරණයක් ලෙස, දේශීය ප්‍රවාහක සේවා සදහා විශේෂ පණිවිඩ ක්ෂේත්‍රයක් එක් කිරීමෙන් ඇනවුම් නිවැරදිව බෙදා හැරීමේ අවස්ථා වැඩි වේ.

ශ්‍රී ලංකාවේ තාක්ෂණ ශිෂ්‍යයින්ට React/Preact, Shopify CLI, සහ GraphQL API වැනි නවතම වෙබ් සංවර්ධන තාක්ෂණය ඉගෙන ගැනීමේ අවස්ථාව ලැබේ. එමෙන්ම, ලොකල් වෙළඳපලේ අන්තර්ජාල ව්‍යාපාරිකයින්ට අභිරුචි Checkout අංග එක් කිරීමෙන් පාරිභෝගික රැඳවීම සහ මාරු අනුපාතය වැඩි කර ගැනීමට හැකියාව ලැබේ.

අවසන් වශයෙන්, Shopify Functions හා UI Extensions අතර සාර්ථකව වෙනස් කරගැනීම, පරණ Scripts ඉවත් කිරීම, සහ නවතම API අනුව වැඩ කිරීම, ශ්‍රී ලංකාවේ ඩිජිටල් ආර්ථිකයට තවත් තත්ත්වයක් එක් කරයි.

ඔබේ වෙබ් අඩවියට අලුත් Checkout අංග එක් කර, ගනුදෙනුකරුවන්ගේ අත්දැකීම උසස් කර ගැනීමට අදම මේ මාර්ගෝපදේශය අරඹන්න.

💡 ඔබේ Checkout අංගය අදම අලංකාර කරමු!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#Shopify #UI Extension #React #Preact #Sri Lanka