Skip to content

Commit 62abd90

Browse files
w3bdesignw3bdesign
committed
Remove product from cart
1 parent 11c8eff commit 62abd90

File tree

4 files changed

+37
-19
lines changed

4 files changed

+37
-19
lines changed

‎public/js/app.js‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20313,12 +20313,18 @@ __webpack_require__.r(__webpack_exports__);
2031320313
getCartTotal = _storeToRefs.getCartTotal,
2031420314
getCartQuantity = _storeToRefs.getCartQuantity;
2031520315

20316+
var removeProductFromCart = function removeProductFromCart(id) {
20317+
// localState.removingCartItem = true;
20318+
store.removeProductFromCart(id); //localState.removingCartItem = false;
20319+
};
20320+
2031620321
var __returned__ = {
2031720322
tableHeaders: tableHeaders,
2031820323
store: store,
2031920324
getCartContent: getCartContent,
2032020325
getCartTotal: getCartTotal,
2032120326
getCartQuantity: getCartQuantity,
20327+
removeProductFromCart: removeProductFromCart,
2032220328
storeToRefs: pinia__WEBPACK_IMPORTED_MODULE_2__.storeToRefs,
2032320329
formatPrice: _utils_functions__WEBPACK_IMPORTED_MODULE_0__.formatPrice,
2032420330
useCart: _store_useCart__WEBPACK_IMPORTED_MODULE_1__.useCart
@@ -20695,6 +20701,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
2069520701

2069620702
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
2069720703

20704+
// TODO: Convert to script setup
2069820705

2069920706

2070020707
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent)({
@@ -20954,8 +20961,9 @@ var _hoisted_6 = {
2095420961
var _hoisted_7 = {
2095520962
"class": "border-grey-light border hover:bg-gray-100 h-12"
2095620963
};
20964+
var _hoisted_8 = ["onClick"];
2095720965

20958-
var _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
20966+
var _hoisted_9 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("img", {
2095920967
"class": "mt-2 mx-auto cursor-pointer",
2096020968
alt: "Remove icon",
2096120969
"aria-label": "Remove",
@@ -20964,21 +20972,21 @@ var _hoisted_8 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementV
2096420972
/* HOISTED */
2096520973
);
2096620974

20967-
var _hoisted_9 = [_hoisted_8];
20968-
var _hoisted_10 = {
20969-
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center h-12"
20970-
};
20975+
var _hoisted_10 = [_hoisted_9];
2097120976
var _hoisted_11 = {
2097220977
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center h-12"
2097320978
};
2097420979
var _hoisted_12 = {
2097520980
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center h-12"
2097620981
};
2097720982
var _hoisted_13 = {
20983+
"class": "border-grey-light border hover:bg-gray-100 p-3 text-center h-12"
20984+
};
20985+
var _hoisted_14 = {
2097820986
key: 0,
2097920987
"class": "container mx-auto flex flex-wrap flex-row justify-end items-end content-center"
2098020988
};
20981-
var _hoisted_14 = {
20989+
var _hoisted_15 = {
2098220990
"class": "p-4 text-xl font-bold text-right"
2098320991
};
2098420992
function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -21000,27 +21008,30 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
2100021008
}), 128
2100121009
/* KEYED_FRAGMENT */
2100221010
))]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("tbody", _hoisted_6, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)($setup.getCartContent, function (_ref) {
21003-
var name = _ref.name,
21011+
var id = _ref.id,
21012+
name = _ref.name,
2100421013
quantity = _ref.quantity,
2100521014
price = _ref.price;
2100621015
return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("tr", {
21007-
key: _ctx.id,
21016+
key: id,
2100821017
"class": "flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0"
2100921018
}, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_7, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("a", {
2101021019
tabindex: "0",
21011-
onClick: _cache[0] || (_cache[0] = function ($event) {
21012-
return _ctx.removeProductFromCart(_ctx.product);
21013-
})
21014-
}, _hoisted_9)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(name), 1
21020+
onClick: function onClick($event) {
21021+
return $setup.removeProductFromCart(id);
21022+
}
21023+
}, _hoisted_10, 8
21024+
/* PROPS */
21025+
, _hoisted_8)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(name), 1
2101521026
/* TEXT */
21016-
), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(quantity), 1
21027+
), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(quantity), 1
2101721028
/* TEXT */
21018-
), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_12, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.formatPrice(price)), 1
21029+
), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("td", _hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.formatPrice(price)), 1
2101921030
/* TEXT */
2102021031
)]);
2102121032
}), 128
2102221033
/* KEYED_FRAGMENT */
21023-
))])]), $setup.getCartQuantity ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_13, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_14, "Total: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.formatPrice($setup.getCartTotal)), 1
21034+
))])]), $setup.getCartQuantity ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)("div", _hoisted_14, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)("span", _hoisted_15, "Total: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.formatPrice($setup.getCartTotal)), 1
2102421035
/* TEXT */
2102521036
)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)])], 64
2102621037
/* STABLE_FRAGMENT */
@@ -22518,7 +22529,7 @@ var useCart = (0,pinia__WEBPACK_IMPORTED_MODULE_0__.defineStore)("shopState", {
2251822529
this.cart.push(item);
2251922530
}
2252022531
},
22521-
removeFromCart: function removeFromCart(_ref2) {
22532+
removeProductFromCart: function removeProductFromCart(_ref2) {
2252222533
var item = _ref2.item;
2252322534
this.cart.splice(this.cart.indexOf(item), 1);
2252422535
},

‎resources/js/components/Checkout/CartSummary.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@
2828
</thead>
2929
<tbody class="flex-1 sm:flex-none">
3030
<template
31-
v-for="{ name, quantity, price } in getCartContent"
31+
v-for="{ id, name, quantity, price } in getCartContent"
3232
:key="id"
3333
class="border-grey-light border hover:bg-gray-100 p-3 text-center"
3434
>
3535
<tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
3636
<td class="border-grey-light border hover:bg-gray-100 h-12">
37-
<a tabindex="0" @click="removeProductFromCart(product)">
37+
<a tabindex="0" @click="removeProductFromCart(id)">
3838
<img
3939
class="mt-2 mx-auto cursor-pointer"
4040
alt="Remove icon"
@@ -78,6 +78,12 @@ const tableHeaders = ["Remove", "Name", "Quantity", "Price"];
7878
const store = useCart();
7979
8080
const { getCartContent, getCartTotal, getCartQuantity } = storeToRefs(store);
81+
82+
const removeProductFromCart = (id) => {
83+
// localState.removingCartItem = true;
84+
store.removeProductFromCart(id);
85+
//localState.removingCartItem = false;
86+
};
8187
</script>
8288

8389
<style>

‎resources/js/components/Header/MobileMenu.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
</template>
4343

4444
<script>
45+
// TODO: Convert to script setup
4546
import { defineComponent, reactive, toRefs } from "vue";
4647
4748
import Cart from "./Cart.vue";

‎resources/js/store/useCart.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const useCart = defineStore("shopState", {
3333
this.cart.push(item);
3434
}
3535
},
36-
removeFromCart({ item }) {
36+
removeProductFromCart({ item }) {
3737
this.cart.splice(this.cart.indexOf(item), 1);
3838
},
3939

0 commit comments

Comments
 (0)