Published Content Queries

query-load-more.marko

import { getAsObject } from '@base-cms/object-path';

$ input.query = getAsObject(input, 'query');
$ input.pageNumber = input.pageNumber || 1;
$ const block = 'published-content-query-load-more';
$ const appendTo = input.appendTo || `.${block}`;

<endeavor-published-content-query|{ nodes, loadMore }| ...input track-page-load=true>
  $ const { endCursor, hasNextPage, provide } = loadMore;
  <endeavor-load-more-button
    append-to=appendTo
    block-name=block
    label="Load More Content"
    page-number=input.pageNumber
    provide=provide
    show=hasNextPage
  />
</endeavor-published-content-query>

query.marko

import { getAsArray, getAsObject } from '@base-cms/object-path';
import contentListFragment from '@endeavorb2b/base-website-common/api/fragments/content-list';

$ const pageNumber = input.pageNumber || 1;
$ input.query = getAsObject(input, 'query');
$ const contentTypes = getAsArray(input.query, 'contentTypes');
$ const { beginningAfter, beginningBefore } = input.query;
$ const { endingAfter, endingBefore } = input.query;
$ const layout = input.layout || 'grid';
$ const ads = getAsObject(input, 'ads');
$ const header = getAsObject(input, 'header');
$ input.withImage = input.withImage === false ? false : true;
$ input.withCard = input.withCard === true ? true : false;

$ const query = {
  contentTypes,
  beginningAfter,
  beginningBefore,
  endingAfter,
  endingBefore,
  limit: 9,
  ...input.query,
  queryFragment: contentListFragment,
};

$ const adCardInput = {
  name: 'load-more',
  size: [300, 250],
  modifiers: ['in-card'],
  ...getAsObject(input, 'ads.card'),
};

<cms-query-all-published-content|{ nodes, pageInfo }| ...query>
  $ const { endCursor, hasNextPage } = pageInfo;
  $ query.after = endCursor;
  $ delete query.queryFragment;
  $ const loadMore = { endCursor, hasNextPage, provide: { layout, query, ads } };
  <if(layout === "grid")>
    $ const block = 'published-content-query';
    <if(input.trackPageLoad)>
      <cms-gtm-track-inview-event name="page_load" vars={ page_number: pageNumber + 1 } />
    </if
    <div class=block>
      <div class="row">
        <for|content, index| of=nodes>
          <div class=`${block}__col`>
            <endeavor-content-block-item
              content=content
              image-modifiers=["fluid", "21by9"]
              image-options={ w: 630, h: 270, fit: "crop", crop: "focalpoint", fpX: 0.5, fpY: 0.5 }
              image-position="top"
              modifiers=["card"]
              ...input.item
            />
          </div>
          <if(index === 1 || index === 6)>
            <div class=`${block}__col`>
              <endeavor-gam-ad-unit-define-display ...adCardInput/>
            </div>
          </if>
        </for>
      </div>
    </div>
  </if>
  <else>
    <if(input.trackPageLoad)>
      <cms-gtm-track-inview-event name="page_load" vars={ page_number: pageNumber + 1 } />
    </if>
    <endeavor-item-list flush=true card=true items=nodes>
      <if(header.title)>
        <@header href=header.href target=header.target>
          ${header.title}
        </@header>
      </if>
      <@item|{ item }|>
        <endeavor-content-block-item
          content=item
          image-position="right"
          image-options={ w: 120, h: 120, fit: 'crop', crop: 'focalpoint', fpX: 0.5, fpY: 0.5 }
          image-width=75
          image-height=75
          with-image=input.withImage
          ...input.item
        />
      </@item>
    </endeavor-item-list>
  </else>
  <${input.renderBody} nodes=nodes load-more=loadMore page-number=pageNumber />
</cms-query-all-published-content>