I'm trying to integrate Slick slider in gatsby and trigger the slick methods through custom code.
I tried to write class component but having issues on how to fetch GraphQL list of products from shiopify and create a product slider. Any help would be appreciated.
I am using gatsby-shopify-starter to develop an e-com project
//import statements
export default class ProductSimilar extends Component {
constructor(props) {
super(props);
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
}
next() {
this.slider.slickNext();
}
previous() {
this.slider.slickPrev();
}
render() {
const data = useStaticQuery(
graphql`
query {
allShopifyProduct(
limit: 10,
sort: {
fields: [createdAt]
order: DESC
}
) {
edges {
node {
id
title
handle
createdAt
images {
id
originalSrc
localFile {
childImageSharp {
fluid(maxWidth: 910) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
variants {
price
}
}
}
}
}
`
)
var settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4
};
return (
<div class="section fbt four-product-slider">
<div class="ol-container">
<div class="top">
<div class="titles">
<div class="section-title underline">You May Also Like</div>
</div>
<div class="pagination slider-1">
<div class="arrow left prev-slide-ftb" id="slider1prev" onClick={this.previous}><a class="bx-prev" href=""><i></i></a></div>
<div class="text"><span class="current-idx">1</span> / <span class="total-slides">4</span></div>
<div class="arrow right next-slide-ftb" id="slider1next" onClick={this.next}><a class="bx-next" href=""><i></i></a></div>
</div>
</div>
<div class="bx-wrapper slider-1">
<div class="bx-viewport" aria-live="polite">
<div class="slider-container slider-1">
<div class="slide bx-clone" aria-hidden="true">
<Slider ref={c => (this.slider = c)} {...settings}>
{data.allShopifyProduct.edges.map(x => (
<div>Each product data</div>
))}
</Slider>
</div>
</div>
</div>
<div class="bx-controls"></div>
</div>
</div>
</div>
);
}
}
I want to get the data using GraphQL
useStaticQuery can only be used inside of functional components. You need to make use of StaticQuery component like
export default class ProductSimilar extends Component {
constructor(props) {
super(props);
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
}
next() {
this.slider.slickNext();
}
previous() {
this.slider.slickPrev();
}
render() {
var settings = {
dots: false,
infinite: true,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4
};
return (
<div class="section fbt four-product-slider">
<div class="ol-container">
<div class="top">
<div class="titles">
<div class="section-title underline">You May Also Like</div>
</div>
<div class="pagination slider-1">
<div class="arrow left prev-slide-ftb" id="slider1prev" onClick={this.previous}><a class="bx-prev" href=""><i></i></a></div>
<div class="text"><span class="current-idx">1</span> / <span class="total-slides">4</span></div>
<div class="arrow right next-slide-ftb" id="slider1next" onClick={this.next}><a class="bx-next" href=""><i></i></a></div>
</div>
</div>
<div class="bx-wrapper slider-1">
<div class="bx-viewport" aria-live="polite">
<div class="slider-container slider-1">
<div class="slide bx-clone" aria-hidden="true">
<StaticQuery
query={graphql`
query {
allShopifyProduct(
limit: 10,
sort: {
fields: [createdAt]
order: DESC
}
) {
edges {
node {
id
title
handle
createdAt
images {
id
originalSrc
localFile {
childImageSharp {
fluid(maxWidth: 910) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
variants {
price
}
}
}
}
}
`}
render={data => (
<Slider ref={c => (this.slider = c)} {...settings}>
{data.allShopifyProduct.edges.map(x => (
<div>Each product data</div>
))}
</Slider>
)}
/>
</div>
</div>
</div>
<div class="bx-controls"></div>
</div>
</div>
</div>
);
}
}