main.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. const DISABLED = "disabledButton";
  2. const app = new Vue({
  3. el: "#app",
  4. data: {
  5. cart: 0,
  6. description: "Chaussettes montantes",
  7. details: [
  8. "80% cotton",
  9. "20% polyester",
  10. "Gender-neutral",
  11. ],
  12. image: "./assets/img/vmSocks-green-onWhite.jpg",
  13. inventory: 15,
  14. link: "https://www.google.com/search?q=vuejs+socks",
  15. onSale: false,
  16. product: "Socks",
  17. sizes: [32, 34, 36, 38, 40, 42, 44, 46, 48],
  18. variants: [
  19. { variantId: 2234, variantColor: "green", variantImage: "./assets/img/vmSocks-green-onWhite.jpg", },
  20. { variantId: 2235, variantColor: "blue", variantImage: "./assets/img/vmSocks-blue-onWhite.png", },
  21. ]
  22. },
  23. methods: {
  24. addToCart(mouseEvent) {
  25. const target = mouseEvent.target;
  26. if (this.inventory <= 0) {
  27. if (this.inventory < 0) {
  28. this.inventory = 0;
  29. }
  30. target.classList.add(DISABLED);
  31. return;
  32. }
  33. target.classList.remove(DISABLED);
  34. this.inventory--;
  35. this.cart++;
  36. if (this.inventory <= 0) {
  37. this.inventory = 0;
  38. target.classList.add(DISABLED);
  39. }
  40. this.$refs.remove.classList.remove(DISABLED);
  41. },
  42. removeFromCart(mouseEvent) {
  43. const target = mouseEvent.target;
  44. if (this.cart <= 0) {
  45. if (this.cart < 0) {
  46. this.cart = 0;
  47. }
  48. target.classList.add(DISABLED);
  49. }
  50. target.classList.remove(DISABLED);
  51. this.inventory++;
  52. this.cart--;
  53. if (this.cart <= 0) {
  54. this.cart = 0;
  55. target.classList.add(DISABLED);
  56. }
  57. this.$refs.add.classList.remove(DISABLED);
  58. },
  59. updateImage(imageSrc) {
  60. this.image = imageSrc;
  61. }
  62. },
  63. });