From b7db9f82f8a36868b823bcadff69f680ab201007 Mon Sep 17 00:00:00 2001 From: Prateek Saini Date: Tue, 1 Oct 2024 14:47:18 +0530 Subject: [PATCH] Updated --- assets/app.js | 158 +++++++++++++++++++++++++++----------------------- 1 file changed, 87 insertions(+), 71 deletions(-) diff --git a/assets/app.js b/assets/app.js index e6c91d3857f..6c09188d1fd 100644 --- a/assets/app.js +++ b/assets/app.js @@ -14,25 +14,34 @@ const MyComponent = {

{{ product.title }}

-

Price: {{ product.price | formatPrice }}

+

Price: {{ formatPrice(product.price) }}

{{ product.cartMessage }}

+ +

Mini Cart

Your cart is empty.

-

Total: {{ cartTotal | formatPrice }}

- +

Total: {{ formatPrice(cartTotal) }}

+
+ + +
`, @@ -44,25 +53,35 @@ const MyComponent = { cartTotal: 0, isMiniCartOpen: false, demoImage: 'https://via.placeholder.com/150', + storeCurrency: 'USD', // Default currency }; }, methods: { changeMessage() { this.message = 'Message has been changed!'; }, + async fetchStoreCurrency() { + try { + const response = await fetch('/cart.js'); + const data = await response.json(); + this.storeCurrency = data.currency; // Get currency from cart data + } catch (error) { + console.error('Failed to fetch store currency:', error); + } + }, async fetchProducts() { const response = await fetch('https://homeceuconnectiontest.myshopify.com/admin/api/2023-01/products.json', { method: 'GET', headers: { 'Content-Type': 'application/json', - 'X-Shopify-Access-Token': 'Your-Access-Token', + 'X-Shopify-Access-Token': 'Your-access-token', }, }); const data = await response.json(); this.products = data.products.map((product) => ({ title: product.title, - price: product.variants[0].price, + price: product.variants[0].price, // Price in cents url: `https://homeceuconnectiontest.myshopify.com/products/${product.handle}`, image: product.images.length > 0 ? product.images[0].src : null, variants: product.variants, @@ -73,16 +92,20 @@ const MyComponent = { initSlickSlider() { $('.slick-slider').slick({ dots: false, - arrows: true, + arrows: false, // Disable default arrows to use custom buttons infinite: true, autoplay: true, speed: 500, slidesToShow: 6, slidesToScroll: 1, - prevArrow: '', - nextArrow: '', }); }, + nextSlide() { + $('.slick-slider').slick('slickNext'); + }, + prevSlide() { + $('.slick-slider').slick('slickPrev'); + }, async addToCart(product, variantId) { const response = await fetch('/cart/add.js', { method: 'POST', @@ -94,7 +117,7 @@ const MyComponent = { if (response.ok) { product.cartMessage = 'Product added to cart successfully!'; - this.fetchCart(); + await this.fetchCart(); this.openMiniCart(); setTimeout(() => { @@ -110,9 +133,11 @@ const MyComponent = { this.cartItems = data.items.map((item) => ({ title: item.title, quantity: item.quantity, - price: item.final_price / 100, + price: item.final_price / 100, // Convert from cents to dollars + image: item.image || this.demoImage, + id: item.id, // Store the item ID for removal })); - this.cartTotal = data.total_price / 100; + this.cartTotal = data.total_price / 100; // Convert from cents to dollars }, openMiniCart() { this.isMiniCartOpen = true; @@ -123,18 +148,36 @@ const MyComponent = { checkout() { window.location.href = '/checkout'; // Redirect to checkout page }, + viewCart() { + window.location.href = '/cart'; // Redirect to cart page + }, formatPrice(value) { return new Intl.NumberFormat('en-US', { style: 'currency', - currency: 'USD', + currency: this.storeCurrency, // Use the dynamically fetched store currency }).format(value); }, }, mounted() { + this.fetchStoreCurrency(); // Fetch the store currency on component mount this.fetchProducts(); }, }; +// Create the first Vue app for products +const productApp = createApp({ + components: { + MyComponent, + }, + template: ` +
+

Product Section

+ +
+ `, +}); +productApp.mount('#product-app'); + // CollectionComponent to show a list of Shopify collections const CollectionComponent = { template: ` @@ -172,7 +215,7 @@ const CollectionComponent = { method: 'GET', headers: { 'Content-Type': 'application/json', - 'X-Shopify-Access-Token': 'Your-Access-Token', + 'X-Shopify-Access-Token': 'Your-access-token', }, } ); @@ -183,8 +226,7 @@ const CollectionComponent = { url: `https://homeceuconnectiontest.myshopify.com/collections/${collection.handle}`, })); } catch (error) { - this.error = 'Failed to load collections.'; - console.error('Error fetching collections:', error); + this.error = 'Failed to fetch collections.'; } finally { this.loading = false; } @@ -195,19 +237,6 @@ const CollectionComponent = { }, }; -// Create the first Vue app for products -const productApp = createApp({ - components: { - MyComponent, - }, - template: ` -
-

Product Section

- -
- `, -}); - // Create the second Vue app for collections const collectionApp = createApp({ components: { @@ -222,71 +251,58 @@ const collectionApp = createApp({ }); // Mount the Vue apps to different DOM elements -productApp.mount('#product-app'); collectionApp.mount('#collection-app'); // Add some CSS for layout const style = document.createElement('style'); -style.textContent = ` - body { - font-family: Arial, sans-serif; - } +style.innerHTML = ` .slick-slider { margin: 20px 0; } .product-card { border: 1px solid #ccc; - padding: 16px; + padding: 10px; + margin: 10px; text-align: center; + display: inline-block; + width: 150px; } .add-to-cart { - background-color: #28a745; - color: #fff; + background-color: green; + color: white; border: none; - padding: 10px 15px; + padding: 5px 10px; cursor: pointer; - border-radius: 4px; } .mini-cart { position: fixed; - right: -300px; - top: 0; - width: 300px; - height: 100%; - background: #fff; - box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); - padding: 20px; - transition: right 0.3s ease; - overflow-y: auto; - z-index: 1000; + right: 10px; + top: 10px; + border: 1px solid #ccc; + padding: 10px; + background-color: white; + display: none; } .mini-cart.open { - right: 0; + display: block; } - .close-btn { - background: #f00; - color: #fff; - border: none; - padding: 5px 10px; - cursor: pointer; - float: right; + .cart-item { + display: flex; + margin-bottom: 10px; } - .checkout-btn { - background-color: #007bff; - color: #fff; - border: none; - padding: 10px; - border-radius: 4px; - cursor: pointer; - margin-top: 10px; + .cart-image { + width: 50px; + height: auto; + margin-right: 10px; + } + .cart-info { + flex-grow: 1; } - .cart-message { - margin-top: 10px; - color: green; + .cart-buttons { + display: flex; + justify-content: space-between; } `; - -// Append the style to the document head document.head.appendChild(style); // Load Slick CSS and JS