Image slider for pwa studio

Question

I have just started playing around with Magento 2 pwa studio.

Now i need to add an image slider which I want to show in my pwa homepage.

How i can add slider on pwa venia homepage any suggestions ?

Answer 1

The pwa studio project is moving quickly, and so there are a lot of changes that might not work in a couple of version down the line, but here is a way to add in a slider to the home page.

After installing the project you can add any slider you like, but i'll be using React Slick. You can do that by moving into the venia folder and doing a install:

cd packages/venia-ui
yarn add react-slick
cd ../..
yarn install

After that you can create a new component. That can live anywhere, but for simplicity i'm going to put it in the same dir as the homepage file:

packages/venia-ui/lib/RootComponents/CMS/slider.js

Inside that file, you can place the code that drives the slider:

import React, { Component } from 'react';
import { shape, string } from 'prop-types';
import defaultClasses from './slider.css';
import classify from '../../classify';
import SlickSlider from 'react-slick';

export class Slider extends Component {
    static propTypes = {
        classes: shape({
            root: string,
            slides: string
        })
    };
    render() {
        const { classes } = this.props;
        var sliderSettings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1
        };
        return (
            <div className={classes.root}>
                <SlickSlider {...sliderSettings}>
                    <div className={classes.slides}>
                        <h3>1</h3>
                    </div>
                    <div className={classes.slides}>
                        <h3>2</h3>
                    </div>
                    <div className={classes.slides}>
                        <h3>3</h3>
                    </div>
                    <div className={classes.slides}>
                        <h3>4</h3>
                    </div>
                    <div className={classes.slides}>
                        <h3>5</h3>
                    </div>
                    <div className={classes.slides}>
                        <h3>6</h3>
                    </div>
                </SlickSlider>
            </div>
        );
    }
}

export default classify(defaultClasses)(Slider);

Create the css file that will give you some more option for the slider's styles:

packages/venia-ui/lib/RootComponents/CMS/slider.css

And place in something like this:

.root {
    background-color: #707070;
    border-radius: 4px;
    color: white;
    margin: 2rem auto;
    max-width: 360px;
    padding: 4rem;
}

.slides h3 {
    font-size: 4rem;
    text-align: center;
}

Now we need to place that component into the homepage:

packages/venia-ui/lib/RootComponents/CMS/cms.js

import React, { Fragment } from 'react';
import { useQuery } from '@apollo/react-hooks';
import cmsPageQuery from '../../queries/getCmsPage.graphql';
import { fullPageLoadingIndicator } from '../../components/LoadingIndicator';
import RichContent from '../../components/RichContent';
import { number } from 'prop-types';
import CategoryList from '../../components/CategoryList';
import { Meta } from '../../components/Head';
import SlickSlider from './slider';

const CMSPage = props => {
    const { id } = props;
    const { loading, error, data } = useQuery(cmsPageQuery, {
        variables: {
            id: Number(id),
            onServer: false
        }
    });

    if (error) {
        if (process.env.NODE_ENV !== 'production') {
            console.error(error);
        }
        return <div>Page Fetch Error</div>;
    }

    if (loading) {
        return fullPageLoadingIndicator;
    }

    if (data) {
        let content;
        // Only render <RichContent /> if the page isn't empty and doesn't contain the default CMS Page text.
        if (
            data.cmsPage.content &&
            data.cmsPage.content.length > 0 &&
            !data.cmsPage.content.includes('CMS homepage content goes here.')
        ) {
            content = <RichContent html={data.cmsPage.content} />;
        } else {
            content = (
                <Fragment>
                    <CategoryList title="Shop by category" id={2} />
                    <SlickSlider />
                </Fragment>
            );
        }

        return (
            <>
                <Meta
                    name="description"
                    content={data.cmsPage.meta_description}
                />
                {content}
            </>
        );
    }
    return null;
};

CMSPage.propTypes = {
    id: number
};

export default CMSPage;

The last thing we have to do is link the styles for the slider in the head of the site:

packages/venia-concept/template.html

...
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
...

With that, you should have a working slider:

All this is going to change a lot with the release of 4.0, the way we extend files and make 'custom themes' with pwa studio. but the core concepts will stay the same. I'll try and update this when those changes come.

Answer 2

Our team has just built a simple image slider for Magento PWA Studio.

If you're interested, check out our work-in-progress demo here: http://pwa.demo.ubertheme.com (Both image & video sliders are visible on the homepage of Venia storefront).

We hope you have a reference about setting up carousels on a Magento PWA site.

PS. Even though some features are still in ‘to do’ stage, such as the Product Slider, you're good to create multiple banner slideshows, video sliders (youtube & Vimeo) on top of Magento PwA Studio.