জাভাস্ক্রিপ্ট ইফ-এলস

Noah Rousseau

রবিবার, ২৯ সেপ্টেম্বর, ২০২৪ ৮:৪৪:১২ AM

একাধিক পণ্যের জন্য কার্যকর জাভাস্ক্রিপ্ট কাউন্টার আপডেট

জাভাস্ক্রিপ্ট ডাইনামিক ইনপুট উপাদানগুলির সাথে কাজ করা চ্যালেঞ্জিং হতে পারে, বিশেষ করে যখন শর্তসাপেক্ষে এর ভিতরে মানগুলি আপডেট করা হয় যদি-অন্যথায় বিবৃতি একটি অনলাইন শপিং কার্টে আইটেম যোগ করার মতো পরিস্থিতিতে মোট এবং পরিমাণ সঠিকভাবে রেকর্ড করা অত্যন্ত গুরুত্বপূর্ণ। যাইহোক, এই পরিস্থিতিতে বেশ কিছু জিনিস পরিচালনা করা ডেভেলপারদের জন্য ঘন ঘন অসুবিধার সম্মুখীন হয়।

এই পোস্টটি একটি প্রচলিত সমস্যা নিয়ে আলোচনা করবে যেখানে শপিং বাস্কেটে নতুন জিনিস নির্বাচন করার ফলে পূর্বে নির্বাচিত আইটেমগুলির জন্য কাউন্টার পুনরায় সেট করা হয়। আইটেমগুলির মধ্যে স্থানান্তর করার সময় কাউন্টারগুলি পুনরায় সেট হতে দেখা যায়, যদিও তারা প্রথমে সঠিকভাবে কাজ করে। ব্যবহারকারীরা এই আচরণের দ্বারা বিভ্রান্ত হন কারণ কার্টের সমস্ত পণ্য সঠিক পরিমাণের প্রতিনিধিত্ব করে না।

আমরা একটি কোড উদাহরণের মধ্য দিয়ে যাব যেখানে এই সমস্যাটি দেখা দেয় এবং কারণটি নিয়ে আলোচনা করব। মসৃণ ক্রিয়াকলাপের জন্য, প্রতিটি পণ্যের কাউন্টারকে কীভাবে চেক করা যায় এবং সমস্ত ইনপুট নম্বরগুলি স্থির থাকার গ্যারান্টি দেওয়া হয় তা জানা অপরিহার্য। কয়েক টুইক দিয়ে, যদি-অন্যথায় জাভাস্ক্রিপ্ট লজিক ব্যবহার করে বিবৃতি যথাযথভাবে এটি পরিচালনা করতে পারে।

আপনি এই নিবন্ধটি পড়া শেষ করার সময়, আপনি কীভাবে সমস্যাটি সমাধান করবেন এবং সমস্ত কাউন্টার সংরক্ষণ করবেন তা আপনি জানবেন, আপনার শপিং কার্ট সবসময় প্রতিটি আইটেমের সঠিক পরিমাণ দেখায় তা নিশ্চিত করে আপনি যখন তাদের মধ্যে স্থানান্তর করেন তখনও।

