X Cards Meta Tags PWA Studio for Magento Adobe Commerce

Compatible with Magento v2 Adobe Commerce - Open Source (CE), Commerce on-prem (EE), and Commerce on Cloud (ECE)!

Provides Apptrian X Cards Meta Tags extension functionality to PWA Studio. Requires both original (base) extension and GraphQL (add-on) extension to be installed. With X Cards (Twitter Cards), you can attach rich photos and media experiences to Tweets, helping to drive traffic to your website. Apptrian X Cards (Twitter Cards) extension for Magento adds X Cards (Twitter Cards) meta tags to product, category, home, and CMS pages. There are dozens of options for customization. This extension provides your Magento site not only with social improvements but also has great SEO value. All of the meta tags are generated automatically based on the data in your Magento database. Like all of our extensions, it is multistore compatible, works on any theme, it does not override nor overwrite anything. Functionality is injected via layout updates as Magento best practices recommend.

Compatible with PWA Studio (Venia) frontend without the need for any additional coding. It works out of the box.

Features

General Settings

• An easy way to enable or disable the extension.

X Cards (Twitter Cards) (for the product, category, home, and cms pages)

• An easy way to enable or disable X Cards (Twitter Cards).
• Multiselect option to add X Cards (Twitter Cards) for the product, category, home, and/or cms pages.
• All data needed for X Cards (Twitter Cards) is parsed from Magento and tags are generated automatically.
• Option to type in Website's Username (twitter:site)
• Option to type in Creator's Username (twitter:creator)
• Option to type in Domain Name (twitter:domain)
• Option to type in attribute code to use for Category page title (twitter:title) meta tag.
• Option to type in attribute code to use for Category page description (twitter:description) meta tag.
• Option to type in attribute code to use for Category image (twitter:image) meta tag.
• Option to select the Category page Twitter Card type (twitter:card) (Summary or Summary Large Image).
• Option to type in attribute code to use for CMS page title (twitter:title) meta tag.
• Option to type in attribute code to use for CMS page description (twitter:description) meta tag.
• Option to limit the number of images on CMS pages X Cards.
• Option to select the CMS page Twitter Card type (twitter:card) (Summary or Summary Large Image).
• Option to select the Home page Twitter Card type (twitter:card) (Summary or Summary Large Image).
• Option to type in attribute code to use for Product page title (twitter:title) meta tag.
• Option to type in attribute code to use for Product page description (twitter:description) meta tag.
• Option to limit the number of images on Product pages X Cards.
• Option to select the Product page Twitter Card type (twitter:card) (Summary or Summary Large Image).
• Option for additional meta tags to attributes mapping. Example: color=color|pattern=pattern. As you can see the format is simple tag1=attribute1|tag2=attribute2 The meta tag and Magento product attribute are connected by = sign and pairs are separated by | sign.
• Mobile App Integration
  • An easy way to enable or disable Mobile App Integration.
  • Option to type in Android (twitter:app:id:googleplay)
  • Option to type in Android (twitter:app:name:googleplay)
  • Option to type in Android (twitter:app:url:googleplay)
  • Option to type in iPad (twitter:app:id:ipad)
  • Option to type in iPad (twitter:app:name:ipad)
  • Option to type in iPad (twitter:app:url:ipad)
  • Option to type in iPhone (twitter:app:id:iphone)
  • Option to type in iPhone (twitter:app:name:iphone)
  • Option to type in iPhone (twitter:app:url:iphone)
• Please take a look at our genuine X Card (Twitter Card) examples.

Installation Instructions

This extension is not a standalone extension. It is an add-on extension. Requires both original (base) extension and GraphQL (add-on) extension. Please do not attempt to install it before the required extensions. Once you installed both the original (base) extension and GraphQL (add-on) extension, you may proceed.

There are several ways you can install any Magento extension. Our extension is no different. We will show you three ways to install the extension, but you must not mix them. Choose one and stick to it.

If you are unsure about how to install an extension or prefer to have a professional do it for you, please get in touch with us.

Installation via file uploading
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site, unpack the .zip file from /Magento2/InstallByUploadingFiles/ directory inside your Magento root.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

php bin/magento module:enable --clear-static-content Apptrian_XCardsPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/app/code/Apptrian/XCardsPwaStudio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you downloaded in Step 1.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/x-cards-pwa-studio extensions/@apptrian/x-cards-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/x-cards-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/x-cards-pwa-studio

Installation via Composer
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site and you want to install the extension via composer public and private keys. (To find your public and private keys, login to your Apptrian.com customer account and look at the My Downloadable Products section.)
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer config --auth http-basic.packages.apptrian.com $PUBLIC_KEY $PRIVATE_KEY

composer config repositories.apptrian-x-cards-pwa-studio composer https://packages.apptrian.com/x-cards-pwa-studio/

composer require apptrian/x-cards-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_XCardsPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/x-cards-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you can download from your account on our site in the My Downloadable Products section.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/x-cards-pwa-studio extensions/@apptrian/x-cards-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/x-cards-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/x-cards-pwa-studio

Installation via Composer
(If you purchased the extension on Adobe Commerce Marketplace)

Step 1. Backend installation instructions

If you purchased the extension on Adobe Commerce Marketplace then you must use Composer. Adobe Commerce Marketplace does not allow extension downloads.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer require apptrian/x-cards-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_XCardsPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Please make sure your Magento public and private keys are in your Magento root auth.json file. Usually, people install Magento with one Adobe Commerce Marketplace account (public and private keys) and then purchase an extension with another Adobe Commerce Marketplace account (different public and private keys). Check the Adobe Commerce Marketplace account you used to purchase the extension and make sure its public and private keys are in the Magento root auth.json file. WARNING! If you already have keys there, be very careful because maybe some other extensions are purchased with another Adobe Commerce Marketplace account.

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/x-cards-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, use composer to download the package to your computer. If you get stuck, use the contact form on our site and provide your order number and full name as it is on order, and we will provide you with further instructions.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/x-cards-pwa-studio extensions/@apptrian/x-cards-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/x-cards-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/x-cards-pwa-studio

Configuration

Our extension works out of the box. If you want to configure it differently log to your Magento Admin and go to:

Stores > Configuration > Apptrian Extensions > X Cards Meta Tags

There are more than several options for customization. They are all self-explanatory and have comments and tooltips.

After changing options make sure you refresh your Magento cache.

FAQ

Q: Does the extension work with multi-store setups?
A: Yes, it does work with multi-store setups. It functions in the same way as the core Magento modules, and it is fully automated.