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

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

41. View Slide

42. View Slide

43. API_URL="https://demo-frontends.shopware.store"
    API_ACCESS_TOKEN="SWSCBHFSNTVMAWNZDNFKSHLAYW"
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. <br/>import ProductCard from '~/components/ProductCard.vue';<br/>…<br/>
    
    
    
    
    
    

    View Slide

52. <br/>import ProductCard from '~/components/ProductCard.vue';<br/>…<br/>
    
    
    
    
    
    

    View Slide

53. <br/>const { search } = useProductSearch();<br/>const { product } = await search('a-product-id');<br/>
    
    
    
    

    View Slide

54. <br/>const { search } = useProductSearch();<br/>const { product } = await search('a-product-id');<br/>
    
    
    
    

    View Slide

55. <br/>const { search } = useProductSearch();<br/>const { product } = await search('a-product-id');<br/>
    
    :alt='product.cover.media.title' />
    {{ product.name }}
    
    

    View Slide

56. <br/>const { search } = useProductSearch();<br/>const { product } = await search('a-product-id');<br/>
    
    :alt='product.cover.media.title' />
    {{ product.name }}
    
    

    View Slide

57. <br/>…<br/>const { getFormattedPrice } = usePrice();<br/>const { unitPrice } = useProductPrice(ref(product));<br/>
    
    :alt='product.cover.media.title' />
    {{ product.name }}
    {{ getFormattedPrice(unitPrice) }}
    
    

    View Slide

58. <br/>…<br/>const { getFormattedPrice } = usePrice();<br/>const { unitPrice } = useProductPrice(ref(product));<br/>
    
    :alt='product.cover.media.title' />
    {{ product.name }}
    {{ getFormattedPrice(unitPrice) }}
    
    

    View Slide

59. <br/>…<br/>const { getFormattedPrice } = usePrice();<br/>const { unitPrice } = useProductPrice(ref(product));<br/>
    
    :alt='product.cover.media.title' />
    {{ product.name }}
    {{ getFormattedPrice(unitPrice) }}
    
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. <br/>…<br/>const { addToCart } = useAddToCart(ref(product));<br/>
    
    
    

    Add to cart

    
    
    

    View Slide

64. <br/>…<br/>const { addToCart } = useAddToCart(ref(product));<br/>
    
    
    

    Add to cart

    
    
    

    View Slide

65. <br/>const { cartItems, refreshCart, totalPrice, shippingTotal,
<br/>subtotal, removeItem } = useCart();<br/>onMounted(() => {<br/>refreshCart();<br/>});<br/>
    
    
    
    

    View Slide

66. <br/>const { cartItems, refreshCart, totalPrice, shippingTotal,
<br/>subtotal, removeItem } = useCart();<br/>onMounted(() => {<br/>refreshCart();<br/>});<br/>
    
    
    
    

    View Slide

67. <br/>const { cartItems, refreshCart, totalPrice, shippingTotal,
<br/>subtotal, removeItem } = useCart();<br/>onMounted(() => {<br/>refreshCart();<br/>});<br/>
    
    
    
    

    View Slide

68. 
    …
    
    v-for='item in cartItems'>
    {{ item.quantity }} x {{ item.label }}
    {{ getFormattedPrice(item.price.unitPrice) }}
    
    
    
    Total {{ getFormattedPrice(totalPrice) }}
    
    …
    
    

    View Slide

69. 
    …
    
    v-for='item in cartItems'>
    {{ item.quantity }} x {{ item.label }}
    {{ getFormattedPrice(item.price.unitPrice) }}
    
    
    
    Total {{ getFormattedPrice(totalPrice) }}
    
    …
    
    

    View Slide

70. 
    …
    
    v-for='item in cartItems'>
    {{ item.quantity }} x {{ item.label }}
    {{ getFormattedPrice(item.price.unitPrice) }}
    
    
    
    Total {{ getFormattedPrice(totalPrice) }}
    
    …
    
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide