$lang['tuto'] = "ਟਿ utorial ਟੋਰਿਅਲਸ"; ?>$lang['tuto'] = "ਟਿ utorial ਟੋਰਿਅਲਸ"; ?> JavaScript If-Else ਸਟੇਟਮੈਂਟਾਂ

JavaScript If-Else ਸਟੇਟਮੈਂਟਾਂ ਵਿੱਚ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਕਾਊਂਟਰਾਂ ਲਈ ਇਨਪੁਟ ਤੱਤ ਮੁੱਲਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਅੱਪਡੇਟ ਕਰਨਾ

JavaScript If-Else ਸਟੇਟਮੈਂਟਾਂ ਵਿੱਚ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਕਾਊਂਟਰਾਂ ਲਈ ਇਨਪੁਟ ਤੱਤ ਮੁੱਲਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਅੱਪਡੇਟ ਕਰਨਾ
JavaScript If-Else ਸਟੇਟਮੈਂਟਾਂ ਵਿੱਚ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਕਾਊਂਟਰਾਂ ਲਈ ਇਨਪੁਟ ਤੱਤ ਮੁੱਲਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਅੱਪਡੇਟ ਕਰਨਾ
Noah Rousseau
ਐਤਵਾਰ, 29 ਸਤੰਬਰ 2024 10:10:08 ਪੂ.ਦੁ.

ਕਈ ਉਤਪਾਦਾਂ ਲਈ ਪ੍ਰਭਾਵਸ਼ਾਲੀ JavaScript ਕਾਊਂਟਰ ਅੱਪਡੇਟ

JavaScript ਡਾਇਨਾਮਿਕ ਇਨਪੁਟ ਐਲੀਮੈਂਟਸ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨਾ ਚੁਣੌਤੀਪੂਰਨ ਹੋ ਸਕਦਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਜੇਕਰ-ਹੋਰ ਬਿਆਨ. ਔਨਲਾਈਨ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਵਿੱਚ ਆਈਟਮਾਂ ਨੂੰ ਜੋੜਨ ਵਰਗੀਆਂ ਸਥਿਤੀਆਂ ਵਿੱਚ ਕੁੱਲ ਅਤੇ ਮਾਤਰਾਵਾਂ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਰਿਕਾਰਡ ਕਰਨਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਹਾਲਾਂਕਿ, ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਕਈ ਚੀਜ਼ਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨਾ ਡਿਵੈਲਪਰਾਂ ਲਈ ਅਕਸਰ ਮੁਸ਼ਕਲ ਪੇਸ਼ ਕਰਦਾ ਹੈ।

ਇਹ ਪੋਸਟ ਇੱਕ ਪ੍ਰਚਲਿਤ ਸਮੱਸਿਆ ਬਾਰੇ ਚਰਚਾ ਕਰੇਗੀ ਜਿਸ ਵਿੱਚ ਸ਼ਾਪਿੰਗ ਟੋਕਰੀ ਵਿੱਚ ਨਵੀਆਂ ਚੀਜ਼ਾਂ ਦੀ ਚੋਣ ਕਰਨ ਨਾਲ ਪਹਿਲਾਂ ਚੁਣੀਆਂ ਗਈਆਂ ਆਈਟਮਾਂ ਲਈ ਕਾਊਂਟਰ ਰੀਸੈਟ ਹੋ ਜਾਂਦਾ ਹੈ। ਆਈਟਮਾਂ ਵਿਚਕਾਰ ਟ੍ਰਾਂਸਫਰ ਕਰਨ ਵੇਲੇ ਕਾਊਂਟਰ ਰੀਸੈਟ ਹੁੰਦੇ ਪ੍ਰਤੀਤ ਹੁੰਦੇ ਹਨ, ਭਾਵੇਂ ਉਹ ਪਹਿਲਾਂ ਠੀਕ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੇ ਹਨ। ਉਪਭੋਗਤਾ ਇਸ ਵਿਵਹਾਰ ਦੁਆਰਾ ਉਲਝਣ ਵਿੱਚ ਪੈ ਜਾਂਦੇ ਹਨ ਕਿਉਂਕਿ ਕਾਰਟ ਵਿੱਚ ਸਾਰੇ ਉਤਪਾਦ ਸਹੀ ਮਾਤਰਾਵਾਂ ਨੂੰ ਦਰਸਾਉਂਦੇ ਨਹੀਂ ਹਨ।

