### Install Topwire Extension Source: https://topwire.dev/quickstart/tutorial/async-frame Installs the Topwire extension using Composer. Ensure you are within your TYPO3 project directory. ```bash # Install Topwire within your TYPO3 project composer require topwire/topwire:^1.0@dev ``` -------------------------------- ### Render Extbase Plugin in Fluid Template Source: https://topwire.dev/quickstart/tutorial/plugin-rendering Use Topwire's context and render view helpers to display an Extbase plugin's output within a Fluid template. This example renders the 'CurrentDate' plugin from the 'TopwireExamples' extension. ```html ``` -------------------------------- ### Using Turbo Frames in Custom Plugins (Counter Demo) Source: https://topwire.dev/features Example of using Turbo Frames within custom plugins to divide parts of the plugin into individual sections. This snippet shows a basic counter with decrement functionality. ```html Counter Demo decrement ``` -------------------------------- ### Fluid View Helper for Download Link Source: https://topwire.dev/example/downloads This Fluid template snippet shows how to create a link to an Extbase action that returns a JSON download. It uses `topwire:context.plugin` to specify the plugin context and `f:link.action` to generate the download link, including `topwire: {type: 'context'}` for proper handling. ```html

Link to a download action in your plugin

Download JSON ``` -------------------------------- ### Using Turbo Frames in Custom Plugins Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=10 Demonstrates how to divide parts of a custom TYPO3 plugin into individual sections, each wrapped in a Turbo Frame for dynamic updates within the plugin's interface. ```html
decrement
``` -------------------------------- ### Asynchronous Loading of Turbo Frame Content with Topwire Source: https://topwire.dev/features Configure a Turbo Frame to load its content asynchronously. This is useful for content that needs to be up-to-date and cannot be cached. A placeholder is shown while the content loads. ```html
``` -------------------------------- ### Configure Topwire TypoScript Source: https://topwire.dev/quickstart/tutorial/async-frame Includes the Topwire JavaScript library as a module, enabling asynchronous loading, defer, and disabling compression and concatenation. ```typoscript page.includeJSLibs.topwire = EXT:topwire/Resources/Public/JavaScript/topwire.js page.includeJSLibs.topwire.type = module page.includeJSLibs.topwire.async = 1 page.includeJSLibs.topwire.defer = 1 page.includeJSLibs.topwire.disableCompression = 1 page.includeJSLibs.topwire.excludeFromConcatenation = 1 ``` -------------------------------- ### Using Turbo Frames in Custom Plugins Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=6 Demonstrates how to divide parts of a custom TYPO3 plugin into individual sections wrapped in Turbo Frames within its Fluid templates. ```html ``` -------------------------------- ### Render Plugin in Fluid Template with Topwire View Helpers Source: https://topwire.dev/features Use Topwire's context view helpers to render a specific plugin (extension, plugin name, action, and section) within a Fluid template. The render view helper is used to output the plugin content. ```html ``` -------------------------------- ### Using Turbo Frames in Custom Plugins Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=3 Demonstrates how to divide parts of a custom TYPO3 plugin into individual sections wrapped in Turbo Frames, enhancing user experience by preventing full page reloads. ```html
``` -------------------------------- ### Render Plugin Content in Fluid Template Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=2 Use Topwire's context view helpers in Fluid templates to render plugins. Specify the extension, plugin name, and optionally the action or a Fluid template section to be rendered. ```html ``` -------------------------------- ### Render Plugin Content in Fluid Template with Turbo Frames Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=7 Use Topwire's context view helpers in Fluid templates to render specific plugins or actions within a Turbo Frame. The `wrapResponse="true"` attribute ensures the response is wrapped in a frame. ```html ``` ```html ``` -------------------------------- ### Wrap Content in a Contextual Frame (Fluid) Source: https://topwire.dev/quickstart/tutorial/context-frame This Fluid template snippet demonstrates how to wrap a Turbo Frame with a contextual plugin view helper. This ensures only the plugin's HTML is rendered, not the full page. ```html ``` -------------------------------- ### Extbase Controller for Redirecting to Topwire Context Source: https://topwire.dev/features An Extbase controller action that generates a URI for a Topwire context request and issues a redirect. Used to link to Topwire-enabled actions from within PHP code. ```php uriBuilder ->reset() ->setArguments([ 'topwire' => [ 'type' => 'context', ] ]) ->uriFor('json'); return new RedirectResponse($uri, 303); } } ``` -------------------------------- ### Render Content Element in a Frame with Topwire Source: https://topwire.dev/features Use Topwire's view helpers to render a specific TYPO3 content element (by UID) within a Turbo Frame. The content element's response will be wrapped in the specified frame ID. ```html ``` -------------------------------- ### Render Content Element in a Turbo Frame with Topwire Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=9 Embed any TYPO3 content element into a Fluid template and scope it within a Turbo Frame using Topwire's view helpers. Specify the content element's UID and a frame ID. The `wrapResponse="true"` attribute is used to wrap the response. ```html ``` -------------------------------- ### Load Frame Contents Asynchronously with Placeholder Source: https://topwire.dev/quickstart/tutorial/async-frame Renders a frame that loads plugin content asynchronously. The HTML inside the frame acts as a loading placeholder, enabling page caching. ```fluid

