Skip to content

Commit e38fbfe

Browse files
MAGETWO-53172: Broken markup for Gift Options in Multiple Address Checkout
1 parent a5fa3af commit e38fbfe

File tree

7 files changed

+368
-219
lines changed

7 files changed

+368
-219
lines changed

app/code/Magento/GiftMessage/view/frontend/templates/inline.phtml

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@
2929

3030
<dd id="allow-gift-options-for-order-container" class="order-options">
3131
<div class="options-order-container" id="options-order-container-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>"></div>
32-
<a href="#" class="action activate message" data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#allow-gift-messages-for-order-container"}}'><?php /* @escapeNotVerified */ echo __('Gift Message') ?></a>
32+
<button class="action action-gift"
33+
data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#allow-gift-messages-for-order-container"}}'>
34+
<span><?php /* @escapeNotVerified */ echo __('Gift Message') ?></span>
35+
</button>
3336
<div id="allow-gift-messages-for-order-container" class="gift-messages-order hidden">
3437
<fieldset class="fieldset">
3538
<p><?php /* @escapeNotVerified */ echo __('Leave this box blank if you don\'t want to leave a gift message for the entire order.') ?></p>
@@ -53,13 +56,12 @@
5356
</div>
5457
</fieldset>
5558
<script>
56-
require(['jquery'], function(jQuery){
57-
58-
jQuery('#add-gift-options-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>')
59-
.add('#add-gift-options-for-order-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>').removeClass('hidden');
60-
61-
});
62-
</script>
59+
require(['jquery'], function(jQuery){
60+
jQuery('#add-gift-options-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>')
61+
.add('#add-gift-options-for-order-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>')
62+
.removeClass('hidden');
63+
});
64+
</script>
6365
</div>
6466
</dd>
6567
<?php endif ?>
@@ -88,7 +90,10 @@ require(['jquery'], function(jQuery){
8890
<div class="options">
8991
<div class="options-items-container" id="options-items-container-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>-<?php /* @escapeNotVerified */ echo $_item->getId() ?>"></div>
9092
<?php if ($block->isItemMessagesAvailable($_item)): ?>
91-
<a href="#" class="action activate message" data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#gift-messages-for-item-container-<?php /* @escapeNotVerified */ echo $_item->getId() ?>"}}'><?php /* @escapeNotVerified */ echo __('Gift Message') ?></a>
93+
<button class="action action-gift"
94+
data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#gift-messages-for-item-container-<?php /* @escapeNotVerified */ echo $_item->getId() ?>"}}'>
95+
<span><?php /* @escapeNotVerified */ echo __('Gift Message') ?></span>
96+
</button>
9297
<div id="gift-messages-for-item-container-<?php /* @escapeNotVerified */ echo $_item->getId() ?>" class="block message hidden">
9398
<fieldset class="fieldset">
9499
<p><?php /* @escapeNotVerified */ echo __('Leave a box blank if you don\'t want to add a gift message for that item.') ?></p>
@@ -119,24 +124,23 @@ require(['jquery'], function(jQuery){
119124
</ol>
120125
</dd>
121126
<script>
122-
require(['jquery'], function(jQuery){
123-
124-
jQuery('#add-gift-options-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>')
125-
.add('#add-gift-options-for-items-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>').removeClass('hidden');
126-
127-
});
128-
</script>
127+
require(['jquery'], function(jQuery){
128+
jQuery('#add-gift-options-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>')
129+
.add('#add-gift-options-for-items-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>')
130+
.removeClass('hidden');
131+
});
132+
</script>
129133
<?php endif; ?>
130134
<dt class="extra-options-container" id="extra-options-container-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>"></dt>
131135
</dl>
132136
</fieldset>
133-
<script type="text/x-magento-init">
134-
{
135-
"#allow_gift_options, #allow_gift_options_for_order, #allow_gift_options_for_items": {
136-
"giftOptions": {}
137+
<script type="text/x-magento-init">
138+
{
139+
"#allow_gift_options, #allow_gift_options_for_order, #allow_gift_options_for_items": {
140+
"giftOptions": {}
141+
}
137142
}
138-
}
139-
</script>
143+
</script>
140144
<?php break; ?>
141145

142146
<?php case 'multishipping_address': ?>
@@ -160,7 +164,10 @@ require(['jquery'], function(jQuery){
160164
<div class="options-order-container" id="options-order-container-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>"></div>
161165
<?php if ($block->isMessagesAvailable()): ?>
162166
<?php $_giftMessage = true; ?>
163-
<a href="#" class="action activate message" data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#gift-messages-for-order-container-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>"}}'><?php /* @escapeNotVerified */ echo __('Gift Message') ?></a>
167+
<button class="action action-gift"
168+
data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#gift-messages-for-order-container-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>"}}'>
169+
<span><?php /* @escapeNotVerified */ echo __('Gift Message') ?></span>
170+
</button>
164171
<div id="gift-messages-for-order-container-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>" class="gift-messages-order hidden">
165172
<fieldset class="fieldset">
166173
<p><?php /* @escapeNotVerified */ echo __('You can leave this box blank if you don\'t want to add a gift message for this address.') ?></p>
@@ -213,7 +220,10 @@ require(['jquery'], function(jQuery){
213220

214221
<?php if ($block->isItemMessagesAvailable($_item)): ?>
215222
<?php $_giftMessage = true; ?>
216-
<a href="#" class="action activate message" data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#gift-messages-for-item-container-<?php /* @escapeNotVerified */ echo $_item->getId() ?>"}}'><?php /* @escapeNotVerified */ echo __('Gift Message') ?></a>
223+
<button class="action action-gift"
224+
data-mage-init='{"toggleAdvanced": {"selectorsToggleClass":"hidden", "toggleContainers":"#gift-messages-for-item-container-<?php /* @escapeNotVerified */ echo $_item->getId() ?>"}}'>
225+
<span><?php /* @escapeNotVerified */ echo __('Gift Message') ?></span>
226+
</button>
217227
<div id="gift-messages-for-item-container-<?php /* @escapeNotVerified */ echo $_item->getId() ?>" class="block message hidden">
218228
<fieldset class="fieldset">
219229
<p><?php /* @escapeNotVerified */ echo __('You can leave this box blank if you don\'t want to add a gift message for the item.') ?></p>
@@ -248,13 +258,13 @@ require(['jquery'], function(jQuery){
248258
<dt class="extra-options-container" id="extra-options-container-<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>"></dt>
249259
</dl>
250260
</fieldset>
251-
<script type="text/x-magento-init">
252-
{
253-
"#allow_gift_options_<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>, #allow_gift_options_for_order_<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>, #allow_gift_options_for_items_<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>": {
254-
"giftOptions": {}
261+
<script type="text/x-magento-init">
262+
{
263+
"#allow_gift_options_<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>, #allow_gift_options_for_order_<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>, #allow_gift_options_for_items_<?php /* @escapeNotVerified */ echo $block->getEntity()->getId() ?>": {
264+
"giftOptions": {}
265+
}
255266
}
256-
}
257-
</script>
267+
</script>
258268
<?php break; ?>
259269
<?php endswitch ?>
260270
<?php if ($_giftMessage): ?>

app/code/Magento/GiftMessage/view/frontend/web/template/gift-message-item-level.html

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@
55
*/
66
-->
77
<!-- ko if: isActive() || hasActiveOptions() -->
8-
<a href="#"
9-
class="action action-gift"
10-
data-bind="
11-
click: $data.toggleFormBlockVisibility.bind($data),
12-
css: {_active: formBlockVisibility() || resultBlockVisibility()}
13-
">
8+
<button class="action action-gift"
9+
data-bind="
10+
click: $data.toggleFormBlockVisibility.bind($data),
11+
css: {_active: formBlockVisibility() || resultBlockVisibility()}
12+
">
1413
<span data-bind="i18n: 'Gift options'"></span>
15-
</a>
14+
</button>
1615
<div class="gift-content" data-bind="css: {_active: formBlockVisibility() || resultBlockVisibility()}"> <!-- add class "active" to display the content -->
1716
<!-- ko ifnot: resultBlockVisibility() -->
1817
<div class="gift-options">

app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/_cart.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,7 @@
276276
text-align: center;
277277
white-space: nowrap;
278278
width: 33%;
279+
279280
&:before {
280281
content: attr(data-th) ':';
281282
display: block;

0 commit comments

Comments
 (0)