ਅਸੀਂ ਇੱਕ ਕੋਡ ਉਦਾਹਰਨ ਦੇ ਕੇ ਜਾਵਾਂਗੇ ਜਿੱਥੇ ਇਹ ਸਮੱਸਿਆ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਅਤੇ ਕਾਰਨ ਬਾਰੇ ਚਰਚਾ ਕਰਾਂਗੇ। ਨਿਰਵਿਘਨ ਸੰਚਾਲਨ ਲਈ, ਇਹ ਜਾਣਨਾ ਜ਼ਰੂਰੀ ਹੈ ਕਿ ਹਰੇਕ ਉਤਪਾਦ ਦੇ ਕਾਊਂਟਰ ਨੂੰ ਕਿਵੇਂ ਚੈੱਕ ਵਿੱਚ ਰੱਖਣਾ ਹੈ ਅਤੇ ਇਹ ਗਾਰੰਟੀ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਸਾਰੇ ਇਨਪੁਟ ਨੰਬਰ ਸਥਿਰ ਰਹਿਣ। ਕੁਝ ਸੁਧਾਰਾਂ ਨਾਲ, ਜੇਕਰ-ਹੋਰ JavaScript ਤਰਕ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬਿਆਨ ਇਸ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਸੰਭਾਲ ਸਕਦੇ ਹਨ।

ਜਦੋਂ ਤੱਕ ਤੁਸੀਂ ਇਸ ਲੇਖ ਨੂੰ ਪੜ੍ਹਨਾ ਖਤਮ ਕਰ ਲੈਂਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਪਤਾ ਲੱਗ ਜਾਵੇਗਾ ਕਿ ਸਮੱਸਿਆ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਨਾ ਹੈ ਅਤੇ ਸਾਰੇ ਕਾਊਂਟਰਾਂ ਨੂੰ ਕਿਵੇਂ ਸੁਰੱਖਿਅਤ ਕਰਨਾ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਤੁਹਾਡੀ ਖਰੀਦਦਾਰੀ ਕਾਰਟ ਹਮੇਸ਼ਾ ਹਰ ਆਈਟਮ ਦੀ ਸਹੀ ਮਾਤਰਾ ਦਿਖਾਉਂਦੀ ਹੈ ਭਾਵੇਂ ਤੁਸੀਂ ਉਹਨਾਂ ਵਿਚਕਾਰ ਤਬਦੀਲੀ ਕਰਦੇ ਹੋ।

