Jump to content

Add to cart Not working properly

Vilas
 Share

Recommended Posts

Vilas Newbie

Vilas

Posted
Posted (edited)

Hello Friends,

 

I am using PS 1.5.4.1

 

When we click on add to cart button the position of that gets changed. After moving product to cart again that add to cart appears at its original space.

Will be great if anyone assist in this regards.

 

 

 

Further,

I wish to make add to cart button as below.

 

Will be great if you assist in that regards also.

 

Thanks & Regards

post-136345-0-92627700-1413638627_thumb.jpg

Edited by Vilas (see edit history)
Link to comment
Share on other sites
osdznr14mm Newbie

osdznr14mm

Posted
Posted (edited)

Hi Vilas,

 

As for the red add to cart button moving on click, look in your global.css line 211 and take out or comment out the lines as I've shown below:

 

input.button_disabled, input.exclusive_disabled, span.exclusive {
display: inline-block;
text-transform: capitalize;
/* background: url("../img/pict_cart.png") no-repeat scroll -4px -2px #FFFFFF; */
cursor: default;
border-radius: 100px 100px 100px 100px;
color: black;
/* text-indent: 20px;
top : 60px; 
left : -44px; */
width: 108px;
}
 
It's the text-indent, top, & left that're making it move. But first please try to find the following css file you're missing and see if that fixes anything: 
(link removed by request)
 
You're theme is getting messed up as you size the browser more narrowly. See if you can find the responsive.css in the original download & put it back in your css directory.
 
 

 

 

Edited by osdznr14mm (see edit history)
Link to comment
Share on other sites
osdznr14mm Newbie

osdznr14mm

Posted
Posted (edited)

OK, after you put the responsive.css in, now the add to cart button is not jumping on click. So disregard those css fixes I posted earlier. But now I realized why it's looking messed up: I was looking at it on my desktop, but since it says "...mobile.html" at the end of the file name, I think that version of the page only displays when you're using a mobile device. When I look at the page on my ipad, it looks very different. Try looking at it on your phone. I checked it on an android simulator online and here is a screenshot of how it looks (at the bottom).

 

Does that look OK to you? So had you been looking at the page on your desktop screen too? That wouldn't be accurate as the user would never even see that page in a desktop browser. The theme probably has a detection script to direct the browser to the correct version of the pages to match with the device you're viewing it on.

 

(image deleted by request)

Edited by osdznr14mm (see edit history)
Link to comment
Share on other sites
osdznr14mm Newbie

osdznr14mm

Posted
Posted (edited)

I am also new to mobile themes but I know that there are mobile emulators that you can view the url in. Here is an online mobile emulator where you can select the device you want to test for and if you view it in a browser like Chrome, you can right click on the elements, select "inspect element" and it will show the css for it. In Chrome, you can preview temporary edits to your html & css by clicking around in the code editor, very handy. To make permanent changes, use a text editor. I added a screen shot at the bottom.

 

http://www.mobilephoneemulator.com/

 

You might want to look for a mobile emulator that you can use on your pc. I know one for mac but not for pc but I'm sure you can find one by googling.

 

As for your add to cart buttons you want to make, are you asking for a photoshop tutorial or asking about the css? That looks like a button with a slight bevel on it, maybe achieved with the emboss effect or something like that, but really small/thin. I don't usually make that style of button so I don't know off the top of my head. I'm sure you can google for photoshop tutorials on beveled buttons or the like. Or illustrator tutorials if you prefer. Hope this helps! 

 

(image removed by request)

Edited by osdznr14mm (see edit history)
Link to comment
Share on other sites
osdznr14mm Newbie

osdznr14mm

Posted
Posted
Do you want to replace the red add to cart button with one of the button bar images you posted? And is that the actual image you are going to use, I mean is it an image with multiple button bars on it? Let's clarify this first. 

 

BTW, I found a better emulator: Google Chrome! It has a mobile emulator built in! See this page for instructions. (Click the little phone icon in the code editor at the bottom)


Link to comment
Share on other sites
osdznr14mm Newbie

osdznr14mm

Posted
Posted (edited)
Thanks for posting the great link! Well that gives you all the code you need right there! I'm sorry, I didn't realize that you could do bevels with css, or well, I was sort of aware but thought that stuff was too buggy or not cross-browser friendly, or I'm just out of it.   :unsure:

 

