medusajs · shahednasser · Dec 8, 2022 · Dec 8, 2022 · Dec 8, 2022
@@ -85,7 +85,7 @@ Where `<YOUR_APP_ID>` and `<YOUR_ADMIN_API_KEY>` are respectively the Applicatio
 
 Finally, in `medusa-config.js` add the following item into the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
  //...
  {
@@ -170,7 +170,7 @@ The Next.js storefront has the Algolia integration available out of the box. To
 
 First, ensure that the search feature is enabled in `store.config.json`:
 
-```json
+```json title=store.config.json
 {
  "features": {
  "search": true
@@ -190,7 +190,7 @@ Where `<YOUR_APP_ID>` and `<YOUR_SEARCH_API_KEY>` are respectively the Applicati
 
 Finally, change the code in `src/lib/search-client.ts` to the following:
 
-```jsx
+```jsx title=src/lib/search-client.ts
 import algoliasearch from "algoliasearch/lite"
 
 const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID || "" // You should add this to your environment variables
@@ -247,7 +247,7 @@ In Gatsby, environment variables that should be public and available in the brow
 
 Then, create the file `src/components/header/search.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/header/search.jsx
 import {
  Highlight,
  Hits,
@@ -310,13 +310,13 @@ If you named your environment variables differently based on your framework, mak
 
 Finally, import this file at the beginning of `src/components/header/index.jsx`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 import Search from "./search"
 ```
 
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 //...
 <Search />
 <RegionPopover regions={mockData.regions} />

@@ -22,7 +22,7 @@ The Contentful migrations are located in the `contentful-migrations` directory i
 
 Here’s an example of a migration created in a new file `contentful-migrations/rich-text.js`:
 
-```jsx
+```jsx title=contentful-migrations/rich-text.js
 #! /usr/bin/env node
 
 require("dotenv").config();
@@ -152,7 +152,7 @@ After creating a new content model in your Contentful Space, you must add the ne
 
 To render the Rich Text content you created in the previous example, create the file `src/components/rich-text/rich-text.js` with the following content:
 
-```jsx
+```jsx title=src/components/rich-text/rich-text.js
 import React from "react"
 import { renderRichText } from "gatsby-source-contentful/rich-text"
 
@@ -180,13 +180,13 @@ Since the Rich Text model can be added to any page, you must edit `src/pages/{Co
 
 In `src/pages/{ContentfulPage.slug}.js`, import the `RichText` component at the top of the file:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 import RichText from "../components/rich-text/rich-text"
 ```
 
 Then, in the returned JSX add a new case to the switch statement:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 switch (cm.internal.type) {
  //...
  case "ContentfulRichText":
@@ -200,7 +200,7 @@ If the content model of a tile is Rich Text, you’ll display it with the `RichT
 
 Finally, to retrieve all necessary data of the Rich Text content, in the `query` GraphQL variable add the following after the `... on ContentfulTileSection` fragment:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 export const query = graphql`
  # find the following line
  ... on ContentfulTileSection {
@@ -246,7 +246,7 @@ In the example migration, you also edited the product page to include a new Cont
 
 To render them on the Product Page, add the following in the GraphQL query defined in the `query` variable inside `product`:
 
-```jsx
+```jsx title=src/pages/{ContentfulPage.slug}.js
 export const query = graphql`
  query ($id: String!) {
  product: contentfulProduct(id: { eq: $id }) {
@@ -275,13 +275,13 @@ If you added other accepted Content Models to the `contentModules` field of the
 
 Then, in `src/views/product.js` import the `RichText` component:
 
-```jsx
+```jsx title=src/views/product.js
 import RichText from "../components/rich-text/rich-text"
 ```
 
 And in the returned JSX add the following before the last `</div>`:
 
-```jsx
+```jsx title=src/views/product.js
 <div className={styles.contentModules}>
  {product.contentModules?.map((cm) => {
  switch (cm.internal.type) {

@@ -38,7 +38,7 @@ This installs a new Medusa server in the directory `medusa-contentful`.
 
 Change to the `medusa-contentful` directory. In `.env` you’ll find three variables:
 
-```bash
+```bash title=.env
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
 CONTENTFUL_ENV=
@@ -116,7 +116,7 @@ You can find the format of the PostgreSQL database URL in [PostgreSQL’s docume
 
 Then, in `medusa-config.js` in the exported object, comment out or remove the SQLite database configurations and add the PostgreSQL database configurations:
 
-```jsx
+```jsx title=medusa-config.js
 module.exports = {
  projectConfig: {
  //...
@@ -239,7 +239,7 @@ mv .env.template .env
 
 Then, open `.env`. You should find the following environment variables:
 
-```bash
+```bash title=.env
 CONTENTFUL_SPACE_ID=
 CONTENTFUL_ACCESS_TOKEN=
 ```

@@ -51,7 +51,7 @@ Make sure to replace `<YOUR_API_KEY>` with your API Key and `<YOUR_NEWSLETTER_LI
 
 Open `medusa-config.js` and add the new plugin into the `plugins` array:
 
-```js
+```js title=medusa-config.js
 const plugins = [
  ...,
  {
@@ -72,7 +72,7 @@ This plugin adds a new `POST` endpoint at `/mailchimp/subscribe`. This endpoint
 
 Try sending a `POST` request to `/mailchimp/subscribe` with the following JSON body:
 
-```json noHeader
+```json noReport
 {
  "email": "[email protected]"
 }
@@ -90,7 +90,7 @@ If you check your Mailchimp dashboard, you should find the email added to your A
 
 Here’s an example of sending additional data with the subscription:
 
-```json noHeader
+```json noReport
 {
  "email": "[email protected]",
  "data": {
@@ -107,7 +107,7 @@ If you want to subscribe to users without using this endpoint or at a specific p
 
 Here’s an example of using the `mailchimpService` inside an endpoint:
 
-```jsx
+```jsx title=src/api/index.ts
 const mailchimpService = req.scope.resolve("mailchimpService")
 
 mailchimpService.subscribeNewsletter(

@@ -51,7 +51,7 @@ Where `<YOUR_MEILISEARCH_HOST>` is the host of your MeiliSearch instance. By def
 
 Finally, in `medusa-config.js` add the following item into the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
  //...
  {
@@ -144,7 +144,7 @@ The Next.js storefront has the MeiliSearch integration available out of the box.
 
 First, ensure that the search feature is enabled in `store.config.json`:
 
-```json
+```json title=store.config.json
 {
  "features": {
  "search": true
@@ -206,7 +206,7 @@ In Gatsby, environment variables that should be public and available in the brow
 
 Then, create the file `src/components/header/search.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/header/search.jsx
 import {
  Highlight,
  Hits,
@@ -269,13 +269,13 @@ If you named your environment variables differently based on your framework, mak
 
 Finally, import this file at the beginning of `src/components/header/index.jsx`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 import Search from "./search"
 ```
 
 And add the `Search` component in the returned JSX before `RegionPopover`:
 
-```jsx
+```jsx title=src/components/header/index.jsx
 //...
 <Search />
 <RegionPopover regions={mockData.regions} />

@@ -97,7 +97,7 @@ Where `<ENDPOINT>` is the URL of your MinIO server, `<BUCKET>` is the name of th
 
 Finally, configure your `medusa-config.js` to include the plugin with the required options:
 
-```bash
+```js title=medusa-config.js
 {
  resolve: `medusa-file-minio`,
  options: {
@@ -145,7 +145,7 @@ MINIO_PRIVATE_BUCKET=exports
 
 Then, add a new option to the plugin’s options in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 {
  resolve: `medusa-file-minio`,
  options: {
@@ -170,7 +170,7 @@ Where `<YOUR_PRIVATE_ACCESS_KEY>` and `<YOUR_PRIVATE_SECRET_KEY>` are the access
 
 Then, add two new options to the plugin’s options in `medusa-config.js`:
 
-```jsx
+```jsx title=medusa-config.js
 {
  resolve: `medusa-file-minio`,
  options: {
@@ -189,7 +189,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-c
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...

@@ -51,7 +51,7 @@ Notice that during development it’s highly recommended to set `PAYPAL_SANDBOX`
 
 Then, in `medusa-config.js`, add the PayPal plugin to the `plugins` array with the configurations necessary:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
  //other plugins...
  {
@@ -119,7 +119,7 @@ Medusa has a Next.js storefront that you can easily use with your Medusa server.
 
 In your `.env.local` file (or the file you’re using for your environment variables), add the following variable:
 
-```bash
+```bash title=.env.local
 NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
 ```
 
@@ -137,7 +137,7 @@ Medusa also has a Gatsby storefront that you can use as your ecommerce storefron
 
 In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with its value set to the Client ID:
 
-```bash
+```bash title=.env.development
 GATSBY_PAYPAL_CLIENT_ID=<CLIENT_ID>
 ```
 
@@ -149,7 +149,7 @@ npm install @paypal/react-paypal-js
 
 Next, create a new file `src/components/payment/paypal-payment/index.jsx` with the following content:
 
-```jsx
+```jsx title=src/components/payment/paypal-payment/index.jsx
 import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";
 import React, { useMemo, useState } from "react";
 
@@ -253,7 +253,7 @@ The last step is to add this component as the component to render when PayPal is
 
 In `src/components/payment/index.js` you’ll find in the return statement a switch statement that checks the payment provider for each payment session and renders the component based on the ID. Add before the `default` case a case for `paypal`:
 
-```jsx
+```jsx title=src/components/payment/index.js
 switch (ps.provider_id) {
  case "stripe":
  //...

@@ -108,7 +108,7 @@ Where:
 
 Finally, in `medusa-config.js`, add to the `plugins` array the following new item:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
  //...
  {
@@ -156,7 +156,7 @@ If this configuration is not added, you’ll receive the error ["next/image Un-
 
 In `next.config.js` add the following option in the exported object:
 
-```jsx
+```jsx title=next.config.js
 const { withStoreConfig } = require("./store-config")
 
 //...

@@ -102,7 +102,7 @@ Where `<YOUR_SEGMENT_WRITE_KEY>` is the Write Key shown on the page of the Segme
 
 Finally, in `medusa-config.js`, add the following new item to the `plugins` array:
 
-```jsx
+```jsx title=medusa-config.js
 const plugins = [
  //...
  {
@@ -142,7 +142,7 @@ In some cases, you might want to track more events or custom events. You can do
 
 For example, you can add the following subscriber to listen to the `customer.created` event and add tracking for every customer created:
 
-```jsx
+```jsx title=src/subscribers/customer.ts
 class CustomerSubscriber {
  constructor({ segmentService, eventBusService }) {
  this.segmentService = segmentService;