BLUEFOOT

Andrej Radonic

7. Mai 2018

SULA NEBOUXII

Blaue Füße durch

• Carotinoide

• „Collagen-Fasern in den Schwimmhäuten, die Interferenzerscheinungen verursachen, als deren Folge sich die Lichtwellen so überlagern, dass nur der blaue Spektralbereich optimal reflektiert wird“

Engl. Blue-footed boobyDt. Blaufußtölpel

Foto: flickr.com/photos/petebackwards/

PAGE BUILDER

WYSIWYG??

WYSIWYG??

Einfach! Sehen!

Einheitlich!Blog

VerzahnungContent + Commerce

Umfrage

VideoWebinar

Mage erweitern

WordpressTYPO3Drupal

Headless CMS

Headless Magento

Widgets schreiben

devusr

Einfach! Sehen!

Einheitlich!Blog

VerzahnungContent + Commerce

Interaktive Elemente

Integriert&

erweiterbar GeringereKomplexität

SchnellereUmsetzung

devusr

BLUEFOOT FACTS

Bestandteil von Magento Commerce

Ohne zusätzlichen Kosten

Installation als Extension

Ersetzt den WYSIWYG Editor

Drag & Drop

Liefert ca. 20 vorgefertigte Page Builder Block Types

BLUEFOOT IST ERWEITERBAR DURCH

Eigene Block Types

• Attribute

• Renderer

Eigene Templates für Front-/Backend

• Block Templates

Widgets

• Javascript: Google Map, Search…

Block Konfiguration

Block Groups

dev

ATTRIBUT{ "attribute_code": "main_title",

"attribute_model": null,

"backend_model": null,

"backend_type": "varchar",

"backend_table": null,

"frontend_model": null,

"frontend_input": "text",

"frontend_label": ["Title"],

"frontend_class": null,

"source_model": null,

"is_required": "1",

"is_user_defined": "1",

"is_unique": "0",

"note": "Enter the Title here.",

"is_global": "0",

"is_wysiwyg_enabled": "0",

"is_visible": "1",

"content_scope": "0",

"frontend_input_renderer": null,

"widget": null,

"data_model": null,

"template": null,

"list_template": null,

"additional_data": null,

"entity_allowed_block_type": false

},

Wichtig: is_user_defined=1 für eigene Attribute

BLOCKDEFINITION{ "identifier": "quote",

"name": "01 Quote", "content_type": "block", "description": "WYSIWYG block", "url_key_prefix": null, "preview_field": null, "renderer": "core_default", "item_view_template": "quote", "list_template": null, "list_item_template": null, "item_layout_update_xml": null, "list_layout_update_xml": null, "singular_name": "01 Quote", "plural_name": null, "include_in_sitemap": "0",

…"show_in_page_builder": "1",

…"group": "quotes", "attribute_data": { "attributes": [

"main_textarea", "link_url_text", "link_url", "secondary_textarea"

], "groups": [

{ "attribute_group_name": "Content", "sort_order": "1", "default_id": "0", "attributes": [ {

"attribute_code": "main_textarea", "sort_order": "2"

}, {

"attribute_code": "link_url_text", "sort_order": "4"

}, {

"attribute_code": "link_url", "sort_order": "6"

}, …

] }

] }

}

ADMINHTML<div class="bluefoot">

<div class="quote">

<p>{{{ main_textarea }}}</p>

<p><span>{{{ secondary_textarea }}}</span></p>

<a href="{{{ link_url }}}"><span>{{{ link_url_text }}}</span></a>

</div>

</div>

FRONTEND TEMPLATE<?php

/**

* Textarea Template

* @var $this \Gene\BlueFoot\Block\Entity\PageBuilder\Block\AbstractBlock

*/

$_entity = $this->getEntity();

$_urlPrefix = $block->getMediaUrl() . 'gene-cms';

?>

<div class="bluefoot">

<div class="quote">

<p><?php echo $_entity->getData('main_textarea'); ?></p>

<p><span><?php echo $_entity->getData('secondary_textarea'); ?></span></p>

<a href="<?php echo $_entity->getData('link_url'); ?>">

<span><?php echo $_entity->getData('link_url_text'); ?>

</span>

</a>

</div>

</div>

PAGEBUILDER.XML

<template name="quote" file=

"InterSales_FipaBluefoot::pagebuilder/blocks/quote/quote.phtml"

/>

Verknüpfung zw. dem Page Builder Block und den Frontend / Adminhtml Templates

IDEEN FÜR ERWEITERUNGEN

Blog

Tagging

Strukturierter Content, z.B. News

Form builder

Menu builder

Content aus Drittsystemen, z.B. TYPO3, per API

UND? IST DAS MAGENTO CMS DURCH BLUEFOOTJETZT GANZ TOLL?

JA, ABER …Bislang nicht für die Community Edition verfügbar

Keine Integration mit Magento Scheduler & Customer Segmentation

Keine Behandlung unterschiedlicher Breakpoints möglich

Page Builder Elemente können nicht geschachtelt werden, z.B. für TABS

Keine Verwendung von Standard Magento Widgets

Es sind keine “Content Lists” vorgesehen

Bilder-Upload nur vom lokalen Rechner, keine Sichtbarkeit des /media-Ordners

Kein Export/Import der Definitionen und des Contents, dadurch „Transport“ sowie CI/CD erschwert

AUSBLICK AUF „PAGEBUILDER“

GA mit Magento 2.3.1 – September 2018?

Dann auch für Open Source Edition als (kostenpflichtige) Extension

UX improvements

Inline text editing and drag-in images

Integration with Magento Scheduler and Customer Segmentation

Storefront content preview

Better extensibility

Import/Export facility

Migration tool BluefootPagebuilder

FAZIT

Komfortabler Seiteneditor

Auch komplexere Layouts ohne Programmierung

„Fast- WYSIWYG“

In Magento integriert

Einfach erweiterbar

= Guter erster Schritt

= Testen, Einsetzen, Verbessern!

TRY IT!

Demo: https://www.bluefootcms.com/demo

Pagebuilder Early Access Program (EAP): https://drive.google.com/file/d/1eD1GQCKy87eGQNsEJYfXA6q8MC8Y1YdD

Pagebuilder Preview: https://youtube.com/watch?v=crrH0nBWYEg

GitHub Doku: https://github.com/genecommerce/Blue-Foot-Documentation/

Slides: https://de.slideshare.net/JohnHughes225/harnessing-the-power-of-blue-foot-for-developers

KONTAKT

ar@intersales.de

@radolux

xing.com/profile/Andrej_Radonic

linkedin.com/in/andrejradonic/

www.intersales.de