Bootstrap Amazon Pay Responsive Widget

[eldon99]

When did Elvis start working at Miva? I thought he was still working at the gas station.

[Bruce - PhosphorMedia]

Thank Elvis for the forum...however, one wonders why I have to spend 45 minutes looking for an answer to a problem that should have been part of the basic install, especially in a Responsive ReadyTheme.

[alphabet]

Re: Bootstrap Amazon Pay Responsive Widget

Hi Robert,
The explicit height did it! I made the changes and the widgets now respond nicely on all screen sizes.

Thank you, Jeff and Brennan again for your time improving the UI experience for our customers.

Dan

[rejamison]

Re: Bootstrap Amazon Pay Responsive Widget

Hi Dan,

You'll need to apply an explicit height, not just min-height to get the responsive widgets working. Here's what I have working in my console:

<mvt:if expr="NOT l.settings:amazonpay_address:center">    <div id="addressBookWidgetDiv" style="min-width: 400px; height: 200px;"></div>
<mvt:else>
    <div class="amazonpay_outer" style="width: 100%">
        <div class="amazonpay_inner" style="width: 100%">
            <div id="addressBookWidgetDiv" style="min-width: 400px; height: 200px;"></div>
        </div>
    </div>
</mvt:if>


<script>
new OffAmazonPayments.Widgets.AddressBook(
{
    sellerId: '&mvt:amazonpay:merchantid_encoded;',
    amazonOrderReferenceId: '&mvt:amazonpay:amazonOrderReferenceId_encoded;',
    onAddressSelect: function( orderReference )
    {
    },
    design:
    {
        designMode: 'responsive'
    },
    onError: function( error )
    {
        return alert( error.getErrorMessage() );
    }
} ).bind( "addressBookWidgetDiv" );
</script>

The changes were to modify the design block to "designMode: 'responsive'" and to add the style attributes in the "div" elements above. I changed the inner and outer divs to "width: 100%" to allow the widget to expand to the full width, though you can just style these and the "addressBookWidgetDiv" any way you like, so long as you apply a "height" property. I made the same changes to the widgets on all 3 pages: AMAZONPAY_OCST, AMAZONPAY_OPAY, and AMAZONPAY_OSEL.


Robert.

[alphabet]

Re: Bootstrap Amazon Pay Responsive Widget

Hi Jeff,
Thank you for your time looking into this.

Your solution worked but it doesn't align nicely.

The address book looks correct on our OCST page just not the OPAY page.

On our OPAY page the payment_method widget displays correctly. However, the address book that displays in the walletWidget doesn't align with the payment_method widget and runs off the screen on a smartphone.

The designMode 'responsive' did not have an effect so I used designMode: 'smartphoneCollapsible'.


Here is the code that I used:

On the page template just under the amazon_pay item add:

<mvt:item name="amazonpay" />
    <style>
    .amazonpay_outer {min-width:320px; min-height:80px;}
    .amazonpay_inner {min-width:320px; min-height:80px;}
    </style>

In the Amazon Payments Widget Tab > Advanced Mode

<div class="amazonpay_outer">
<div class="amazonpay_inner">
<div id="addressBookWidgetDiv"></div>
</div>
</div>
<script>
    new OffAmazonPayments.Widgets.AddressBook({
        sellerId : '&mvt:amazonpay:merchantid_encoded;',
        amazonOrderReferenceId : '&mvt:amazonpay:amazonOrderReferenceId_encoded;',
        design : {
            designMode: 'smartphoneCollapsible'
        },
        onAddressSelect : function(orderReference) {
        },
        onError : function(error) {
        }
    }).bind("addressBookWidgetDiv");
</script>

In the Amazon Payments Wallet Widget (OPAY) Tab > Advanced Mode

    <div class="amazonpay_outer">
        <div class="amazonpay_inner">
            <div id="walletWidgetDiv"></div>
        </div>
    </div>




<script>
new OffAmazonPayments.Widgets.Wallet(
{
    sellerId: '&mvt:amazonpay:merchantid_encoded;',
    amazonOrderReferenceId: '&mvt:amazonpay:amazonOrderReferenceId_encoded;',
    design : {
            designMode: 'smartphoneCollapsible'
        },
        onAddressSelect : function(orderReference) {
        },
        onError : function(error) {
        }
    }).bind("walletWidgetDiv");
</script>

Let me know if there is a way to get the widgets to align centered on the OPAY page.

