Magento 2 Documentation  2.3
Documentation for Magento 2 CMS v2.3 (December 2018)
layout.phtml
Go to the documentation of this file.
1 <?php
7 // @codingStandardsIgnoreFile
8 
11 ?>
12 <fieldset class="fieldset">
13  <legend class="legend"><span><?= $block->escapeHtml(__('Layout Updates')) ?></span></legend>
14  <br />
15  <div class="widget-layout-updates">
16  <div id="page_group_container"></div>
17  <div class="actions"><?= $block->getAddLayoutButtonHtml() ?></div>
18  </div>
19 </fieldset>
20 <script id="ie-deferred-loader" defer="defer" src="//:"></script>
21 <script>
22 require([
23  'jquery',
24  'mage/template',
25  'Magento_Ui/js/modal/alert',
26  "prototype",
27  "extjs/ext-tree-checkbox"
28 ], function (jQuery, mageTemplate, alert) {
29 
30 //<![CDATA[
31 
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  <?= /* @noEscape */ $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getRemoveLayoutButtonHtml()) ?> +
38  '</div>'+
39  '</div>'+
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" />'+
48  '<thead>'+
49  '<tr>'+
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>'+
53  '</tr>'+
54  '</thead>'+
55  '<tbody>'+
56  '<tr>'+
57  '<td>'+
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" />&nbsp;'+
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)" />&nbsp;'+
61  '<label for="specific_<?= $block->escapeJs($container['name']) ?>_<%- data.id %>"><?= $block->escapeJs(__('Specific %1', $container['label'])) ?></label>'+
62  '</td>'+
63  '<td>'+
64  '<div class="block_reference_container">'+
65  '<div class="block_reference"></div>'+
66  '</div>'+
67  '</td>'+
68  '<td>'+
69  '<div class="block_template_container">'+
70  '<div class="block_template"></div>'+
71  '</div>'+
72  '</td>'+
73  '</tr>'+
74  '</tbody>'+
75  '</table>'+
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']) ?>" />'+
79  '<p>' +
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" />&nbsp;' +
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')) ?>" />' +
83  '</a>&nbsp;' +
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')) ?>" />' +
86  '</a>' +
87  '</p>'+
88  '<div class="chooser"></div>'+
89  '</div>'+
90  '</div>'+
91 <?php endforeach; ?>
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" />'+
99  '<thead>'+
100  '<tr>'+
101  '<th><label><?= $block->escapeJs(__('Container')) ?> <span class="required">*</span></label></th>'+
102  '<th><label><?= $block->escapeJs(__('Template')) ?></label></th>'+
103  '<th>&nbsp;</th>'+
104  '</tr>'+
105  '</thead>'+
106  '<tbody>'+
107  '<tr>'+
108  '<td>'+
109  '<div class="block_reference_container">'+
110  '<div class="block_reference"></div>'+
111  '</div>'+
112  '</td>'+
113  '<td>'+
114  '<div class="block_template_container">'+
115  '<div class="block_template"></div>'+
116  '</div>'+
117  '</td>'+
118  '<td>&nbsp;</td>'+
119  '</tr>'+
120  '</tbody>'+
121  '</table>'+
122 '</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" />'+
129  '<thead>'+
130  '<tr>'+
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>'+
134  '</tr>'+
135  '</thead>'+
136  '<tbody>'+
137  '<tr>'+
138  '<td><?= /* @noEscape */ $block->getLayoutsChooser() ?></td>'+
139  '<td>'+
140  '<div class="block_reference_container">'+
141  '<div class="block_reference"></div>'+
142  '</div>'+
143  '</td>'+
144  '<td>'+
145  '<div class="block_template_container">'+
146  '<div class="block_template"></div>'+
147  '</div>'+
148  '</td>'+
149  '<td>&nbsp;</td>'+
150  '</tr>'+
151  '</tbody>'+
152  '</table>'+
153 '</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" />'+
160  '<thead>'+
161  '<tr>'+
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>'+
165  '</tr>'+
166  '</thead>'+
167  '<tbody>'+
168  '<tr>'+
169  '<td><?= /* @noEscape */ $block->getPageLayoutsPageChooser() ?></td>'+
170  '<td>'+
171  '<div class="block_reference_container">'+
172  '<div class="block_reference"></div>'+
173  '</div>'+
174  '</td>'+
175  '<td>'+
176  '<div class="block_template_container">'+
177  '<div class="block_template"></div>'+
178  '</div>'+
179  '</td>'+
180  '<td>&nbsp;</td>'+
181  '</tr>'+
182  '</tbody>'+
183  '</table>'+
184 '</div>'+
185 '</div>'+
186 '</div>';
187 
188 window.pageGroupTemplate = pageGroupTemplate;
189 
190 var WidgetInstance = {
191  pageGroupTemplate : pageGroupTemplate,
192  pageGroupContainerId : 'page_group_container',
193  count : 0,
194  activePageGroups : $H({}),
195  selectedItems : {},
196 
197  addPageGroup : function(data) {
198  if (this.pageGroupTemplate && (pageGroupContainer = $(this.pageGroupContainerId))) {
199  if (!data.page_id) {
200  data = {};
201  data.page_id = 0;
202  data.entities = '';
203  }
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]);
210  }
211  }
212  }
213  pageGroupTemplateObj = mageTemplate(this.pageGroupTemplate);
214  Element.insert(pageGroupContainer, {
215  'bottom': pageGroupTemplateObj({
216  data: data
217  })
218  });
219  if (data.group) {
220  pageGroup = $(data.group+'_'+data.id);
221  additional = {};
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');
230  if (layoutSelect) {
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;
234  break;
235  }
236  }
237  }
238  }
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;
244  break;
245  }
246  }
247  }
248  forElm = pageGroup.down('input.for_'+data.for_value);
249  if (forElm) {
254  pageGroup.down('input.for_all').defaultChecked = false;
255  forElm.defaultChecked = true;
256  forElm.checked = true;
257  this.togglePageGroupChooser(forElm);
258  }
259  this.displayPageGroup(pageGroup, additional);
260  }
261  }
262  },
263  removePageGroup : function(element) {
264  container = element.up('div.page_group_container');
265  if (container) {
266  container.remove();
267  }
268  },
269  addProductItemToSelection: function(groupId, item) {
270  if (undefined == this.selectedItems[groupId]) {
271  this.selectedItems[groupId] = $H({});
272  }
273  if (!isNaN(parseInt(item))) {
274  this.selectedItems[groupId].set(item, 1);
275  }
276  },
277  removeProductItemFromSelection: function(groupId, item) {
278  if (undefined !== this.selectedItems[groupId]) {
279  this.selectedItems[groupId].unset(item);
280  }
281  },
282  showBlockContainer : function(container) {
283  container = $(container);
284  if (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');
290  });
291  container.show();
292  }
293  },
294  hideBlockContainer : function(container) {
295  container = $(container);
296  if (container) {
297  container.addClassName('no-display');
298  container.addClassName('ignore-validate');
299  container.select('input', 'select').each(function(element) {
300  $(element).writeAttribute('disabled', 'disabled');
301  });
302  container.hide();
303  }
304  },
305  displayPageGroup : function(container, additional) {
306  container = $(container);
307  if (!additional) {
308  additional = {};
309  }
310  if (activePageGroupId = this.activePageGroups.get(container.up('div.page_group_container').id)) {
311  this.hideBlockContainer(activePageGroupId);
312  }
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 == '') {
317  layoutHandle = '';
318  if (layoutHandleField = container.down('input.layout_handle_pattern')) {
319  layoutHandle = layoutHandleField.value;
320  } else if (additional.selectedLayoutHandle) {
321  layoutHandle = additional.selectedLayoutHandle;
322  }
323  this.loadSelectBoxByType('block_reference', container, layoutHandle, additional);
324  }
325  this.loadSelectBoxByType('block_template', container, additional.selectedBlock, additional);
326  },
327  displayEntityChooser : function(type, chooser, additional) {
328  if (!additional) {
329  additional = {};
330  }
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});
337  }
338  if (chooser && additional) {
339  this.displayChooser(chooser, additional);
340  }
341  },
342  hideEntityChooser : function(chooser) {
343  chooser = $(chooser).down('div.chooser');
344  if (chooser) {
345  chooser.addClassName('no-display');
346  chooser.hide();
347  }
348  },
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});
353  url = '';
354  if (additional) {
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);
359  });
360  }
361  }
362  if (chooser && url) {
363  if (chooser.innerHTML == '') {
364  new Ajax.Request(url, {
365  method: 'post',
366  parameters: postParameters,
367  onSuccess: function(transport) {
368  try {
369  if (transport.responseText) {
370  Element.insert(chooser, transport.responseText);
371  chooser.removeClassName('no-display');
372  chooser.show();
373  }
374  } catch (e) {
375  alert({
376  content: 'Error occurs during loading chooser.'
377  });
378  }
379  }
380  });
381  } else {
382  chooser.removeClassName('no-display');
383  chooser.show();
384  }
385  }
386  },
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');
392  if (elm.checked) {
393  this.addProductItemToSelection(selectionId, elm.value);
394  } else {
395  this.removeProductItemFromSelection(selectionId, elm.value);
396  }
397  if (entitiesElm) {
398  entitiesElm.value = this.selectedItems[selectionId].keys().join(',');
399  }
400  },
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) {
406  if (value) ids = value.split(',');
407  else ids = [];
408  if (-1 == ids.indexOf(node.id)) {
409  ids.push(node.id);
410  container.down('input[type="text"].entities').value = ids.join(',');
411  }
412  } else {
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(',');
417  }
418  }
419  },
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');
425  chooser.hide();
426  } else {
427  chooser.removeClassName('no-display');
428  chooser.show();
429  }
430  }
431  },
432  loadSelectBoxByType : function (type, element, value, additional) {
433  if (!additional) {
434  additional = {};
435  }
436  if (element && (containerElm = element.down('div.'+type))) {
437  url = '';
438  selected = '';
439  parameters = {};
440  if (type == 'block_reference') {
441  url = '<?= $block->escapeUrl($block->getBlockChooserUrl()) ?>';
442  if (additional.selectedBlock) {
443  selected = additional.selectedBlock;
444  }
445  parameters.layout = value;
446  } else if (type == 'block_template') {
447  url = '<?= $block->escapeUrl($block->getTemplateChooserUrl()) ?>';
448  if (additional.selectedTemplate) {
449  selected = additional.selectedTemplate;
450  }
451  parameters.block = value;
452  }
453  parameters.selected = selected;
454  if (url) {
455  new Ajax.Request(url, {
456  method: 'post',
457  parameters: parameters,
458  containerElm: containerElm,
459  onSuccess: function(transport) {
460  containerElm = transport.request.options.containerElm;
461  try {
462  if (transport.responseText) {
463  containerElm.update(transport.responseText);
464  formElm = containerElm.down('select, input[type="hidden"]');
465  if (formElm) {
466  formElm.name = element.down('input.container_name').value+'['+formElm.name+']';
467  }
468  }
469  } catch (e) {
470  alert({
471  content: 'Error occurs during loading chooser.'
472  });
473  }
474  }
475  });
476  }
477  }
478  }
479 };
480 
481 window.WidgetInstance = WidgetInstance;
482 
483 jQuery(function(){
484  <?php foreach ($block->getPageGroups() as $pageGroup): ?>
485  WidgetInstance.addPageGroup(<?= /* @noEscape */ $pageGroup ?>);
486  <?php endforeach; ?>
487  Event.observe(document, 'product:changed', function(event){
488  WidgetInstance.checkProduct(event);
489  });
490  Event.observe(document, 'node:changed', function(event){
491  WidgetInstance.checkCategory(event);
492  });
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;
497  });
498 });
499 //]]>
500 
501 });
502 </script>
$block setTitle( 'CMS Block Title') -> setIdentifier('fixture_block') ->setContent('< h1 >Fixture Block Title</h1 >< a href=" store url</a><p> Config value
Definition: block.php:9
__()
Definition: __.php:13
$block
Definition: block.php:8
jQuery('.store-switcher .dropdown-menu li a').each(function()
Definition: switcher.phtml:203
endforeach
Definition: layout.phtml:486