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 ?

0

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

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, { Component, Fragment } from 'react';
import CategoryList from '../../components/CategoryList';
import SlickSlider from './slider';

export default class CMS extends Component {
    render() {
        return (
            <Fragment>
                <CategoryList title="Shop by category" id={2} />
                <SlickSlider />
            </Fragment>
        );
    }
}

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.

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.