আদেশ	ব্যবহারের উদাহরণ
cart = {}	কার্ট আইটেম কাউন্টার স্টোরেজের জন্য একটি ফাঁকা বস্তু সংজ্ঞায়িত করে। এই অবজেক্টের সাহায্যে, আপনি আইটেমগুলির মধ্যে পরিবর্তন করার সময় স্টেট রিসেট না করে গতিশীলভাবে প্রতিটি পণ্যের জন্য মোট এবং পরিমাণের ট্র্যাক রাখতে পারেন।
updateCart(item, price, counterKey)	একটি আসল বৈশিষ্ট্য যা প্রতিবার একটি আইটেম ক্লিক করার সময় কার্টটিকে পরিবর্তন করে। গণনা এবং পরিমাণ আপডেট করতে, এটি আইটেমের নাম, মূল্য এবং প্রতিটি আইটেমের জন্য একটি বিশেষ কী-এর প্যারামিটার লাগে।
cart[counterKey]	প্রতিটি আইটেমের জন্য কার্ট অবজেক্টে একটি সম্পত্তি (যেমন "miloCounter") অ্যাক্সেস বা যোগ করে। এটি ইতিমধ্যেই বিদ্যমান না থাকলে কীটি শুরু করে, নিশ্চিত করে যে সংখ্যাটি শুধুমাত্র সেই নির্দিষ্ট পণ্যের জন্য বৃদ্ধি পায়।
renderCart()	একটি ফাংশন যা কার্টের প্রতিটি আইটেমের উপর গতিশীলভাবে বিষয়বস্তু রেন্ডার করে। পণ্যের মোট এবং পরিমাণ দেখানোর জন্য, এটি প্রয়োজনীয় HTML তৈরি করে এবং অ-শূন্য কাউন্টারগুলির সন্ধান করে।
for (var item in cartItems)	কার্টের প্রতিটি আইটেমের জন্য পুনরাবৃত্তি হয়৷ পণ্যের বিবরণ অ্যাক্সেস করুন এবং নিশ্চিত করুন যে সমস্ত নির্বাচিত পণ্যগুলি আইটেম অবজেক্ট ব্যবহার করে কার্টে প্রতিফলিত হয়েছে৷ রেন্ডার করার আগে, এই লুপ প্রতিটি আইটেমের সংখ্যা নির্ধারণ করে।
document.getElementById()	তাদের স্বতন্ত্র ID এর উপর ভিত্তি করে HTML উপাদান (যেমন "milo" এবং "ovaltine") বেছে নেয়। এটি কার্টের প্রতিটি পণ্যের সাথে মিথস্ক্রিয়া করার জন্য ইভেন্ট শ্রোতাদের সংযুক্ত করে জাভাস্ক্রিপ্ট লজিকের সাথে UI সংযোগ করা সম্ভব করে তোলে।
console.assert()	পরীক্ষার জন্য নমুনা ইউনিট পরীক্ষায় ব্যবহার করা হয়। এটি যাচাই করে যে কার্টের প্রকৃত মানগুলি প্রত্যাশিত মানগুলির সাথে মেলে (যেমন "মিলো" গণনা)। একটি পরীক্ষা ব্যর্থ হলে কনসোলে একটি ত্রুটি নিক্ষেপ করা হয়, যা সমস্যা সনাক্তকরণে সহায়তা করে।
innerHTML +=	কার্টে একটি টেবিল সারি মত, ইতিমধ্যে বিদ্যমান একটি উপাদান নতুন HTML বিষয়বস্তু যোগ করে। এই কৌশলের সাহায্যে, বর্তমান বিষয়বস্তু মুছে না দিয়ে গতিশীলভাবে শপিং কার্টে নতুন পণ্য এন্ট্রি যোগ করা যেতে পারে।
addEventListener('click')	প্রতিটি পণ্যের বোতাম বা ছবিতে একটি ক্লিক ইভেন্ট শ্রোতা যোগ করে। সংশ্লিষ্ট ফাংশন সক্রিয় হয় যখন একজন ব্যবহারকারী একটি আইটেমে ক্লিক করে, গতিশীলভাবে কার্টের পরিমাণ এবং মোট পরিবর্তন করে।

জাভাস্ক্রিপ্ট দিয়ে ডায়নামিক কার্ট আপডেট সমস্যা সমাধান করা