ਹੁਕਮ ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ
cart = {} ਕਾਰਟ ਆਈਟਮ ਕਾਊਂਟਰ ਸਟੋਰੇਜ ਲਈ ਖਾਲੀ ਵਸਤੂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ। ਇਸ ਵਸਤੂ ਦੀ ਮਦਦ ਨਾਲ, ਤੁਸੀਂ ਆਈਟਮਾਂ ਦੇ ਵਿਚਕਾਰ ਬਦਲਦੇ ਸਮੇਂ ਸਥਿਤੀ ਨੂੰ ਰੀਸੈਟ ਕੀਤੇ ਬਿਨਾਂ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਹਰੇਕ ਉਤਪਾਦ ਲਈ ਕੁੱਲ ਅਤੇ ਮਾਤਰਾਵਾਂ ਦਾ ਰਿਕਾਰਡ ਰੱਖ ਸਕਦੇ ਹੋ।
updateCart(item, price, counterKey) ਇੱਕ ਅਸਲੀ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋ ਹਰ ਵਾਰ ਇੱਕ ਆਈਟਮ ਨੂੰ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਕਾਰਟ ਨੂੰ ਸੋਧਦੀ ਹੈ। ਗਿਣਤੀ ਅਤੇ ਰਕਮ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨ ਲਈ, ਇਹ ਆਈਟਮ ਦੇ ਨਾਮ, ਕੀਮਤ, ਅਤੇ ਹਰੇਕ ਆਈਟਮ ਲਈ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕੁੰਜੀ ਲਈ ਮਾਪਦੰਡ ਲੈਂਦਾ ਹੈ।
cart[counterKey] ਹਰ ਆਈਟਮ ਲਈ ਕਾਰਟ ਆਬਜੈਕਟ ਵਿੱਚ ਇੱਕ ਸੰਪੱਤੀ (ਜਿਵੇਂ "ਮਿਲੋਕਾਊਂਟਰ") ਤੱਕ ਪਹੁੰਚ ਜਾਂ ਜੋੜਦਾ ਹੈ। ਇਹ ਕੁੰਜੀ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ ਜੇਕਰ ਇਹ ਪਹਿਲਾਂ ਤੋਂ ਮੌਜੂਦ ਨਹੀਂ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਕਿ ਸੰਖਿਆ ਸਿਰਫ਼ ਉਸ ਖਾਸ ਉਤਪਾਦ ਲਈ ਵਧਦੀ ਹੈ।
renderCart() ਇੱਕ ਫੰਕਸ਼ਨ ਜੋ ਸਮੱਗਰੀ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕਰਨ ਲਈ ਕਾਰਟ ਵਿੱਚ ਹਰੇਕ ਆਈਟਮ ਉੱਤੇ ਦੁਹਰਾਉਂਦਾ ਹੈ। ਉਤਪਾਦ ਕੁੱਲ ਅਤੇ ਮਾਤਰਾਵਾਂ ਨੂੰ ਦਿਖਾਉਣ ਲਈ, ਇਹ ਲੋੜੀਂਦਾ HTML ਤਿਆਰ ਕਰਦਾ ਹੈ ਅਤੇ ਗੈਰ-ਜ਼ੀਰੋ ਕਾਊਂਟਰਾਂ ਦੀ ਖੋਜ ਕਰਦਾ ਹੈ।
for (var item in cartItems) ਕਾਰਟ ਵਿੱਚ ਹਰ ਆਈਟਮ ਲਈ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ। ਉਤਪਾਦ ਵੇਰਵਿਆਂ ਤੱਕ ਪਹੁੰਚ ਕਰੋ ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਸਾਰੇ ਚੁਣੇ ਹੋਏ ਉਤਪਾਦ ਆਈਟਮ ਵਸਤੂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਰਟ ਵਿੱਚ ਪ੍ਰਤੀਬਿੰਬਿਤ ਹੁੰਦੇ ਹਨ। ਰੈਂਡਰਿੰਗ ਤੋਂ ਪਹਿਲਾਂ, ਇਹ ਲੂਪ ਹਰੇਕ ਆਈਟਮ ਦੀ ਸੰਖਿਆ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ।
document.getElementById() ਉਹਨਾਂ ਦੀ ਵੱਖਰੀ ID ਦੇ ਆਧਾਰ 'ਤੇ HTML ਭਾਗਾਂ (ਜਿਵੇਂ ਕਿ "ਮਿਲੋ" ਅਤੇ "ਓਵਲਟਾਈਨ") ਨੂੰ ਚੁਣਦਾ ਹੈ। ਇਹ ਕਾਰਟ ਵਿੱਚ ਹਰੇਕ ਉਤਪਾਦ ਨਾਲ ਗੱਲਬਾਤ ਕਰਨ ਲਈ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਨੂੰ ਜੋੜ ਕੇ UI ਨੂੰ JavaScript ਤਰਕ ਨਾਲ ਜੋੜਨਾ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ।
console.assert() ਜਾਂਚ ਲਈ ਨਮੂਨਾ ਯੂਨਿਟ ਟੈਸਟ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ ਕਾਰਟ ਵਿੱਚ ਅਸਲ ਮੁੱਲ ਸੰਭਾਵਿਤ ਮੁੱਲਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ (ਜਿਵੇਂ ਕਿ "ਮਿਲੋ" ਗਿਣਤੀ)। ਜਦੋਂ ਇੱਕ ਟੈਸਟ ਫੇਲ ਹੋ ਜਾਂਦਾ ਹੈ ਤਾਂ ਕੰਸੋਲ ਵਿੱਚ ਇੱਕ ਗਲਤੀ ਸੁੱਟ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ, ਜੋ ਸਮੱਸਿਆ ਦੀ ਪਛਾਣ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦੀ ਹੈ।
innerHTML += ਕਾਰਟ ਵਿੱਚ ਇੱਕ ਸਾਰਣੀ ਕਤਾਰ ਵਾਂਗ, ਪਹਿਲਾਂ ਤੋਂ ਮੌਜੂਦ ਤੱਤ ਵਿੱਚ ਨਵੀਂ HTML ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਇਸ ਤਕਨੀਕ ਨਾਲ, ਮੌਜੂਦਾ ਸਮਗਰੀ ਨੂੰ ਮਿਟਾਏ ਬਿਨਾਂ ਨਵੇਂ ਉਤਪਾਦ ਐਂਟਰੀਆਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਵਿੱਚ ਜੋੜਿਆ ਜਾ ਸਕਦਾ ਹੈ।
addEventListener('click') ਹਰੇਕ ਉਤਪਾਦ ਦੇ ਬਟਨ ਜਾਂ ਤਸਵੀਰ ਵਿੱਚ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਜੋੜਦਾ ਹੈ। ਸੰਬੰਧਿਤ ਫੰਕਸ਼ਨ ਉਦੋਂ ਕਿਰਿਆਸ਼ੀਲ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ ਕਿਸੇ ਆਈਟਮ 'ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ, ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਕਾਰਟ ਦੀਆਂ ਮਾਤਰਾਵਾਂ ਅਤੇ ਕੁੱਲਾਂ ਨੂੰ ਬਦਲਦਾ ਹੈ।

JavaScript ਨਾਲ ਡਾਇਨਾਮਿਕ ਕਾਰਟ ਅੱਪਡੇਟ ਮੁੱਦਿਆਂ ਨੂੰ ਹੱਲ ਕਰਨਾ

