Gatsby-theme-novela: Mailchimp form doesn't work with Contentful source

Created on 2 Dec 2019  路  6Comments  路  Source: narative/gatsby-theme-novela

Version of Novela you are using
Bug noticed at v0.10.3 and replicated at v0.15.7

Describe the bug
Mailchimp plugin does not work with Contentful

To Reproduce
Steps to reproduce the behavior:

  1. Add Contentful as a source (see step-by-step instructions)
  2. Set contentful: true inside gatsby-config.js
  3. Add Mailchimp as a plugin (see step-by-step instructions)

Expected behavior
When I switch from local to Contentful as the source for Gatsby Theme Novela, I expect the Mailchimp plugin to work

Screenshots
Screen+Shot+2019-12-01+at+7 11 27+PM

blocked

Most helpful comment

Ahhh, the Contentful template might not have mailchimp? Nice catch @slavakurilyak.
Thanks for all these reports.

All 6 comments

Ahhh, the Contentful template might not have mailchimp? Nice catch @slavakurilyak.
Thanks for all these reports.

Is it going to be solved anytime soon?

Email newsletters are essential for blogs. Any updates on fixing this bug?

Stackbit recently published Adding a Mailing List to Your Gatsby Site.

@connorwhitman Can you take a look at this?

Funny enough this was my project for tonight - been having this issue since last year, finally deciding to try and tackle it. Will reply and tag if I make progress!

e: The conditional rendering of the form is {mailchimp && article.subscription && <Subscription />}, I have a feeling that article.subscription is null or undefined for contentful data.

e2: I was right - contentful schema is missing a 'subscription' field. Added a boolean, still not displaying. Think the query needs to be updated.

e3: Fixed! Adding the field in contentful and a line querying 'subscription' on the contentful query in data.query.js looks to have done the trick. Going to confirm that shadowing the component data solves it on a deploy.

@slavakurilyak - managed a workaround, but it's not super pretty. You can't shadow the data.query, so that angle is out.

This workaround means that you will not be able to select which posts have your list (not something I mind, but just be aware).

The Workaround

  • Ensure you have the plugin set up in gatsby-config.json
  • Under the theme options array, add "mailchimp: true" (unsure if this is necessary if it's generated elsewhere, but theme options does look for a mailchimp value.)
  • Shadow the following components:

    src/@narative/gatsby-theme-novela/sections/article/Article.Aside.tsx
    src/@narative/gatsby-theme-novela/sections/article/Article.Authors.tsx
    src/@narative/gatsby-theme-novela/sections/article/Article.Controls.tsx
    src/@narative/gatsby-theme-novela/sections/article/Article.HandleOverlap.tsx
    src/@narative/gatsby-theme-novela/sections/article/Article.Hero.tsx
    src/@narative/gatsby-theme-novela/sections/article/Article.SEO.tsx
    src/@narative/gatsby-theme-novela/sections/article/Article.Share.tsx
    src/@narative/gatsby-theme-novela/templates/article.template.tsx

  • in article.template.tsx, on ln98 change {mailchimp && article.subscription && <Subscription />} to `{mailchimp && }

To double check, run clean & build locally, check your mailchimp form integration, and you're good to go! Bit more involved than the last issue, would be much easier if they just fixed the contentful queries...

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MartinRosenberg picture MartinRosenberg  路  3Comments

mabasic picture mabasic  路  4Comments

brotzky picture brotzky  路  4Comments

dennismorello picture dennismorello  路  4Comments

bravo-kernel picture bravo-kernel  路  4Comments