শপিং কার্টে বিভিন্ন পণ্য পরিচালনা করতে জাভাস্ক্রিপ্ট ব্যবহার করার সময় পূর্বোক্ত স্ক্রিপ্টগুলি একটি ঘন ঘন সমস্যার সমাধান করে। প্রাথমিক সমস্যা হল যে একটি নতুন আইটেম যোগ করা পূর্বে যোগ করা আইটেমগুলির জন্য কাউন্টারগুলি পুনরায় সেট করে। স্ক্রিপ্টগুলি এটিকে মোকাবেলা করার জন্য ইভেন্ট শ্রোতাদের সাথে আইটেম সংখ্যা এবং মোট সংরক্ষণ করার জন্য একটি অবজেক্ট-ভিত্তিক পদ্ধতি নিয়োগ করে। আমরা গ্যারান্টি দিচ্ছি যে প্রতিটি পণ্যের কাউন্টারটি ব্যবহার করে তাদের সাথে হস্তক্ষেপ না করে অন্যদের থেকে আলাদাভাবে আপডেট এবং রক্ষণাবেক্ষণ করা হবে কার্ট বস্তু এই পদ্ধতিটি রিসেট সমস্যা থেকে মুক্তি দেয় যাতে প্রতিটি পণ্যের জন্য গণনা সঠিক থাকে।

দ আপডেটকার্ট পদ্ধতি, যা গতিশীলভাবে কার্টে পণ্য যোগ করা পরিচালনা করে, এটি সমাধানের একটি গুরুত্বপূর্ণ উপাদান। একটি আইটেম কার্টে আছে কিনা তা নির্ধারণ করতে এই ফাংশনটি অনন্য কাউন্টার কী (যেমন "miloCounter") ব্যবহার করে। স্ক্রিপ্টটি কাউন্টারটিকে আরম্ভ করে যদি এই প্রথমবার আইটেমটি যোগ করা হয়। যদি না হয়, ফাংশন মোট মূল্য পুনরায় গণনা করে এবং বর্তমান কাউন্টার বৃদ্ধি করে। দ innerHTML অ্যাট্রিবিউট এইচটিএমএল আপডেট করে যাতে ব্যবহারকারী এখনই পরিবর্তনগুলি দেখতে পারে।

কার্টে প্রতিটি পণ্যের সঠিক প্রদর্শন দ্বারা নিশ্চিত করা হয় রেন্ডারকার্ট ফাংশন এটি মাধ্যমে পুনরাবৃত্তি কার্ট আইটেম বস্তু, প্রতিটি পণ্যের সংখ্যা শূন্য অতিক্রম করে কিনা তা যাচাই করা। সেই ক্ষেত্রে, ফাংশনটি প্রতিটি আইটেমের পরিমাণ এবং মোট খরচ প্রদর্শন করার জন্য প্রয়োজনীয় HTML তৈরি করে। এটি গ্যারান্টি দেয় যে নতুন পণ্য যুক্ত করা পুরানোগুলিকে ওভাররাইট করে না এবং কার্টের প্রদর্শন বর্তমান বজায় রাখে। অনলাইন অ্যাপ্লিকেশনে, এই কৌশলটি গতিশীল বিষয়বস্তু পরিচালনার জন্য খুবই সহায়ক।

উপরন্তু, console.assert আইটেম কাউন্টার এবং টোটালগুলি উদ্দেশ্য অনুযায়ী কাজ করছে কিনা তা যাচাই করতে ইউনিট পরীক্ষায় ব্যবহৃত হয়। পণ্য বোতামে ক্লিক করে এবং নিশ্চিত করে যে প্রত্যাশিত কাউন্টার মানগুলি তে সংরক্ষিত প্রকৃত ফলাফলের সাথে মেলে কার্ট বস্তু, এই পরীক্ষাগুলি ব্যবহারকারীর মিথস্ক্রিয়া অনুকরণ করে। এটি সঠিক যুক্তির গ্যারান্টি দেয় এবং বাগগুলি সনাক্ত না হওয়া থেকে রক্ষা করে। সমস্ত বিষয় বিবেচনা করা হয়েছে, স্ক্রিপ্টগুলি জাভাস্ক্রিপ্টে চলা শপিং কার্টে পণ্য আপডেটগুলি পরিচালনা করার জন্য একটি পুনঃব্যবহারযোগ্য এবং মডুলার পদ্ধতি প্রদান করে।

