HomeGuidesAPI Reference

Recommendations: Products per row based on recommendation widgets

Suggest Edits

📘

Components

In this example we are going to adjust the recommendations widget for sliders (or grid) to display three products per row for product-findify-rec-1 and category-findify-rec-1 , whereas the rest of our recommendations will remain to have a different layout.

(The information on the recommendation widget names can be found in the Dashboard.)

868

Below you can find an example for Slider as well as for Grid.

📘

Note

For Slider we define how many products we want per row.

For Grid we define the width of the columns, e.g. 12 would be equal to 100% width, 4 to 33.3% width, 3 to 25%, etc.

// some code

const countProductsToShow = (width, config) => {
  // array of recommendations we want to change
  const recsList = ['product-findify-rec-1', 'category-findify-rec-1'];
  // current widget name
  const recWidget = config.get('slot');

  // check if current recommendation is present in our array
  const findCurrentWidgetInRecsList = recsList.find(rec => rec == recWidget);

  // render rows based on the widget name
  if (findCurrentWidgetInRecsList) {
    if (width > 50) return 3;
  } else {
    if (width > 900) return 5;
    if (width > 700) return 4;
    if (width > 500) return 3;
    if (width > 300) return 2;
    return 2;
  }
};

export default compose(
  // some code

  withPropsOnChange(['config', 'size'], ({ config, size, scrollToFirst, scrollToLast }) => ({
    sliderOptions: {
      swipeToSlide: true,
      infinite: false,
      slidesToScroll: 1,
      arrows: true,
      // pass config to the function
      slidesToShow: countProductsToShow(size.width, config),
      nextArrow: renderArrow('right' , scrollToFirst),
      prevArrow: renderArrow('left', scrollToLast),
      ...config.get('sliderOptions'),
    }
  })),
)(view);

// some code

// import this
import { withHandlers } from 'recompose';

// create enhancer
const enhancer = withHandlers({
  customColumns: ({ config }) => () => {
      const width = window.innerWidth;
      // array of recommendations we want to change
      const recsList = ['product-findify-rec-1', 'category-findify-rec-1'];
      // current widget name
      const recWidget = config.get('slot');

      // check if current recommendation is present in our array
      const findCurrentWidgetInRecsList = recsList.find(rec => rec == recWidget);

      // render rows based on the widget name
      if (findCurrentWidgetInRecsList) {
        if (width > 50) return '4';
      } else {
        if (width > 900) return '3';
        if (width > 300) return '6';
        return '2';
      }
    }
})

// don't forget to add 'customColumns'
const GridRecommendationLayout = ({ items, config, theme, customColumns }: IGridProps) =>
<React.Fragment display-if={items && items.size > 0}>
  <Text primary lowercase>{ config.get('title') }</Text>
{/* replace columns to use our handler */}
  <Grid columns={customColumns()}>
    {
      MapArray({
        config,
        array: items,
        factory: Product
      })
    }
  </Grid>
</React.Fragment>

export default enhancer(GridRecommendationLayout); // add enhancer

Updated over 3 years ago