Online - Store ·

It's an online store where you can create and update products. You can add an item to the cart and checkout it and buy it. photos

What used in the project:

• python 3.7
• django 3.0
• drf 3.11
• stripe 2.60
• bulma-toast
• vue 4.5
• yarn 1.22

Development

1. Install Node 16 or later and Python 3.7 or later and Poetry 1.3 or later.
2. Clone this repository
3. Run poetry install to install the Python dependencies.
4. Run npm ci (./djackets_vue) to install the Node dependencies.
5. Run python3 manage.py runserver to start back-end server.
6. Run yarn start to start front-end server.
7. Open http://localhost:3000/ to view the frontend.

Setup

1. Create your account in Stripe: Stripe
2. To file Checkout.vue & settings.py add your Stripe Token

Example (Django)

@api_view(['POST'])
@authentication_classes([authentication.TokenAuthentication])
@permission_classes([permissions.IsAuthenticated])
def checkout(request):
    serializer = OrderSerializer(data=request.data)

    if serializer.is_valid():
        stripe.api_key = settings.STRIPE_SECRET_KEY
        paid_amount = sum(item.get('quantity') * item.get('product').price for item in serializer.validated_data['items'])

        try:
            charge = stripe.Charge.create(
                amount=int(paid_amount * 100),
                currency='USD',
                description='Charge from Djackets',
                source=serializer.validated_data['stripe_token']
            )

            serializer.save(user=request.user, paid_amount=paid_amount)

            return Response(serializer.data, status=status.HTTP_201_CREATED)
        except Exception:
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
    
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

Example (Vue)

export default {
    name: 'CartItem',
    props: {
        initialItem: Object
    },
    data() {
        return {
            item: this.initialItem
        }
    },
    methods: {
        getItemTotal(item) {
            return item.quantity * item.product.price
        },
        decrementQuantity(item) {
            item.quantity -= 1
            if (item.quantity === 0) {
                this.$emit('removeFromCart', item)
            }
            this.updateCart()
        },
        incrementQuantity(item) {
            item.quantity += 1
            this.updateCart()
        },
        updateCart() {
            localStorage.setItem('cart', JSON.stringify(this.$store.state.cart))
        },
        removeFromCart(item) {
            this.$emit('removeFromCart', item)
            this.updateCart()
        },
    },
}