ਇੱਕ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਵਿੱਚ ਕਈ ਉਤਪਾਦਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਲਈ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਉਪਰੋਕਤ ਸਕ੍ਰਿਪਟਾਂ ਅਕਸਰ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕਰਦੀਆਂ ਹਨ। ਮੁੱਖ ਮੁੱਦਾ ਇਹ ਹੈ ਕਿ ਨਵੀਂ ਆਈਟਮ ਨੂੰ ਜੋੜਨਾ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕੀਤੀਆਂ ਆਈਟਮਾਂ ਲਈ ਕਾਊਂਟਰਾਂ ਨੂੰ ਰੀਸੈਟ ਕਰਦਾ ਹੈ। ਸਕ੍ਰਿਪਟਾਂ ਇਸ ਨੂੰ ਸੰਬੋਧਿਤ ਕਰਨ ਲਈ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਦੇ ਨਾਲ ਆਈਟਮ ਦੀ ਗਿਣਤੀ ਅਤੇ ਕੁੱਲ ਨੂੰ ਸਟੋਰ ਕਰਨ ਲਈ ਇੱਕ ਆਬਜੈਕਟ-ਆਧਾਰਿਤ ਵਿਧੀ ਵਰਤਦੀਆਂ ਹਨ। ਅਸੀਂ ਗਾਰੰਟੀ ਦਿੰਦੇ ਹਾਂ ਕਿ ਹਰੇਕ ਉਤਪਾਦ ਦੇ ਕਾਊਂਟਰ ਨੂੰ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਅਤੇ ਦੂਜਿਆਂ ਤੋਂ ਵੱਖਰਾ ਰੱਖਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਉਹਨਾਂ ਵਿੱਚ ਦਖਲ ਕੀਤੇ ਬਿਨਾਂ ਕਾਰਟ ਵਸਤੂ। ਇਹ ਵਿਧੀ ਰੀਸੈਟ ਸਮੱਸਿਆ ਤੋਂ ਛੁਟਕਾਰਾ ਪਾਉਂਦੀ ਹੈ ਤਾਂ ਜੋ ਹਰੇਕ ਉਤਪਾਦ ਲਈ ਗਿਣਤੀ ਸਹੀ ਰਹੇ।

ਦ ਅੱਪਡੇਟਕਾਰਟ ਵਿਧੀ, ਜੋ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਕਾਰਟ ਵਿੱਚ ਉਤਪਾਦਾਂ ਨੂੰ ਜੋੜਨ ਦਾ ਪ੍ਰਬੰਧ ਕਰਦੀ ਹੈ, ਹੱਲ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਹੈ। ਇਹ ਫੰਕਸ਼ਨ ਵਿਲੱਖਣ ਕਾਊਂਟਰ ਕੁੰਜੀ (ਜਿਵੇਂ ਕਿ "ਮਿਲੋਕਾਊਂਟਰ") ਦੀ ਵਰਤੋਂ ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕਰਦਾ ਹੈ ਕਿ ਕੋਈ ਆਈਟਮ ਕਾਰਟ ਵਿੱਚ ਹੈ ਜਾਂ ਨਹੀਂ। ਸਕ੍ਰਿਪਟ ਕਾਊਂਟਰ ਨੂੰ ਸ਼ੁਰੂ ਕਰਦੀ ਹੈ ਜੇਕਰ ਇਹ ਪਹਿਲੀ ਵਾਰ ਆਈਟਮ ਨੂੰ ਜੋੜਿਆ ਜਾ ਰਿਹਾ ਹੈ। ਜੇਕਰ ਨਹੀਂ, ਤਾਂ ਫੰਕਸ਼ਨ ਕੁੱਲ ਕੀਮਤ ਦੀ ਮੁੜ ਗਣਨਾ ਕਰਦਾ ਹੈ ਅਤੇ ਮੌਜੂਦਾ ਕਾਊਂਟਰ ਨੂੰ ਵਧਾਉਂਦਾ ਹੈ। ਦ innerHTML ਵਿਸ਼ੇਸ਼ਤਾ HTML ਨੂੰ ਅੱਪਡੇਟ ਕਰਦੀ ਹੈ ਤਾਂ ਕਿ ਉਪਭੋਗਤਾ ਤਬਦੀਲੀਆਂ ਨੂੰ ਤੁਰੰਤ ਦੇਖ ਸਕੇ।

