AJAX Add to Cart [Support Thread]

[noahmarket]

The only issue i have now is when i shrink it like im viewing from phone i cannot get into the shopping cart so i still got more work to do

Thanks !!

Yeah, I just checked and I can see what you mean, but that's because of your styling and absolute positioning. If you add additional lines for cart popup placeholder in the responsive breakpoints, I'm sure you'll have it visible.

Yea tried that but still no luck getting it to popup

put this in responsive css but it affects the regular template also

#carttopcontainer {
	float:none;width:276px;border:3px solid #ccoo33;margin:0;padding:10;padding-bottom:20px;}

Are you sure you put it in the correct place? It should be after a device width breakpoint, something like:

@media (max-width: 479px) {

That way it's an override for mobile devices and should work.

balihr and I Were talking about responsive issues with a template and shopping cart

[DivaVocals]

Okay.. So I've got this installed.. I added an Awesome Font cart glyph in front of the header cart totals this mods generates. I even got the header totals to appear in place of the normal header cart totals so that if I turn this module off, the default header totals/icons appear..

Here's what I am having issues with...

The formatting of the header totals.. Specifically I cannot seem to figure out what I need to do to get the totals to appear WHERE they should in the header.. Currently, they sit to the left of my header links.. I am using the Westminster-New template.

Here's all the changes I made:
includes/templates/MY_TEMPLATE/common/tpl_header.php

    <li>
<!-- BOF ZX AJAX Add to Cart -->
<?php
// BOF AJAX Cart 
    if (ZX_AJAX_CART_STATUS == 'true') {
        echo '<div id="carttopcontainer"></div>';
        require(DIR_WS_MODULES. 'sideboxes/'.$template_dir. '/zx_ajax_shopping_cart.php');
    } else {  
    echo '<a href="'. zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') .'"><i class="fa fa-shopping-cart"></i> '. $_SESSION['cart']->count_contents() .' - '. $currencies->format($_SESSION['cart']->show_total()) .'</a>&nbsp;|&nbsp;';
   } 
// EOF AJAX Cart
?>
<!-- EOF ZX AJAX Add to Cart -->
</li>

includes/templates/YOUR_TEMPLATE/sideboxes/tpl_zx_ajax_shopping_cart.php

    $content .= '<a href="'. zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') .'" onClick="ajax_cart(); return false"><i class="fa fa-shopping-cart"></i> '. $_SESSION['cart']->count_contents() .' - '. $currencies->format($_SESSION['cart']->show_total()) .'</a></div>&nbsp;|&nbsp;';

add_prod.php

    $cart_top = '<a href="'. zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') .'" onClick="ajax_cart(); return false"><i class="fa fa-shopping-cart"></i> '. $_SESSION['cart']->count_contents() .' - '. $currencies->format($_SESSION['cart']->show_total()) .'</a>';

add_to_cart.php

    $content .= '<a href="'. zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') .'" onClick="ajax_cart(); return false"><i class="fa fa-shopping-cart"></i> '. $_SESSION['cart']->count_contents() .' - '. $currencies->format($_SESSION['cart']->show_total()) .'</a>';

Finally link to dev site: http://clientscrappin(dot)divawebdzg...r-p-13207.html

What do I need to modify to get the cart totals to site between the "Login" and "Checkout" links??

[balihr]

It has position:absolute so you need to edit stylesheet_ajax_cart.css at line 4. Change left:0 to right:10%
If that's what you're asking :)

[DivaVocals]

It has position:absolute so you need to edit stylesheet_ajax_cart.css at line 4. Change left:0 to right:10%
If that's what you're asking :)

That moves over the popup.. but I was actually asking about the links in the top header bar.. If you look at the site, you'll see that the cart totals appear to the left of the "Login" link.. I want them between the pipes "|"

[balihr]

Hehe, and where is it that it should appear? :) All the way to the left, basically above the popup? I'm confused, not sure what exactly you're trying to do. Give this blind man a hint with some photoshop...

[DivaVocals]

Hehe, and where is it that it should appear? :) All the way to the left, basically above the popup? I'm confused, not sure what exactly you're trying to do. Give this blind man a hint with some photoshop...

If you visit the dev site: http://clientscrappin(dot)divawebdzg...r-p-13207.html

Look in the upper right hand side of the site..

