@shopgate/engage
Version:
Shopgate's ENGAGE library.
79 lines (78 loc) • 2.17 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { useWidgetSettings } from '@shopgate/engage/core';
import { useThemeComponents } from '@shopgate/engage/core/hooks';
import { Swiper } from '@shopgate/engage/components';
import { ProductListTypeProvider, ProductListEntryProvider } from '@shopgate/engage/product/providers';
import { container, items } from "./style";
import { jsx as _jsx } from "react/jsx-runtime";
export const WIDGET_ID = '@shopgate/engage/product/ProductSlider';
/**
* @param {Object} props The component props.
* @returns {JSX.Element}
*/
function ProductSlider(props) {
const {
autoplay,
className,
delay,
productIds,
snap,
scope,
meta,
productItemProps,
item,
...swiperProps
} = props;
const widgetSettings = useWidgetSettings(WIDGET_ID) || {};
const {
slidesPerView = 2.3
} = props.slidesPerView ? props : widgetSettings;
// ProductSlider items are rendered with the ProductCard component provided by the theme.
const {
ProductCard
} = useThemeComponents();
const Item = item || ProductCard;
return /*#__PURE__*/_jsx(ProductListTypeProvider, {
type: "productSlider",
subType: scope,
meta: meta,
children: /*#__PURE__*/_jsx(Swiper, {
...(autoplay && {
autoplay: {
delay
}
}),
className: `${className} engage__product__product-slider`,
controls: false,
indicators: false,
freeMode: !snap,
...swiperProps,
slidesPerView: slidesPerView,
children: productIds.map(id => /*#__PURE__*/_jsx(Swiper.Item, {
className: container,
children: /*#__PURE__*/_jsx(ProductListEntryProvider, {
productId: id,
children: /*#__PURE__*/_jsx(Item, {
productId: id,
style: items,
...productItemProps
})
})
}, id))
})
});
}
ProductSlider.WIDGET_ID = WIDGET_ID;
ProductSlider.defaultProps = {
autoplay: false,
className: null,
delay: 10,
item: null,
meta: null,
productItemProps: null,
scope: null,
slidesPerView: null,
snap: false
};
export default ProductSlider;