ਕਾਰਟ ਵਿੱਚ ਹਰੇਕ ਉਤਪਾਦ ਦੀ ਸਹੀ ਡਿਸਪਲੇਅ ਦੁਆਰਾ ਗਾਰੰਟੀ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਰੈਂਡਰਕਾਰਟ ਫੰਕਸ਼ਨ. ਇਹ ਦੁਆਰਾ ਦੁਹਰਾਉਂਦਾ ਹੈ ਕਾਰਟ ਆਈਟਮਾਂ ਵਸਤੂ, ਇਹ ਪੁਸ਼ਟੀ ਕਰਨਾ ਕਿ ਕੀ ਹਰੇਕ ਉਤਪਾਦ ਦੀ ਗਿਣਤੀ ਜ਼ੀਰੋ ਤੋਂ ਵੱਧ ਹੈ। ਉਸ ਸਥਿਤੀ ਵਿੱਚ, ਫੰਕਸ਼ਨ ਹਰੇਕ ਆਈਟਮ ਦੀ ਮਾਤਰਾ ਅਤੇ ਕੁੱਲ ਲਾਗਤ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ HTML ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਗਾਰੰਟੀ ਦਿੰਦਾ ਹੈ ਕਿ ਨਵੇਂ ਉਤਪਾਦਾਂ ਨੂੰ ਜੋੜਨਾ ਪੁਰਾਣੇ ਨੂੰ ਓਵਰਰਾਈਟ ਨਹੀਂ ਕਰਦਾ ਹੈ ਅਤੇ ਕਾਰਟ ਦੇ ਡਿਸਪਲੇ ਮੌਜੂਦਾ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦਾ ਹੈ। ਔਨਲਾਈਨ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ, ਇਹ ਤਕਨੀਕ ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਬਹੁਤ ਮਦਦਗਾਰ ਹੈ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, console.asssert ਇਹ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਯੂਨਿਟ ਟੈਸਟਾਂ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿ ਆਈਟਮ ਕਾਊਂਟਰ ਅਤੇ ਕੁੱਲ ਇਰਾਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰ ਰਹੇ ਹਨ। ਉਤਪਾਦ ਬਟਨਾਂ 'ਤੇ ਕਲਿੱਕ ਕਰਕੇ ਅਤੇ ਇਹ ਯਕੀਨੀ ਬਣਾ ਕੇ ਕਿ ਸੰਭਾਵਿਤ ਕਾਊਂਟਰ ਮੁੱਲ ਵਿੱਚ ਸੁਰੱਖਿਅਤ ਕੀਤੇ ਅਸਲ ਨਤੀਜਿਆਂ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹਨ ਕਾਰਟ ਆਬਜੈਕਟ, ਇਹ ਟੈਸਟ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਦੀ ਨਕਲ ਕਰਦੇ ਹਨ। ਇਹ ਸਹੀ ਤਰਕ ਦੀ ਗਾਰੰਟੀ ਦਿੰਦਾ ਹੈ ਅਤੇ ਬੱਗ ਨੂੰ ਅਣਪਛਾਤੇ ਦੁਆਰਾ ਪ੍ਰਾਪਤ ਕਰਨ ਤੋਂ ਰੋਕਦਾ ਹੈ। ਸਾਰੀਆਂ ਚੀਜ਼ਾਂ 'ਤੇ ਵਿਚਾਰ ਕੀਤਾ ਗਿਆ, ਸਕ੍ਰਿਪਟਾਂ JavaScript 'ਤੇ ਚੱਲਣ ਵਾਲੀ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਵਿੱਚ ਉਤਪਾਦ ਅਪਡੇਟਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਅਤੇ ਮਾਡਿਊਲਰ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ।

JavaScript ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਵਿੱਚ ਡਾਇਨਾਮਿਕ ਉਤਪਾਦ ਕਾਊਂਟਰਾਂ ਨੂੰ ਸੰਭਾਲਣਾ

ਡਾਇਨਾਮਿਕ ਕਾਰਟ ਅੱਪਡੇਟ ਲਈ ਮੂਲ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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'); });

JavaScript ਵਸਤੂਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਰਟ ਆਈਟਮ ਅੱਪਡੇਟਾਂ ਨੂੰ ਸੰਭਾਲਣਾ

ਆਬਜੈਕਟ-ਅਧਾਰਿਤ ਰਾਜ ਪ੍ਰਬੰਧਨ ਦੇ ਨਾਲ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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'); });

JavaScript ਕਾਰਟ ਕਾਊਂਟਰ ਕਾਰਜਸ਼ੀਲਤਾ ਲਈ ਯੂਨਿਟ ਟੈਸਟ

ਟੈਸਟ ਕੇਸਾਂ ਦੇ ਨਾਲ ਸਧਾਰਨ JavaScript ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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 ਸ਼ਾਪਿੰਗ ਕਾਰਟਸ ਵਿੱਚ ਕਾਊਂਟਰ ਰੀਸੈਟਸ ਨੂੰ ਰੋਕਣਾ

