UPS Address Validation on Levels

[ids]

Incorporating UPS Address Validation on Levels for a client. I'm guessing I'm missing a resource of some kind, CSS or JS, because the dialog/modal/popup isn't working. The code is rendering void of the popup function.

What is the requirement?

Thanks,

Scott

[Nick]

ids take a look at the message I sent you, more than likely you have an older version of Shadows and need to add the dialog.js If you still can't get it to work go ahead and submit a ticket to me and I will take a look.

[ids]

Actually, I grabbed the template, which isn't easily "copyable," from the Docs from a recent version of Shadows. The template matches the Docs. But, the store I am working in is Levels. The bug in the Docs is that there are not hints of dependencies potentially needed for legacy themes. I am thinking your instructions on Slack will work, at least mostly.

Thanks,

Scott

[ids]

Where is dialog.js?

Is that in a theme? I don't see it in my own store. I also don't have FTP access to the client's store if it's in Levels.

Thanks,

Scott

[lesliekirk]

Where is dialog.js?

Is that in a theme? I don't see it in my own store. I also don't have FTP access to the client's store if it's in Levels.

Thanks,

Scott

I've seen that file referenced in a couple of the sites I work with. I took a peek at one made with Levels and I don't see the file referenced. Let me dig. I'm thinking you should be able to add the file through the admin. In the CSS/JavaScript Resources JavaScript Resources tab.

[lesliekirk]

I've seen that file referenced in a couple of the sites I work with. I took a peek at one made with Levels and I don't see the file referenced. Let me dig. I'm thinking you should be able to add the file through the admin. In the CSS/JavaScript Resources JavaScript Resources tab.

FYI - hopefully Matt Zimmermann can shed some light on the usage of the dialog.js file.

[Nick]

ids In the original Shadows framework the dialog.js was located here: https://github.com/mivaecommerce/rea...ensions/dialog

The newer version of Shadows the JS can be found in the extenstions.js file
https://github.com/mivaecommerce/sha...nsions.js#L935

[ids]

Thanks for clearing up that confusion Nick. I would have never known, I never loaded the original Shadows framework anywhere.
Really hoping it's plug and play for the rest. Budget is already blown.

Best,

Scott

[ids]

I will be submitting a ticket.

Nick,

Because I was copying from the extensions.js for the dialog box, I assumed extrensions.css contained the required styles. That doesn't appear to be the case. Am I correct that I found them in core.css?

Following up on two other aspects: core.css seems FLEX enabled. Will that be a conflict/issue?
The other part, the JS for the dialog: console error:

Uncaught TypeError: $.hook is not a function

Scott

[Nick]

ids I responded to your ticket, it does not look like you followed all the steps I sent over. Also, you don't want to include all the extensions JS and CSS you want to just include the dialog.css and dialog.js

I got it working on the branch I created. For what it is worth these are the steps that I did to add address validation to a Levels theme:

• On OCST page template I added the <mvt:item name="readytheme" param="contentsection( 'address_validation' )" /> below the <form>. The content section can be found here: https://docs.miva.com/miva10/referen...mplate-changes
• I added data-validate-address to the form on OCST because there is JavaScript in the content section that needs this attribute on the <form>. https://github.com/mivaecommerce/sha...stomer.mvt#L69
• On OCST within the Customer Fields template I added two hidden inputs within a conditional:
  
  https://github.com/mivaecommerce/sha...stomer.mvt#L93 : <mvt:if expr="NOT ISNULL l.settings:customer:validated_ship_addresses"> <input type="hidden" name="ShipValidated" value="1" /> </mvt:if>
  
  https://github.com/mivaecommerce/sha...tomer.mvt#L214 : <mvt:if expr="NOT ISNULL l.settings:customer:validated_bill_addresses"> <input type="hidden" name="BillValidated" value="1" /> </mvt:if>

• I added the JavaScript resource called dialog-extension to ONLY have the dialog JavaScript included. I then made the resource group NOT global and assigned it to the OCST page. This way only the OCST page will load the file thus not having unused JavaScript other places in the store.
• I created a Resource Group called footer_js and added the <mvt:item name="head" param="footer_js" /> item to the Global Footer template. Then I assigned the dialog-extension to the resource group so that the JavaScript has someplace to render in the template.
• I updated the CSS resource called dialog-extension to ONLY have the dialog CSS included. I then assigned it to the OCST page. This way only the OCST page will load the file thus not having unused CSS other places in the store. I assigned the Resource to the head_tag resource group.

These updates should allow for the address validation popup to work but you may need to do some styling to adjust for the framework.

[ids]

Here's a couple of notes, in addition to what Nick previously listed, which should help complete this integration into Levels (and maybe other legacy themes):

* The Address validation in Shipping - Settings are global. Changing the setting while working the branch will affect live orders during checkout
* This data attribute is required in the form on OCST: data-validate-address. Nick found this information was documented. That is likely because the documentation covers Shadows.

<form data-validate-address method="post" action="&mvte:url;" id="js-ocst-form" class="ocst-form">
    <input type="hidden" name="Action" value="&mvte:action;">
    <div class="row customer-fields">
        <mvt:item name="customer" />
    </div>
    <div class="row">
        <div class="column whole align-center medium-align-right">
            <input type="submit" value="Continue to Shipping" class="button button-primary button-large-font uppercase checkout-button bg-green white nb">
        </div>
    </div>
</form>

Now on to the other pages/sections...

Scott