So I tested out the code on the home page of your site and posted a screenshot down below. Don't worry, I didn't really change your site, you can just preview changes in Chrome. I used the green button code, but you can just change the colors. You can look up the rgb or rgba value online. There are converters for converting hex color to rgb. If you want a less rounded corner, reduce all the 25px values to something smaller. The css you need to adjust will be in your shopwindow.css line 63:

 

#shopwindow a.button,#shopwindow a.exclusive, #shopwindow span.exclusive{

background: -moz-fieldtext;

line-height:30px;

padding: 0px 0px 0px 0px;

margin-left:60px;

text-align: center;

color: white;  /* used to be Thistle */

width:108px;

text-transform: uppercase;

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

margin: 40px;

border: 1px solid rgba(0,0,0,0.4) ;

box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.5),

0 0 1px 1px rgba(255,255,255,0.8),

0 0 0 6px rgba(0,0,0,0.06),

0 0 0 3px rgba(0,0,0,0.1);

cursor: pointer;

background: rgb(143,200,0);

background: -moz-linear-gradient(top,  rgba(143,200,0,1) 0%, rgba(102,142,0,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,200,0,1)), color-stop(100%,rgba(102,142,0,1)));

background: -webkit-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);

background: -o-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);

background: -ms-linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);

background: linear-gradient(top,  rgba(143,200,0,1) 0%,rgba(102,142,0,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#668e00',GradientType=0 );

text-shadow: 1px 1px rgba(0,0,0,0.2);

}

 

/* this is a new style you have to add: */

#shopwindow a.exclusive:hover {

background: rgb(102,142,0);

background: -moz-linear-gradient(top,  rgba(102,142,0,1) 0%, rgba(143,200,0,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,142,0,1)), color-stop(100%,rgba(143,200,0,1)));

background: -webkit-linear-gradient(top,  rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);

background: -o-linear-gradient(top,  rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);

background: -ms-linear-gradient(top,  rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);

background: linear-gradient(top,  rgba(102,142,0,1) 0%,rgba(143,200,0,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#668e00', endColorstr='#8fc800',GradientType=0 );

}

 

I copied the .green button code and hover code from your link to the existing #shopwindow button styles and also added the text-shadow from the .title style. So try that out & play around with the colors. And Vilas, I wish you wouldn't be so  :( .

 

(image removed by request)

Edited by osdznr14mm (see edit history)
Link to comment
Share on other sites
osdznr14mm Newbie

osdznr14mm

Posted
Posted

I can't believe you posted that sad face icon again. It's not that bad, it's almost there! I'm not sure I understand what you're asking.

 

Are you saying that you don't want the buttons to be green, you want them red (orange)? I mentioned in my answer that you should play with the colors. You have to find the colors you want yourself by changing the rgb values in the code. First pick a hex color, for example #ff0000 (red), then find an rgb converter to find out how to write it as an rgb value. Here's one that has both rgb & rgba:

http://hex2rgba.devoth.com/

Just try changing some of those rgb values in the css. See what happens. 

 

Yes I did that orange modification also.

 

Can u suggest about that cart block which is at right top? Is it matching to page?

 

Next, are you asking if I think the cart block button with the red circle & cart matches with the green buttons? In style, it matches OK, but I would make the bevel highlight a little whiter/brighter. Also that is an image, not made by css. It doesn't match color-wise, so I'd change the green buttons to a similar red. I bet I totally misunderstood you right? Oh well, I'm trying....

 

 

 

Link to comment
Share on other sites
Vilas Newbie

Vilas

Posted
  • Author
Posted

One more help I wish to take from you, if we add multiple products in cart & view cart summery after hover mouse on that then that checkout is not appearing inside box its appearing outside.

 

Add 3-4 different products to cart & then check.

Link to comment
Share on other sites
osdznr14mm Newbie

osdznr14mm

Posted
Posted (edited)
I'm sorry but I will not be helping you on the prev/next buttons. I need to take a break from this board because it's taking a lot of my time to answer and I have to work on other stuff. The directions look pretty clear though and it's written by Nemo, a moderator on this board! I think you should start a new topic on it if you need help and hopefully he'll answer you or someone else. 

 

Regarding your question about the hover when you add multiple products, what I see looks fine (see screenshot below), so I don't know what you mean by "it's appearing outside." The only thing I notice that is weird is that when you hit checkout you can see some extra text stick out, saying empty cart or something like that very briefly and then it goes away. 

 

(image removed by request)

Edited by osdznr14mm (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...