Source translations resources from shopify and easily translate your Gatsby website into multiple languages.

Features

• Retrieving translated resources from Shopify. Products | Collections
• Support multi-language url routes in a single page component. You don't have to create separate pages such as pages/en/index.js or pages/es/index.js.
• SEO friendly

How to use

Install package

yarn add gatsby-source-shopify-translations i18next react-i18next

or

npm install gatsby-source-shopify-translations i18next react-i18next

Configure the plugin

I recommend setting the shopify variables in the .env file since they are data you don't want to show.

Then at the top of your gatsby-config.json file you can add this line to be able to read those variables.

require("dotenv").config()

// gatsby-config.js
require("dotenv").config()

plugins: [
  {
    resolve: `gatsby-source-shopify-translations`,
    options: {
      shopName: process.env.GATSBY_SHOPIFY_STORE_URL,
      shopifyPassword: process.env.SHOPIFY_SHOP_PASSWORD,
      accessToken: process.env.GATSBY_SHOPIFY_ACCESS_TOKEN,
      defaultLang: "it",
      prefixDefault: true,
      configPath: require.resolve("./locales/config.json"),
      locales: ["it", "en"],
      waitingGatsbySourceShopify: 5000,
    },
  },
]

Plugin Options

| Option | Type | Description | | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | shopName | string | url of your shopify store. Example: mysite.myshopify.com | | shopifyPassword | string | password of your shopify store | | accessToken | string | access token of your shopify store | | locales | string[] | languages of translations | | defaultLang | string | default language that you decide to prefix in path or not | | prefixDefault | boolean | if the value is true then the pages in the default language will also be preceded by the language in the path. Example: [locale] / [page] | | configPath | string | path of the config file | | waitingGatsbySourceShopify | number | every ms the plugin wait gatsby-source-shopify and retry to get translations | | sourceOnlyMode | boolean | setting this to true disables injecting i18next into your page, you might want to activate this if you use your own i18next instance and use this plugin only to source Shopify translations. Default is false.|

Translated resources in GraphQL Data Layer

You will find new nodes called AllShopifyTranslatedProduct and AllShopifyTranslatedCollection.

Here we have all the translated resources with the storefrontId and you can manually create pages with translated url.

If you want to manually translated page you have to set the property isAlreadyTranslated to true and the locale to the current locale within de page context. (see below)

In this way the plugin does not translated again this page.

// gatsby-node.js
const result = await graphql(`
    {
      collections: allShopifyCollection {
        edges {
          node {
            id
            title
            description
            descriptionHtml
            storefrontId
            handle
          }
        }
      }
      translatedCollections: allShopifyTranslatedCollection {
        edges {
          node {
            title
            description
            descriptionHtml
            locale
            storefrontId
            handle
          }
        }
      }
    }

  const collections = result.data.collections.edges
  const translatedCollections = result.data.translatedCollections.edges

  collections.forEach(category => {
    const translatedCollection = translatedCollections.filter(
      tCollection =>
        tCollection.node.storefrontId === category.node.storefrontId
    )

    translatedCollection.forEach(tCollection => {
      const newCollection = {
        ...category,
        node: {
          ...category.node,
          title: tCollection.node.title,
          description: tCollection.node.description,
          descriptionHtml: tCollection.node.descriptionHtml,
          handle: slugify(tCollection.node.title),
        },
      }

      createPage({
        path: `/${tCollection.node.locale}/${slugify(tCollection.node.title)}`,
        component: productCollectionsTemplate,
        context: {
          id: newCollection.node.id,
          locale: tCollection.node.locale,
          title: newCollection.node.title,
          storefrontId: newCollection.node.storefrontId,
          originalPath: category.node.handle,
          isAlreadyTranslated: true,
        },
      })
    })
  })

Setup translations

You'll also need to create a config.json file in locales folder on base root and [locale] subfolder with translations.json.

If you want to translate the url of pages in pages folder than you have to set the locales/config.json file like the example below:

// locales/config.json
[
  {
    "code": "it",
    "pages": [
      {
        "originalPath": "/contacts/",
        "path": "/contatti/"
      }
    ]
  },
  {
    "code": "en",
    "pages": [
      {
        "originalPath": "/contacts/",
        "path": "/contacts/"
      }
    ]
  }
]

// translation.json /it/
{
  "title": "mio titolo"
}

// translation.json /en/
{
  "title": "my title"
}

Change your components

Use react i18next useTranslation react hook and Trans component to translate your pages.

Replace Gatsby Link component with the Link component exported from gatsby-source-shopify-translations

import React from "react"
import { Link, Trans, useTranslation } from "gatsby-source-shopify-translations"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => {
  const { t } = useTranslation()
  return (
    <Layout>
      <SEO title={t("Home")} />
      <h1>
        <Trans>Hi people</Trans>
      </h1>
      <p>
        <Trans>Welcome to your new Gatsby site.</Trans>
      </p>
      <p>
        <Trans>Now go build something great.</Trans>
      </p>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
      <Link to="/page-2/">
        <Trans>Go to page 2</Trans>
      </Link>
    </Layout>
  )
}

export default IndexPage

export const query = graphql`
  query ($language: String) {
    locales: allLocale(filter: { language: { eq: $language } }) {
      edges {
        node {
          data
          language
        }
      }
    }
  }
`

Credits

This package is based on:

• gatsby-plugin-react-i18next by Microapps

License

MIT © fedehub93