Hello friend!

Tomorrow is: let me calculate that...

 ``` -------------------------------- ### Extbase Controller for JSON Response Source: https://topwire.dev/features An Extbase controller action that returns a JSON response with a Content-Disposition header for file download. Used for serving JSON data from Extbase. ```php 'world', ]; return $this->jsonResponse(json_encode($data, JSON_THROW_ON_ERROR)) ->withHeader( 'Content-Disposition', 'attachment; filename="hello.json"' ); } } ``` -------------------------------- ### Add Turbo Frame to Third-Party Plugin with Topwire Source: https://topwire.dev/features Render a third-party plugin within a Turbo Frame using Topwire's view helpers. The response from the plugin will be wrapped in the specified frame ID. ```html ``` -------------------------------- ### Wrap Content with Turbo Frame in Fluid Source: https://topwire.dev/quickstart/tutorial/only-frame Use the Topwire Turbo Frame view helper in a Fluid template to wrap content. This captures links within the frame, preventing full page reloads and fetching content via XHR, updating only the frame's content. ```html ``` -------------------------------- ### Render TypoScript with Fluid Source: https://topwire.dev/features Renders TypoScript content directly or asynchronously using Topwire's context view helpers. Useful for content that cannot be cached with the rest of the page. ```html Loading ... ``` -------------------------------- ### Load TypoScript Content Asynchronously Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=7 Loads a TypoScript path asynchronously after the full page has loaded. The HTML content acts as a temporary placeholder while loading. ```html Loading ... ``` -------------------------------- ### TypoScript for Topwire Plugin Link Source: https://topwire.dev/features Defines a TypoScript object that generates a URI for a Topwire plugin action. Used to link to specific plugin actions from TypoScript. ```typoscript lib.topwireLinkExample = TEXT lib.topwireLinkExample.typolink.parameter.data = page:uid lib.topwireLinkExample.typolink.topwire.type = plugin lib.topwireLinkExample.typolink.topwire.extensionName = TopwireExamples lib.topwireLinkExample.typolink.topwire.pluginName = Json ``` -------------------------------- ### Turbo Frame with Fluid View Source: https://topwire.dev/features Embeds a Fluid partial within a Turbo Frame for dynamic content updates. Use when content needs to be updated asynchronously. ```html ``` -------------------------------- ### Wrap Content Elements in Turbo Frame (TypoScript) Source: https://topwire.dev/features Configure Typo3 to wrap content elements in a Turbo Frame when a specific checkbox is enabled in the content element's settings. Optionally specify a custom frame ID. ```TypoScript tt_content.stdWrap.turboFrameWrap.field = tx_turbo_wrap_in_frame tt_content.stdWrap.turboFrameWrap.frameId.field = tx_turbo_frame_id ``` -------------------------------- ### Render Content Element in a Turbo Frame Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=2 Embed a specific TYPO3 content element into a Fluid template and scope it within a Turbo Frame. This allows reusing content elements in different contexts and managing their updates via Turbo Frames. The response is wrapped for frame compatibility. ```html ``` -------------------------------- ### Embed TypoScript Content Directly Source: https://topwire.dev/features?tx_counter%5Bcounter%5D=7 Renders a TypoScript path directly within the Fluid template. Use this for content that should be embedded immediately. ```html ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.