Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ecommerce as easy as an UI component

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!

Ramona Schwering

February 10, 2023
Tweet

More Decks by Ramona Schwering

Other Decks in Technology

Transcript

  1. # 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 full-size slide

  2. # 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 full-size slide

  3. # 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 full-size slide

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

    View full-size slide

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





    View full-size slide

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





    View full-size slide

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



    View full-size slide

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



    View full-size slide

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

    :alt='product.cover.media.title' />
    {{ product.name }}

    View full-size slide

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

    :alt='product.cover.media.title' />
    {{ product.name }}

    View full-size slide

  11. <br/>…<br/>const { getFormattedPrice } = usePrice();<br/>const { unitPrice } = useProductPrice(ref(product));<br/>

    :alt='product.cover.media.title' />
    {{ product.name }}
    {{ getFormattedPrice(unitPrice) }}

    View full-size slide

  12. <br/>…<br/>const { getFormattedPrice } = usePrice();<br/>const { unitPrice } = useProductPrice(ref(product));<br/>

    :alt='product.cover.media.title' />
    {{ product.name }}
    {{ getFormattedPrice(unitPrice) }}

    View full-size slide

  13. <br/>…<br/>const { getFormattedPrice } = usePrice();<br/>const { unitPrice } = useProductPrice(ref(product));<br/>

    :alt='product.cover.media.title' />
    {{ product.name }}
    {{ getFormattedPrice(unitPrice) }}

    View full-size slide

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



    Add to cart



    View full-size slide

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



    Add to cart



    View full-size slide

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



    View full-size slide

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



    View full-size slide

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



    View full-size slide




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



    Total {{ getFormattedPrice(totalPrice) }}



    View full-size slide




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



    Total {{ getFormattedPrice(totalPrice) }}



    View full-size slide




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



    Total {{ getFormattedPrice(totalPrice) }}



    View full-size slide