Ecommerce as easy as an UI component

Frontend development is about connecting with your audience and creating a memorable experience for them. And with eCommerce, it's even more important to make that connection. However, don't let the thought of a steep learning curve scare you off from eCommerce projects - You don't need to be an expert to start building with Vue.js and Shopware Frontends. Join us as we show you how to add eCommerce features to a small application and create a fun and engaging experience for your customers. Let's craft an eCommerce story together!

Transcript

38. # Install dependencies pnpm i # Run project base pnpm run dev # Clone repo npx tiged shopware/frontends/templates/vue-blank vue-blank && cd vue-blank
39. # Install dependencies pnpm i # Run project base pnpm run dev # Clone repo npx tiged shopware/frontends/templates/vue-blank vue-blank && cd vue-blank
40. # Install dependencies pnpm i # Run project base pnpm run dev # Clone repo npx tiged shopware/frontends/templates/vue-blank vue-blank && cd vue-blank
43. API_URL="https://demo-frontends.shopware.store" API_ACCESS_TOKEN="SWSCBHFSNTVMAWNZDNFKSHLAYW"
51. <script setup lang='ts'> import ProductCard from '~/components/ProductCard.vue'; … </script> <template> <div id='app'> <ProductCard/> </div> </template>
52. <script setup lang='ts'> import ProductCard from '~/components/ProductCard.vue'; … </script> <template> <div id='app'> <ProductCard/> </div> </template>
53. <script setup lang='ts'> const { search } = useProductSearch(); const { product } = await search('a-product-id'); </script> <template> <!— Template goes here… —> </template>
54. <script setup lang='ts'> const { search } = useProductSearch(); const { product } = await search('a-product-id'); </script> <template> <!— Template goes here… —> </template>
55. <script setup lang='ts'> const { search } = useProductSearch(); const { product } = await search('a-product-id'); </script> <template> <img :src='product.cover.media.url' :alt='product.cover.media.title' /> <h2>{{ product.name }}</h2> </template>
56. <script setup lang='ts'> const { search } = useProductSearch(); const { product } = await search('a-product-id'); </script> <template> <img :src='product.cover.media.url' :alt='product.cover.media.title' /> <h2>{{ product.name }}</h2> </template>
57. <script setup lang='ts'> … const { getFormattedPrice } = usePrice(); const { unitPrice } = useProductPrice(ref(product)); </script> <template> <img :src='product.cover.media.url' :alt='product.cover.media.title' /> <h2>{{ product.name }}</h2> <span>{{ getFormattedPrice(unitPrice) }}</span> </template>
58. <script setup lang='ts'> … const { getFormattedPrice } = usePrice(); const { unitPrice } = useProductPrice(ref(product)); </script> <template> <img :src='product.cover.media.url' :alt='product.cover.media.title' /> <h2>{{ product.name }}</h2> <span>{{ getFormattedPrice(unitPrice) }}</span> </template>
59. <script setup lang='ts'> … const { getFormattedPrice } = usePrice(); const { unitPrice } = useProductPrice(ref(product)); </script> <template> <img :src='product.cover.media.url' :alt='product.cover.media.title' /> <h2>{{ product.name }}</h2> <span>{{ getFormattedPrice(unitPrice) }}</span> </template>
63. <script setup lang='ts'> … const { addToCart } = useAddToCart(ref(product)); </script> <template> <!— This is the Product card from before… —> <button v-on:click='addToCart()'>
 Add to cart
 </button> </template>
64. <script setup lang='ts'> … const { addToCart } = useAddToCart(ref(product)); </script> <template> <!— This is the Product card from before… —> <button v-on:click='addToCart()'>
 Add to cart
 </button> </template>
65. <script setup> const { cartItems, refreshCart, totalPrice, shippingTotal,
 subtotal, removeItem } = useCart(); onMounted(() => { refreshCart(); }); </script> <template> <!— Template goes here… —> </template>
66. <script setup> const { cartItems, refreshCart, totalPrice, shippingTotal,
 subtotal, removeItem } = useCart(); onMounted(() => { refreshCart(); }); </script> <template> <!— Template goes here… —> </template>
67. <script setup> const { cartItems, refreshCart, totalPrice, shippingTotal,
 subtotal, removeItem } = useCart(); onMounted(() => { refreshCart(); }); </script> <template> <!— Template goes here… —> </template>
68. <template> … <!-- Cart items --> <div v-on:click='removeItem(item)' 
 v-for='item in cartItems'> <h2>{{ item.quantity }} x {{ item.label }}</h2> <p>{{ getFormattedPrice(item.price.unitPrice) }}</p> </div> <div> <!-- Some more cart data and sums can go here --> <p>Total {{ getFormattedPrice(totalPrice) }}</p> </div> … </template>
69. <template> … <!-- Cart items --> <div v-on:click='removeItem(item)' 
 v-for='item in cartItems'> <h2>{{ item.quantity }} x {{ item.label }}</h2> <p>{{ getFormattedPrice(item.price.unitPrice) }}</p> </div> <div> <!-- Some more cart data and sums can go here --> <p>Total {{ getFormattedPrice(totalPrice) }}</p> </div> … </template>
70. <template> … <!-- Cart items --> <div v-on:click='removeItem(item)' 
 v-for='item in cartItems'> <h2>{{ item.quantity }} x {{ item.label }}</h2> <p>{{ getFormattedPrice(item.price.unitPrice) }}</p> </div> <div> <!-- Some more cart data and sums can go here --> <p>Total {{ getFormattedPrice(totalPrice) }}</p> </div> … </template>