Figma hook page

modules/concepts/hooks/list-of-hooks/_index.md

@@ -17,6 +17,10 @@ For example, `actionAdminCustomersFormModifier` is documented as `action<AdminCo
 A regex based search has been implemented, and generic hooks should be matched. However, when you see a controller name or action in the hook name and you can't find it, try searching for a part of the hook name, like `FormModifier`.
 {{% /notice %}}
 
+{{% notice tip %}}
+Looking for available hooks in the front office? Check out our [Hook mapping project]({{<relref "/8/themes/hummingbird/hooks">}}), which provides a visual representation of hook availability in the Hummingbird theme.
+{{% /notice %}}
+
 ## Search for a hook
 
 <div id="hookFilter" class="quickfilter">

modules/concepts/hooks/list-of-hooks/displayContentWrapperBottom.md

@@ -0,0 +1,44 @@
+---
+Title: displayContentWrapperBottom
+hidden: true
+hookTitle: 'Content wrapper section (bottom)'
+files:
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-both-columns.tpl'
+        file: 'Classic Theme: templates/layouts/layout-both-columns.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-content-only.tpl'
+        file: 'Classic Theme: templates/layouts/layout-content-only.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-full-width.tpl'
+        file: 'Classic Theme: templates/layouts/layout-full-width.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-left-column.tpl'
+        file: 'Classic Theme: templates/layouts/layout-left-column.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-right-column.tpl'
+        file: 'Classic Theme: templates/layouts/layout-right-column.tpl'
+locations:
+    - 'front office'
+type: display
+hookAliases:
+origin: theme
+array_return: false
+check_exceptions: false
+chain: false
+description: 'This hook displays new elements in the bottom of the content wrapper'
+
+---
+
+{{% hookDescriptor %}}
+
+## Call of the Hook in the origin file
+
+```php
+{hook h='displayContentWrapperBottom'}
+```

modules/concepts/hooks/list-of-hooks/displayContentWrapperTop.md

@@ -0,0 +1,44 @@
+---
+Title: displayContentWrapperTop
+hidden: true
+hookTitle: 'Content wrapper section (top)'
+files:
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-both-columns.tpl'
+        file: 'Classic Theme: templates/layouts/layout-both-columns.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-content-only.tpl'
+        file: 'Classic Theme: templates/layouts/layout-content-only.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-full-width.tpl'
+        file: 'Classic Theme: templates/layouts/layout-full-width.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-left-column.tpl'
+        file: 'Classic Theme: templates/layouts/layout-left-column.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-right-column.tpl'
+        file: 'Classic Theme: templates/layouts/layout-right-column.tpl'
+locations:
+    - 'front office'
+type: display
+hookAliases:
+origin: theme
+array_return: false
+check_exceptions: false
+chain: false
+description: 'This hook displays new elements in the top of the content wrapper'
+
+---
+
+{{% hookDescriptor %}}
+
+## Call of the Hook in the origin file
+
+```php
+{hook h='displayContentWrapperTop'}
+```

modules/concepts/hooks/list-of-hooks/displayPDF<Template>.md

@@ -0,0 +1,69 @@
+---
+Title: displayPDF<Template>
+hidden: true
+hookTitle: 'Add content to PDF templates'
+files:
+    - 
+        url: 'https://github.com/PrestaShop/PrestaShop/blob/8.1.x/pdf/delivery-slip.tpl'
+        file: 'pdf/delivery-slip.tpl'
+    - 
+        url: 'https://github.com/PrestaShop/PrestaShop/blob/8.1.x/pdf/invoice-b2b.tpl'
+        file: 'pdf/invoice-b2b.tpl'
+    - 
+        url: 'https://github.com/PrestaShop/PrestaShop/blob/8.1.x/pdf/invoice.tpl'
+        file: 'pdf/invoice.tpl'
+    - 
+        url: 'https://github.com/PrestaShop/PrestaShop/blob/8.1.x/pdf/order-return.tpl'
+        file: 'pdf/order-return.tpl'
+    - 
+        url: 'https://github.com/PrestaShop/PrestaShop/blob/8.1.x/pdf/order-slip.tpl'
+        file: 'pdf/order-slip.tpl'
+locations:
+    - 'front office'
+    - 'back office'
+type: display
+hookAliases:
+origin: theme
+array_return: false
+check_exceptions: false
+chain: false
+description: 'Allows to add content in HTML to PDF templates'
+
+---
+
+{{% hookDescriptor %}}
+
+## Call of the Hook in the origin file
+
+```php
+<!-- Hook -->
+{if isset($HOOK_DISPLAY_PDF)}
+    <tr>
+        <td colspan="12" height="30">&nbsp;</td>
+    </tr>
+
+    <tr>
+        <td colspan="12">
+            {$HOOK_DISPLAY_PDF}
+        </td>
+    </tr>
+{/if}
+```
+
+This hook is a dynamic hook, generated in `classes/pdf/HTMLTemplate.php`: 
+
+```php
+$template = ucfirst(str_replace('HTMLTemplate', '', get_class($this)));
+$hook_name = 'displayPDF' . $template;
+
+$this->smarty->assign([
+    'HOOK_DISPLAY_PDF' => Hook::exec(
+        $hook_name,
+        [
+            'object' => $object,
+            // The smarty instance is a clone that does NOT escape HTML
+            'smarty' => $this->smarty,
+        ]
+    ),
+]);
+```

modules/concepts/hooks/list-of-hooks/displayWrapperBottom.md

@@ -0,0 +1,32 @@
+---
+Title: displayWrapperBottom
+hidden: true
+hookTitle: 'Main wrapper section (bottom)'
+files:
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-both-columns.tpl'
+        file: 'Classic Theme: templates/layouts/layout-both-columns.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/checkout/checkout.tpl'
+        file: 'Classic Theme: templates/checkout/checkout.tpl'
+locations:
+    - 'front office'
+type: display
+hookAliases:
+origin: theme
+array_return: false
+check_exceptions: false
+chain: false
+description: 'This hook displays new elements in the bottom of the main wrapper'
+
+---
+
+{{% hookDescriptor %}}
+
+## Call of the Hook in the origin file
+
+```php
+{hook h='displayWrapperBottom'}
+```

modules/concepts/hooks/list-of-hooks/displayWrapperTop.md

@@ -0,0 +1,32 @@
+---
+Title: displayWrapperTop
+hidden: true
+hookTitle: 'Main wrapper section (top)'
+files:
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/layouts/layout-both-columns.tpl'
+        file: 'Classic Theme: templates/layouts/layout-both-columns.tpl'
+    -
+        theme: Classic
+        url: 'https://github.com/PrestaShop/classic-theme/blob/develop/templates/checkout/checkout.tpl'
+        file: 'Classic Theme: templates/checkout/checkout.tpl'
+locations:
+    - 'front office'
+type: display
+hookAliases:
+origin: theme
+array_return: false
+check_exceptions: false
+chain: false
+description: 'This hook displays new elements in the top of the main wrapper'
+
+---
+
+{{% hookDescriptor %}}
+
+## Call of the Hook in the origin file
+
+```php
+{hook h='displayWrapperTop'}
+```

themes/_index.md

@@ -15,4 +15,8 @@ The default PrestaShop installation offers the neutral "Classic theme", enabling
 
 Several marketplaces are available to get PrestaShop themes. As a graphic designer/front developer, you can put your themes up for sale on this marketplaces.
 
+{{% notice note %}}
+A new theme, Hummingbird, is being developed by the maintainer team. While under develoment, [you can start to discover it here]({{<relref "/8/themes/hummingbird">}}).
+{{% /notice %}}
+
 {{% children /%}}

themes/hummingbird/_index.md

@@ -0,0 +1,20 @@
+---
+title: Hummingbird Theme
+weight: 5
+---
+
+# Hummingbird Theme
+
+Hummingbird is a PrestaShop theme that aims to replace Classic as a new default theme for the PrestaShop. 
+
+Read more about Hummingbird [in the announcement of the new theme for PrestaShop](https://build.prestashop-project.org/news/2022/new-theme-announce/).
+
+Want to test it? Want to contribute to the project and share the feedback with the team? See [Hummingbird Github repository](https://github.com/PrestaShop/hummingbird).
+
+{{% notice info %}}
+Please note that the Hummingbird theme is still under development and is not considered production-ready.
+{{% /notice %}}
+
+## Hook mapping project for the Hummingbird theme
+
+A visual map of hooks for the Hummingbird theme has been created, [find more information about the project here]({{<relref "/8/themes/hummingbird/hooks">}}).

themes/hummingbird/hooks/_index.md

@@ -0,0 +1,12 @@
+---
+title: Hooks on Hummingbird Theme
+weight: 3
+---
+
+# Hooks on Hummingbird Theme
+
+Hummingbird theme introduced a brand new UI for the PrestaShop front office. 
+
+A visual map of hook locations was created by the Product Design team at PrestaShop. 
+
+{{% children /%}}

themes/hummingbird/hooks/cartpage.md

@@ -0,0 +1,16 @@
+---
+title: Cart page
+weight: 5
+---
+
+# Cart page
+
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FHKGzVBx5p2JaFrFocGe6p0%2FHook-Cartography%3Ftype%3Ddesign%26node-id%3D128%253A15450%26mode%3Ddev" allowfullscreen></iframe>
+
+| Hook |  |
+| --- | --- |
+| `displayShoppingCart` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayShoppingCart">}}) |
+| `displayCartExtraProductActions` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayCartExtraProductActions">}}) |
+| `displayReassurance` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayReassurance">}}) |
+| `displayShoppingCartFooter` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayShoppingCartFooter">}}) |
+| `displayCrossSellingShoppingCart` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayCrossSellingShoppingCart">}}) |

themes/hummingbird/hooks/categorypage.md

@@ -0,0 +1,13 @@
+---
+title: Category page
+weight: 3
+---
+# Category page
+
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FHKGzVBx5p2JaFrFocGe6p0%2FHook-Cartography%3Ftype%3Ddesign%26node-id%3D128%253A15444%26mode%3Ddev" allowfullscreen></iframe>
+
+| Hook |  |
+| --- | --- |
+| `displayLeftColumn` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayLeftColumn">}}) |
+| `displayHeaderCategory` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayHeaderCategory">}}) |
+| `displayFooterCategory` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayFooterCategory">}}) |

themes/hummingbird/hooks/checkoutflow.md

@@ -0,0 +1,23 @@
+---
+title: Checkout flow
+weight: 3
+---
+
+# Checkout flow
+
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FHKGzVBx5p2JaFrFocGe6p0%2FHook-Cartography%3Ftype%3Ddesign%26node-id%3D128%253A15452%26mode%3Ddev" allowfullscreen></iframe>
+
+| Hook |  |
+| --- | --- |
+| `displayPersonalInformationTop` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayPersonalInformationTop">}}) |
+| `displayCustomerAccountForm` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayCustomerAccountForm">}}) |
+| `displayCheckoutSummaryTop` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayCheckoutSummaryTop">}}) |
+| `displayReassurance` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayReassurance">}}) |
+| `displayBeforeCarrier` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayBeforeCarrier">}}) |
+| `displayAfterCarrier` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayAfterCarrier">}}) |
+| `displayPaymentTop` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayPaymentTop">}}) |
+| `displayPaymentByBinaries` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayPaymentByBinaries">}}) |
+| `displayPaymentReturn` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayPaymentReturn">}}) |
+| `displayOrderConfirmation` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayOrderConfirmation">}}) |
+| `displayRightColumn` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayRightColumn">}}) |
+| `displayOrderConfirmation2` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayOrderConfirmation2">}}) |

themes/hummingbird/hooks/connexionpage.md

@@ -0,0 +1,14 @@
+---
+title: Connexion page
+weight: 3
+---
+
+# Connexion page
+
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FHKGzVBx5p2JaFrFocGe6p0%2FHook-Cartography%3Ftype%3Ddesign%26node-id%3D128%253A15461%26mode%3Ddev" allowfullscreen></iframe>
+
+| Hook |  |
+| --- | --- |
+| `displayCustomerLoginFormAfter` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayCustomerLoginFormAfter">}}) |
+| `displayCustomerAccountFormTop` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayCustomerAccountFormTop">}}) |
+| `displayCustomerAccountForm` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayCustomerAccountForm">}}) |

themes/hummingbird/hooks/contactpage.md

@@ -0,0 +1,15 @@
+---
+title: Contact page
+weight: 3
+---
+
+# Contact page
+
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FHKGzVBx5p2JaFrFocGe6p0%2FHook-Cartography%3Ftype%3Ddesign%26node-id%3D128%253A15459%26mode%3Ddev" allowfullscreen></iframe>
+
+| Hook |  |
+| --- | --- |
+| `displayContactLeftColumn` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayContactLeftColumn">}}) |
+| `displayContactRightColumn` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayContactRightColumn">}}) |
+| `displayContactContent` | [Documentation]({{< relref "/8/modules/concepts/hooks/list-of-hooks/displayContactContent">}}) |
+| `displayGDPRContent` |  |