Skip to content
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.

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

Add CLI command to scaffold content-types #37

Open
peterjaap opened this issue Nov 19, 2020 · 7 comments
Open

Add CLI command to scaffold content-types #37

peterjaap opened this issue Nov 19, 2020 · 7 comments

Comments

@peterjaap
Copy link
Contributor

peterjaap commented Nov 19, 2020

We could create a CLI command that scaffolds PHTML/XML for content-types. Let's say you have a content type in Prismic called authors.

You would then run bin/magento prismic:scaffold --title authors--content-type authors --route authors --theme Vendor/Theme --overview. The overview flag would be optional, to create an overview page.

The title and route flag would also be optional. If these are passed we could create the route entries;

INSERT INTO prismicio_route (title, content_type, route, status) VALUES ('authors', 'authors', '/authors',  1);
INSERT INTO prismicio_route_store (route_id, store_id) VALUES (1, 1);

The command would then generate:

Detail page XML: app/design/frontend/Vendor/Theme/Elgentos_PrismicIO/layout/prismicio_by_type_authors.xml

<?xml version="1.0" encoding="UTF-8" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="prismicio_content">
            <block class="Elgentos\PrismicIO\Block\Template" template="authors/detail.phtml">
                <block name="author.title" class="Elgentos\PrismicIO\Block\Layout\PageTitle">
                    <block class="Elgentos\PrismicIO\Block\Dom\Plain" template="data.title"/>
                </block>
        </referenceContainer>
    </body>
</page>

Detail template; app/design/frontend/Vendor/Theme/Elgentos_PrismicIO/templates/authors/detail.phtml

<?php declare(strict_types=1);
/** @var $block \Elgentos\PrismicIO\Block\Template */
?>
<h1><?=$block->getChildHtml('author.title');?></h1>

And if the --overview flag was passed, also generate the overview XML/template & card template;

Overview page XML: app/design/frontend/Vendor/Theme/Elgentos_PrismicIO/layout/prismicio_route_index_authors.xml

<?xml version="1.0" encoding="UTF-8" ?>
<page layout="2columns-right" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Authors</title>
    </head>
    <body>
        <referenceBlock name="page.main.title" remove="true" />
        <referenceContainer name="content">
            <block class="Elgentos\PrismicIO\Block\Overview" template="Elgentos_PrismicIO::authors/overview.phtml" name="authors.list">
                <arguments>
                    <argument name="content_type" xsi:type="string">Authors</argument>
                </arguments>

                <action method="setDocumentType">
                    <argument name="documentType" xsi:type="string">authors</argument>
                </action>

                <block class="Elgentos\PrismicIO\Block\Group" name="authors.document.index" template="results">
                    <block class="Elgentos\PrismicIO\Block\Template" template="Elgentos_PrismicIO::authors/card.phtml">
                        <block class="Elgentos\PrismicIO\Block\Dom\Plain" name="author.document.title" template="data.title" />
                        <block class="Elgentos\PrismicIO\Block\Dom\Link" name="author.document.link" />
                    </block>
                </block>

            </block>
        </referenceContainer>
    </body>
</page>

Overview template; app/design/frontend/Vendor/Theme/Elgentos_PrismicIO/templates/authors/overview.phtml

<?php declare(strict_types=1);
/** @var $block \Elgentos\PrismicIO\Block\Overview */

$contentType = $this->getContentType();

$documents = new \stdClass();
$documents->results = $block->getDocumentsWithoutLanguage();

/** @var Elgentos\PrismicIO\Block\Group $documentRenderer */
$documentRenderer = $block->getChildBlock('authors.document.index');
$documentRenderer->setDocument($documents);
?>
<div class="posts">
    <header class="posts__header">
        <h4><?= __($contentType) ?></h4>
    </header>
    <?= $documentRenderer->toHtml(); ?>
</div>

Card template: app/design/frontend/Vendor/Theme/Elgentos_PrismicIO/templates/authors/card.phtml

<?php declare(strict_types=1);
/** @var $block \Elgentos\PrismicIO\Block\Template */

$document = $block->getContext();
$document->link_type = 'Document';

$authorName = $block->getChildHtml('author.document.title');
?>

<a href="<?=$block->getChildHtml('author.document.link'); ?>"><?=$authorName;?></a><br/>
@peterjaap
Copy link
Contributor Author

