@webselect/client-graphene-helpers v1.0.0

The Client Graphene Helpers library is a wrapper around the advancedcommerce library GrapheneHC to provide type safety, consistency and readability when implementing.

Install

Install with npm:

npm install --save-dev @webselect/client-graphene-helpers

Get Started

Check out advancedcommerce's documentation for information on the library.

!NOTE You will need a login which can be sourced from the vault.

Functions

• Track
• initLoad
• initFetch
• loadNewPage
• initAutocomplete

Example

Below is an example of the view tracking event that would be fired on page load to send the product ID of the viewed product.

NOTE: It is important to state that the product ID should be the ID that is used within Graphene, and not the SelectCommerce ID.

import { track } from '@webselect/client-graphene-helpers';

track({
    scope: 'view',
    action: 'add',
    data: {
        product_id: <graphene-product-id>,
    },
});

Example

Below is an example of how to execute the initLoad function.

import { initLoad } from '@webselect/client-graphene-helpers';

initLoad({
  template: {
      id: <page-type>,
      target: <html-selector>,
  },
  pageContext: <page-context>,
  afterLoad: (res: LoadResponse) => {
    // Execute any logic that needs to be applied after load
  },
});

Example

Below is an example of how to execute the loadNewPage function.

import { loadNewPage } from '@webselect/client-graphene-helpers';

const loadMoreProducts = async () => {
    const currentPage = // Get current page from query paramaters (1)
    try {
        const response = await loadNewPage({
            pageNumber: +currentPage + 1 // Increment the page value so that Graphene returns the next set of product data,
            setPageUrl: true // Update the query parameter to the new value,
        });

        // Get the returned template HTML
        const template =
            response.templates.category || response.templates.search;

        if (!template) return;

        // Use the new HTML as you wish and execute any other logic that needs to be applied.
    } catch (ex) {
        console.error(ex);
    }
};

Although in the majority of cases the Standard Query API is recommended, there are some scenarios where you might require the Fetch, the advanced query API.

The need for using this arose when some issues with the way the load function and the Flickity carousel plugin conflicted. Andy explained the differences here:

Load should be the default starting point. If that works then use it. Basically load gathers some extra data to send automatically (the correct userID, personal search history (we store it with the user rather than on our server as it’s less intrusive) etc). It also handles some special cases automatically (ensuring that the PLP reloads only the necessary bits when you apply filters etc).

Fetch is a lower level version of the same which does less automatically. So if for some reason load is being too clever, you can fall back to fetch and recreate only those bits of load you want.

Example

Below is an example of how to execute the loadNewPage function.

import { initFetch } from '@webselect/client-graphene-helpers';

initFetch({
  format: 'html',
  pageContext: {...},
  elements: ['element-1-id', 'element-2-id'],
  afterFetch: (response) => {
    // Using the initFetch endpoint the elements will not automiically be applied to the 
    // ID (as we dont provide one in this function) so you will need to append the HTML yourself.

    // Apply any other logic after.
  },
});

Example

Below is an example of how to execute the initAutoComplete function.

import { initAutocomplete } from '@webselect/client-graphene-helpers';

initAutocomplete({
    inputSelector: 'input-selector',
    outputSelector: 'output-selector',
});