Is 4.4.1 fully responsive?

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

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.

I just tried it... the cart looks responsive to me. Maybe it has been updated in 4.4.4.

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.

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.

I'm thinking the non-resposnive tables in the basket are actually coming from amember/application.cart/views/blocks/basket.phtml

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?

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

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.