diff --git a/assets/app.js b/assets/app.js
new file mode 100644
index 00000000000..c64065307b9
--- /dev/null
+++ b/assets/app.js
@@ -0,0 +1,171 @@
+const { createApp } = Vue;
+// Define your component
+const MyComponent = {
+ template: `
+
+
This is My Component!
+
{{ message }}
+
+
+
+ `,
+ data() {
+ return {
+ message: 'Initial message from MyComponent!',
+ products: [],
+ demoImage: 'https://via.placeholder.com/150',
+ };
+ },
+ methods: {
+ changeMessage() {
+ this.message = 'Message has been changed!';
+ },
+ 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',
+ },
+ });
+
+ const data = await response.json();
+ this.products = data.products.map((product) => ({
+ title: product.title,
+ price: product.variants[0].price,
+ url: `https://homeceuconnectiontest.myshopify.com/products/${product.handle}`,
+ image: product.images.length > 0 ? product.images[0].src : null,
+ variants: product.variants, // Keep the variants for adding to cart
+ cartMessage: '', // Initialize cart message for each product
+ }));
+ this.$nextTick(() => this.initSlickSlider());
+ },
+ initSlickSlider() {
+ // Initialize the Slick slider
+ $('.slick-slider').slick({
+ dots: false,
+ arrows: true,
+ infinite: true,
+ autoplay: true,
+ speed: 500,
+ slidesToShow: 6,
+ slidesToScroll: 1,
+ prevArrow:
+ '',
+ nextArrow:
+ '',
+ });
+ },
+ async addToCart(product, variantId) {
+ const response = await fetch('/cart/add.js', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ items: [{ id: variantId, quantity: 1 }] }),
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ console.log('Item added to cart:', data);
+ product.cartMessage = 'Product added to cart successfully!'; // Set success message for the specific product
+
+ // Hide message after 3 seconds
+ setTimeout(() => {
+ product.cartMessage = '';
+ }, 3000);
+ } else {
+ console.error('Failed to add to cart:', response.statusText);
+ product.cartMessage = 'Failed to add to cart.'; // Set error message for the specific product
+ }
+ },
+ },
+ mounted() {
+ this.fetchProducts();
+ },
+};
+
+// Create your Vue app
+const testApp = createApp({
+ data() {
+ return {
+ greeting: 'Hello from Vue!',
+ };
+ },
+ components: {
+ MyComponent,
+ },
+ template: `
+
+
{{ greeting }}
+
+
+ `,
+});
+
+// Mount your app
+testApp.mount('#vue-test');
+
+// Add some CSS for the layout
+const style = document.createElement('style');
+style.textContent = `
+ .slick-slider {
+ margin: 20px 0;
+ position: relative; /* Ensure relative positioning for arrows */
+ }
+ .product-card {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ padding: 16px;
+ text-align: center;
+ }
+ .product-card img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 4px;
+ }
+ .product-card button {
+ margin-top: 10px;
+ background-color: #000;
+ color: #fff;
+ border: none;
+ padding: 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .cart-message {
+ margin-top: 10px;
+ color: green;
+ }
+`;
+
+// Append the style to the document head
+document.head.appendChild(style);
+
+// Load Slick CSS and JS
+const slickCss = document.createElement('link');
+slickCss.rel = 'stylesheet';
+slickCss.href = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css';
+document.head.appendChild(slickCss);
+
+const slickThemeCss = document.createElement('link');
+slickThemeCss.rel = 'stylesheet';
+slickThemeCss.href = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css';
+document.head.appendChild(slickThemeCss);
+
+const slickJs = document.createElement('script');
+slickJs.src = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js';
+document.head.appendChild(slickJs);