Would the project be open to a contribution which adds support for shopify email templates

[mayank23]

Goals

1. Be able to generate shopify email templates using react email instead of manually writing everything using ERB

References:

https://help.shopify.com/en/manual/promoting-marketing/create-marketing/shopify-email/create-email/custom-liquid

https://shopify.dev/docs/api/liquid

Background

I use nextjs commerce for my shopify store. I want to leverage react email to write all my shopify email templates instead of pure html/erb.

Proposal

My solution contains the following:

1. I've build a set of primitives that wrap liquid syntax/operators. Here is a brief example:

export const LiquidIf = ({ expression, children }: LiquidProps) => (
    <>
        {`{% if ${expression} %}`}
        {children}
        {'{% endif %}'}
    </>
);


... etc

2. Then I can create my email in react like so:

        <LiquidIf expression="order.shipping_address">
            <Row>
                <Column align="left">
                    <Text className="text-sm font-bold m-0 p-0">SHIPPING ADDRESS</Text>
                    <Text className="text-sm font-normal m-0 p-0">{'{{ order.shipping_address.first_name }} {{ order.shipping_address.last_name }}'}</Text>
                    <Text className="text-sm font-normal m-0 p-0">{'{{ order.shipping_address.street }}'}</Text>
                    <Text className="text-sm font-normal m-0 p-0">{'{{ order.shipping_address.city }}, {{ order.shipping_address.province }} {{ order.shipping_address.zip }}'}</Text>
                    <Text className="text-sm font-normal m-0 p-0">{'{{ order.shipping_address.country && order.shipping_address.country.name }}'}</Text>
                    <Text className="text-sm font-normal m-0 p-0">{'{{ order.shipping_address.phone }}'}</Text>
                </Column>
            </Row>
        </LiquidIf>

3. I then run the email generation script to generate raw html and upload it to shopify

        const html =render(<EmailTemplateComponent/>);

4. I've built out all of my shopify email templates using this method.

[gabrielmfern]

This is a good idea if you made a package that had these components to be used with React Email, but I think it's out of our scope to implement something like this atm.

[mayank23]

Sounds good, I can work on creating a separate package

[gabrielmfern]

you have Discord? I think people would love to have something like this for other kinds of templating languages as well, that is if you were able to make it configurable to then be used with any of them.

We have a showcase text channel there that I'd love for you to share this on once it's ready.

I can also help you out on this, if you have any issues, please reach out to me on Discord. My username is gabrielmfern.

[mayank23]

Sent a DM on discord :)