Is 4.4.1 fully responsive?

Discussion in 'Troubleshooting' started by guy1, May 1, 2014.

  1. guy1

    guy1 Member

    Joined:
    Aug 29, 2006
    Messages:
    129
    Hi, I chatted to Andrey via a support ticket three months ago about updates after 4.3.6 as we had discussed outstanding issues with responsiveness to smartphone screen sizes. One particular area I shared with Andrey was that the basket checkout summary table wasn't fitting into smartphone screens for which I had provided a solution to.

    Does 4.4.1 include this addition?

    I am awaiting a stable version that is fully responsive before I upgrade from my current 4.2.15 which currently provides the best responsive experience I think.

    Thanks.

    Guy
  2. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    Guy,

    As of today, I have the newest version. Most of everything is responsive, except the basket. No way will it work on a phone, which is what most of our visitors use.

    The only thing I thought of was finding the basket theme file, getting all the tables out, and putting divs in instead. But that can be really tricky.

    Are you open to providing your solution? I'm sure many people would love to have a fix for this.
  3. 123Marketing

    123Marketing aMember Pro Customer

    Joined:
    Jun 4, 2005
    Messages:
    130
    I just tried it... the cart looks responsive to me. Maybe it has been updated in 4.4.4.
  4. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    I have 4.4.4.

    Unlike the rest of aMember, the basket seems to still be built with tables - you can check the source code when on the basket page.

    When the screen is resized to 300-400 px (the size of many smart phone screens), the columns in the tables don't stack on top of each other, as they would in a responsive web page. The columns merely squeeze together.

    On my Samsung smart phone, this results in the price being cut off the screen, any product title and descriptions being shoved into an incredibly long narrow column, the basket table heading being cutoff, etc.

    The customer invoice pages still seem to also be built this way.
  5. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    The table heading in the ticket area also still seem to be built with tables, resulting in a non-responsive view. Although, the tickets themselves seem to look OK.
  6. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    I'm thinking the non-resposnive tables in the basket are actually coming from amember/application.cart/views/blocks/basket.phtml
    Last edited: Oct 25, 2014
  7. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    Included as an attachment is what a stacked basket could look like. It's a rough draft, but it would be great to have this design compared to the squished together table. I think this would decrease "cart abandonment" from mobile users, as this is what I am concerned about now. Anyone have the know how to create such as thing?

    stacked-cart-example.png
  8. guy1

    guy1 Member

    Joined:
    Aug 29, 2006
    Messages:
    129
    Hi there. You are welcome to grab the CSS from my site although some is not actually responsive, rather set to a single column so it works on mobiles in the same way as a desktop. I have had some coding done to shrink the cart and other tables that now shrink to the size of the screen so aren't as good as the design shown above which obviously is much better.

    I think a full complete solution is well overdue with amember.

    My site is: http://www.melodypods.com
  9. dale_s

    dale_s aMember Pro Customer

    Joined:
    Apr 12, 2013
    Messages:
    78
    Here is some code I worked out for a responsive basket page. It's an edit/replacement for this file:
    /amember/application/cart/views/cart/_basket.phtml

    I have a bootstrap 2 enabled WordPress theme, so I was able to break a single product into two columns. To remove this, simply take out the "row-fluid" and "span6" divisions (I couldn't figure out the responsive columns integrated into aMember).

    The only thing I left out was...
    Code:
    <?php echo $isBasket ? 9 : 8 ?>
    ... because it kept reading out a #9 on page, no matter how I did it. If anyone figures out how to get this into code properly, please let me know.

    Here is the code I have so far:

    Code:
    <?php foreach ($cart->getItems() as $item): ?>   
    <div class="row-fluid">
      <div class="span6">
            <p class="custom-bg-info">Item # - <?php echo @++$ii ?></p>   
            <p class="custom-bg-info"><?php __e('Item') ?> - <strong><?php p($item->item_title) ?></strong></p>
            <p class="custom-bg-info"><?php __e('Price') ?> - <?php p($cart->getCurrency($item->first_price)) ?></p>
        </div>
       
      <div class="span6">
            <p class="custom-bg-info"><?php __e('Qty') ?> - <?php
                echo ($item->is_countable && $item->variable_qty && $isBasket) ?
                $this->formText("qty[$item->item_id]", $item->qty, array('size' => 3)) : p($item->qty)
                ?></p>       
            <p><?php if ((float)$cart->getInvoice()->first_discount) : ?>
                    <?php __e('Discount') ?>
                <?php endif; ?>
                <?php if ((float)$cart->getInvoice()->first_discount) : ?>
                <?php p($cart->getCurrency($item->first_discount)) ?>
                <?php endif; ?></p>
       
       
                <p><?php if ((float)$cart->getInvoice()->first_tax) : ?>
                    <?php __e('Tax') ?>
                <?php endif; ?>
                <?php if ((float)$cart->getInvoice()->first_tax) : ?>
                <?php p($cart->getCurrency($item->first_tax)) ?>
                <?php endif; ?></p>    
       
       
                <p class="custom-bg-info"><?php __e('Subtotal') ?> - <?php p($cart->getCurrency($item->first_total)) ?></p>
       
                <p class="custom-bg-info"><?php if ($isBasket): ?>
                    <?php __e('Delete') ?>
                <?php endif; ?> -
                <input type="checkbox" name="d[<?php echo $item->item_id ?>]" value="1"></p>
        </div>
    </div>
                    
    <hr class"hr1"/>               
    <?php endforeach ?>
    
    
                <p class="custom-bg-danger"><?php __e('Total') ?> -
                <?php if ((float)$cart->getInvoice()->first_discount) : ?>
                <?php p($cart->getCurrency($cart->getInvoice()->first_discount)) ?>
                <?php endif; ?>
    
               <?php if ((float)$cart->getInvoice()->first_tax) : ?>
                <?php p($cart->getCurrency($cart->getInvoice()->first_tax)) ?>
                <?php endif; ?>   
    
    
                <?php p($cart->getCurrency($cart->getInvoice()->first_total)) ?>
                <?php if ($isBasket): ?>
                <?php endif; ?></p>
    
    
           <p> <?php if (!empty($cart->getInvoice()->rebill_times)): ?>
                 <?php __e('Terms') ?>: <?php echo $cart->getInvoice()->getTerms() ?>
            <?php endif ?></p>
    
    Here is the CSS styling:

    Code:
    .custom-bg-info {
        background-color: #e0e0e0;
        padding-top: 6px;
        padding-bottom: 0px;
        padding-left: 6px;
    }
    Of course, I'm open to any improvements.

Share This Page