জাভাস্ক্রিপ্ট শপিং কার্টে ডায়নামিক পণ্য কাউন্টার পরিচালনা করা

ডায়নামিক কার্ট আপডেটের জন্য মৌলিক জাভাস্ক্রিপ্ট ব্যবহার করা

var milo = document.getElementById('milo');
var ovaltine = document.getElementById('ovaltine');
var bournvita = document.getElementById('bournvita');
var miloPrice = 2000.00, miloCounter = 0, miloAmount = 0;
var ovaltinePrice = 1500.00, ovaltineCounter = 0, ovaltineAmount = 0;
var bournvitaPrice = 1850.00, bournvitaCounter = 0, bournvitaAmount = 0;

var cart = {}; // Object to store counters for each item

function updateCart(item, price, counterKey) {
    if (!cart[counterKey]) { cart[counterKey] = 1; } 
    else { cart[counterKey] += 1; }
    var total = cart[counterKey] * price;
    document.getElementById('cartdetails').innerHTML +=
    '<tr><td>' + cart[counterKey] + '</td><td>' + total + '</td></tr>';
}

milo.addEventListener('click', function() { updateCart('milo', miloPrice, 'miloCounter'); });
ovaltine.addEventListener('click', function() { updateCart('ovaltine', ovaltinePrice, 'ovaltineCounter'); });
bournvita.addEventListener('click', function() { updateCart('bournvita', bournvitaPrice, 'bournvitaCounter'); });

জাভাস্ক্রিপ্ট অবজেক্ট ব্যবহার করে কার্ট আইটেম আপডেট পরিচালনা করা

অবজেক্ট-ভিত্তিক স্টেট ম্যানেজমেন্টের সাথে জাভাস্ক্রিপ্ট ব্যবহার করা

var cartItems = {
    'milo': { price: 2000, count: 0, total: 0 },
    'ovaltine': { price: 1500, count: 0, total: 0 },
    'bournvita': { price: 1850, count: 0, total: 0 }
};

function updateCartItem(item) {
    cartItems[item].count += 1;
    cartItems[item].total = cartItems[item].count * cartItems[item].price;
    renderCart();
}

function renderCart() {
    var cartHTML = '';
    for (var item in cartItems) {
        if (cartItems[item].count > 0) {
            cartHTML += '<tr><td>' + cartItems[item].count + '</td><td>' + cartItems[item].total + '</td></tr>';
        }
    }
    document.getElementById('cartdetails').innerHTML = cartHTML;
}

document.getElementById('milo').addEventListener('click', function() { updateCartItem('milo'); });
document.getElementById('ovaltine').addEventListener('click', function() { updateCartItem('ovaltine'); });
document.getElementById('bournvita').addEventListener('click', function() { updateCartItem('bournvita'); });

জাভাস্ক্রিপ্ট কার্ট কাউন্টার কার্যকারিতার জন্য ইউনিট পরীক্ষা

পরীক্ষার ক্ষেত্রে সাধারণ জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করা

function testCartCounter() {
    var testCart = { 'milo': 0, 'ovaltine': 0, 'bournvita': 0 };
    function clickProduct(item) { testCart[item] += 1; }
    clickProduct('milo');
    clickProduct('ovaltine');
    console.assert(testCart['milo'] === 1, 'Milo should have 1 count');
    console.assert(testCart['ovaltine'] === 1, 'Ovaltine should have 1 count');
    clickProduct('milo');
    console.assert(testCart['milo'] === 2, 'Milo should have 2 counts');
    console.log('All tests passed');
}

testCartCounter();

অবস্থা বজায় রাখা এবং জাভাস্ক্রিপ্ট শপিং কার্টে কাউন্টার রিসেট প্রতিরোধ করা

