Render slider và CTA images của homepage trên Gatsby

Trong bài trước mình đã hướng dẫn các bạn render footer từ WordPress sang Gatsby. Nói đơn giản là các bạn tạo field bằng ACF plugin trên WordPress. Sau đó render qua frontend Gatsby. Thì với bài lần này chúng ta cùng ôn lại cách sử dụng ACF render ra frontend Gatsby. Hôm này mình sẽ lấy ví dụ thông qua slider và CTA images.

Làm Slider trên Gatsby

Trước hết các bạn cùng minh tạo field trên dashboard WordPress tạo field như sau.

Mình tạo một repeater trên options page để làm slider. Sau đó chúng ta cùng bật Gatsby bằng lệnh

gatsby clean; gatsby develop

Ở đây mình dùng gatsby clean để clear cache hiện tại được tạo trong thư mục project. Sau đó các bạn bật GraphQL và check dữ liệu trả về khi query

query MyQuery {
  wordpressAcfOptions {
    options {
      slider_homepage {
        image_slider {
          source_url
          alt_text
        }
      }
    }
  }
}

Và dữ liệu trả về sẽ như sau:

{
  "data": {
    "wordpressAcfOptions": {
      "options": {
        "slider_homepage": [
          {
            "image_slider": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
              "alt_text": ""
            }
          },
          {
            "image_slider": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
              "alt_text": ""
            }
          },
          {
            "image_slider": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
              "alt_text": ""
            }
          }
        ]
      }
    }
  }
}

Vậy là chúng ta đã thành công bước đầu tiên đưa slider images từ WordPress dashboard lên GraphQL sau đó chúng ta cùng đưa data render ra frontend thành slider. Trước tiên các bạn cần cài thư viện AliceCarousel. Do Gatsby sử dụng core React nên các bạn có thể thoải mái lựa chọn thư viện React để sử dụng. Các bạn bật cmd và dùng lệnh này để cài AliceCarousel:

npm install react-alice-carousel

Các bạn vào trang này để xem cách sử dụng thư viện này nhé. Sau khi cài xong mình tạo file slider.js sau đó import slider.js vào index.js để đưa carousel vào homepage. Sau khi import xong mình sẽ tạo một hàm query bằng useStaticQuery mình lưu data từ slider này vào 1 biến:

const data = useStaticQuery(graphql`
    {
      wordpressAcfOptions {
        options {
          slider_homepage {
            image_slider {
              source_url
              alt_text
            }
          }
        }
      }
    }
  `)

Sau đó mình sẽ truyền props vào Slider Component như sau:

 <Slider sliderData={data.wordpressAcfOptions.options.slider_homepage}/>

Tiếp theo mình vào file silder.js để xử lý:

import React, { Component } from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'

Mình khai báo import các phần minh muốn xài sau đó mình tạo Component Slider như sau:

export default class Slider extends Component {
  state = {
    responsive: { 1024: { items: 1 } },
  } render() {
    const { responsive} = this.state
    const handleOnDragStart = (e) => e.preventDefault();
    const{sliderData} = this.props;
    const elm = sliderData.map((sliderItem,index) => {
      return (
        <div key={index} className="carousel" onDragStart={handleOnDragStart}>
           <img data-src={sliderItem.image_slider.source_url} alt={sliderItem.image_slider.alt_text} className="lazyload"/>
        </div>
      );
    });
    return (
      <AliceCarousel
        buttonsDisabled={true}
        responsive={responsive}
        items={elm}
        autoPlayInterval={5000}
        autoPlayDirection="ltr"
        autoPlay={true}
        stopAutoPlayOnHover={true}
        mouseTrackingEnabled={true}
      />
    )
  }
}

Sau khi hoàn thành xong các bận bật gatsby lên kiểm tra thì sẽ thấy slider sẽ xuất với item show là 1 item trên một lượt. Vậy là chúng ta đã hoàn thành xong slider image, chúng ta qua mục kế tiếp.

CTA images trên homepage

Cũng như phần trên mình vào dashboard tạo field thông qua ACF

Sau đó chúng ta cùng khởi động lại gatsby và vào GraphQL để kiểm tra data.

query MyQuery {
  wordpressAcfOptions {
    options {
      slider_homepage {
        image_slider {
          source_url
          alt_text
        }
      }
      image {
        source_url
        alt_text
      }
    }
  }
}

Và kết quả các bạn được trả về:

{
  "data": {
    "wordpressAcfOptions": {
      "options": {
        "slider_homepage": [
          {
            "image_slider": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
              "alt_text": ""
            }
          },
          {
            "image_slider": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
              "alt_text": ""
            }
          },
          {
            "image_slider": {
              "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
              "alt_text": ""
            }
          }
        ],
        "image": {
          "source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/Register_for_Event.png",
          "alt_text": "Register_for_Event"
        }
      }
    }
  }
}

Tiếp theo các bạn ra thay thế lại  biến data và truyền props vào Component CTA vậy là chúng ta đã hoàn thành xong việc render từ ACF trên WordPress sang frontend Gatsby.

const data = useStaticQuery(graphql`
    {
      wordpressAcfOptions {
        options {
          slider_homepage {
            image_slider {
              source_url
              alt_text
            }
          }
          image {
            source_url
            alt_text
          }
        }
      }
    }
  `)

Tổng kết

Qua bài này mình đã giúp các bạn làm slider và CTA images từ WordPress sang Gatsby.Và chắc hẵn cũng một phần nào giúp bản hiểu rõ hơn khi lấy dấy liệu từ ACF WordPress. Bài kế tiếp mình sẽ hướng dẫn các bạn làm Render Tin tức mới và testimonial của homepage trên Gatsby.