JavaScript ਵਿੱਚ ਗਤੀਸ਼ੀਲ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ ਕਾਰਟ ਵਿੱਚ ਹਰੇਕ ਆਈਟਮ ਦੀ ਸਥਿਤੀ ਨੂੰ ਬਣਾਈ ਰੱਖਣਾ ਇੱਕ ਆਮ ਮੁਸ਼ਕਲ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਨਵੇਂ ਉਤਪਾਦ ਸ਼ਾਮਲ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। ਸਮੱਸਿਆ ਆਮ ਤੌਰ 'ਤੇ ਉਦੋਂ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਇਵੈਂਟ ਸਰੋਤੇ ਉਤਪਾਦਾਂ ਦੇ ਵਿਚਕਾਰ ਸਵਿਚ ਕਰਦੇ ਸਮੇਂ ਗਿਣਤੀ ਨੂੰ ਰੀਸੈਟ ਕਰਦੇ ਹਨ ਕਿਉਂਕਿ ਉਹ ਹਰੇਕ ਉਤਪਾਦ ਲਈ ਸਹੀ ਢੰਗ ਨਾਲ ਸਟੋਰ ਜਾਂ ਬਰਕਰਾਰ ਨਹੀਂ ਹੁੰਦੇ ਹਨ। ਇੱਕ ਗਲੋਬਲ ਆਬਜੈਕਟ ਬਣਾਉਣਾ ਜਿਸ ਵਿੱਚ ਕਾਰਟ ਵਿੱਚ ਹਰ ਆਈਟਮ ਦੀ ਸਥਿਤੀ ਹੁੰਦੀ ਹੈ ਇਸ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਕ ਵਧੇਰੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕਾ ਹੋਵੇਗਾ। ਇਸ ਤਰ੍ਹਾਂ, ਨਵੀਂ ਆਈਟਮ 'ਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਵੀ ਪਹਿਲੀਆਂ ਆਈਟਮਾਂ ਦੇ ਕਾਊਂਟਰ ਨਹੀਂ ਬਦਲਦੇ।

ਤੁਸੀਂ ਕਿਸੇ ਗਲੋਬਲ ਆਬਜੈਕਟ ਵਿੱਚ ਸਟੋਰ ਕਰਕੇ ਦੂਜੇ ਸਕ੍ਰਿਪਟ ਤੱਤਾਂ ਦੇ ਦਖਲ ਤੋਂ ਬਿਨਾਂ ਹਰੇਕ ਉਤਪਾਦ ਦੀ ਮਾਤਰਾ ਅਤੇ ਕੀਮਤ ਤੱਕ ਪਹੁੰਚ ਅਤੇ ਸੰਪਾਦਿਤ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਕਾਰਟ ਆਈਟਮਾਂ. ਇਸ ਤੋਂ ਇਲਾਵਾ, ਆਬਜੈਕਟ-ਅਧਾਰਿਤ ਵਿਧੀ ਇੱਕ ਚੰਗੀ ਤਰ੍ਹਾਂ ਪਰਿਭਾਸ਼ਿਤ ਢਾਂਚੇ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੀ ਹੈ ਜੋ ਇੱਕੋ ਸਮੇਂ ਕਈ ਆਈਟਮਾਂ ਦੇ ਪ੍ਰਬੰਧਨ ਦੀ ਸਹੂਲਤ ਦਿੰਦੀ ਹੈ। ਹਰ ਵਾਰ ਕਿਸੇ ਆਈਟਮ 'ਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਵਸਤੂ ਦੇ ਸੰਬੰਧਿਤ ਹਿੱਸੇ ਨੂੰ ਸੋਧਿਆ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਸੋਧਾਂ ਨੂੰ ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਇੰਟਰਫੇਸ ਵਿੱਚ ਤੁਰੰਤ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਵੀ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਪਿਛਲੀ ਆਈਟਮ ਸਥਿਤੀਆਂ ਦੀ ਪੁਸ਼ਟੀ ਕੀਤੀ ਗਈ ਹੈ ਅਤੇ ਕਾਰਟ ਦੇ ਹਰੇਕ ਰੈਂਡਰ ਜਾਂ ਅੱਪਡੇਟ ਲਈ ਬਣਾਈ ਰੱਖੀ ਗਈ ਹੈ। ਇਸ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ, ਵਿੱਚ ਰੱਖੇ ਗਏ ਸਭ ਤੋਂ ਤਾਜ਼ਾ ਡੇਟਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਰਟ ਨੂੰ ਰੈਂਡਰ ਕਰੋ ਕਾਰਟ ਆਈਟਮਾਂ ਵਸਤੂ। ਇਹ ਵਿਧੀ ਗਾਰੰਟੀ ਦਿੰਦੀ ਹੈ ਕਿ ਕਾਰਟ ਵਿੱਚ ਸਾਰੇ ਉਤਪਾਦ ਸਹੀ ਸੰਖਿਆਵਾਂ ਅਤੇ ਸੰਖਿਆਵਾਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ ਭਾਵੇਂ ਆਈਟਮਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ ਤੋਂ ਬਾਅਦ, ਪਿਛਲੇ ਡੇਟਾ ਨੂੰ ਓਵਰਰਾਈਟ ਕਰਨ ਦੀ ਸਮੱਸਿਆ ਤੋਂ ਬਚਦੇ ਹੋਏ।

