Announcement

Collapse
No announcement yet.

Bootstrap Amazon Pay Responsive Widget

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Bootstrap Amazon Pay Responsive Widget

    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.
    http://www.alphabetsigns.com/

    #2
    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

    Code:
    design : {
        designMode: 'smartphoneCollapsible'
      }
    Access to this JavaScript can be found under Amazon Widget tab, then click advanced mode
    Brennan Heyde
    VP Product
    Miva, Inc.
    [email protected]
    https://www.miva.com

    Comment


      #3
      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.
      http://www.alphabetsigns.com/

      Comment


        #4
        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?



        http://www.alphabetsigns.com/

        Comment


          #5
          Re: Bootstrap Amazon Pay Responsive Widget

          Anything new on this?

          Is there someone at Amazon you can put me in touch with?
          http://www.alphabetsigns.com/

          Comment


            #6
            Re: Bootstrap Amazon Pay Responsive Widget

            Originally posted by alphabet View Post
            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

            Comment


              #7
              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:

              Code:
              <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
              http://www.alphabetsigns.com/

              Comment


                #8
                Re: Bootstrap Amazon Pay Responsive Widget

                Originally posted by alphabet View Post
                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:

                Code:
                <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

                Comment


                  #9
                  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

                  Comment


                    #10
                    Re: Bootstrap Amazon Pay Responsive Widget

                    Originally posted by alphabet View Post
                    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:

                    Code:
                    <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

                    Comment


                      #11
                      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:

                      Code:
                      <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

                      Code:
                      <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

                      Code:
                          <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
                      http://www.alphabetsigns.com/

                      Comment


                        #12
                        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:

                        Code:
                        <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.

                        Comment


                          #13
                          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
                          http://www.alphabetsigns.com/

                          Comment


                            #14
                            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.
                            Bruce Golub
                            Phosphor Media - "Your Success is our Business"

                            Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                            phosphormedia.com

                            Comment


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

                              Comment

                              Working...
                              X