Dan

[Jeff R - Amazon]

Re: Bootstrap Amazon Pay Responsive Widget

Hi Jeff,
Thank you for the response.

I did remove the size properties and tried changing the designMode property to 'responsive' but that did not work either.



That's interesting, I haven't tested that yet.

I am using the default style:

<style type="text/css">
.amazonpay_inner
{
position: relative;
left: -50%;
}
.amazonpay_outer
{
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
position: relative;
left: 50%;
}
</style>

as the condition NOT l.settings:amazonpay_address:center is testing false.

Is there a different style for the container that should work?

Dan

Hi Dan

You need to specify a min-width and min-height for the div containing the widgets such that the div doesn't collapse down to 0-pix

Thanks
Jeff

[Jeff R - Amazon]

Re: Bootstrap Amazon Pay Responsive Widget

Hi Dan

You need to specify a min-width and min-height for the div containing the widgets such that the div doesn't collapse down to 0-pix

Thanks
Jeff

[Jeff R - Amazon]

Re: Bootstrap Amazon Pay Responsive Widget

Hi Jeff,
Thank you for the response.

I did remove the size properties and tried changing the designMode property to 'responsive' but that did not work either.



That's interesting, I haven't tested that yet.

I am using the default style:

<style type="text/css">
.amazonpay_inner
{
position: relative;
left: -50%;
}
.amazonpay_outer
{
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
position: relative;
left: 50%;
}
</style>

as the condition NOT l.settings:amazonpay_address:center is testing false.

Is there a different style for the container that should work?

Dan

Hi Dan
You need to specify a min-width and min-height for the div containing the widgets so that they don't collapse down to 0 px.
Give that a try and let me know if it works.

Thanks
Jeff

[alphabet]

Re: Bootstrap Amazon Pay Responsive Widget

Hi Jeff,
Thank you for the response.

I did remove the size properties and tried changing the designMode property to 'responsive' but that did not work either.

You will need to style the widget divs appropriately for the site

That's interesting, I haven't tested that yet.

I am using the default style:

<style type="text/css">
.amazonpay_inner
{
position: relative;
left: -50%;
}
.amazonpay_outer
{
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
position: relative;
left: 50%;
}
</style>

as the condition NOT l.settings:amazonpay_address:center is testing false.

Is there a different style for the container that should work?

Dan

[Jeff R - Amazon]

Re: Bootstrap Amazon Pay Responsive Widget

Anything new on this?

Is there someone at Amazon you can put me in touch with?

Hi there,

You can make this change by editing the JS for Amazon Payments.

Our JS is in the admin console under:

"Pages" -> "AMAZONPAY_*" -> "Amazon Payments * Widget" -> "Advanced Mode"

You will have to remove the "height" and "width" properties from the design element in the JS and add the "designMode: 'responsive'" property. You will also need to style the widget divs appropriately for their site.

I hope this helps!

Jeff - Amazon Payments

[alphabet]

Re: Bootstrap Amazon Pay Responsive Widget

Anything new on this?

Is there someone at Amazon you can put me in touch with?

[alphabet]

Re: Bootstrap Amazon Pay Responsive Widget

Hey Brennan,
Do you have an example site of the smartphoneCollapsible working?

Is there a way to make the Amazon Pay Address Widget fluid instead of fixed width?

[alphabet]

Re: Bootstrap Amazon Pay Responsive Widget

Hi Brennan,
Thank you for the response and Amazon docs reference.

I tested it but could not get it to work.

I made sure that I have the meta viewport tag in the head section.

I then added just the code snippet you provided but I couldn't get it to work - the address widget disappears.

I then read the docs and made changes to the amazonOrderReferenceId and onError object methods to match Amazon docs and still could not get it to work. I am testing from Firefox emulator not an actual device. I tested with firebug and have no console.log errors.

[Brennan]

Re: Bootstrap Amazon Pay Responsive Widget

The Pay with Amazon widgets all have a mobile version. However the don't automatically convert the the mobile version. You have to modify the JavaScript to call in the correct version when on a mobile device.

Here are the parameters that need to change:

http://docs.developer.amazonservices...de_Mobile.html

design : {
    designMode: 'smartphoneCollapsible'
  }

Access to this JavaScript can be found under Amazon Widget tab, then click advanced mode

[alphabet]

Is there a way to make the Amazon Pay Address Widget fluid instead of fixed width?

I would like to specify width and height in ems not pixels.