JavaScript ਸ਼ਾਪਿੰਗ ਕਾਰਟ ਲਾਜਿਕ ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ

  1. ਜਦੋਂ ਮੈਂ ਚੀਜ਼ਾਂ ਨੂੰ ਇੱਧਰ-ਉੱਧਰ ਘੁੰਮਾਉਂਦਾ ਹਾਂ ਤਾਂ ਮੈਂ ਕਾਊਂਟਰਾਂ ਨੂੰ ਸ਼ੁਰੂ ਹੋਣ ਤੋਂ ਕਿਵੇਂ ਰੋਕ ਸਕਦਾ ਹਾਂ?
  2. ਕਾਊਂਟਰ ਰੀਸੈੱਟ ਤੋਂ ਬਚਣ ਲਈ, ਤੁਸੀਂ ਗਲੋਬਲ ਵਸਤੂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹਰੇਕ ਆਈਟਮ ਲਈ ਕੁੱਲ ਅਤੇ ਮਾਤਰਾਵਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਰਿਕਾਰਡ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ cartItems.
  3. ਜਦੋਂ ਮੈਂ ਆਪਣੇ ਕਾਰਟ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਆਈਟਮ ਜੋੜਦਾ ਹਾਂ, ਤਾਂ ਇਹ ਪਿਛਲੀਆਂ ਐਂਟਰੀਆਂ ਨੂੰ ਓਵਰਰਾਈਟ ਕਿਉਂ ਕਰਦਾ ਹੈ?
  4. ਇਹ ਕਾਰਟ ਦੇ ਮੂਲ HTML ਨੂੰ ਬਦਲਣ ਵਾਲੇ ਕੋਡ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਵਾਪਰਦਾ ਹੈ। ਇਸ ਨੂੰ ਠੀਕ ਕਰਨ ਲਈ, ਵਰਤ ਕੇ ਨਵੀਆਂ ਆਈਟਮਾਂ ਨੱਥੀ ਕਰੋ innerHTML += ਮੌਜੂਦਾ ਨੂੰ ਹਟਾਏ ਬਿਨਾਂ.
  5. ਕਾਰਟ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਅੱਪਡੇਟ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਤਰੀਕਾ ਕੀ ਹੈ?
  6. ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਕਾਰਟ ਹਮੇਸ਼ਾ JavaScript ਡੇਟਾ ਦੇ ਨਾਲ ਅੱਪ ਟੂ ਡੇਟ ਹੈ, ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਿਵੇਂ ਕਿ renderCart ਜੋ ਕਿ ਸਾਰੀਆਂ ਕਾਰਟ ਆਈਟਮਾਂ ਰਾਹੀਂ ਦੁਹਰਾਉਂਦਾ ਹੈ ਅਤੇ ਡਿਸਪਲੇ ਨੂੰ ਬਦਲਦਾ ਹੈ।
  7. ਮੈਂ ਇਹ ਕਿਵੇਂ ਪ੍ਰਮਾਣਿਤ ਕਰ ਸਕਦਾ ਹਾਂ ਕਿ ਮੇਰੇ ਕਾਊਂਟਰ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹਨ?
  8. ਸਮੱਸਿਆਵਾਂ ਦੀ ਪਛਾਣ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ, ਵਰਤੋ console.assert ਇਹ ਤਸਦੀਕ ਕਰਨ ਲਈ ਕਿ ਤੁਹਾਡੀ ਕਾਰਟ ਗਿਣਤੀ ਹਰੇਕ ਇੰਟਰੈਕਸ਼ਨ ਤੋਂ ਬਾਅਦ ਸਹੀ ਮੁੱਲ ਦਿਖਾਉਂਦੀ ਹੈ।
  9. ਕੀ ਵੱਖ-ਵੱਖ ਉਤਪਾਦਾਂ 'ਤੇ ਇੱਕੋ ਕੋਡ ਨੂੰ ਲਾਗੂ ਕਰਨਾ ਸੰਭਵ ਹੈ?
  10. ਹਾਂ, ਤੁਸੀਂ ਕੋਡ ਨੂੰ ਮਾਡਿਊਲਰਾਈਜ਼ ਕਰਕੇ ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਘੱਟੋ-ਘੱਟ ਤਬਦੀਲੀਆਂ ਦੇ ਨਾਲ ਕਿਸੇ ਵੀ ਸਾਮਾਨ ਲਈ ਤਰਕ ਨੂੰ ਸੰਭਾਲ ਸਕਦੇ ਹੋ updateCart.

