12 <fieldset
class=
"fieldset">
13 <legend
class=
"legend"><span><?=
$block->escapeHtml(
__(
'Layout Updates')) ?></span></legend>
15 <div
class=
"widget-layout-updates">
16 <div
id=
"page_group_container"></div>
17 <div
class=
"actions"><?=
$block->getAddLayoutButtonHtml() ?></div>
20 <script
id=
"ie-deferred-loader" defer=
"defer" src=
"//:"></script>
25 'Magento_Ui/js/modal/alert',
27 "extjs/ext-tree-checkbox" 28 ],
function (
jQuery, mageTemplate, alert) {
32 var pageGroupTemplate =
'<div class="fieldset-wrapper page_group_container" id="page_group_container_<%- data.id %>">'+
33 '<div class="fieldset-wrapper-title">'+
34 '<label for="widget_instance[<%- data.id %>][page_group]">Display on <span class="required">*</span></label>'+
35 '<?= $block->getDisplayOnSelectHtml() ?>'+
36 '<div class="actions">'+
37 <?= $this->helper(
'Magento\Framework\Json\Helper\Data')->jsonEncode(
$block->getRemoveLayoutButtonHtml()) ?> +
40 '<div class="fieldset-wrapper-content">'+
41 <?php
foreach (
$block->getDisplayOnContainers() as $container): ?>
42 '<div class="no-display <?= $block->escapeJs($container['code
']) ?> group_container" id="<?= $block->escapeJs($container['name']) ?>_<%- data.id %>">'+
43 '<input disabled="disabled" type="hidden" class="container_name" name="__[container_name]" value="widget_instance[<%- data.id %>][<?= $block->escapeJs($container['name']) ?>]" />'+
44 '<input disabled="disabled" type="hidden" name="widget_instance[<%- data.id %>][<?= $block->escapeJs($container['name']) ?>][page_id]" value="<%- data.page_id %>" />'+
45 '<input disabled="disabled" type="hidden" class="layout_handle_pattern" name="widget_instance[<%- data.id %>][<?= $block->escapeJs($container['name']) ?>][layout_handle]" value="<?= $block->escapeJs($container['layout_handle
']) ?>" />'+
46 '<table class="data-table">'+
47 '<col width="200" />'+
50 '<th><label><?= $block->escapeJs(__('%1
', $container['label
'])) ?></label></th>'+
51 '<th><label><?= $block->escapeJs(__('Container
')) ?> <span class="required">*</span></label></th>'+
52 '<th><label><?= $block->escapeJs(__('Template
')) ?></label></th>'+
58 '<input disabled="disabled" type="radio" class="radio for_all" id="all_<?= $block->escapeJs($container['name']) ?>_<%- data.id %>" name="widget_instance[<%- data.id %>][<?= $block->escapeJs($container['name']) ?>][for]" value="all" onclick="WidgetInstance.togglePageGroupChooser(this)" checked="checked" /> '+
59 '<label for="all_<?= $block->escapeJs($container['name']) ?>_<%- data.id %>"><?= $block->escapeJs(__('All
')) ?></label><br />'+
60 '<input disabled="disabled" type="radio" class="radio for_specific" id="specific_<?= $block->escapeJs($container['name']) ?>_<%- data.id %>" name="widget_instance[<%- data.id %>][<?= $block->escapeJs($container['name']) ?>][for]" value="specific" onclick="WidgetInstance.togglePageGroupChooser(this)" /> '+
61 '<label for="specific_<?= $block->escapeJs($container['name']) ?>_<%- data.id %>"><?= $block->escapeJs(__('Specific %1
', $container['label
'])) ?></label>'+
64 '<div class="block_reference_container">'+
65 '<div class="block_reference"></div>'+
69 '<div class="block_template_container">'+
70 '<div class="block_template"></div>'+
76 '<div class="no-display chooser_container" id="<?= $block->escapeJs($container['name']) ?>_ids_<%- data.id %>">'+
77 '<input disabled="disabled" type="hidden" class="is_anchor_only" name="widget_instance[<%- data.id %>][<?= $block->escapeJs($container['name']) ?>][is_anchor_only]" value="<?= $block->escapeJs($container['is_anchor_only
']) ?>" />'+
78 '<input disabled="disabled" type="hidden" class="product_type_id" name="widget_instance[<%- data.id %>][<?= $block->escapeJs($container['name']) ?>][product_type_id]" value="<?= $block->escapeJs($container['product_type_id
']) ?>" />'+
80 '<input disabled="disabled" type="text" class="input-text entities" name="widget_instance[<%- data.id %>][<?= $block->escapeJs($container['name']) ?>][entities]" value="<%- data.<?= $block->escapeJs($container['name']) ?>_entities %>" readonly="readonly" /> ' +
81 '<a class="widget-option-chooser" href="javascript:void(0)" onclick="WidgetInstance.displayEntityChooser(\'<?= $block->escapeJs($container['code
']) ?>\', \'<?= $block->escapeJs($container['name']) ?>_ids_<%- data.id %>\')" title="<?= $block->escapeJs(__('Open Chooser
')) ?>">' +
82 '<img src="<?= $block->escapeUrl($block->getViewFileUrl('images/rule_chooser_trigger.gif
')) ?>" alt="<?= $block->escapeJs(__('Open Chooser
')) ?>" />' +
84 '<a href="javascript:void(0)" onclick="WidgetInstance.hideEntityChooser(\'<?= $block->escapeJs($container['name']) ?>_ids_<%- data.id %>\')" title="<?= $block->escapeJs(__('Apply
')) ?>">' +
85 '<img src="<?= $block->escapeUrl($block->getViewFileUrl('images/rule_component_apply.gif
')) ?>" alt="<?= $block->escapeJs(__('Apply
')) ?>" />' +
88 '<div class="chooser"></div>'+
92 '<div class="no-display all_pages group_container" id="all_pages_<%- data.id %>">'+
93 '<input disabled="disabled" type="hidden" class="container_name" name="__[container_name]" value="widget_instance[<%- data.id %>][all_pages]" />'+
94 '<input disabled="disabled" type="hidden" name="widget_instance[<%- data.id %>][all_pages][page_id]" value="<%- data.page_id %>" />'+
95 '<input disabled="disabled" type="hidden" class="layout_handle_pattern" name="widget_instance[<%- data.id %>][all_pages][layout_handle]" value="default" />'+
96 '<input disabled="disabled" type="hidden" class="for_all" name="widget_instance[<%- data.id %>][all_pages][for]" value="all" />'+
97 '<table class="data-table">'+
98 '<col width="200" />'+
101 '<th><label><?= $block->escapeJs(__('Container
')) ?> <span class="required">*</span></label></th>'+
102 '<th><label><?= $block->escapeJs(__('Template
')) ?></label></th>'+
109 '<div class="block_reference_container">'+
110 '<div class="block_reference"></div>'+
114 '<div class="block_template_container">'+
115 '<div class="block_template"></div>'+
123 '<div class="no-display ignore-validate pages group_container" id="pages_<%- data.id %>">'+
124 '<input disabled="disabled" type="hidden" class="container_name" name="__[container_name]" value="widget_instance[<%- data.id %>][pages]" />'+
125 '<input disabled="disabled" type="hidden" name="widget_instance[<%- data.id %>][pages][page_id]" value="<%- data.page_id %>" />'+
126 '<input disabled="disabled" type="hidden" class="for_all" name="widget_instance[<%- data.id %>][pages][for]" value="all" />'+
127 '<table class="data-table">'+
128 '<col width="200" />'+
131 '<th><label><?= $block->escapeJs(__('Page
')) ?> <span class="required">*</span></label></th>'+
132 '<th><label><?= $block->escapeJs(__('Container
')) ?> <span class="required">*</span></label></th>'+
133 '<th><label><?= $block->escapeJs(__('Template
')) ?></label></th>'+
138 '<td><?= /* @noEscape */ $block->getLayoutsChooser() ?></td>'+
140 '<div class="block_reference_container">'+
141 '<div class="block_reference"></div>'+
145 '<div class="block_template_container">'+
146 '<div class="block_template"></div>'+
154 '<div class="no-display ignore-validate pages group_container" id="page_layouts_<%- data.id %>">'+
155 '<input disabled="disabled" type="hidden" class="container_name" name="__[container_name]" value="widget_instance[<%- data.id %>][page_layouts]" />'+
156 '<input disabled="disabled" type="hidden" name="widget_instance[<%- data.id %>][page_layouts][page_id]" value="<%- data.page_id %>" />'+
157 '<input disabled="disabled" type="hidden" class="for_all" name="widget_instance[<%- data.id %>][page_layouts][for]" value="all" />'+
158 '<table class="data-table">'+
159 '<col width="200" />'+
162 '<th><label><?= $block->escapeJs(__('Page
')) ?> <span class="required">*</span></label></th>'+
163 '<th><label><?= $block->escapeJs(__('Container
')) ?> <span class="required">*</span></label></th>'+
164 '<th><label><?= $block->escapeJs(__('Template
')) ?></label></th>'+
169 '<td><?= /* @noEscape */ $block->getPageLayoutsPageChooser() ?></td>'+
171 '<div class="block_reference_container">'+
172 '<div class="block_reference"></div>'+
176 '<div class="block_template_container">'+
177 '<div class="block_template"></div>'+
188 window.pageGroupTemplate = pageGroupTemplate;
190 var WidgetInstance = {
191 pageGroupTemplate : pageGroupTemplate,
192 pageGroupContainerId :
'page_group_container',
194 activePageGroups : $H({}),
197 addPageGroup :
function(data) {
198 if (this.pageGroupTemplate && (pageGroupContainer = $(this.pageGroupContainerId))) {
204 data.id = this.count++;
205 if (data[data.group +
'_entities']) {
206 var selected_entities = data[data.group +
'_entities'].split(
',');
207 if (selected_entities.length > 0) {
208 for (var i = 0; i < selected_entities.length; i++) {
209 this.addProductItemToSelection(data.group +
'_ids_' + data.id, selected_entities[i]);
213 pageGroupTemplateObj = mageTemplate(this.pageGroupTemplate);
214 Element.insert(pageGroupContainer, {
215 'bottom': pageGroupTemplateObj({
220 pageGroup = $(data.group+
'_'+data.id);
222 additional.selectedLayoutHandle = data.layout_handle;
223 additional.selectedBlock = data.block;
224 additional.selectedTemplate = data.template;
225 additional.position = data.position;
226 additional.for_value = data.for_value;
227 additional.template =
'';
228 if (data.group ==
'pages' || data.group ==
'page_layouts') {
229 layoutSelect = pageGroup.down(
'select#layout_handle');
231 for (var i = 0; i < layoutSelect.options.length; i++) {
232 if (layoutSelect.options[i].value == data.layout_handle) {
233 layoutSelect.options[i].selected =
true;
239 if ($(this.pageGroupContainerId+
'_'+data.id)) {
240 selectGroupElm = $(this.pageGroupContainerId+
'_'+data.id).down(
'select.page_group_select');
241 for (var i = 0; i < selectGroupElm.options.length; i++) {
242 if (selectGroupElm.options[i].value == data.group) {
243 selectGroupElm.options[i].selected =
true;
248 forElm = pageGroup.down(
'input.for_'+data.for_value);
254 pageGroup.down(
'input.for_all').defaultChecked =
false;
255 forElm.defaultChecked =
true;
256 forElm.checked =
true;
257 this.togglePageGroupChooser(forElm);
259 this.displayPageGroup(pageGroup, additional);
263 removePageGroup :
function(element) {
264 container = element.up(
'div.page_group_container');
269 addProductItemToSelection:
function(groupId, item) {
270 if (undefined == this.selectedItems[groupId]) {
271 this.selectedItems[groupId] = $H({});
273 if (!isNaN(parseInt(item))) {
274 this.selectedItems[groupId].set(item, 1);
277 removeProductItemFromSelection:
function(groupId, item) {
278 if (undefined !== this.selectedItems[groupId]) {
279 this.selectedItems[groupId].unset(item);
282 showBlockContainer :
function(container) {
283 container = $(container);
285 container.removeClassName(
'no-display');
286 container.removeClassName(
'ignore-validate');
287 container.up(
'.fieldset-wrapper').addClassName(
'opened');
288 container.select(
'input',
'select').each(
function(element) {
289 $(element).removeAttribute(
'disabled');
294 hideBlockContainer :
function(container) {
295 container = $(container);
297 container.addClassName(
'no-display');
298 container.addClassName(
'ignore-validate');
299 container.select(
'input',
'select').each(
function(element) {
300 $(element).writeAttribute(
'disabled',
'disabled');
305 displayPageGroup :
function(container, additional) {
306 container = $(container);
310 if (activePageGroupId = this.activePageGroups.get(container.up(
'div.page_group_container').id)) {
311 this.hideBlockContainer(activePageGroupId);
313 this.activePageGroups.set(container.up(
'div.page_group_container').id, container.id);
314 this.showBlockContainer(container);
315 blockContainer = container.down(
'div.block_reference');
316 if (blockContainer && blockContainer.innerHTML ==
'') {
318 if (layoutHandleField = container.down(
'input.layout_handle_pattern')) {
319 layoutHandle = layoutHandleField.value;
320 }
else if (additional.selectedLayoutHandle) {
321 layoutHandle = additional.selectedLayoutHandle;
323 this.loadSelectBoxByType(
'block_reference', container, layoutHandle, additional);
325 this.loadSelectBoxByType(
'block_template', container, additional.selectedBlock, additional);
327 displayEntityChooser :
function(type, chooser, additional) {
331 if (type ==
'categories') {
332 additional.url =
'<?= $block->escapeUrl($block->getCategoriesChooserUrl()) ?>';
333 additional.post_parameters = $H({
'is_anchor_only':$(chooser).down(
'input.is_anchor_only').value});
334 }
else if (type ==
'products') {
335 additional.url =
'<?= $block->escapeUrl($block->getProductsChooserUrl()) ?>';
336 additional.post_parameters = $H({
'product_type_id':$(chooser).down(
'input.product_type_id').value});
338 if (chooser && additional) {
339 this.displayChooser(chooser, additional);
342 hideEntityChooser :
function(chooser) {
343 chooser = $(chooser).down(
'div.chooser');
345 chooser.addClassName(
'no-display');
349 displayChooser :
function(chooser, additional) {
350 chooser = $(chooser).down(
'div.chooser');
351 entities = chooser.up(
'div.chooser_container').down(
'input[type="text"].entities').value;
352 postParameters = $H({selected:entities});
355 if (additional.url) url = additional.url;
356 if (additional.post_parameters) {
357 additional.post_parameters.each(
function(pair){
358 postParameters.set(pair.key,pair.value);
362 if (chooser && url) {
363 if (chooser.innerHTML ==
'') {
364 new Ajax.Request(url, {
366 parameters: postParameters,
367 onSuccess:
function(transport) {
369 if (transport.responseText) {
370 Element.insert(chooser, transport.responseText);
371 chooser.removeClassName(
'no-display');
376 content:
'Error occurs during loading chooser.' 382 chooser.removeClassName(
'no-display');
387 checkProduct :
function(event) {
388 var elm =
event.memo.element,
389 container =
event.target.up(
'div.chooser').up(
'div.chooser_container'),
390 selectionId = container.id,
391 entitiesElm = container.down(
'input[type="text"].entities');
393 this.addProductItemToSelection(selectionId, elm.value);
395 this.removeProductItemFromSelection(selectionId, elm.value);
398 entitiesElm.value = this.selectedItems[selectionId].keys().join(
',');
401 checkCategory :
function(event) {
402 node =
event.memo.node;
403 container =
event.target.up(
'div.chooser_container');
404 value = container.down(
'input[type="text"].entities').value.strip();
405 if (node.attributes.checked) {
408 if (-1 == ids.indexOf(node.id)) {
410 container.down(
'input[type="text"].entities').value = ids.join(
',');
413 ids =
value.split(
',');
414 while (-1 != ids.indexOf(node.id)) {
415 ids.splice(ids.indexOf(node.id), 1);
416 container.down(
'input[type="text"].entities').value = ids.join(
',');
420 togglePageGroupChooser :
function(element) {
421 element = $(element);
422 if (element && (chooser = element.up(
'div.group_container').down(
'div.chooser_container'))) {
423 if (element.value ==
'all') {
424 chooser.addClassName(
'no-display');
427 chooser.removeClassName(
'no-display');
432 loadSelectBoxByType :
function (type, element,
value, additional) {
436 if (element && (containerElm = element.down(
'div.'+type))) {
440 if (type ==
'block_reference') {
441 url =
'<?= $block->escapeUrl($block->getBlockChooserUrl()) ?>';
442 if (additional.selectedBlock) {
443 selected = additional.selectedBlock;
445 parameters.layout =
value;
446 }
else if (type ==
'block_template') {
447 url =
'<?= $block->escapeUrl($block->getTemplateChooserUrl()) ?>';
448 if (additional.selectedTemplate) {
449 selected = additional.selectedTemplate;
451 parameters.block =
value;
453 parameters.selected = selected;
455 new Ajax.Request(url, {
457 parameters: parameters,
458 containerElm: containerElm,
459 onSuccess:
function(transport) {
460 containerElm = transport.request.options.containerElm;
462 if (transport.responseText) {
463 containerElm.update(transport.responseText);
464 formElm = containerElm.down(
'select, input[type="hidden"]');
466 formElm.name = element.down(
'input.container_name').value+
'['+formElm.name+
']';
471 content:
'Error occurs during loading chooser.' 481 window.WidgetInstance = WidgetInstance;
484 <?php
foreach (
$block->getPageGroups() as $pageGroup): ?>
485 WidgetInstance.addPageGroup(<?= $pageGroup ?>);
487 Event.observe(document,
'product:changed',
function(event){
488 WidgetInstance.checkProduct(event);
490 Event.observe(document,
'node:changed',
function(event){
491 WidgetInstance.checkCategory(event);
493 Event.observe(document,
'category:beforeLoad',
function(event) {
494 container =
event.target.up(
'div.chooser_container');
495 value = container.down(
'input[type="text"].entities').value.strip();
496 event.memo.treeLoader.baseParams.selected =
value;
$block setTitle( 'CMS Block Title') -> setIdentifier('fixture_block') ->setContent('< h1 >Fixture Block Title</h1 >< a href=" store url</a><p> Config value
jQuery('.store-switcher .dropdown-menu li a').each(function()