niallB Posted December 26, 2017 Share Posted December 26, 2017 Merry Christmas peeps. Any thoughts on a solution for this. When you click add to basket button on mobile version of my site its not very obvious that the item has been added. It's appears as a small little icon but on a smart phone when you click add to basket, you can't see that's been added unless you scroll back up which you wouldn't think of doing. Any thoughts on a solution for this? Is there a way to make it more apparent that the item has been added to the basket? Or as a last resort to maybe even to bring them to the checkout page when they click add to basket? The website is https://www.myfancydress.ie if you want to see for yourself what I mean Cheers Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 26, 2017 Share Posted December 26, 2017 As far as "jumping to basket on add", that is set in admin, Store Settings, Layout tab. Quote Link to comment Share on other sites More sharing options...
bsmither Posted December 27, 2017 Share Posted December 27, 2017 I see you are using the Mobile skin. Please make these changes: In /js/plugins, update jquery.colorbox-min.js to the latest version. In /js/common.js, near line 399: Find: } else { basket.replaceWith(returned.responseText); //Remove error message if it exists $("#gui_message").slideUp(); //Shake basket $(".animate_basket").effect("shake", { times:4, distance: 3 }, 70); } Change to: } else { basket.replaceWith(returned.responseText); //Remove error message if it exists $("#gui_message").slideUp(); //Shake basket $(".animate_basket").effect("shake", { times:4, distance: 3 }, 70); $.colorbox({className:'colorbox_basket_summary', closeButton:false, inline:true, href:"div#basket_summary"}); setTimeout($.colorbox.close,1500); } In the Mobile folder /styles/common.css, you can add CSS rules: .colorbox_basket_summary { } #cboxContent { background-color: #666666!important; } You will need to find and add more CSS rules for cbox* selectors. This adds a popup window that shows the contents of the skin's shopping basket. So, in addition to the actual basket that is probably off-screen, this overlays the screen with a small window for 1.5 seconds (adjustable) that shows the basket -- for the Mobile skin, is just a basket icon (white in color) with a green circle and item count. (The overlay can be dismissed sooner by clicking/tapping anywhere on the darkened screen.) Quote Link to comment Share on other sites More sharing options...
niallB Posted December 30, 2017 Author Share Posted December 30, 2017 Thanks a million. Sorry only seeing your reply now. I'll make these changes. Happy new year 8-) Quote Link to comment Share on other sites More sharing options...
Claudia M Posted February 18, 2018 Share Posted February 18, 2018 What changes would you make to add this feature to a custom Foundation skin? Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 18, 2018 Share Posted February 18, 2018 Is this custom skin based off CubeCart's "Foundation" skin? Or is it nothing derived from CubeCart's "Foundation" skin, but does use Zurb's Foundation platform? Quote Link to comment Share on other sites More sharing options...
Claudia M Posted February 18, 2018 Share Posted February 18, 2018 Based off Cubecart's Foundation skin Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 18, 2018 Share Posted February 18, 2018 I hear you say that CubeCart's Foundation-derived, customized skin at your store does not show a "Your Basket" popup (where the stock Foundation skin does) when having clicked "Add to Basket" button? May we have a web address to experiment? Quote Link to comment Share on other sites More sharing options...
Claudia M Posted February 19, 2018 Share Posted February 19, 2018 I'm talking about on the small screen - my android phone. I thought this would be more pronounced so the customer could actually see something had been added to their cart. Web address is www.claudiasbargains.com Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 19, 2018 Share Posted February 19, 2018 In claudiasbargains.css, line 13, I find that you are overruling cubecart.css, line 111 with respect to background color, from green to white. That is then overruled by claudiasbargains.css, line 213, still keeping it white. With a white page background, that would be hard to notice. Removing those background-color declarations would restore using CubeCart's default green. But, you asked about applying the effect above to your skin, so try this. Download the jQuery-UI code from http://jqueryui.com/ Put the jquery-ui.min.js file in the skin's /js/vendor/ folder, and the jquery-ui.min.css in the /css/ folder. Make these edits: In the template main.php, find: <script src="{$STORE_URL}/skins/{$SKIN_FOLDER}/js/vendor/jquery.js"></script> On a new line after that, add: <script src="{$STORE_URL}/skins/{$SKIN_FOLDER}/js/vendor/jquery-ui.min.js"></script> In the file 2.cubecart.js, near the end, find: function mini_basket_action() { $('#basket-detail, #small-basket-detail').fadeIn('fast', function() { $(this).delay(4000).fadeOut('slow'); if($('#basket-detail').height()>$(window).height()) { window.location.href = '?_a=basket'; } }); } Change to: function mini_basket_action() { $('#basket-detail, #small-basket-detail').fadeIn('fast', function() { $("#small-basket-detail.animate-basket").effect("shake", { times:4, distance: 3 }, 70); $(this).delay(4000).fadeOut('slow'); if($('#basket-detail').height()>$(window).height()) { window.location.href = '?_a=basket'; } }); } In the template box.basket.php, find: <div class="hide panel radius small-basket-detail-container js_fadeOut" id="small-basket-detail"><svg class="icon"><use xlink:href="#icon-check"></use></svg> {$LANG.catalogue.added_to_basket}</div> Change to: <div class="hide panel radius small-basket-detail-container js_fadeOut animate-basket" id="small-basket-detail"><svg class="icon"><use xlink:href="#icon-check"></use></svg> {$LANG.catalogue.added_to_basket}</div> In CubeCart's admin, Maintenance, Rebuild tab, clear the cache. Have your browser force reload the page's resources. Using a small viewport, click the product's Add to Basket button. The phrase "<checkmark> Added to Basket" should shake for a short bit. Quote Link to comment Share on other sites More sharing options...
Claudia M Posted February 19, 2018 Share Posted February 19, 2018 Thanks Brian! I'll implement it asap. Quote Link to comment Share on other sites More sharing options...
Claudia M Posted February 19, 2018 Share Posted February 19, 2018 “ In claudiasbargains.css, line 13, I find that you are overruling cubecart.css, line 111 with respect to background color, from green to white.” I removed that line “That is then overruled by claudiasbargains.css, line 213, still keeping it white.” I changed the background color to white on this because I didn’t want the panels to have that gray like color. If I remove the white color code they will. So what I did was create panel.small and gave it the green color from cubecart.css line 111. Then I went into my skin/template/box.basket and added small after panel like this <div class="hide panel small radius small-basket-detail-container js_fadeOut" id="small-basket-detail"> Is this the way I should do it? Quote Link to comment Share on other sites More sharing options...
bsmither Posted February 19, 2018 Share Posted February 19, 2018 That will work. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.