Knowledge Base

Merchandising Cloud

Include Sorting within Mobile Filters

Integration Steps

📘
Components
components/search/MobileActions/index.tsx
components/search/MobileFacets/index.tsx

This example is going to remove the default sorting options button and includes the desktop sorting dropdown inside mobile filters as you can see in the example picture on top of this page.

components/search/MobileActions/index.tsxcomponents/search/MobileFacets/index.tsxCSS

{/*...  some code ... */}return (      <div className={theme.root}>        <Query display-if={!isCollection} theme={{ root: theme.query }} />        <div className={theme.bottomRow}>        {/* Hide default Mobile Sorting  */}                   {/*           <Button onClick={showSort} className={theme.button}>            <Text primary uppercase>              <Icon name="Sorting" title="Sorting" className={theme.icon} />              {currentSort.get('label')}            </Text>          </Button>          <div className={theme.divider} />         */}          <Button onClick={showFacets} className={theme.button}>            <Text primary uppercase>              <Icon name="Filters" title="Filters" />              {translate('actions.filter')}              <span className={theme.facetCount}>({total})</span>            </Text>          </Button>        </div>      </div>    );  });{/*...  some code ... */}

MJS Version

This module has been optimized for MJS version 7.1.15