kartmax-search-client v0.0.4

Kartmax Search Client

A npm package for Kartmax Search integration. This package should be used to communicate with Kartmax Search from front-end with the basic setup and standards already defined in this package.

Under the hood (Features)

• Built in component
• Integrated with Debounce to prevent excessive requests
• Fully customizable input tag in component
• Integrated support for Analytics
• Emits response from component to your component for further action

Screenshot

Generic Search with Validations

Search with inbuilt debounce

Installation

Run npm i kartmax-search-client into your app.

Dependencies

• vue-debounce
• Vue 2

Usage

<script>
import Vue from 'vue';
import SearchClient from 'kartmax-search-client';

export default Vue.extend({
  components: {
    SearchClient
  },
  methods : {
     receiveResponse(response) {
       /*
       * You can use this response to do whatever you want.
       * Such as hide and show the search results or loader
       * */
       console.log("Search emitted response received");
        console.log(response);
        this.response = response;
    }
  },
  data() {
    return {
      response: '',
      options:{
        app_id: '<your-app-id>',
        emptyInputError: true,
      },
      form:{
        collection : "<your-collection-id>",
        page :1,
        count : 12,
      }
    }
  },
});
</script>

<template>
  <div id="app">
    <SearchClient
        :placeholder="'Feel free to search'"
        :class="'form-control form-control form-control-borderless'"
        :form="form"
        :options="options"
        v-on:receiveResponse="receiveResponse"
        v-model="response"
    ></SearchClient>
  </div>
</template>

Methods

List of all the methods that you can use to send logs to our tool

Nuxt - SSR Usage

To make sure this runs on server side, you need to create your build with the following command:

nuxt build --standalone

You can add the command in your scripts section in the package.json file like this :

"scripts": {
    "build": "nuxt build --standalone",
  },

Why is this needed?

• Nuxt doesn't build dependencies that are required on the server side. The default way to do so is to pass node_modules to the server side.
• Passing node_modules to the server side is not a good practice.
• Running the build command above will build the dependencies on the server side. This make it possible to bundle all the dependencies into the final artifact for the server side part.
• You can read more about it here:
  • https://stackoverflow.com/questions/50700680/nuxt-start-requires-node-modules-to-be-present-in-order-to-run
  • https://github.com/nuxt/nuxt.js/issues/4292

Author

KartMax is developed by GreenHonchos, one of India’s largest 360-degree eCommerce Service Providers & Consultants. From startup brands who need a one-stop-shop cart to large enterprises of international repute looking for scale – GreenHonchos provides a one-stop solution by advising across services, such as Technology, Marketing, Operations & Marketplace Management.

Contributor

Sagar Chauhan

License

MIT