Vue Storefront Instagram Feed extension

Standalone offline ready instagram feed extension for Vue Storefront. Works with default and capybara theme.

Table of contents

• Installation
  • Repository file structure
  • Setting up VSF module
  • Setting up VSF-API module
• Usage and features
  • Config parameters
  • Using feed data
  • Default theme example (with preview image)
  • Capybara theme example (with preview image)
• Contributing

Installation

Magento2 module

Version 2 of VSF Instagram Feed requires you to install our magento module It's a basic wrapper around Instagram's Basic Display API

You can install it with composer:

• composer require magebit/vsf-instagram-feed

For manual installation check the module's repository: https://github.com/magebitcom/vsf-instagram-feed-m2

Repository file structure

• vue storefront - vue-instagram-feed module
• vue-storefront-api - vue-instagram-feed-api module

Setting up VSF module

• Clone this repository in vue-storefront/src/modules directory
• Register module in src/modules/client.ts (or theme/config.modules.ts for capybara)

...
import { InstagramFeed } from './vue-storefront-instagram-feed'
...

export function registerClientModules () {
  ...
  registerModule(InstagramFeed)
}

• Add instagram endpoint to config/local.json file:

"instagram": {
  "endpoint": "http://project.local:8080/api/ext/vue-storefront-instagram-api/feed"
}

• Add instagram image height and width params to config/docker.json and config/production.json file. These can be changed to fit your needs:

"instagram": {
    "thumbnails": {
      "width": 200,
      "height": 200
    }
  }

• To load instagram data, you need to dispatch instagram-feed/get action:

this.$store.dispatch('instagram-feed/get', {
  width: config.instagram.thumbnails.width,
  height: config.instagram.thumbnails.height
})

To make sure instagram data is available during SSR, add tis dispatch to beforeRouteEnter and asyncData. For example, in Home.vue it would look something like this:

  import config from 'config'

  beforeRouteEnter (to, from, next) {
    if (!isServer && !from.name) {
        ...
        await Promise.all([
          ...
          vm.$store.dispatch('instagram-feed/get', {
            width: config.instagram.thumbnails.width,
            height: config.instagram.thumbnails.height
          })
        ])
        ...
      })
    } else {
      next()
    }
  },
  async asyncData ({ store, route }) {
    ...
    await Promise.all([
      ...
      store.dispatch('instagram-feed/get', {
        width: config.instagram.thumbnails.width,
        height: config.instagram.thumbnails.height
      })
     ...
    ])
  },

Setting up VSF-API module

• Move content from src/modules/instragram-feed/API to vue-storefront-api/src/extensions

• Get instagram profile ID:

  • Here
  • Or go to https://instagram.com/{INSTAGRAM_USERNAME}/ open developer tools and paste this in the console:

    window._sharedData.entry_data.ProfilePage[0].graphql.user.id

• Add vue-storefront-instagram-api to the list of registeredExtensions in your config file.

• To return absolute image urls, also add server.url field to your api config:

"server": {
  "url": "http://localhost:8080"
}

Usage and features

Here are some examples on how to use instagram feed in your project.

Config parameters

• instagram
  • width (int) required - Thumbnail width
  • height (int) required - Thumbnail height

These values will be used to construct a URL to the instagram feed VUE-API extension:

project.local:8080/api/ext/vue-storefront-instagram-api/feed?width=370&height=370

This returns a JSON object with feed items

Using feed data

All feed data is available in the instagram-feed vuex store. You can manually retrieve the data with mapGetters or use the included mixin:

import { mapGetters } from 'vuex'

...
{
  computed: {
    ...mapGetters({
      feed: 'instagram-feed/media',
      hasItems: 'instagram-feed/hasItems'
    })
  }
}

import InstagramFeed from 'src/modules/vue-storefront-instagram-feed/mixins/InstagramFeed'

export default {
  mixins: [InstagramFeed]
}

Default theme example

Here's a simple component you can use in the default theme

• theme/components/theme/Instagram.vue

<template>
  <div class="row center-xs">
    <div
      class="col-sm-3 pb15"
      v-for="media in feed"
      :key="media.id"
    >
      <div class="tile center-xs middle-xs">
        <a :href="media.pemalink">
          <img
            class="tile-image"
            v-lazy="media.media_url_thumb"
            :alt="media.caption"
          >
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import InstagramFeed from 'src/modules/vue-storefront-instagram-feed/mixins/InstagramFeed'

export default {
  name: 'InstagramFeed',
  mixins: [InstagramFeed]
}
</script>

• pages/Home.vue

<template>
  <!-- ... -->
  <div class="container">
    <h2 class="align-center">
      Instagram feed
    </h2>
    <instagram />
  </div>
  <!-- ... -->
</template>

<script>
import Instagram from 'theme/components/theme/Instagram'

export default {
  // ...
  components: {
    Instagram
  }
  // ...
}
</script>

Contributing

Found a bug, have a feature suggestion or just want to help in general? Contributions are very welcome! Check out the list of active issues or submit one yourself.

If you're making a bug report, please include as much details as you can and preferably steps to repreduce the issue. When creating Pull Requests, don't for get to list your changes in the CHANGELOG and README files.

---

Have questions or need help? Contact us at [email protected]