@nacelle/nacelle-recharge-nuxt-module

    0.0.8 • Public • Published

    nacelle-recharge-nuxt-module

    Adds Vue.js components for integrating Recharge subscriptions in your Nacelle Nuxt project.

    Requirements

    • A Nacelle project set up locally. See https://docs.getnacelle.com for getting started.
    • A Recharge app installed and setup on your Shopify store.

    Setup

    Add Module to Nacelle

    Once you hace Nacelle and Recharge set up you can install this module in your project from npm:

    npm install @nacelle/nacelle-recharge-nuxt-module --save
    

    After the package has installed, open nuxt.config.js. Under modules add @nacelle/nacelle-recharge-nuxt-module to the array. It should look something like this:

    modules: [
      '@nuxtjs/pwa',
      '@nuxtjs/dotenv',
      '@nacelle/nacelle-nuxt-module',
      '@nuxtjs/sitemap',
      '@nacelle/nacelle-recharge-nuxt-module'
    ],
    

    Metafields

    Recharge sets important product metafields that we need to expose to Nacelle. We can do this with a simple graphql query using Shopify's GraphQL Admin API

    This module adds a Nuxt Command for exposing all of the needed metafields. You should only need to run this once. Let's say your store is: starship-furniture.myshopify.com and your GraphQl Admin API Access token is: 1234josdfijfslkj1324234

    nuxt expose-recharge-meta --store starship-furniture --token 1234josdfijfslkj1324234
    • Please note you may need to target the nuxt command (which is located in node_modules/bin) by using npx or yarn:

      npx nuxt expose-recharge-meta or yarn nuxt expose-recharge-meta.

    Add the components to your

    There are two components you can add to your Nacelle site: <recharge-widget /> and <subscription-add-to-cart-button />.

    Recharge Widget will display a radio selector for customer to choose between one time and subscription purchases as well as a drop down to select frequencies (This is set in a product's ruleset in Recharge admin). Add this component to pages/products/_handle.vue or anywhere you use products and pass the product object as a prop.

    <recharge-widget
      v-if="isSubscription"
      :product="product"
      :variant="currentVariant"
      :metafields.sync="metafields"
      :frequency.sync="frequency"
    />
    

    Subscription Add To Cart Button will display an add to cart button for handling subscribe and save functionality. Add this component to pages/products/_handle.vue or anywhere you use products and pass the product object as a prop.

    <subscription-add-to-cart-button
      :product="product"
      :variant="selectedVariant"
      :metafields="metafields"
      :all-options-selected="allOptionsSelected"
      :only-one-option="allOptions.length === 1"
    />
    

    Subscription Cart Line Item Details a slotted component to give access to subscription properties to display on cart line items. Add this component to components/CartItem.vue or anywhere you need to display cart line items. Pass line-item as prop. Supported Subscription Properties:

    [
      'charge_interval_frequency',
      'order_interval_frequency',
      'order_interval_unit',
      'cutoff_day_of_month',
      'cutoff_day_of_week',
      'expire_after_specific_number_of_charges',
      'order_day_of_month',
      'order_day_of_week'
    ]
    

    Two helper properties are include frequency and unit (unit is automatically pluralized based on frequency).

    <subscription-cart-line-item-details :line-item="item">
      <template v-slot:default="{ subscription }">
        Your recurring order will be shipped every <strong>{{ subscription.frequency }} {{ subscription.unit }}</strong>
        Easily modify or cancel your subscription up to 3 days before your ship date.
      </template>
    </subscription-cart-line-item-details>
    

    Keywords

    none

    Install

    npm i @nacelle/nacelle-recharge-nuxt-module

    DownloadsWeekly Downloads

    27

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    26.9 kB

    Total Files

    13

    Last publish

    Collaborators

    • dzouras
    • badiolaignacio
    • leviwhalen
    • andrew-nacelle
    • nwrichmond
    • brianvanderson
    • cbodtorf
    • johnstonbl01
    • krisq
    • curbol
    • irnoble
    • jongeyer
    • alexnacelle
    • nacelle-bot
    • austin1237