Jump to content

Add to basket button


niallB

Recommended Posts

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 

Screenshot_20171226-180909.png

Screenshot_20171226-180919.png

Link to comment
Share on other sites

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.)

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

“ 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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...