first upload all files

Themes/Storefront/resources/assets/public/js/mixins/CartHelpersMixin.js

@@ -0,0 +1,100 @@
+import store from '../store';
+
+export default {
+    data() {
+        return {
+            loadingOrderSummary: false,
+            shippingMethodName: null,
+            applyingCoupon: false,
+            couponCode: null,
+            couponError: null,
+        };
+    },
+
+    computed: {
+        cart() {
+            return store.state.cart;
+        },
+
+        cartIsEmpty() {
+            return store.cartIsEmpty();
+        },
+
+        cartIsNotEmpty() {
+            return ! store.cartIsEmpty();
+        },
+
+        hasShippingMethod() {
+            return store.hasShippingMethod();
+        },
+
+        firstShippingMethod() {
+            return Object.keys(store.state.cart.availableShippingMethods)[0];
+        },
+
+        hasCoupon() {
+            return store.state.cart.coupon.code !== undefined;
+        },
+    },
+
+    methods: {
+        applyCoupon() {
+            if (! this.couponCode) {
+                return;
+            }
+
+            this.loadingOrderSummary = true;
+            this.applyingCoupon = true;
+
+            $.ajax({
+                method: 'POST',
+                url: route('cart.coupon.store', { coupon: this.couponCode }),
+            }).then((cart) => {
+                this.couponCode = null;
+
+                store.updateCart(cart);
+            }).catch((xhr) => {
+                this.couponError = xhr.responseJSON.message;
+            }).always(() => {
+                this.loadingOrderSummary = false;
+                this.applyingCoupon = false;
+            });
+        },
+
+        removeCoupon() {
+            this.loadingOrderSummary = true;
+
+            $.ajax({
+                method: 'DELETE',
+                url: route('cart.coupon.destroy'),
+            }).then((cart) => {
+                store.updateCart(cart);
+            }).catch((xhr) => {
+                this.$notify(xhr.responseJSON.message);
+            }).always(() => {
+                this.loadingOrderSummary = false;
+            });
+        },
+
+        updateShippingMethod(shippingMethodName) {
+            if (! shippingMethodName) {
+                return;
+            }
+
+            this.loadingOrderSummary = true;
+
+            this.changeShippingMethod(shippingMethodName);
+
+            $.ajax({
+                method: 'POST',
+                url: route('cart.shipping_method.store', { shipping_method: shippingMethodName }),
+            }).then((cart) => {
+                store.updateCart(cart);
+            }).catch((xhr) => {
+                this.$notify(xhr.responseJSON.message);
+            }).always(() => {
+                this.loadingOrderSummary = false;
+            });
+        },
+    },
+};

Themes/Storefront/resources/assets/public/js/mixins/DynamicTabsMixin.js

@@ -0,0 +1,54 @@
+export default {
+    data() {
+        return {
+            tabs: [],
+            activeTab: null,
+            loading: false,
+            products: [],
+        };
+    },
+
+    mounted() {
+        this.tabs = this.$children.filter((component) => {
+            return component.$options.name === "DynamicTab";
+        });
+
+        // Show the first tab by default on page load.
+        this.change(this.tabs[0]);
+    },
+
+    methods: {
+        classes(tab) {
+            return {
+                "tab-item": true,
+                loading: this.activeTab === tab && this.loading,
+                active: this.activeTab === tab && !this.loading,
+            };
+        },
+
+        change(activeTab) {
+            if (this.activeTab === activeTab || activeTab === undefined) {
+                return;
+            }
+
+            this.loading = true;
+            this.activeTab = activeTab;
+
+            $.ajax({
+                method: "GET",
+                url: activeTab.url,
+            }).then((products) => {
+                if (this.selector().hasClass("slick-initialized")) {
+                    this.selector().slick("unslick");
+                }
+
+                this.products = products;
+                this.loading = false;
+
+                this.$nextTick(() => {
+                    this.selector().slick(this.slickOptions());
+                });
+            });
+        },
+    },
+};

Themes/Storefront/resources/assets/public/js/mixins/ProductCardMixin.js

@@ -0,0 +1,78 @@
+import store from "../store";
+
+export default {
+    data() {
+        return {
+            addingToCart: false,
+        };
+    },
+
+    computed: {
+        productUrl() {
+            return route("products.show", this.product.slug);
+        },
+
+        hasAnyOption() {
+            return this.product.options_count > 0;
+        },
+
+        hasNoOption() {
+            return !this.hasAnyOption;
+        },
+
+        hasBaseImage() {
+            return this.product.base_image.length !== 0;
+        },
+
+        baseImage() {
+            if (this.hasBaseImage) {
+                return this.product.base_image.path;
+            }
+
+            return `${window.FleetCart.baseUrl}/themes/storefront/public/images/image-placeholder.png`;
+        },
+
+        inWishlist() {
+            return store.inWishlist(this.product.id);
+        },
+
+        inCompareList() {
+            return store.inCompareList(this.product.id);
+        },
+    },
+
+    methods: {
+        syncWishlist() {
+            store.syncWishlist(this.product.id);
+        },
+
+        syncCompareList() {
+            store.syncCompareList(this.product.id);
+        },
+
+        addToCart() {
+            this.addingToCart = true;
+
+            $.ajax({
+                method: "POST",
+                url: route("cart.items.store", {
+                    product_id: this.product.id,
+                    qty: 1,
+                }),
+            })
+                .then((cart) => {
+                    store.updateCart(cart);
+
+                    if (document.location.href !== route("cart.index")) {
+                        $(".header-cart").trigger("click");
+                    }
+                })
+                .catch((xhr) => {
+                    this.$notify(xhr.responseJSON.message);
+                })
+                .always(() => {
+                    this.addingToCart = false;
+                });
+        },
+    },
+};

Themes/Storefront/resources/assets/public/js/mixins/ProductHelpersMixin.js

@@ -0,0 +1,19 @@
+export default {
+    methods: {
+        productUrl(product) {
+            return route('products.show', product.slug);
+        },
+
+        hasBaseImage(product) {
+            return product.base_image.length !== 0;
+        },
+
+        baseImage(product) {
+            if (this.hasBaseImage(product)) {
+                return product.base_image.path;
+            }
+
+            return `${window.FleetCart.baseUrl}/themes/storefront/public/images/image-placeholder.png`;
+        },
+    },
+};