Merge pull request #451 from magento-honey-badgers/dynamic-blocks

GraphQL schema for dynamic blocks

Author: melnikovi

design-documents/graph-ql/coverage/dynamic-blocks.graphqls

@@ -0,0 +1,48 @@
+type DynamicBlock {
+    uid: ID!
+    content: ComplexTextValue!
+}
+
+# We don't need name, is_enabled, locations, ga_creative, catalog_price_rule_ids, cart_price_rules_ids, locations on storefront
+
+type DynamicBlocks {
+    items: [DynamicBlock]!
+    page_info: SearchResultPageInfo
+    total_count: Int!
+}
+
+type DynamicBlocksFilterInput {
+    type: DynamicBlockTypeEnum!
+    locations: [DynamicBlockLocationEnum!] # Blocks for all locations will be displayed if not supplied
+    rotation_mode: DynamicBlockRotationModeEnum!
+    dynamic_block_uids: [ID!] # Only makes sense when DynamicBlockTypeEnum is set to SPECIFIED
+}
+
+type DynamicBlocksOutput {
+    dynamic_blocks: DynamicBlocks!
+}
+
+enum DynamicBlockTypeEnum {
+    SPECIFIED
+    CART_PRICE_RULE_RELATED
+    CATALOG_PRICE_RULE_RELATED
+}
+
+enum DynamicBlockLocationEnum {
+    CONTENT
+    HEADER
+    FOOTER
+    LEFT
+    RIGHT
+}
+
+enum DynamicBlockRotationModeEnum {
+    NO_ROTATION @doc(description: "Display all.")
+    RANDOM
+    SERIES
+    SHUFFLE
+}
+
+type Query {
+    dynamic_blocks(input: DynamicBlocksFilterInput): DynamicBlocksOutput
+}

design-documents/graph-ql/coverage/dynamic-blocks.md

@@ -0,0 +1,42 @@
+## Dynamic Blocks
+
+Dynamic blocks can be inserted in CMS pages and blocks using widgets. Below is the sample markup of the widget inserted on the page.
+
+```
+{{widget type="Magento\Banner\Block\Widget\Banner" display_mode="fixed" types="content" rotate="random" banner_ids="1" template="widget/block.phtml" unique_id="34f6520f51ca9b79c91d1f56b5b453adc4d9ff235a7c9f5b04d1b0557584c5bc"}}
+```
+
+In Luma dynamic blocks rendered to a JavaScript component definition that does request to a backend to load content of the dynamic block. Here is an example of a JavaScript component definition.
+
+```
+<div class="widget block block-banners" data-bind="scope: 'banner'" data-banner-id="34f6520f51ca9b79c91d1f56b5b453adc4d9ff235a7c9f5b04d1b0557584c5bc" data-types="content" data-display-mode="fixed" data-ids="1" data-rotate="random" data-store-id="1">
+    <ul class="banner-items" data-bind="afterRender: registerBanner">
+        <!-- ko foreach: getItems34f6520f51ca9b79c91d1f56b5b453adc4d9ff235a7c9f5b04d1b0557584c5bc() -->
+        <li class="banner-item" data-bind="attr: {'data-banner-id': $data.bannerId}">
+            <div class="banner-item-content" data-bind="bindHtml: $data.html"></div>
+        </li>
+        <!-- /ko -->
+    </ul>
+</div>
+```
+
+PWA will receive similar JavaScript component definition that can be parsed to extract parameters and make a [GraphQL query](./dynamic-blocks.graphqls) to load dynamic blocks.
+
+```graphql
+{
+    dynamic_blocks(input: {type: SPECIFIED, locations: [CONTENT], rotation_mode: RANDOM, dynamic_block_uids: [1, 2]}) {
+        items {
+            uid
+            content {
+                html
+            }
+        }
+        page_info {
+            current_page
+            page_size
+            total_pages
+        }
+        total_count
+    }
+}
+```