DEV Community: Bram Hammer

Curious about your Magento2 experience

Bram Hammer — Mon, 05 Jun 2023 22:21:57 +0000

I'm working on a client his Magento2 shop which is an existing shop which needs cleaning, modifications and new solutions to fit their current needs.

I love Magento, but i really hate it every now and then. If I compare it to other (big) projects it costs a lot more energy and time to get the same result apart from the initial setup.

I'm curious about your experiences with theme, plugin or other design, development or usage of the system?
We're tempting to create a nextjs headless frontend and use magento2 with graphql and all the other fancy stuff as a backend.

I want to hear those rants and juicy stories.

How to send upsell emails with MedusaJS and Postmark

Bram Hammer — Sat, 03 Jun 2023 00:41:38 +0000

For example someone buys a few samples at your store and you never hear from him again.. That's frustrating!

We all know that follow-up/upsell mails help to keep your customers engaged and make sure they won't forget you. I want to explain how you can easily send those emails with MedusaJS.

Install the plugin

npm i medusa-plugin-postmark

Postmark template

Not sure where to start with the template? A small explaination can be found here or you can use the sourcecode of a stripo mail template.

If you created your template (and saved) you need to copy the ID that can be found in the top right corner while editing your template.

Setup your medusa config

Open your medusa-config.js and add the following lines in the plugin array.

{
        resolve: `medusa-plugin-postmark`,
        options: {
            server_api: process.env.POSTMARK_SERVER_API,
            from: process.env.POSTMARK_FROM,
            bcc: process.env.POSTMARK_BCC || null,
            pdf: {
                enabled: false
            },
            events: {
            },
            upsell: {
                enabled: process.env.POSTMARK_UPSELL_ENABLED || false,
                template: process.env.POSTMARK_UPSELL_TEMPLATE || null,
                delay: process.env.POSTMARK_UPSELL_DELAY || 9, // delay in days
                valid: process.env.POSTMARK_UPSELL_VALID || 30, // delay in days
                collection: process.env.POSTMARK_UPSELL_COLLECTION || null,
            },
            default_data: {
                product_url: process.env.POSTMARK_PRODUCT_URL || '',
                product_name: process.env.POSTMARK_PRODUCT_NAME || '',
                company_name: process.env.POSTMARK_COMPANY_NAME || '',
                company_address: process.env.POSTMARK_COMPANY_ADDRESS || '',
            }
        }
    },

and make sure you have the following .env keys and values

POSTMARK_SERVER_API=4e7bc01b-****-****-****-51f8b224c6c8
POSTMARK_FROM=your@mail.com
POSTMARK_PRODUCT_URL=https://mail.com/
POSTMARK_PRODUCT_NAME=
POSTMARK_COMPANY_NAME=
POSTMARK_COMPANY_ADDRESS=
POSTMARK_UPSELL_DELAY=7
POSTMARK_UPSELL_ENABLED=true
POSTMARK_UPSELL_TEMPLATE=123456
POSTMARK_UPSELL_COLLECTION=pcol_01GQDXMFP78WHSFFAHB6K4EV79
POSTMARK_UPSELL_VALID=21

Make sure you set the correct values, and change the POSTMARK_UPSELL_TEMPLATE for the correct template ID in postmark and add your own collection to only mail people who bought in that collection.

The POSTMARK_FROM email address must be a verified sender in your Postmark account.

You're ready to go!

You're ready to remind your customers how bad they need your products!
Keep in mind! If you install this on a running website it could mail old orders. Want to prevent that? Make sure every order has the following metadata ( or add it to existing metadata)

{
    "upsell_sent": true
}

Having problems?

Experiencing issues, or need a little help? Let me know in the comments and I will try to help when possible!

Strapi + Next.js refresh static props like it's cache

Bram Hammer — Thu, 23 Feb 2023 01:08:08 +0000

Intro

If you made a headless website or e-commerce, you've run into the issue that it didn't immediately refresh live after you changed your content? Relax; you're not alone!
I've been working on a cool MedusaJS project, and we had the problem that our SEO experts were working in Strapi and didn't see their changes... Annoying when there are some minor or important edits you want to see live/in realtime.

How does it work?

The solution is quite simple. Next.js has a feature called Incremental Static Regeneration. This allows you to refresh the static props every x seconds, or what we desire: on-demand revalidation. This function can be triggered by the Strapi Webhook Events.

On demand revalidation

In short, you execute a revalidate function with the correct URL path to perform the revalidation.
A small example:



    await res.revalidate('/path-to-revalidate')
    return res.json({ revalidated: true })

One downside, you can only revalidate a specific path. No wildcards or whatsoever are allowed. Our goal is to revalidate a strapi content entry every time we update, publish or create it.

Strapi webhook events

As simple as can be, register a webhook, fill in the correct URL, enable the right events, and you're ready to go!

Requirements

To have this all working, we need one thing. Ensure the slug/path is known or can be generated with strapi information!
In our example, we set a slug to every content type and made sure the content type name corresponds with our slug on the frontend.
( oke... fair enough.. one exception for pages )

Let's create our solution!

First, we'll create the next.js solution. Our projects always use Typescript. For a javascript version, remove the types in the function variables.

Next.js (Medusa.js with Next.js in our case)

/src/pages/api/revalidate.tsx



import type { NextApiRequest, NextApiResponse } from "next"

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    // or a secret from an environment variable
    if (req.query.secret !== "SomeRandomSecret")
        return res.status(401).json({ message: "Invalid token" })

    try {
        const { event, entry, model } = req.body
        switch (event) {
            case "entry.update":
            case "entry.create":
            case "entry.publish":
                await res.revalidate(
                    `${model !== "page" ? "/" + model : ""}/${entry?.slug ?? ""}`
                )
                break
            default:
                return res.status(500).send(`Invalid event "${event}"`)
                break
        }
        return res.json({ revalidated: true })
    } catch (err) {
        return res.status(500).send("Error revalidating")
    }
}

For this tutorial, I didn't set an Authorization header with bearer, but I do recommend this!

In our code, we check if the secret is valid, which event is fired, and what path to revalidate.

What if my paths don't correspond with my models?

No worries. You could setup a small object which maps your model to the correct path. Here is a quick example:



const pathMaps = { blogContent: '/blog' }

//...

await res.revalidate(

    </span><span class="p">${</span><span class="nx">pathMaps</span><span class="p">[</span><span class="nx">model</span><span class="p">]</span><span class="o">??</span><span class="dl">""</span><span class="p">}</span><span class="s2">/</span><span class="p">${</span><span class="nx">entry</span><span class="p">?.</span><span class="nx">slug</span> <span class="o">??</span> <span class="dl">""</span><span class="p">}</span><span class="s2">

)

Strapi

Navigate to Settings --> Webhooks and click on Create new webhook.

Fill the fields accordingly with your domain and hit save.

Done

That's it; go get yourself a coffee to celebrate! Whenever you change something in Strapi, your static props are invalidated in your Next.js frontend!