We could (and this is dangerous territory ;)) use the Prismic API to query the field types and generate the block definitions as well, but that would involve a large number of assumptions.

This was referenced Nov 20, 2020
@peterjaap
Copy link
Contributor Author

peterjaap commented Nov 26, 2020

First stab at scaffolding; https://github.com/elgentos/magento2-prismicio/tree/scaffolding

There are a number of assumptions, hard-coded examples and omissions, most notably;

  • Only blog is hardcoded for now, using stubs I created specifically for blog
  • This assumes the content type doesn't already exist in Prismic and outputs the JSON to create it
  • The route is only created for store_id 1

Ideally, we should provide another command (or a flag) that allows us to either pass the JSON from Prismic or even better, query the Prismic API to retrieve the content type configuration. It can then infer block classes (Elgentos\PrismicIO\Block\Dom\Plain / Elgentos\PrismicIO\Block\Dom\RichText/ Elgentos\PrismicIO\Block\Dom\Url / etc) based on the field type and generate the XML's.

Output;

 
 ✘  ~/development/workspace/client/magento2   master  php bin/magento prismic:scaffold blog
Please select a theme:
  [1] Magento/blank
  [2] Hyva/reset
  [3] Magento/backend
  [4] Magento/luma
  [5] Hyva/default
  [6] Client/Hyva
 > 6
Copied prismicio_by_type_blog.xml into /data/client/magento2/app/design/frontend/Client/Hyva/Elgentos_PrismicIO/layout/
Copied prismicio_route_index_blog.xml into /data/client/magento2/app/design/frontend/Client/Hyva/Elgentos_PrismicIO/layout/
Copied blog-list.phtml into /data/client/magento2/app/design/frontend/Client/Hyva/Elgentos_PrismicIO/templates/
Route prefix: [/blog] 
Route /blog created for store 1
Create a new custom type called 'blog' in Prismic and paste the following JSON into the JSON editor field
{
  "Main": {
    "uid": {
      "type": "UID",
      "config": {
        "label": "uid",
        "placeholder": "UID"
      }
    },
    "title": {
      "type": "StructuredText",
      "config": {
        "single": "heading1, heading2, heading3, heading4, heading5, heading6",
        "label": "Title"
      }
    },
    "author": {
      "type": "StructuredText",
      "config": {
        "single": "heading1, heading2, heading3, heading4, heading5, heading6",
        "label": "Author"
      }
    },
    "image": {
      "type": "Image",
      "config": {
        "constraint": {},
        "thumbnails": [],
        "label": "Image"
      }
    },
    "publish_date": {
      "type": "Date",
      "config": {
        "label": "Publish Date"
      }
    },
    "content": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph, preformatted, heading1, heading2, heading3, heading4, heading5, heading6, strong, em, hyperlink, image, embed, list-item, o-list-item, rtl",
        "label": "Content"
      }
    }
  }
}

 ~/development/workspace/client/magento2   master  gst
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app/design/frontend/Client/Hyva/Elgentos_PrismicIO/layout/prismicio_by_type_blog.xml
        app/design/frontend/Client/Hyva/Elgentos_PrismicIO/layout/prismicio_route_index_blog.xml
        app/design/frontend/Client/Hyva/Elgentos_PrismicIO/templates/blog-list.phtml

@peterjaap
Copy link
Contributor Author

Created a video to show how easy the process is; https://www.youtube.com/watch?v=ze1j91-4_OE

@JoostWan
Copy link
Contributor

@peterjaap thanks for the great work! It's working over here. But when i change the pageSize to 5 and there are more than 5 posts there is no pagination. Is this already available in the module?

@peterjaap
Copy link
Contributor Author

peterjaap commented Jan 6, 2021

@JoostWan I also noticed that didn't work. Have you found a solution in the meantime?

@peterjaap
Copy link
Contributor Author

peterjaap commented Jan 6, 2021

The scaffold command has been merged into version 1.6.0, and it is now a bit more generic; just run bin/magento prismic:scaffold yourcontenttypename to scaffold a very basic template with an XML.

@JoostWan
Copy link
Contributor

I was just checking if we can use the module for a client. Maybe i have some time later to fix this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants