mklueh / gridsome-plugin-recommender Goto Github PK

Hey there! First off let me say this plugin works great, I really appreciate all the work that has gone into this.

I am currently making an ecommerce shop using Gridsome, Shopify, and Sanity for a client and I am using this plugin for a recommended products component. However, I seem to be running into a bizarre issue.. For some reason whenever I click a product from the recommender component (the one using this plugin) it breaks an image carousel I am using, but when I load the page from any other path within the site or upon a page refresh the carousel works fine. I have a video attached to show what I mean (ignore the incomplete design this is a wip). Could this be because the plugin does not operate with the graphql layer? To me it appears the page does not mount correctly on the Vue side of things when navigating from a path using the recommender plugin. Unfortunately there are no console errors as well 😖

I have tested this with multiple carousel/gallery libraries (Vue Agile, Swiper, Vue Carousel, and this current one is Keen Slider) and the results are the same (breaks when navigating from a recommended link). If this is the case I may just opt out and not have a recommended product section, although its pretty damn cool lol.

When I try to use the gridsome-source-graphql source, the recommender plugin cannot find the specified option.typeName

The error message I receive is:

Gridsome v0.7.20

Initializing plugins...
gridsome-plugin-recommender: options.typeName 'craft' cannot be found - make sure the collection exists

I am using CraftCMS as a GraphQL data source. When I try to switch to the source-filesystem such as your example, then it does work, so I believe it's related to the async nature of retrieving the graphql data source and it not being loaded while the recommender loads in.

Here is an excerpt from my gridsome.config.js file which does not work.

  plugins: [
    {
      use: '@gridsome/source-graphql',
      options: {
        url: process.env.CRAFT_API_URL,
        fieldName: 'craft',
        typeName: 'craft',
        headers: {
          Authorization: `Bearer ${process.env.CRAFT_API_TOKEN}`,
        }
      }
    },
    {
      use: "gridsome-plugin-recommender",
      options: {
        enabled: true,
        typeName: 'craft',
        field: 'mainContent',
        relatedFieldName: 'related',
        minScore: 0.01,
        maxScore: 1,
        minRelations:3,
        maxRelations: 10,
        fillWithRandom:false,
        debug: false
      }
    },

GitHub Action Workflow for NPM deployment is suddenly not triggered anymore

We want to always provide a minimum of relations optionally, even if they are not really related to give the user at least some other posts / products in case he might be interested anyway

As per the documentation in the readme, the plugin should work with @gridsome/vue-remark as a source, but I have been doing some attempts to make it work and get the following error:

Initializing plugins...
gridsome-plugin-recommender:  training 4
gridsome-plugin-recommender:  Fetching relations for document 376f652e3a2f627f81710842c9d44ee3
TypeError: expected input to be a string or buffer

Could an example on how to configure the plugin to work with vue-remark be provided?