জাভাস্ক্রিপ্টে গতিশীল শপিং কার্টগুলির সাথে কাজ করার সময় কার্টের প্রতিটি আইটেমের স্থিতি বজায় রাখা একটি সাধারণ অসুবিধা, বিশেষ করে যখন নতুন পণ্য যুক্ত করা হয়। সমস্যাটি সাধারণত দেখা দেয় যখন ইভেন্ট শ্রোতারা পণ্যগুলির মধ্যে স্যুইচ করার সময় গণনাগুলি পুনরায় সেট করে কারণ সেগুলি প্রতিটি পণ্যের জন্য সঠিকভাবে সংরক্ষণ করা বা ধরে রাখা হয় না। কার্টের প্রতিটি আইটেমের স্থিতি ধারণ করে এমন একটি বিশ্বব্যাপী বস্তু তৈরি করা এটি পরিচালনা করার জন্য আরও কার্যকর পদ্ধতি হবে। এই পদ্ধতিতে, একটি নতুন আইটেম ক্লিক করার পরেও আগের আইটেমগুলির কাউন্টারগুলি পরিবর্তন হয় না।

আপনি অন্য স্ক্রিপ্ট উপাদানগুলির হস্তক্ষেপ ছাড়াই প্রতিটি পণ্যের পরিমাণ এবং মূল্য অ্যাক্সেস এবং সম্পাদনা করতে পারেন যেমন একটি বিশ্বব্যাপী বস্তুতে সংরক্ষণ করে কার্ট আইটেম. অতিরিক্তভাবে, অবজেক্ট-ভিত্তিক পদ্ধতিটি একটি সু-সংজ্ঞায়িত কাঠামো সরবরাহ করে যা একসাথে বেশ কয়েকটি আইটেম পরিচালনার সুবিধা দেয়। বস্তুর প্রাসঙ্গিক অংশ প্রতিবার একটি আইটেম ক্লিক করা হলে পরিবর্তন করা হয়, এবং পরিবর্তনগুলি অবিলম্বে শপিং কার্ট ইন্টারফেসে প্রদর্শিত হয়।

কার্টের প্রতিটি রেন্ডার বা আপডেটের জন্য পূর্বের আইটেম স্থিতিগুলি যাচাই করা এবং বজায় রাখা হয়েছে তা নিশ্চিত করাও গুরুত্বপূর্ণ। এটি সম্পন্ন করতে, তে রাখা সবচেয়ে সাম্প্রতিক ডেটা ব্যবহার করে কার্টটি রেন্ডার করুন৷ কার্ট আইটেম বস্তু এই পদ্ধতিটি গ্যারান্টি দেয় যে কার্টের সমস্ত পণ্য সঠিক সংখ্যা এবং মোট সংখ্যা প্রদর্শন করে এমনকি আইটেমগুলি যোগ বা মুছে ফেলার পরেও, পূর্ববর্তী ডেটা ওভাররাইট করার সমস্যা এড়ানো।

JavaScript শপিং কার্ট লজিক সম্পর্কে প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

