ಬಹು ಉತ್ಪನ್ನಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೌಂಟರ್ ನವೀಕರಣಗಳು
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೈನಾಮಿಕ್ ಇನ್ಪುಟ್ ಅಂಶಗಳು ಕೆಲಸ ಮಾಡಲು ಸವಾಲಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಒಳಗೆ ಮೌಲ್ಯಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ನವೀಕರಿಸುವಾಗ ಒಂದು ವೇಳೆ-ಇಲ್ಲದಿದ್ದರೆ ಹೇಳಿಕೆಗಳು. ಆನ್ಲೈನ್ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ಗೆ ಐಟಂಗಳನ್ನು ಸೇರಿಸುವಂತಹ ಸಂದರ್ಭಗಳಲ್ಲಿ ಮೊತ್ತಗಳು ಮತ್ತು ಮೊತ್ತಗಳನ್ನು ನಿಖರವಾಗಿ ದಾಖಲಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಈ ಪರಿಸ್ಥಿತಿಯಲ್ಲಿ ಹಲವಾರು ವಿಷಯಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಡೆವಲಪರ್ಗಳಿಗೆ ಆಗಾಗ್ಗೆ ತೊಂದರೆಗಳನ್ನು ನೀಡುತ್ತದೆ.
ಶಾಪಿಂಗ್ ಬುಟ್ಟಿಯಲ್ಲಿ ಹೊಸ ವಸ್ತುಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವುದರಿಂದ ಹಿಂದೆ ಆಯ್ಕೆಮಾಡಿದ ಐಟಂಗಳಿಗೆ ಕೌಂಟರ್ ಮರುಹೊಂದಿಸಲು ಕಾರಣವಾಗುವ ಪ್ರಚಲಿತ ಸಮಸ್ಯೆಯನ್ನು ಈ ಪೋಸ್ಟ್ ಚರ್ಚಿಸುತ್ತದೆ. ಕೌಂಟರ್ಗಳು ಮೊದಲಿಗೆ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದ್ದರೂ, ಐಟಂಗಳ ನಡುವೆ ವರ್ಗಾವಣೆ ಮಾಡುವಾಗ ಮರುಹೊಂದಿಸುವಂತೆ ತೋರುತ್ತವೆ. ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಉತ್ಪನ್ನಗಳು ಸರಿಯಾದ ಪ್ರಮಾಣವನ್ನು ಪ್ರತಿನಿಧಿಸುವುದಿಲ್ಲವಾದ್ದರಿಂದ ಬಳಕೆದಾರರು ಈ ನಡವಳಿಕೆಯಿಂದ ಗೊಂದಲಕ್ಕೊಳಗಾಗುತ್ತಾರೆ.
ಈ ಸಮಸ್ಯೆ ಉದ್ಭವಿಸುವ ಕೋಡ್ ಉದಾಹರಣೆಯ ಮೂಲಕ ನಾವು ಹೋಗುತ್ತೇವೆ ಮತ್ತು ಕಾರಣವನ್ನು ಚರ್ಚಿಸುತ್ತೇವೆ. ಸುಗಮ ಕಾರ್ಯಾಚರಣೆಗಾಗಿ, ಪ್ರತಿ ಉತ್ಪನ್ನದ ಕೌಂಟರ್ ಅನ್ನು ಹೇಗೆ ಪರಿಶೀಲಿಸಬೇಕು ಮತ್ತು ಎಲ್ಲಾ ಇನ್ಪುಟ್ ಸಂಖ್ಯೆಗಳು ಸ್ಥಿರವಾಗಿರುತ್ತವೆ ಎಂದು ಖಾತರಿಪಡಿಸುವುದು ಹೇಗೆ ಎಂದು ತಿಳಿಯುವುದು ಅತ್ಯಗತ್ಯ. ಕೆಲವು ಟ್ವೀಕ್ಗಳೊಂದಿಗೆ, ಒಂದು ವೇಳೆ-ಇಲ್ಲದಿದ್ದರೆ JavaScript ತರ್ಕವನ್ನು ಬಳಸುವ ಹೇಳಿಕೆಗಳು ಇದನ್ನು ಸೂಕ್ತವಾಗಿ ನಿಭಾಯಿಸಬಹುದು.
ನೀವು ಈ ಲೇಖನವನ್ನು ಓದುವುದನ್ನು ಮುಗಿಸುವ ಹೊತ್ತಿಗೆ, ಸಮಸ್ಯೆಯನ್ನು ಹೇಗೆ ಸರಿಪಡಿಸುವುದು ಮತ್ತು ಎಲ್ಲಾ ಕೌಂಟರ್ಗಳನ್ನು ಸಂರಕ್ಷಿಸುವುದು ಹೇಗೆ ಎಂದು ನಿಮಗೆ ತಿಳಿಯುತ್ತದೆ, ನಿಮ್ಮ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ಪ್ರತಿ ಐಟಂನ ಸರಿಯಾದ ಮೊತ್ತವನ್ನು ನೀವು ಅವುಗಳ ನಡುವೆ ಬದಲಾಯಿಸಿದಾಗಲೂ ಯಾವಾಗಲೂ ತೋರಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
| ಆಜ್ಞೆ | ಬಳಕೆಯ ಉದಾಹರಣೆ |
|---|---|
| cart = {} | ಕಾರ್ಟ್ ಐಟಂ ಕೌಂಟರ್ ಸಂಗ್ರಹಣೆಗಾಗಿ ಖಾಲಿ ವಸ್ತುವನ್ನು ವಿವರಿಸುತ್ತದೆ. ಈ ವಸ್ತುವಿನ ಸಹಾಯದಿಂದ, ಐಟಂಗಳ ನಡುವೆ ಬದಲಾಯಿಸುವಾಗ ಸ್ಥಿತಿಯನ್ನು ಮರುಹೊಂದಿಸದೆಯೇ ನೀವು ಪ್ರತಿ ಉತ್ಪನ್ನದ ಮೊತ್ತ ಮತ್ತು ಪ್ರಮಾಣಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಟ್ರ್ಯಾಕ್ ಮಾಡಬಹುದು. |
| updateCart(item, price, counterKey) | ಪ್ರತಿ ಬಾರಿ ಐಟಂ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಕಾರ್ಟ್ ಅನ್ನು ಮಾರ್ಪಡಿಸುವ ಮೂಲ ವೈಶಿಷ್ಟ್ಯ. ಎಣಿಕೆ ಮತ್ತು ಮೊತ್ತವನ್ನು ನವೀಕರಿಸಲು, ಇದು ಐಟಂ ಹೆಸರು, ಬೆಲೆ ಮತ್ತು ಪ್ರತಿ ಐಟಂಗೆ ವಿಶೇಷ ಕೀಲಿಗಾಗಿ ನಿಯತಾಂಕಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. |
| cart[counterKey] | ಪ್ರತಿ ಐಟಂಗೆ ಕಾರ್ಟ್ ವಸ್ತುವಿಗೆ ("miloCounter" ನಂತಹ) ಆಸ್ತಿಯನ್ನು ಪ್ರವೇಶಿಸುತ್ತದೆ ಅಥವಾ ಸೇರಿಸುತ್ತದೆ. ಅದು ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ ಅದು ಕೀಲಿಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ, ನಿರ್ದಿಷ್ಟ ಉತ್ಪನ್ನಕ್ಕೆ ಮಾತ್ರ ಸಂಖ್ಯೆಯು ಹೆಚ್ಚಾಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. |
| renderCart() | ವಿಷಯಗಳನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನಿರೂಪಿಸಲು ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಐಟಂ ಅನ್ನು ಪುನರಾವರ್ತಿಸುವ ಕಾರ್ಯ. ಉತ್ಪನ್ನದ ಮೊತ್ತಗಳು ಮತ್ತು ಪ್ರಮಾಣಗಳನ್ನು ತೋರಿಸಲು, ಇದು ಅಗತ್ಯವಾದ HTML ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ ಮತ್ತು ಶೂನ್ಯವಲ್ಲದ ಕೌಂಟರ್ಗಳನ್ನು ಹುಡುಕುತ್ತದೆ. |
| for (var item in cartItems) | ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಐಟಂಗೆ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ. ಉತ್ಪನ್ನದ ವಿವರಗಳನ್ನು ಪ್ರವೇಶಿಸಿ ಮತ್ತು ಐಟಂಗಳ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಎಲ್ಲಾ ಆಯ್ಕೆಮಾಡಿದ ಉತ್ಪನ್ನಗಳು ಕಾರ್ಟ್ನಲ್ಲಿ ಪ್ರತಿಫಲಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ರೆಂಡರಿಂಗ್ ಮಾಡುವ ಮೊದಲು, ಈ ಲೂಪ್ ಪ್ರತಿ ಐಟಂನ ಸಂಖ್ಯೆಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. |
| document.getElementById() | ಅವುಗಳ ವಿಶಿಷ್ಟ ID ಯ ಆಧಾರದ ಮೇಲೆ HTML ಘಟಕಗಳನ್ನು ("ಮಿಲೋ" ಮತ್ತು "ಓವಲ್ಟೈನ್" ನಂತಹ) ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ. ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಉತ್ಪನ್ನದೊಂದಿಗೆ ಸಂವಹನಕ್ಕಾಗಿ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಲಗತ್ತಿಸುವ ಮೂಲಕ UI ಅನ್ನು JavaScript ಲಾಜಿಕ್ಗೆ ಸಂಪರ್ಕಿಸಲು ಇದು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ. |
| console.assert() | ಪರೀಕ್ಷೆಗಾಗಿ ಮಾದರಿ ಘಟಕ ಪರೀಕ್ಷೆಯಲ್ಲಿ ಬಳಸಲಾಗಿದೆ. ಕಾರ್ಟ್ನಲ್ಲಿನ ನಿಜವಾದ ಮೌಲ್ಯಗಳು ನಿರೀಕ್ಷಿತ ಮೌಲ್ಯಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತವೆ ಎಂಬುದನ್ನು ಇದು ಪರಿಶೀಲಿಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ "ಮೈಲೋ" ಎಣಿಕೆ). ಪರೀಕ್ಷೆಯು ವಿಫಲವಾದಾಗ ಕನ್ಸೋಲ್ನಲ್ಲಿ ದೋಷವನ್ನು ಎಸೆಯಲಾಗುತ್ತದೆ, ಇದು ಸಮಸ್ಯೆಯನ್ನು ಗುರುತಿಸುವಲ್ಲಿ ಸಹಾಯ ಮಾಡುತ್ತದೆ. |
| innerHTML += | ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಟೇಬಲ್ ಸಾಲಿನಂತೆ ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಂಶಕ್ಕೆ ಹೊಸ HTML ವಿಷಯವನ್ನು ಸೇರಿಸುತ್ತದೆ. ಈ ತಂತ್ರದೊಂದಿಗೆ, ಪ್ರಸ್ತುತ ವಿಷಯವನ್ನು ಅಳಿಸದೆಯೇ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ಗೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಹೊಸ ಉತ್ಪನ್ನ ನಮೂದುಗಳನ್ನು ಸೇರಿಸಬಹುದು. |
| addEventListener('click') | ಪ್ರತಿ ಉತ್ಪನ್ನದ ಬಟನ್ ಅಥವಾ ಚಿತ್ರಕ್ಕೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಆಲಿಸುವವರನ್ನು ಸೇರಿಸುತ್ತದೆ. ಕಾರ್ಟ್ನ ಪ್ರಮಾಣಗಳು ಮತ್ತು ಮೊತ್ತವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರರು ಐಟಂ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಸಂಬಂಧಿತ ಕಾರ್ಯವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗುತ್ತದೆ. |
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ಕಾರ್ಟ್ ನವೀಕರಣ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುವುದು
ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ನಲ್ಲಿ ಹಲವಾರು ಉತ್ಪನ್ನಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವಾಗ ಮೇಲೆ ತಿಳಿಸಲಾದ ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಆಗಾಗ್ಗೆ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತವೆ. ಹೊಸ ಐಟಂ ಅನ್ನು ಸೇರಿಸುವುದರಿಂದ ಹಿಂದೆ ಸೇರಿಸಿದ ಐಟಂಗಳಿಗೆ ಕೌಂಟರ್ಗಳನ್ನು ಮರುಹೊಂದಿಸುತ್ತದೆ ಎಂಬುದು ಪ್ರಾಥಮಿಕ ಸಮಸ್ಯೆಯಾಗಿದೆ. ಇದನ್ನು ಪರಿಹರಿಸಲು ಈವೆಂಟ್ ಕೇಳುಗರೊಂದಿಗೆ ಐಟಂ ಎಣಿಕೆಗಳು ಮತ್ತು ಮೊತ್ತವನ್ನು ಸಂಗ್ರಹಿಸಲು ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಆಬ್ಜೆಕ್ಟ್-ಆಧಾರಿತ ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತವೆ. ಪ್ರತಿ ಉತ್ಪನ್ನದ ಕೌಂಟರ್ ಅನ್ನು ನವೀಕರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಇತರವುಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ಹಸ್ತಕ್ಷೇಪ ಮಾಡದೆ ಪ್ರತ್ಯೇಕವಾಗಿ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ ಎಂದು ನಾವು ಖಾತರಿಪಡಿಸುತ್ತೇವೆ ಬಂಡಿ ವಸ್ತು. ಈ ವಿಧಾನವು ಮರುಹೊಂದಿಸುವ ಸಮಸ್ಯೆಯನ್ನು ತೊಡೆದುಹಾಕುತ್ತದೆ ಇದರಿಂದ ಪ್ರತಿ ಉತ್ಪನ್ನದ ಎಣಿಕೆಯು ನಿಖರವಾಗಿರುತ್ತದೆ.
ದಿ updateCart ಕಾರ್ಟ್ಗೆ ಉತ್ಪನ್ನಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನಿರ್ವಹಿಸುವ ವಿಧಾನವು ಪರಿಹಾರದ ನಿರ್ಣಾಯಕ ಅಂಶವಾಗಿದೆ. ಒಂದು ಐಟಂ ಕಾರ್ಟ್ನಲ್ಲಿದೆಯೇ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು ಈ ಕಾರ್ಯವು ಅನನ್ಯ ಕೌಂಟರ್ ಕೀಯನ್ನು ("miloCounter" ನಂತಹ) ಬಳಸುತ್ತದೆ. ಇದು ಮೊದಲ ಬಾರಿಗೆ ಐಟಂ ಅನ್ನು ಸೇರಿಸಿದರೆ ಸ್ಕ್ರಿಪ್ಟ್ ಕೌಂಟರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಕಾರ್ಯವು ಒಟ್ಟು ಬೆಲೆಯನ್ನು ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ ಮತ್ತು ಪ್ರಸ್ತುತ ಕೌಂಟರ್ ಅನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ದಿ ಆಂತರಿಕ HTML ಗುಣಲಕ್ಷಣವು HTML ಅನ್ನು ನವೀಕರಿಸುತ್ತದೆ ಇದರಿಂದ ಬಳಕೆದಾರರು ಈಗಿನಿಂದಲೇ ಬದಲಾವಣೆಗಳನ್ನು ನೋಡಬಹುದು.
ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಉತ್ಪನ್ನದ ನಿಖರವಾದ ಪ್ರದರ್ಶನವು ಖಾತರಿಪಡಿಸುತ್ತದೆ ರೆಂಡರ್ಕಾರ್ಟ್ ಕಾರ್ಯ. ಮೂಲಕ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ ಕಾರ್ಟ್ ಐಟಂಗಳು ಆಬ್ಜೆಕ್ಟ್, ಪ್ರತಿ ಉತ್ಪನ್ನದ ಎಣಿಕೆಯು ಶೂನ್ಯವನ್ನು ಮೀರಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವುದು. ಆ ಸಂದರ್ಭದಲ್ಲಿ, ಕಾರ್ಯವು ಪ್ರತಿ ಐಟಂನ ಮೊತ್ತ ಮತ್ತು ಒಟ್ಟು ವೆಚ್ಚವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಅಗತ್ಯವಾದ HTML ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಹೊಸ ಉತ್ಪನ್ನಗಳನ್ನು ಸೇರಿಸುವುದರಿಂದ ಹಳೆಯದನ್ನು ತಿದ್ದಿ ಬರೆಯುವುದಿಲ್ಲ ಮತ್ತು ಕಾರ್ಟ್ನ ಡಿಸ್ಪ್ಲೇ ಪ್ರವಾಹವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಇದು ಖಾತರಿಪಡಿಸುತ್ತದೆ. ಆನ್ಲೈನ್ ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿ, ಡೈನಾಮಿಕ್ ವಿಷಯವನ್ನು ನಿರ್ವಹಿಸಲು ಈ ತಂತ್ರವು ತುಂಬಾ ಸಹಾಯಕವಾಗಿದೆ.
ಇದಲ್ಲದೆ, console.assert ಐಟಂ ಕೌಂಟರ್ಗಳು ಮತ್ತು ಮೊತ್ತಗಳು ಉದ್ದೇಶಿಸಿದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆ ಎಂದು ಪರಿಶೀಲಿಸಲು ಘಟಕ ಪರೀಕ್ಷೆಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ. ಉತ್ಪನ್ನದ ಬಟನ್ಗಳ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುವುದರ ಮೂಲಕ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಕೌಂಟರ್ ಮೌಲ್ಯಗಳು ನಲ್ಲಿ ಉಳಿಸಲಾದ ನಿಜವಾದ ಫಲಿತಾಂಶಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಬಂಡಿ ವಸ್ತು, ಈ ಪರೀಕ್ಷೆಗಳು ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಅನುಕರಿಸುತ್ತವೆ. ಇದು ಉತ್ತಮ ತಾರ್ಕಿಕತೆಯನ್ನು ಖಾತರಿಪಡಿಸುತ್ತದೆ ಮತ್ತು ದೋಷಗಳನ್ನು ಪತ್ತೆಹಚ್ಚದಂತೆ ತಡೆಯುತ್ತದೆ. ಎಲ್ಲಾ ವಿಷಯಗಳನ್ನು ಪರಿಗಣಿಸಿದರೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಚಲಿಸುವ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ನಲ್ಲಿ ಉತ್ಪನ್ನ ನವೀಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸ್ಕ್ರಿಪ್ಟ್ಗಳು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮತ್ತು ಮಾಡ್ಯುಲರ್ ವಿಧಾನವನ್ನು ಒದಗಿಸುತ್ತದೆ.
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 itemfunction 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();
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ಗಳಲ್ಲಿ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ಕೌಂಟರ್ ರೀಸೆಟ್ಗಳನ್ನು ತಡೆಯುವುದು
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಡೈನಾಮಿಕ್ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ವಿಶೇಷವಾಗಿ ಹೊಸ ಉತ್ಪನ್ನಗಳನ್ನು ಸೇರಿಸಿದಾಗ ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಐಟಂನ ಸ್ಥಿತಿಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳುವುದು ಸಾಮಾನ್ಯ ತೊಂದರೆಯಾಗಿದೆ. ಈವೆಂಟ್ ಕೇಳುಗರು ಉತ್ಪನ್ನಗಳ ನಡುವೆ ಬದಲಾಯಿಸುವಾಗ ಎಣಿಕೆಗಳನ್ನು ಮರುಹೊಂದಿಸಿದಾಗ ಸಮಸ್ಯೆಯು ಸಾಮಾನ್ಯವಾಗಿ ಉದ್ಭವಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಅವುಗಳನ್ನು ಸರಿಯಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗಿಲ್ಲ ಅಥವಾ ಪ್ರತಿ ಉತ್ಪನ್ನಕ್ಕೂ ಉಳಿಸಿಕೊಳ್ಳಲಾಗಿಲ್ಲ. ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ವಸ್ತುವಿನ ಸ್ಥಿತಿಯನ್ನು ಒಳಗೊಂಡಿರುವ ಜಾಗತಿಕ ವಸ್ತುವನ್ನು ತಯಾರಿಸುವುದು ಇದನ್ನು ನಿರ್ವಹಿಸಲು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ವಿಧಾನವಾಗಿದೆ. ಈ ರೀತಿಯಲ್ಲಿ, ಹೊಸ ಐಟಂ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗಲೂ ಹಿಂದಿನ ಐಟಂಗಳ ಕೌಂಟರ್ಗಳು ಬದಲಾಗುವುದಿಲ್ಲ.
ನೀವು ಪ್ರತಿ ಉತ್ಪನ್ನದ ಮೊತ್ತ ಮತ್ತು ಬೆಲೆಯನ್ನು ಇತರ ಸ್ಕ್ರಿಪ್ಟ್ ಅಂಶಗಳಿಂದ ಹಸ್ತಕ್ಷೇಪವಿಲ್ಲದೆಯೇ ಅವುಗಳನ್ನು ಜಾಗತಿಕ ವಸ್ತುವಿನಲ್ಲಿ ಸಂಗ್ರಹಿಸುವ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದು ಮತ್ತು ಸಂಪಾದಿಸಬಹುದು ಕಾರ್ಟ್ ಐಟಂಗಳು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಆಬ್ಜೆಕ್ಟ್-ಆಧಾರಿತ ವಿಧಾನವು ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ರಚನೆಯನ್ನು ನೀಡುತ್ತದೆ, ಅದು ಏಕಕಾಲದಲ್ಲಿ ಹಲವಾರು ಐಟಂಗಳ ನಿರ್ವಹಣೆಯನ್ನು ಸುಗಮಗೊಳಿಸುತ್ತದೆ. ಪ್ರತಿ ಬಾರಿ ಐಟಂ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ವಸ್ತುವಿನ ಸಂಬಂಧಿತ ಭಾಗವನ್ನು ಮಾರ್ಪಡಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಮಾರ್ಪಾಡುಗಳನ್ನು ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ಇಂಟರ್ಫೇಸ್ನಲ್ಲಿ ತಕ್ಷಣವೇ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ಕಾರ್ಟ್ನ ಪ್ರತಿ ರೆಂಡರ್ ಅಥವಾ ಅಪ್ಡೇಟ್ಗಾಗಿ ಹಿಂದಿನ ಐಟಂ ಸ್ಥಿತಿಗಳನ್ನು ಪರಿಶೀಲಿಸಲಾಗಿದೆ ಮತ್ತು ನಿರ್ವಹಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಸಹ ಮುಖ್ಯವಾಗಿದೆ. ಇದನ್ನು ಸಾಧಿಸಲು, ನಲ್ಲಿ ಇರಿಸಲಾಗಿರುವ ಇತ್ತೀಚಿನ ಡೇಟಾವನ್ನು ಬಳಸಿಕೊಂಡು ಕಾರ್ಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಿ ಕಾರ್ಟ್ ಐಟಂಗಳು ವಸ್ತು. ಹಿಂದಿನ ಡೇಟಾವನ್ನು ತಿದ್ದಿ ಬರೆಯುವ ಸಮಸ್ಯೆಯನ್ನು ತಪ್ಪಿಸುವ ಮೂಲಕ ಐಟಂಗಳನ್ನು ಸೇರಿಸಿದ ಅಥವಾ ತೆಗೆದುಹಾಕಿದ ನಂತರವೂ ಕಾರ್ಟ್ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಉತ್ಪನ್ನಗಳು ಸರಿಯಾದ ಸಂಖ್ಯೆಗಳು ಮತ್ತು ಮೊತ್ತವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತವೆ ಎಂದು ಈ ವಿಧಾನವು ಖಾತರಿಪಡಿಸುತ್ತದೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ ಲಾಜಿಕ್ ಬಗ್ಗೆ ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
- ನಾನು ವಿಷಯವನ್ನು ಚಲಿಸುವಾಗ ಕೌಂಟರ್ಗಳು ಪ್ರಾರಂಭವಾಗುವುದನ್ನು ನಾನು ಹೇಗೆ ನಿಲ್ಲಿಸಬಹುದು?
- ಕೌಂಟರ್ ರೀಸೆಟ್ಗಳನ್ನು ತಪ್ಪಿಸಲು, ಜಾಗತಿಕ ವಸ್ತುವನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಪ್ರತಿ ಐಟಂಗೆ ಒಟ್ಟು ಮತ್ತು ಪ್ರಮಾಣಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ದಾಖಲಿಸಬಹುದು cartItems.
- ನನ್ನ ಕಾರ್ಟ್ಗೆ ನಾನು ಹೊಸ ಐಟಂ ಅನ್ನು ಸೇರಿಸಿದಾಗ, ಅದು ಹಿಂದಿನ ನಮೂದುಗಳನ್ನು ಏಕೆ ತಿದ್ದಿ ಬರೆಯುತ್ತದೆ?
- ಕಾರ್ಟ್ನ ಮೂಲ HTML ಅನ್ನು ಬದಲಿಸುವ ಕೋಡ್ನ ಪರಿಣಾಮವಾಗಿ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಅದನ್ನು ಸರಿಪಡಿಸಲು, ಬಳಸಿ ಹೊಸ ಐಟಂಗಳನ್ನು ಲಗತ್ತಿಸಿ innerHTML += ಅಸ್ತಿತ್ವದಲ್ಲಿರುವವುಗಳನ್ನು ತೆಗೆದುಹಾಕದೆ.
- ಕಾರ್ಟ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಲು ಉತ್ತಮ ಮಾರ್ಗ ಯಾವುದು?
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾದೊಂದಿಗೆ ಕಾರ್ಟ್ ಯಾವಾಗಲೂ ನವೀಕೃತವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಅಂತಹ ಕಾರ್ಯವನ್ನು ಬಳಸಿ renderCart ಅದು ಎಲ್ಲಾ ಕಾರ್ಟ್ ಐಟಂಗಳ ಮೂಲಕ ಪುನರಾವರ್ತನೆಯಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರದರ್ಶನವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.
- ನನ್ನ ಕೌಂಟರ್ಗಳು ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆ ಎಂದು ನಾನು ಹೇಗೆ ಮೌಲ್ಯೀಕರಿಸಬಹುದು?
- ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಸಹಾಯ ಮಾಡಲು, ಬಳಸಿ console.assert ಪ್ರತಿ ಸಂವಾದದ ನಂತರ ನಿಮ್ಮ ಕಾರ್ಟ್ ಎಣಿಕೆಗಳು ಸರಿಯಾದ ಮೌಲ್ಯಗಳನ್ನು ತೋರಿಸುತ್ತವೆ ಎಂದು ಪರಿಶೀಲಿಸಲು.
- ವಿಭಿನ್ನ ಉತ್ಪನ್ನಗಳಿಗೆ ಒಂದೇ ಕೋಡ್ ಅನ್ನು ಅನ್ವಯಿಸಲು ಸಾಧ್ಯವೇ?
- ಹೌದು, ಕೋಡ್ ಅನ್ನು ಮಾಡ್ಯುಲರೈಸ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಕಾರ್ಯಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ ಕನಿಷ್ಠ ಬದಲಾವಣೆಗಳೊಂದಿಗೆ ನೀವು ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಸರಕುಗಳಿಗೆ ತರ್ಕವನ್ನು ನಿಭಾಯಿಸಬಹುದು updateCart.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಕೌಂಟರ್ ರೀಸೆಟ್ಗಳನ್ನು ತಡೆಗಟ್ಟುವಲ್ಲಿ ಅಂತಿಮ ಆಲೋಚನೆಗಳು
ಡೈನಾಮಿಕ್ ಕಾರ್ಟ್ನ ಸ್ಥಿತಿಯನ್ನು ಅಖಂಡವಾಗಿ ಇಟ್ಟುಕೊಳ್ಳುವ ರಹಸ್ಯವೆಂದರೆ ವಸ್ತುವಿನಲ್ಲಿ ಐಟಂ-ನಿರ್ದಿಷ್ಟ ಮಾಹಿತಿಯನ್ನು, ಅಂತಹ ಮೊತ್ತಗಳು ಮತ್ತು ಕೌಂಟರ್ಗಳನ್ನು ಉಳಿಸುವುದು. ಈ ತಂತ್ರವು ಹೊಸ ಉತ್ಪನ್ನಗಳನ್ನು ಪರಿಚಯಿಸಿದಾಗಲೂ ಹಿಂದಿನ ಐಟಂಗಳು ಅವುಗಳ ನಿಖರವಾದ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಕೌಂಟರ್ಗಳನ್ನು ಒಂದಕ್ಕೆ ಮರುಹೊಂದಿಸುವ ಸಮಸ್ಯೆಯನ್ನು ತಪ್ಪಿಸಲಾಗಿದೆ.
ಸಂಗ್ರಹಿಸಲಾದ ಡೇಟಾವನ್ನು ಬಳಸಿಕೊಂಡು ಕಾರ್ಟ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ರೆಂಡರ್ ಮಾಡುವ ಮೂಲಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಇನ್ನಷ್ಟು ಸುಧಾರಿಸಲಾಗಿದೆ. ಈ ವಿಧಾನವನ್ನು ಬಳಸುವ ಮೂಲಕ, ಕಾರ್ಟ್ ಹೆಚ್ಚು ಸ್ಪಂದಿಸುತ್ತದೆ ಮತ್ತು ಸಂವಾದಾತ್ಮಕವಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರಸ್ತುತ ಬಳಕೆದಾರರ ಸಂವಹನಗಳನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು ಉತ್ಪನ್ನದ ಬೆಲೆ ಮತ್ತು ಪ್ರಮಾಣಗಳನ್ನು ನವೀಕರಿಸಲಾಗುತ್ತದೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೈನಾಮಿಕ್ ಕಾರ್ಟ್ ಕೌಂಟರ್ಗಳಿಗಾಗಿ ಉಲ್ಲೇಖಗಳು ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳು
- ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವ ಬಗ್ಗೆ ವಿವರವಾದ ಒಳನೋಟಗಳಿಗಾಗಿ ಒಂದು ವೇಳೆ-ಇಲ್ಲದಿದ್ದರೆ ಷರತ್ತುಗಳು ಮತ್ತು DOM ಅಂಶಗಳನ್ನು ನವೀಕರಿಸಲಾಗುತ್ತಿದೆ, ಭೇಟಿ ನೀಡಿ MDN ವೆಬ್ ಡಾಕ್ಸ್ - ಇಲ್ಲದಿದ್ದರೆ... .
- ಇಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿಕೊಂಡು ಡೈನಾಮಿಕ್ ವಿಷಯವನ್ನು ನಿರ್ವಹಿಸುವ ಮತ್ತು HTML ಅಂಶಗಳನ್ನು ನವೀಕರಿಸುವ ಕುರಿತು ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ W3Schools - JavaScript HTML DOM .
- JavaScript ಅಪ್ಲಿಕೇಶನ್ಗಳಲ್ಲಿನ ದೋಷನಿವಾರಣೆ ಕೌಂಟರ್ ಮತ್ತು ಕಾರ್ಟ್-ಸಂಬಂಧಿತ ಸಮಸ್ಯೆಗಳಿಗಾಗಿ, ಈ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಸಂಪರ್ಕಿಸಿ ಸ್ಟಾಕ್ ಓವರ್ಫ್ಲೋ - ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಕೌಂಟರ್ ರೀಸೆಟ್ಗಳು .
- ಈ ಟ್ಯುಟೋರಿಯಲ್ ಜೊತೆಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಆಬ್ಜೆಕ್ಟ್-ಆಧಾರಿತ ಕಾರ್ಟ್ ಲಾಜಿಕ್ ಅನ್ನು ರಚಿಸುವುದಕ್ಕಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವೇಷಿಸಿ JavaScript.info - ಆಬ್ಜೆಕ್ಟ್ ಬೇಸಿಕ್ಸ್ .