This package is deprecated. To integrate a third party script with your Nuxt project, follow our docs here: https://docs.getnacelle.com/nuxt/external-scripts.html
Integrate Rise.ai's gift card configurator into your Nacelle Nuxt project
- A Nacelle project set up locally. To get started, refer to the Nacelle docs.
- A Rise Gift Card has been added to your Shopify store.
To see the setup instructions demonstrated in a Nacelle Nuxt project, check out the example.
Once you have Nacelle set up, you can install this module in your project from npm
:
npm install @nacelle/rise-nuxt-module --save
After the package has installed, open nuxt.config.js
. Under modules
add @nacelle/nacelle-rise-nuxt-module
to the array:
modules: [
// ...other modules,
'@nacelle/rise-nuxt-module'
],
Then add your store's Shopify domain to your environment variables .env
file:
# example: "starship-furniture" for "starship-furniture.myshopify.com"
SHOPIFY_DOMAIN=xxxxxxxxxxxxx
Lastly, add the environment variable to the nacelle
block of nuxt.config.js
:
// nuxt.config.js
nacelle: {
// ...other Nacelle config
shopifyDomain: process.env.SHOPIFY_DOMAIN
},
By default, the $nacelle.checkout.process
calls in the checkoutCreate
action in ~/store/checkout.js
are as follows:
let checkout = await this.$nacelle.checkout.process({ cartItems, checkoutId })
if (checkout && checkout.completed) {
checkout = await this.$nacelle.checkout.process({ cartItems, checkoutId: '' })
}
For the Rise integration to work as expected, you must update this code to include a new metafield which is passed to the checkout:
const cartToken = window.sessionStorage.getItem('cartToken')
const metafields = cartToken ? [{ key: 'cart_token', value: cartToken }] : []
let checkout = await this.$nacelle.checkout.process({
cartItems,
checkoutId,
metafields
})
if (checkout && checkout.completed) {
checkout = await this.$nacelle.checkout.process({
cartItems,
checkoutId: '',
metafields
})
}
In ~/pages/products/_productHandle.vue
, use this.$rise.registerProduct()
to provide product information to Rise in the mounted
lifecycle:
mounted() {
this.$rise.registerProduct({ product: this.product })
},
Whether you're using ~/components/nacelle/ProductAddToCartButton.vue
or a custom Add to Cart button, the last step is to add the Rise-add-to-cart-button
class to your Add to Cart button.
<button class="Rise-add-to-cart-button">Add to Cart</button>
The "Send as a Gift" button added by Rise inherits the styles of the Add to Cart button, but it can also be styled using the gwbutton
class.