You will see the cart totals (which come from this mod), the "Login" link, and the "Checkout link..

See the pipes "|" character between the "Login" link, and the "Checkout links?? The cart totals should go THERE..

I attached a screenprint.. but if you go to the dev site you can see this there too..

[balihr]

Ah! Why didn't you say so in the first place?

Here's an idea, although I haven't tested. I would go for the templates tpl_header.php and insert a new <li> on line 70 (don't forget to close and re-open the if($_SESSION['customer_id']). Make that <li id=" carttopcontainer"> instead of adding that div with the same id. I think it should do the trick...

[DivaVocals]

Ah! Why didn't you say so in the first place?

Welll not for nothing I kinda did..

Here's an idea, although I haven't tested. I would go for the templates tpl_header.php and insert a new <li> on line 70 (don't forget to close and re-open the if($_SESSION['customer_id']). Make that <li id=" carttopcontainer"> instead of adding that div with the same id. I think it should do the trick...

Okay.. well this didn't change the position of the cart totals.. they still sit to the left of the rest of the header links.. BUT this was a better way to code this conditional statement.. Here's what my templates tpl_header.php code looks like now:

<?php //if ($_SESSION['cart']->count_contents() != 0) { ?>
<!-- BOF ZX AJAX Add to Cart -->
<?php
// BOF AJAX Cart 
    if (ZX_AJAX_CART_STATUS == 'true') {
        echo '<li id=" carttopcontainer">';
        require(DIR_WS_MODULES. 'sideboxes/'.$template_dir. '/zx_ajax_shopping_cart.php');
    } else {  
    echo '<li>';
    echo '<a href="'. zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') .'"><i class="fa fa-shopping-cart"></i> '. $_SESSION['cart']->count_contents() .' - '. $currencies->format($_SESSION['cart']->show_total()) .'</a>&nbsp;|&nbsp;';
   } 
// EOF AJAX Cart
?>
<!-- EOF ZX AJAX Add to Cart -->
</li>
    <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php //}?>

Please note that the first line:

<?php //if ($_SESSION['cart']->count_contents() != 0) { ?>

and last line:

<?php //}?>

includes double slashes (//). This means the cart totals will show regardless as to whether the cart is empty or not.

I'm pretty sure that this is a CSS change at this point.. I cannot figure out the right CSS changes needed to get this part of the menu to sit where I need it to..

[DivaVocals]

Ah! Why didn't you say so in the first place?

Here's an idea, although I haven't tested. I would go for the templates tpl_header.php and insert a new <li> on line 70 (don't forget to close and re-open the if($_SESSION['customer_id']). Make that <li id=" carttopcontainer"> instead of adding that div with the same id. I think it should do the trick...

FYI.. I rolled back my includes/templates/MY_TEMPLATE/common/tpl_header.php mods to what I originally posted..

    <li>
<!-- BOF ZX AJAX Add to Cart -->
<?php
// BOF AJAX Cart 
    if (ZX_AJAX_CART_STATUS == 'true') {
        echo '<div id="carttopcontainer"></div>';
        require(DIR_WS_MODULES. 'sideboxes/'.$template_dir. '/zx_ajax_shopping_cart.php');
    } else {  
    echo '<a href="'. zen_href_link(FILENAME_SHOPPING_CART, '',  'NONSSL') .'"><i class="fa fa-shopping-cart"></i> '.  $_SESSION['cart']->count_contents() .' - '.  $currencies->format($_SESSION['cart']->show_total())  .'</a>&nbsp;|&nbsp;';
   } 
// EOF AJAX Cart
?>
<!-- EOF ZX AJAX Add to Cart -->
</li>

Turns out that the ID "carttopcontainer" needs to be in it's own div container for the menu popup to work correctly..

I am noticing that there are some anomalies with how this menu behaves when it comes to out of stock products.. Discovered this when testing the mobile views since I turn off the menu on mobile devices.. I need to do more testing and will report back my findings in full.. It appears to not be firing off some of the messages that I would see in the default cart behavior..

[kitten091182]

Hi Diva,
I'm using this mod on a test site with the Westminster new template, and it seems to be working fine in normal, mobile and tablet view, if you wanted to see the file changes I made I can post them?
What problems were you having with it though, as I'm worried there may be other problems I have overlooked and I don't want to put it on my live site until I'm sure.

Thanks