TYPO3/Add basket to navigation

From Aimeos documentation

TYPO3
Other languages:
English 100%


Most e-commerce sites show a small basket at the top right corner of each page. The Aimeos TYPO3 extension provides a plug-in for a small basket too, containing only the number of products and the total value. You can either add this basket plug-in by

  • placing the plug-in inside a column of a backend page layout
  • assigning the plug-in output to a TypoScript object used in your Fluid layout

Using a Typoscript object for the basket doesn't require a column in the backend page layout which easier understandable by editors as long as they shouldn't be able to place the basket plug-in themselves.

Assign to a TypoScript object

The following TypoScript code must be placed in a TypoScript setup template. The best place would be a .ts file in your ./fileadmin/ directory that is included in the setup section of your site. For example, create a ./fileadmin/setup.ts file with the following content:

  1. lib.navigation.basket = COA
  2. lib.navigation.basket.10 = USER
  3. lib.navigation.basket.10 {
  4.     # userFunc = tx_extbase_core_bootstrap->run
  5.     userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
  6.     vendorName = Aimeos
  7.     extensionName = Aimeos
  8.     pluginName = basket-small
  9.     controller = Basket
  10.     action = small
  11.     settings =< plugin.tx_aimeos.settings
  12. }

Afterwards, you have to add an include statement in the WEB::Template -> Setup section of your root page:

  1. <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/setup.ts">
  2.  
  3. plugin.tx_aimeos.settings.client.html.basket.standard.url.target = <page ID of your basket page>
  4. plugin.tx_aimeos.settings.client.jsonapi.url.target = <page ID of your JSON API page>

You can find more about TypoScript includes in the documentation of TYPO3. Don't forget to replace the placeholder in the last line with page ID of your basket page (without the angle brackets!). Otherwise, the small basket won't link to your basket page. Afterwards, the output of the plug-in is available as cObject in your Fluid templates:

  1. <f:cObject typoscriptObjectPath="lib.navigation.basket" />

Output in bootstrap navigation bar

The TYPO3 bootstrap_package makes it very easy to create a site using of a responsive web layout. To add the small basket to the navigation bar, you have to modify the navigation partial. Instead of changing the file in the bootstrap_package directly, you should create your own extension and add your version of this file there:

  • Create a new extension using the extension builder
  • Copy the ./Resources/Private/Partials/Page/ directory to your extension using the same directory structure
  • Adapt the navigation partial in ./Resources/Private/Partials/Page/Navigation/Main.html
  • Add the Fluid condition as the first child element inside the <div class="container"> element:
  1. <div class="container">
  2.     <f:if condition="{f:cObject(typoscriptObjectPath:'lib.navigation.basket')}">
  3.         <f:cObject typoscriptObjectPath="lib.navigation.basket" />
  4.     </f:if>
  5.     ...
  6. </div>

Afterwards, add this TypoScript configuration in WEB::Template -> Constants telling the bootstrap_package to look for the partials inside your extension:

  1. page.fluidtemplate.partialRootPath = EXT:<your extension name>/Resources/Private/Partials/Page/

Now the small basket should be displayed in the navigation bar on top of your site and you can start styling the HTML. A good starting point is to add a float: right; to the basket so it will be displayed at the very right of the menu.