@lucasbarcelos/gatsby-theme-mercadolibre-store-cus

Gatsby Theme that imports products from Mercado Libre and shows them on a grid format + detail screen.

Demo

https://gatsby-theme-mercadolibre-store.netlify.com

Product Detail

Features

Sources from a MercadoLibre user.
Creates a Products grid and a Product detail screen.
Offers a "load more" button as the default pagination, and the ability to "paginate" into pages.
Uses Theme UI leveraging variants.
Uses MDX for static pages, and provides fragments.
Written in TypeScript 👮‍♀️

... more! and more to come.

Install

From your Gatsby site's root:

npm install @florantara/gatsby-theme-mercadolibre-store

yarn add @florantara/gatsby-theme-mercadolibre-store

Setup

Import data

Open gatsby-config.js and configure it under plugins.

{
  resolve: "@florantara/gatsby-theme-mercadolibre-store",
  options: {
    mercadoLibre: {
      siteID: "yoursiteid",
      user: "youruser"
    },
  },
}

About your MercadoLibre ID and user >

Paths and Pagination

You can customize the slug for the products listing and the detail page paths.

The default pagination format is a "load more" button, but you can setup "paginated" pagination.

{
  resolve: "@florantara/gatsby-theme-mercadolibre-store",
  options: {
    productDetail: {
      slug: "producto",
    },
    productsListing: {
      slug: "productos",
      enablePagination: true, // defaults to false
      productsListingPerPage: 3
    },
  }
}

Title and Logo

In gatsby-config.js, use the siteMetadata for the title. We'll use this for SEO, and if there isn't a logo image.

siteMetadata: {
  title: "Plants Store",
}

To import a logo, configure:

options: {
  site: {
    logoURL:
      "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg",
    }
  }
}

Note: we currently don't support using a local image, but this image will be imported into the site. It won't be referenced using the link provided.

Shadow theme files

To override any file from the theme, create in your site's src/ folder:

@florantara/gatsby-theme-mercadolibre-store

Then replicate the same folder/file structure from the theme that you want to shadow.

🔌 Remember to restart the server for this to take effect.

Theming

Most components come with a Theme UI variant setup you can use to style them, or you can style any component that the Theme Spec provides.

Variants reference >

Customize the theme

Install lodash

npm i --save lodash

Create a folder in your site to store the shadow files: yourProjectRoot/src/@florantara/gatsby-theme-mercadolibre-store

Inside that folder create a settings folder, and then theme.js file inside of it:

// In settings/theme.js
import merge from "lodash/merge"
import { theme as base } from "@florantara/gatsby-theme-mercadolibre-store/src/settings/theme"

export const theme = merge(base, {
  // Your overrides here
})

Follow the Theme UI documentation to know what properties to use.

Typography

The theme uses Roboto for the body and headings too.

You can configure any other typography you want in the theme settings - after importing it to your site with a plugin such as gatsby-plugin-prefetch-google-fonts.

Use the fonts property of Theme UI.

fonts: {
  heading: "Roboto, system-ui, sans-serif",
  body: "Roboto, system-ui, sans-serif",
}

Site settings

We provide a set of settings for hiding/showing things, like the price on the products and the category, and also other site-wide configurations.

Settings reference >

Following the same directions as with Theming, shadow this file: settings/siteConfig.js.

// In settings/site.js
import merge from "lodash/merge"
import { siteConfig as base } from "@florantara/gatsby-theme-mercadolibre-store/src/settings/site"

export const siteConfig = merge(base, {
  // Your overrides here
})

Static Pages

The homepage gets created automatically for you with some quick start documentation. Edit it from yourProjectRoot/static-pages/index.mdx.

Use MDX to create pages. Place them in src/static-pages.

At the top of the page, setup the path and title like so:

You can also specify a css class that will be added to the page container if you need to add styles to your new page, using the bodyClass field.

---
path: "/nueva-pagina"
title: "Nueva Página"
bodyClass: "pageHomepage"
---

Fragments for Pages

There's a few reusable components we are calling "fragments" available:

Hero
Paper
FeaturedProducts
Layout (width compact and tiny options)
Container (wraps everything with a maxWidth container)

...more to come!

Custom Fragments

You can create as many fragments as you want to use on the MDX pages. These can be buttons, banners, ads, etc.

In the shadow folder (read the "Override the settings" if you don't have one yet), create a fragments folder, and then an index.js file inside, with:

// In fragments/index.js
import merge from "lodash/merge"
import { fragments as base } from "@florantara/gatsby-theme-mercadolibre-store/src/fragments/index"

export const fragments = merge(base, {
  // Your new fragments here
})

Example:

// In fragments/index.js
import merge from "lodash/merge"
import { fragments as base } from "@florantara/gatsby-theme-mercadolibre-store/src/fragments/index"

import { MyCustomButton } from "../components/MyCustomButton";

// Custom fragments
export const fragments = merge(base, {
  MyCustomButton
})

Performance

Lighthouse scores for the Products Listing page (which has many images).

🔥 Lighthouse

Accessibility

Navigating with Tabs:

npm.io

Contributions

I'd love to hear ideas of features or improvements.

If you are considering using this Theme and would love some feature let me know!

Found an issue? Please submit it here

Fork

Upon forking this repository, setup the environment running this from the root of the cloned repo:

yarn

yarn workspace demo develop

Use the clean command to run gatsby clean. This will delete the public and .cache folders.

yarn workspace demo clean

Then work on the theme folder.

A note on language

The codebase is in english and the content is in spanish, since the soul of the Theme is MercadoLibre and the target users/public are spanish speakers accessibility labels, static and customizable words default to spanish.