যখন আমি জিনিসপত্র ঘুরাফেরা করি তখন আমি কীভাবে কাউন্টারগুলিকে আবার শুরু করা বন্ধ করতে পারি?
কাউন্টার রিসেট এড়াতে, আপনি একটি গ্লোবাল অবজেক্ট ব্যবহার করে প্রতিটি আইটেমের জন্য মোট এবং পরিমাণ পৃথকভাবে রেকর্ড করতে পারেন যেমন cartItems.
যখন আমি আমার কার্টে একটি নতুন আইটেম যোগ করি, কেন এটি পূর্বের এন্ট্রিগুলিকে ওভাররাইট করে?
কার্টের আসল এইচটিএমএল প্রতিস্থাপন করা কোডের ফলে এটি ঘটে। এটি সংশোধন করতে, ব্যবহার করে নতুন আইটেম সংযুক্ত করুন innerHTML += বিদ্যমান অপসারণ ছাড়া।
কার্টটি গতিশীলভাবে আপডেট করার সেরা উপায় কী?
জাভাস্ক্রিপ্ট ডেটা সহ কার্টটি সর্বদা আপ টু ডেট আছে তা নিশ্চিত করতে, এর মতো একটি ফাংশন ব্যবহার করুন৷ renderCart যা সমস্ত কার্ট আইটেমের মাধ্যমে পুনরাবৃত্তি করে এবং প্রদর্শন পরিবর্তন করে।
আমি কিভাবে যাচাই করতে পারি যে আমার কাউন্টারগুলি সঠিকভাবে কাজ করছে?
সমস্যা সনাক্ত করতে সাহায্য করতে, ব্যবহার করুন console.assert প্রতিটি মিথস্ক্রিয়া অনুসরণ করে আপনার কার্টের সংখ্যা সঠিক মানগুলি দেখায় তা যাচাই করতে।
এটি বিভিন্ন পণ্য একই কোড প্রয়োগ করা সম্ভব?
হ্যাঁ, আপনি কোড মডুলারাইজ করে এবং ফাংশন ব্যবহার করে ন্যূনতম পরিবর্তন সহ যেকোন সংখ্যক পণ্যের জন্য যুক্তি পরিচালনা করতে পারেন updateCart.

জাভাস্ক্রিপ্টে কাউন্টার রিসেট প্রতিরোধ করার বিষয়ে চূড়ান্ত চিন্তাভাবনা

একটি ডায়নামিক কার্টের অবস্থা অক্ষত রাখার গোপন বিষয় হল আইটেম-নির্দিষ্ট তথ্য, যেমন টোটাল এবং কাউন্টারগুলি, একটি বস্তুতে সংরক্ষণ করা। এই কৌশলটি নিশ্চিত করে যে পূর্বের আইটেমগুলি তাদের সঠিক মান বজায় রাখে এমনকি যখন নতুন পণ্যগুলি চালু করা হয়। একটিতে কাউন্টার রিসেট করার বিষয়টি এড়ানো হয়।

সংরক্ষিত ডেটা ব্যবহার করে কার্টটি গতিশীলভাবে রেন্ডার করার মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত হয়। এই পদ্ধতিটি ব্যবহার করে, কার্টটি আরও প্রতিক্রিয়াশীল এবং ইন্টারেক্টিভ হয়ে ওঠে এবং বর্তমান ব্যবহারকারীর মিথস্ক্রিয়া প্রতিফলিত করার জন্য পণ্যের মূল্য এবং পরিমাণ আপডেট করা হয়।

জাভাস্ক্রিপ্ট ডায়নামিক কার্ট কাউন্টারগুলির জন্য রেফারেন্স এবং সংস্থান

জাভাস্ক্রিপ্ট ব্যবহার সম্পর্কে বিস্তারিত অন্তর্দৃষ্টি জন্য যদি-অন্যথায় শর্তাবলী এবং DOM উপাদান আপডেট করা, দেখুন MDN ওয়েব ডক্স - যদি... অন্যথায় .
এ জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীল বিষয়বস্তু পরিচালনা এবং HTML উপাদান আপডেট করার বিষয়ে আরও জানুন W3Schools - JavaScript HTML DOM .
জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনে কাউন্টার এবং কার্ট-সম্পর্কিত সমস্যা সমাধানের জন্য, এই নির্দেশিকাটি দেখুন স্ট্যাক ওভারফ্লো - জাভাস্ক্রিপ্টে কাউন্টার রিসেট .
এই টিউটোরিয়ালটি দিয়ে জাভাস্ক্রিপ্টে অবজেক্ট-ভিত্তিক কার্ট লজিক গঠনের জন্য সর্বোত্তম অনুশীলনগুলি অন্বেষণ করুন JavaScript.info - অবজেক্ট বেসিক .

জাভাস্ক্রিপ্ট ইফ-এলস স্টেটমেন্টে শপিং কার্ট কাউন্টারের জন্য সঠিকভাবে ইনপুট উপাদান মান আপডেট করা