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
- python
3.7
- django
3.0
- drf
3.11
- stripe 2.60
- bulma-toast
- vue
4.5
- yarn
1.22
- Install Node 16 or later and Python 3.7 or later and Poetry 1.3 or later.
- Clone this repository
- Run
poetry installto install the Python dependencies. - Run
npm ci(./djackets_vue) to install the Node dependencies. - Run
python3 manage.py runserverto start back-end server. - Run
yarn startto start front-end server. - Open
http://localhost:3000/to view the frontend.
- Create your account in Stripe: Stripe
- To file Checkout.vue & settings.py add your Stripe Token
@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)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()
},
},
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent