ProductSlider API

The page describes all of the options the user could use to change the data and appearance of the slider.

ProductSlider is a JavaScript widget that displays PrintLean products on website.

• Code snippet

• Required parameters overview

• Optional parameters overview

• Multiple usage on one page

Initialization script with all available parameters

ProductSlider({
    rootID: 'productSlider',
    apiKey: 'your-api-key',
    sliderType: 4,
    backgroundURL: 'https://printlean.com/store/img/photo-gallery/1.jpg',
    sliderPerView: {
        1200: 4,
        992: 3,
        768: 3,
        320: 1.5,
    },
    imageLogo: true,
    hideTitle: true,
    hidePrice: true,
    priceColor: '#dddddd',
    type5options: {
        color: 'red',
        bgColor: '#ddd',
        buttonText: 'print width'
    },
    bgToAll: true,
    allButton: {
        buttonText: 'See All Products',
        buttonColor: '#5ab6f8'
    },
    linktype: 'frame'
});

Required parameters

Name	Type	Default	Description
rootID	string		specifies the ID of the DOM element where the widget will be rendered
apiKey	string	generate after site moderation	unique key used to access PrintLean API and associate it with a particular Site
sliderType	number (1-5)	1	sets the layout of the slider: 1 - horizontal 2 - two-row horizontal 3 - vertical layout 4 - hierarchical 5 - button
backgroundURL	string		sets the background image for products print
sliderPerView	object	{ 1200: 4, 992: 3, 768: 3, 320: 1.5 }	sets the number of products to be displayed on different screen sizes
enablePreview	boolean	false	toggles the image preview feature
enableAutoHover	boolean | 'all'	false	toggles the automatic display of background images

Optional parameters

Name	Type	Default	Description
allButton	object { buttonText: string, buttonColor: string}	{ buttonText: 'See All Products', buttonColor: '#5ab6f8' }	sets the color and label text for button that links to the store page
type5options	object { color: string, bgColor: string, buttonText: string }		sets the color, background color, and button text for the sliderType:5 case
imageLogo	boolean	true	shows the image logo in the credits section of the widget
hideTitle	boolean	false	hides the title on product cards
priceColor	string	#d04747	sets the color of a product price.
hidePrice	boolean	false	hides the price on product cards
fontSizeName	number	16px	sets the font size for a product name
fontSizePrice	number	20px	sets font size for a product price
titleColor	string	#383838	sets the color for a product title
linktype	string	'frame'	manage redirection to the shop

Multiple usage on one page

Users can add as many plugins as they need on the page. The code should be integrated into the user's website's HTML code in strict order. For more go to 'Embed the script instructions'.

<div id="printlean2"></div>
<div id="printlean"></div>
        
<script src="https://printlean.com/widgets/slider.min.js"></script>
<script>
    ProductSlider({
        apiKey: 'n3tnlbyx_ryOAuSIvQuwr4QtYXCklsZ68BA5PHjpsNzkcm-r0Y',
        backgroundURL: 'https://c4.wallpaperflare.com/wallpaper/611/838/413/spiderman-hd-4k-superheroes-wallpaper-preview.jpg',
           sliderType: 5,
    sliderPerView: {
      1200: 5,
      992: 3,
      768: 2,
      320: 1.5
    },
    enablePreview: true,
    enableAutoHover: true,
    rootID: 'printlean'
    });
</script>
        
	
<script src="https://printlean.com/widgets/slider.min.js"></script>
<script>
    ProductSlider({
        apiKey: 'n3tnlbyx_ryOAuSIvQuwr4QtYXCklsZ68BA5PHjpsNzkcm-r0Y',
        backgroundURL: 'https://c4.wallpaperflare.com/wallpaper/611/838/413/spiderman-hd-4k-superheroes-wallpaper-preview.jpg',
           sliderType: 3,
    sliderPerView: {
      1200: 5,
      992: 3,
      768: 2,
      320: 1.5
    },
    enablePreview: true,
    rootID: 'printlean2'
    });
</script>

2 ProductSliders on a page