Skip to content

feat: add Twitter meta tags to product page #530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
edyespinal wants to merge 10 commits into
base: master
Choose a base branch
from
Open

feat: add Twitter meta tags to product page #530

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c5bc8f8
feat: add Twitter meta tags to product page
Jul 28, 2021
f07e271
chore: add store settings properties as dependencies to only be displ…
Aug 2, 2021
fada455
chore: update CHANGELOG, fix: add mock definition for vtex.twitter-me…
Aug 4, 2021
f6854c3
fix: mock definition filename typo
Aug 5, 2021
3d5916d
fix: remove version number and date from CHANGELOG
Aug 31, 2021
2b1eb85
chore: add message ids to settings messages for translations.
Sep 2, 2021
1cf1b90
Update CHANGELOG.md
edyespinal Sep 3, 2021
ab49b04
Update CHANGELOG.md
edyespinal Sep 22, 2021
49cdd8f
chore: remove unavailable option for Twitter Card
Oct 6, 2021
ba93ff1
Merge branch 'feat/twitter-meta-tags' of https://github.com/edyespina…
Oct 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.

## [Unreleased]

### Added
- `Twitter meta tags` to all product pages.

## [2.120.0] - 2021-06-28
### Changed
- Now gets `listName` from params, not from query string
Expand Down
58 changes: 41 additions & 17 deletions manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@
"vtex.product-review-interfaces": "1.x",
"vtex.rich-text": "0.x",
"vtex.native-types": "0.x",
"vtex.telemarketing": "2.x"
"vtex.telemarketing": "2.x",
"vtex.twitter-meta-tags": "0.x"
},
"settingsSchema": {
"title": "admin/store.title",
Expand Down Expand Up @@ -88,10 +89,7 @@
"type": "string"
}
},
"required": [
"rel",
"href"
]
"required": ["rel", "href"]
},
"description": "admin/store.faviconLinks.description"
},
Expand All @@ -100,6 +98,10 @@
"type": "string",
"description": "admin/store.searchTermPath.description"
},
"includeTwitterMetaTags": {
"title": "admin/store.includeTwitterMetaTags.title",
"type": "boolean"
},
"advancedSettings": {
"title": "admin/store.advancedSettings.title",
"type": "object",
Expand Down Expand Up @@ -215,18 +217,14 @@
{
"properties": {
"requiresAuthorization": {
"enum": [
false
]
"enum": [false]
}
}
},
{
"properties": {
"requiresAuthorization": {
"enum": [
true
]
"enum": [true]
},
"b2bEnabled": {
"title": "admin/store.b2benabled.title",
Expand All @@ -237,6 +235,37 @@
}
}
]
},
"includeTwitterMetaTags": {
"oneOf": [
{
"properties": {
"includeTwitterMetaTags": {
"enum": [false]
}
}
},
{
"properties": {
"includeTwitterMetaTags": {
"enum": [true]
},
"twitterUsername": {
"title": "admin/store.twitterUsername.title",
"description": "admin/store.twitterUsername.description",
"type": "string"
},
"twitterCard": {
Copy link
Contributor

@victorhmp victorhmp Sep 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This dropdown is not being rendered with title and description in the Site Editor for some reason... could you also look into that? It's just showing up as a dropdown with no context.

Screen Shot 2021-09-10 at 14 09 42

Copy link
Author

@edyespinal edyespinal Sep 16, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @victorhmp
I was doing a little digging to see what is causing the issue of the title and description not being displayed and the dropdown not having the correct style.
I noticed that we are using react-jsonschema-form to construct the store settings (for the apps' settings as well).
After reading the documentation, I don't see what we are doing wrong here. Maybe it's something when the VTEX Styleguide is being applied to the components.

After testing the same settings inside an apps settings form, this is what we get:

Screen.Recording.2021-09-16.at.14.49.45.mov

When testing the settings directly with react-jsonschema-form, this is what we get:

Screen.Recording.2021-09-16.at.14.44.18.mov

As you can see, in both cases the title and the description is displayed and the dropbox is styled correctly.

What should we do?

Copy link
Contributor

@victorhmp victorhmp Sep 17, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@edyespinal this is awesome! Great investigation!
I have an idea! Could you try importing the Dropdown component from react/components/form/Dropdown and adding it to the widgets object created here? This might just do it!

Copy link
Author

@edyespinal edyespinal Sep 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @victorhmp
I tried your approach but we are still getting the same results.

Copy link
Author

@edyespinal edyespinal Oct 6, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi team!
Is there anything else we need to do about this app?

"title": "admin/store.twitterCard.title",
"description": "admin/store.twitterCard.description",
"type": "string",
"default": "summary",
"enum": ["photo", "summary", "summary_large_image"],
"enumNames": ["Photo", "Summary", "Summmary Large Image"]
}
}
}
]
}
}
},
Expand All @@ -247,12 +276,7 @@
"b2bEnabled": {
"ui:disabled": "true"
},
"ui:order": [
"storeName",
"requiresAuthorization",
"b2bEnabled",
"*"
]
"ui:order": ["storeName", "requiresAuthorization", "b2bEnabled", "*"]
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}
4 changes: 4 additions & 0 deletions react/ProductWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
useRuntime,
} from 'vtex.render-runtime'
import { ProductOpenGraph } from 'vtex.open-graph'
import { TwitterMetaTags } from 'vtex.twitter-meta-tags'
import useProduct from 'vtex.product-context/useProduct'
import ProductContextProvider from 'vtex.product-context/ProductContextProvider'
import { Product as ProductStructuredData } from 'vtex.structured-data'
Expand All @@ -24,6 +25,9 @@ const Content = ({ listName, loading, children, childrenProps }) => {
loading={loading}
/>
{product && <ProductOpenGraph />}

{product && <TwitterMetaTags />}

{product && selectedItem && (
<ProductStructuredData product={product} selectedItem={selectedItem} />
)}
Expand Down
3 changes: 3 additions & 0 deletions react/__mocks__/vtex.twitter-meta-tags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import React from 'react'

export const TwitterMetaTags = () => <div>TwitterMetaTags</div>