Adding Fragments to collection query

IntroductionCopy Anchor Link

This example shows how to add fragments to a collection query, which will help you to get the current fragment and also add new fragments to the collection. This will be helpfull in getting additional data from collection query that is available in shopify.

StepsCopy Anchor Link

1. In theme/src/index.js add the following code:

import {
  CollectionFragments,
} from './functions';

2. Add the following code inside activate function:

  CollectionFragments();

3. In theme/src/functions.js define CollectionFragments() function. following is an example of using fragments in collection query. In this example we are adding two fragments to the collection query. Here you can see i have added two fragments collectionDescriptionFragment and collectionTitleHandleFragment to the collection query. You can add as many fragments as you want. collectionDescriptionFragment will return the description of the collection and collectionTitleHandleFragment will return the title and handle of the collection. you can see this documentation for more available fields for this like the description, title, handle etc.

export function CollectionFragmentsTest() {
  const fragment1 = `
    fragment collectionDescriptionFragment on Collection {
      description
    }
  `;

  const fragment2 = `
    fragment collectionTitleHandleFragment on Collection {
      title
      handle
    }
  `;
  appmaker.addFilter('collection-fragments', 'theme-bsc', (fragments) => {
    console.log('fragments', fragments); // existing fragments which will be added to the collection query by default.
    fragments.push({
      name: 'collectionDescriptionFragment', // this should be unique and should be same as the name of the fragment.
      fragment: fragment1,
    });
    fragments.push({
      name: 'collectionTitleHandleFragment', // this should be unique and should be same as the name of the fragment.
      fragment: fragment2,
    });
    return fragments;
  });
}