3

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 ?

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:

enter image description here

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.

| improve this answer | |
  • 1
    Hi @circlesix, as you said doesn't work with 4.0. Could you please update code and maybe explain changes. Thank you very much! – user642523 Dec 17 '19 at 15:47
  • 1
    I updated the answer with the most current code of the develop branch. The big change here is the cms.js file. The code in there is very different now, but our integration is basically the same. We are just adding in <SlickSlider /> to the content. I also fixed an issue of the react-slick package not being found when you don't run yarn install after adding in the package. – circlesix Dec 21 '19 at 17:45
  • 1
    Odds are good this will be out of date in 2-3 months. I'll be back around to check on it again as the project evolves. – circlesix Dec 21 '19 at 17:46
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.