1

I would like to reorder the "Apply Discount Code" to the top of the payment step. I had a customer who complained that the order of these elements indicated it was to be entered after payment, and so she accidentally paid before adding her coupon.

Goal: reorder Apply Discount Code

Here is what I've tried so far.

// File: <theme>/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
  <referenceBlock name="checkout.root">
   <arguments>
    <argument name="jsLayout" xsi:type="array">
     <item name="components" xsi:type="array">
      <item name="checkout" xsi:type="array">
       <item name="children" xsi:type="array">
        <item name="steps" xsi:type="array">
         <item name="children" xsi:type="array">
          <item name="billing-step" xsi:type="array">
           <item name="component" xsi:type="string">uiComponent</item>
           <item name="children" xsi:type="array">
            <item name="payment" xsi:type="array">
             <item name="children" xsi:type="array">
              <item name="afterMethods" xsi:type="array">
               <item name="children" xsi:type="array">
                <item name="discount" xsi:type="array">
                 <item name="sortOrder" xsi:type="string">1</item>
                 <item name="config" xsi:type="array">
                  <!-- <item name="componentDisabled" xsi:type="boolean">true</item> -->
                 </item>
                </item>
               </item>
              </item>
             </item>
            </item>
           </item>
          </item>
         </item>
        </item>
       </item>
      </item>
     </item>
    </argument>
   </arguments>
  </referenceBlock>
 </body>
</page>

I left the componentDisabled item in my example so I could mention that if I uncomment it, the "Apply Discount Code" field disappears. This tells me I'm doing something right.

Besides the above example, I've also tried nesting <item name="sortOrder" xsi:type="string">1</item> inside <item name="config" xsi:type="array">, to no avail. Lastly, I've tried a range of numbers including 500, 99999, 0 and -99999.

My guess is there is no way to surpass the sortOrder given to the payment methods group and so they need to be change but I don't know how. Can anyone help?

Improve this question
1
  • I just noticed afterMethods which I'm guessing is payment methods, that's probably the part I want to target... going to try looking into that.
    – jamil
    Mar 30, 2017 at 21:01

1 Answer 1

Reset to default
1

The solution involved what I did above in my commented-out XML in the question. I removed the discount code from the <afterMethods> block and then copied it from magento's source so that it appears in the <beforeMethods> sections. The XML I copied to re-add the discount is from

/vendor/magento/module-sales-rule/view/frontend/layout/checkout_index_index.xml

Here is my final XML:

#File: <theme>/Magento_Checkout/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
  <referenceBlock name="checkout.root">
   <arguments>
    <argument name="jsLayout" xsi:type="array">
     <item name="components" xsi:type="array">
      <item name="checkout" xsi:type="array">
       <item name="children" xsi:type="array">
        <item name="steps" xsi:type="array">
         <item name="children" xsi:type="array">
          <item name="billing-step" xsi:type="array">
           <item name="component" xsi:type="string">uiComponent</item>
           <item name="children" xsi:type="array">
            <item name="payment" xsi:type="array">
             <item name="children" xsi:type="array">
              <item name="beforeMethods" xsi:type="array">
               <item name="children" xsi:type="array">
                <item name="discount" xsi:type="array">
                 <item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount</item>
                 <item name="children" xsi:type="array">
                  <item name="errors" xsi:type="array">
                   <item name="sortOrder" xsi:type="string">0</item>
                   <item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount-messages</item>
                   <item name="displayArea" xsi:type="string">messages</item>
                  </item>
                 </item>
                </item>
               </item>
              </item>
              <item name="afterMethods" xsi:type="array">
               <item name="children" xsi:type="array">
                <item name="discount" xsi:type="array">
                 <item name="config" xsi:type="array">
                  <item name="componentDisabled" xsi:type="boolean">true</item>
                 </item>
                </item>
               </item>
              </item>
             </item>
            </item>
           </item>
          </item>
         </item>
        </item>
       </item>
      </item>
     </item>
    </argument>
   </arguments>
  </referenceBlock>
 </body>
</page>

After that some simple style updates to remove an awkward border.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.