Skip to content

Commit

Permalink
global event completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@devansh-webkul
devansh-webkul committed Jun 27, 2023
1 parent 628cc46 commit 9df4ee5
Show file tree
Hide file tree
Showing 12 changed files with 136 additions and 106 deletions.
4 changes: 2 additions & 2 deletions .env.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ APP_TIMEZONE=Asia/Kolkata
APP_LOCALE=en
APP_CURRENCY=USD

SHOP_VITE_HOST=
SHOP_VITE_PORT=
VITE_SHOP_HOST=
VITE_SHOP_PORT=

ASSET_URL=http://localhost

Expand Down
3 changes: 1 addition & 2 deletions packages/Webkul/Shop/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
"devDependencies": {
"autoprefixer": "^10.4.14",
"axios": "^1.1.2",
"laravel-mix": "^6.0.49",
"laravel-mix-merge-manifest": "^0.1.2",
"laravel-vite-plugin": "^0.7.2",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2",
Expand All @@ -18,6 +16,7 @@
"dependencies": {
"@vee-validate/i18n": "^4.9.1",
"@vee-validate/rules": "^4.9.1",
"mitt": "^3.0.0",
"vee-validate": "^4.9.1",
"vue-flatpickr": "^2.3.0"
}
Expand Down
5 changes: 3 additions & 2 deletions packages/Webkul/Shop/src/Resources/assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,10 @@ window.app = createApp({
/**
* Global plugins registration.
*/
import Shop from "./plugins/shop";
import Axios from "./plugins/axios";
[Shop, Axios].forEach((plugin) => app.use(plugin));
import Emitter from "./plugins/emitter";
import Shop from "./plugins/shop";
[Axios, Emitter, Shop].forEach((plugin) => app.use(plugin));

/**
* Global components registration;
Expand Down
4 changes: 1 addition & 3 deletions packages/Webkul/Shop/src/Resources/assets/js/plugins/axios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,8 @@ import axios from "axios";
window.axios = axios;
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

const Axios = {
export default {
install(app) {
app.config.globalProperties.$axios = axios;
},
};

export default Axios;
7 changes: 7 additions & 0 deletions packages/Webkul/Shop/src/Resources/assets/js/plugins/emitter.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import mitt from "mitt";

export default {
install: (app, options) => {
app.config.globalProperties.$emitter = mitt();
},
};
22 changes: 14 additions & 8 deletions packages/Webkul/Shop/src/Resources/assets/js/plugins/shop.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const Shop = {
export default {
install(app) {
app.config.globalProperties.$shop = {
/**
Expand All @@ -10,18 +10,24 @@ const Shop = {
* @returns {string} - The formatted price string.
*/
formatPrice: (price, localeCode = null, currencyCode = null) => {
if (! localeCode) {
localeCode = document.querySelector('meta[http-equiv="content-language"]').content ?? 'en';
if (!localeCode) {
localeCode =
document.querySelector(
'meta[http-equiv="content-language"]'
).content ?? "en";
}

if (! currencyCode) {
currencyCode = document.querySelector('meta[name="currency-code"]').content ?? 'USD';
if (!currencyCode) {
currencyCode =
document.querySelector('meta[name="currency-code"]')
.content ?? "USD";
}

return new Intl.NumberFormat(localeCode, { style: 'currency', currency: currencyCode }).format(price);
return new Intl.NumberFormat(localeCode, {
style: "currency",
currency: currencyCode,
}).format(price);
},
};
},
};

export default Shop;
52 changes: 34 additions & 18 deletions packages/Webkul/Shop/src/Resources/views/checkout/cart/mini-cart.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,24 +34,24 @@ class="absolute py-[5px] px-[7px] top-[-15px] left-[18px] rounded-[44px] bg-[#06
<div class="grid gap-[50px] mt-[35px]" v-if="cart?.items?.length">
<div class="flex gap-x-[20px]" v-for="item in cart?.items">
<div class="">
<img
<img
:src="item.base_image.small_image_url"
class="max-w-[110px] max-h-[110px] rounded-[12px]"
alt=""
alt=""
title=""
>
</div>

<div class="grid gap-y-[10px] flex-1">
<div class="flex flex-wrap justify-between">
<p
class="text-[16px] font-medium max-w-[80%]"
<p
class="text-[16px] font-medium max-w-[80%]"
v-text="item.name"
>
</p>

<p
class="text-[18px]"
<p
class="text-[18px]"
v-text="item.formatted_price"
>
</p>
Expand Down Expand Up @@ -85,10 +85,10 @@ class="text-[24px]"
@{{ option.option_label }}
</p>
</div>

</div>
</div>

<div class="flex gap-[20px] items-center flex-wrap">
<x-shop::quantity-changer
name="quantity"
Expand All @@ -97,8 +97,8 @@ class="gap-x-[20px] rounded-[54px] py-[5px] px-[14px] max-w-[150px] max-h-[36px]
@change="updateItem($event, item)"
>
</x-shop::quantity-changer>
<button

<button
type="button"
class="text-[#0A49A7]"
@click="removeItem(item.id)"
Expand All @@ -110,13 +110,13 @@ class="text-[#0A49A7]"
</div>
</div>

<div
class="pb-[30px]"
<div
class="pb-[30px]"
v-else
>
<div class="grid gap-y-[20px] b-0 place-items-center">
<img src="{{ bagisto_asset('images/thank-you.png') }}">

<p class="text-[20px]">
@lang('shop::app.checkout.cart.mini-cart.empty-cart')
</p>
Expand All @@ -131,16 +131,16 @@ class="pb-[30px]"
@lang('shop::app.checkout.cart.mini-cart.subtotal')
</p>

<p
<p
class="text-[30px] font-semibold"
v-text="cart.formatted_grand_total"
>
</p>
</div>

<div class="px-[25px]">
<a
href="{{ route('shop.checkout.onepage.index') }}"
<a
href="{{ route('shop.checkout.onepage.index') }}"
class="m-0 ml-[0px] block mx-auto bg-navyBlue text-white text-base w-full font-medium py-[15px] px-[43px] rounded-[18px] text-center cursor-pointer max-sm:px-[20px]"
>
@lang('shop::app.checkout.cart.mini-cart.continue-to-checkout')
Expand Down Expand Up @@ -169,6 +169,22 @@ class="m-0 ml-[0px] block mx-auto bg-navyBlue text-white text-base w-full font-m
mounted() {
this.getCart();
/**
* To Do: Implement this.
*
* Action.
*/
this.$emitter.on('test-cart', (cart) => {
console.log(cart);
alert('its a testing global event...');
});
/**
* Calling.
*/
this.$emitter.emit('test-cart', { cart: 1 });
},
methods: {
Expand Down
84 changes: 43 additions & 41 deletions packages/Webkul/Shop/src/Resources/views/components/products/card.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ class="rounded-sm bg-[#F5F5F5] group-hover:scale-105 transition-all duration-300
@load="onImageLoad()"
v-show="! isImageLoading"
>
</a>
</a>

<div class="action-items bg-black">
<p
class="rounded-[44px] text-[#fff] text-[14px] px-[10px] bg-red-700 inline-block absolute top-[20px] left-[20px]"
Expand Down Expand Up @@ -88,17 +88,17 @@ class="flex font-semibold gap-2.5 text-lg"
class="flex gap-[15px] grid-cols-2 max-w-max relative max-sm:flex-wrap"
v-else
>
<div class="relative overflow-hidden group max-w-[250px] max-h-[258px]">
<div class="relative overflow-hidden group max-w-[250px] max-h-[258px]">
<a :href="`{{ route('shop.productOrCategory.index', '') }}/${product.url_key}`">
<img
class="rounded-sm bg-[#F5F5F5] group-hover:scale-105 transition-all duration-300"
<img
class="rounded-sm bg-[#F5F5F5] group-hover:scale-105 transition-all duration-300"
:src="product.base_image.medium_image_url"
width="250"
height="258"
>
</a>
<div class="action-items bg-black">

<div class="action-items bg-black">
<p
class="rounded-[44px] text-[#fff] text-[14px] px-[10px] bg-red-700 inline-block absolute top-[20px] left-[20px]"
v-if="product.on_sale"
Expand All @@ -114,61 +114,61 @@ class="rounded-[44px] text-[#fff] text-[14px] px-[10px] bg-navyBlue inline-block
</p>

<div class="group-hover:bottom-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
<span
<span
class=" flex justify-center items-center w-[30px] h-[30px] bg-white rounded-md cursor-pointer absolute top-[20px] right-[20px] icon-heart text-[25px]"
@click="addToWishlist()"
>
</span>
<span
</span>

<span
class=" flex justify-center items-center w-[30px] h-[30px] bg-white rounded-md cursor-pointer absolute top-[60px] right-[20px] icon-compare text-[25px]"
@click="addToCompare(product.id)"
>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="grid gap-[15px] content-start">
<p
class="text-base"
<div class="grid gap-[15px] content-start">
<p
class="text-base"
v-text="product.name"
>
</p>
</p>

<div
<div
class="flex gap-2.5 text-lg font-semibold"
v-html="product.price_html"
>
</div>
>
</div>

<div class="flex gap-4">
<div class="flex gap-4">
<span class="rounded-full w-[30px] h-[30px] block cursor-pointer bg-[#B5DCB4]">
</span>
</span>

<span class="rounded-full w-[30px] h-[30px] block cursor-pointer bg-[#5C5C5C]">
</span>
</div>
</span>
</div>

<p class="text-[14px] text-[#7D7D7D]" v-if="! product.avg_ratings">
@lang('shop::app.components.products.card.review-description')
</p>

<p v-else class="text-[14px] text-[#7D7D7D]">
<x-shop::products.star-rating
<x-shop::products.star-rating
::value="product && product.avg_ratings ? product.avg_ratings : 0"
:is-editable=false
>
</x-shop::products.star-rating>
</p>
<div

<div
class="bs-primary-button px-[30px] py-[10px]"
@click="addToCart()"
>
@lang('shop::app.components.products.add-to-cart')
</div>
</div>
</div>
</div>
</div>
</script>

Expand Down Expand Up @@ -234,7 +234,7 @@ class="bs-primary-button px-[30px] py-[10px]"
}
} else {
localStorage.setItem('compare_items', JSON.stringify([productId]));
alert('Added product in compare.');
}
},
Expand All @@ -250,14 +250,16 @@ class="bs-primary-button px-[30px] py-[10px]"
},
addToCart() {
this.$axios.post('{{ route("shop.api.checkout.cart.store") }}', {
'quantity': 1,
'product_id': this.product.id,
})
.then(response => {
alert(response.data.message);
})
.catch(error => {});
// this.$axios.post('{{ route("shop.api.checkout.cart.store") }}', {
// 'quantity': 1,
// 'product_id': this.product.id,
// })
// .then(response => {
// alert(response.data.message);
// })
// .catch(error => {});
},
},
});
Expand Down
Loading

0 comments on commit 9df4ee5

Please sign in to comment.