JavaScript ਵਿੱਚ ਕਾਊਂਟਰ ਰੀਸੈਟ ਨੂੰ ਰੋਕਣ ਬਾਰੇ ਅੰਤਿਮ ਵਿਚਾਰ

ਇੱਕ ਗਤੀਸ਼ੀਲ ਕਾਰਟ ਦੀ ਸਥਿਤੀ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਣ ਦਾ ਰਾਜ਼ ਕਿਸੇ ਵਸਤੂ ਵਿੱਚ ਆਈਟਮ-ਵਿਸ਼ੇਸ਼ ਜਾਣਕਾਰੀ, ਅਜਿਹੇ ਕੁੱਲ ਅਤੇ ਕਾਉਂਟਰਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨਾ ਹੈ। ਇਹ ਤਕਨੀਕ ਇਹ ਸੁਨਿਸ਼ਚਿਤ ਕਰਦੀ ਹੈ ਕਿ ਪੁਰਾਣੀਆਂ ਚੀਜ਼ਾਂ ਆਪਣੇ ਸਹੀ ਮੁੱਲਾਂ ਨੂੰ ਬਰਕਰਾਰ ਰੱਖਦੀਆਂ ਹਨ ਭਾਵੇਂ ਨਵੇਂ ਉਤਪਾਦ ਪੇਸ਼ ਕੀਤੇ ਜਾਣ। ਕਾਊਂਟਰਾਂ ਨੂੰ ਇੱਕ 'ਤੇ ਰੀਸੈਟ ਕਰਨ ਦੇ ਮੁੱਦੇ ਨੂੰ ਟਾਲਿਆ ਜਾਂਦਾ ਹੈ।

ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਰਟ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਰੈਂਡਰ ਕਰਕੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਹੋਰ ਸੁਧਾਰਿਆ ਗਿਆ ਹੈ। ਇਸ ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ, ਕਾਰਟ ਵਧੇਰੇ ਜਵਾਬਦੇਹ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਬਣ ਜਾਂਦਾ ਹੈ, ਅਤੇ ਮੌਜੂਦਾ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਉਤਪਾਦ ਦੀਆਂ ਕੀਮਤਾਂ ਅਤੇ ਮਾਤਰਾਵਾਂ ਨੂੰ ਅਪਡੇਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

JavaScript ਡਾਇਨਾਮਿਕ ਕਾਰਟ ਕਾਊਂਟਰਾਂ ਲਈ ਹਵਾਲੇ ਅਤੇ ਸਰੋਤ
  1. JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਵਿਸਤ੍ਰਿਤ ਜਾਣਕਾਰੀ ਲਈ ਜੇਕਰ-ਹੋਰ ਹਾਲਾਤ ਅਤੇ DOM ਤੱਤ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨਾ, ਵੇਖੋ MDN ਵੈੱਬ ਡੌਕਸ - ਜੇਕਰ...ਹੋਰ .
  2. 'ਤੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਗਤੀਸ਼ੀਲ ਸਮੱਗਰੀ ਦੇ ਪ੍ਰਬੰਧਨ ਅਤੇ HTML ਤੱਤਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨ ਬਾਰੇ ਹੋਰ ਜਾਣੋ W3Schools - JavaScript HTML DOM .
  3. JavaScript ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਕਾਊਂਟਰ ਅਤੇ ਕਾਰਟ-ਸਬੰਧਤ ਸਮੱਸਿਆਵਾਂ ਦੇ ਨਿਪਟਾਰੇ ਲਈ, ਇਸ ਗਾਈਡ 'ਤੇ ਸਲਾਹ ਲਓ ਸਟੈਕ ਓਵਰਫਲੋ - JavaScript ਵਿੱਚ ਕਾਊਂਟਰ ਰੀਸੈੱਟ .
  4. ਇਸ ਟਿਊਟੋਰਿਅਲ ਦੇ ਨਾਲ JavaScript ਵਿੱਚ ਆਬਜੈਕਟ-ਅਧਾਰਿਤ ਕਾਰਟ ਤਰਕ ਨੂੰ ਢਾਂਚਾ ਬਣਾਉਣ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਅਭਿਆਸਾਂ ਦੀ ਪੜਚੋਲ ਕਰੋ JavaScript.info - ਆਬਜੈਕਟ ਬੇਸਿਕਸ .