bluefoot - intersales ag internet commerce...drupal headless cms headless magento widgets schreiben...
TRANSCRIPT
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
@radolux
xing.com/profile/Andrej_Radonic
linkedin.com/in/andrejradonic/
www.intersales.de