Product Stock Alert Notification Extension for vue-storefront, by Aureate Labs Pvt. Ltd..
This module is developed for Product Stock Alert for your store's customer in the vue storefront using Magento.
Here is the demo for the product stock alert notification.
Clone the vsf-product-stock-alert repository into your VSF installation.
$git clone git@github.com:aureatelabs/vsf-product-stock-alert.git vue-storefront/src/modules/product-stock-alert
Add the following JSON config snippet into your desired config, eg. config/local.json
"users" : {
...
"productStockAlert": {
"endpoint": "/api/ext/product-stock-alert/notify-me"
}
}
Open up your ../vue-storefront/src/modules/index.ts
and add the following code. Adding it inside this file the registers the extension so it can be used in your Vue Storefront.
import { ProductStockAlert } from './product-stock-alert'
...
export const registerModules: VueStorefrontModule[] = [
...
ProductStockAlert
]
In your theme template file you can find your and make mentioned changes
.
Full Path of AddToCart.vue:
<root>/src/themes/default/components/core/AddToCart.vue
How to check product is In stock or not in AddToCart template?
Using product
object you can easily check, Please refer below code.
product.stock.is_in_stock
How to check product is Customer logged in or not in AddToCart template?
Using below code you can easily find it & after implementing this code You can check with method isLoggedIn
.
<script>
...
import { mapGetters, mapActions } from 'vuex'
...
export default {
...
computed: {
...mapGetters('user', ['isLoggedIn']),
}
...
}
<script>
How to call requestProductStockAlert
method within your template?
It's quite easy to call & store user's request for stock notification.
<script>
...
import { mapGetters, mapActions } from 'vuex'
...
export default {
...
methods: {
...mapActions('productStockAlert', ['requestProductStockAlert']),
}
...
}
<script>
and after this You can directly called function requestProductStockAlert(product.id)
with parameter product ID.
Copy extension to your /path/to/vue-storefront-api/src/api/extensions/
$cp -f ./API/product-stock-alert /path/to/vue-storefront-api/src/api/extensions/
"registeredExtensions": [
...
"product-stock-alert"
],
Thats it! It's easy, plug and play!
This project is licensed under the MIT License.