Website Button has another very small version of itself showing on top

Classic General
1

Hi Guys,

Wondering if anyone can shed light on this button problem.

Ive put an “add to order” button on my website using the stacks button option.
I filled in the csi script in the space it says to add your text. It seems to be working ok..

But the problem is the green button saying “add to order” has a tiny copy of itself without the text just sitting above the main button. No idea why that is. Any suggestions welcome.

Thanks!

2

If you can provide a link to the published site or even a screenshot of the stack in Edit mode that would be useful.

Rob

3

thanks Rob, I’m still editing this page so heres 2 screen shots,
The pic with just one extra button is in preview mode and the one with several of them is in edit mode.

4

Strange.

  1. What happens when you delete the button stack completely, save the project and then add the button stack again?

  2. Forgive my ignorance, but what is CSI script? And does the same thing happen if you don’t add that code?

Thanks

Rob

5

It looks like you’re injecting some HTML/Javascript into a place where it’s not really meant to be and chaos has ensued. I would recommend not putting the HTML or Javascript (or whatever) into that spot.

My guess is that you have some code from somewhere else, like a shopping cart server or something. I’d recommend not using that inside of the button stack, but just placing it into an HTML stack instead.

Isaiah

6

Rob (I may have meant cgi :slight_smile: Yes i tried the delete and replace but its just exactly the same.

Here is what i put in the button text space (real names omitted)

ADD TO ORDER

Isaiah you are right as this was to connect to my shopping cart on the merchant provider site.

When i designed my other websites years ago using WYSIWYG software. I simply inserted a jpg file of a button then selected it to make an external link and added the shopping cart script onto the selected item.

However in RW I could not find a way to make an external link using a jpg file of a button. So i used the stacks button and expected that i could put the shopping cart script where the add text is. It worked as far as it can connect the link correctly but the extra blobs appearing are making it look rather strange.

Is there another way that i can add the shopping cart script/code onto the stacks button

or can i make an external link to the external shopping cart if i use a jpg file of a pic of a button

thanks

7

a href=“https://www.merchant.com/cgi-local/cart.cgi?vendorname_Productcode_http://www.mywebsite.com”
ADD TO ORDER /a

sorry the example i posted did not come through so I’ve just removed the angle brackets. fingers crossed.

8

the reason it’s not coming through on the forum is pretty much the same reason it’s not working inside of that stack. :stuck_out_tongue:

To fix on the forum:
type three back-tick ````` characters on a line by themselves, then add your HTML, then three more back-ticks you get something that looks like this:

<a href="http://google.com"

Pasted_Image_10_16_16__4_27_PM.png1047×160 23.6 KB

OK, now how to fix in Stacks…

The button stacks does not expect HTML. So you have two options:

  1. Don’t use the button stack.
  2. Insert what the button stack expects

  1. Don’t use the button stack
    This is what I suggested first. When you have HTML that you want to add to your page… there’s a stack for that: the HTML stack. So add an HTML stack and put your HTML into it. That will work, and it will be exactly what your shopping cart platform wants. I’d recommend doing this first, just to make sure it works. It’s always good to do the easiest thing first – and work towards the harder thing.

  2. Give the button stack what it expects
    The button Stack has two main configurable bits: the label, and the link.

  • The label
    It looks to me like you’ve been jamming your HTML into the label-text. That’s not what the label is for. It’s just a label. Just put the Add to Order in there (or whatever label you want).
  • The link
    The link is in the settings. Click the “i” button to open the settings. Then click the Set Link button.
    Pasted_Image_10_16_16__4_35_PM.png845×182 15.5 KB
    Add the link that you want. In your HTML from your cart that will probably be pretty easy to identify. It’ll be the stuff right after the word href. So if your HTML looks like:
<a href="https://www.merchant.com/cgi-local/cart.cgi?vendorname_12345" someotherjunk>Add To Order</a>

then you’ll want to put just the URL bit in there: https://www.merchant.com/cgi-local/cart.cgi?vendorname_12345

Of course, I can’t see your entire HTML – so I’m making a lot of educated guesses here. If there was more to your HTML than just a simple link (a Javascript for instance) – then the button stack might not be exactly the right tool for this job. If that’s the case, then I’d really recommend sticking with the HTML stack (#1).

Isaiah

1 Like
9

Hi Isaiah,

Thanks for your input.

i have been using the HTML stack all along - which is fine for just text.

The problem here is that i want my cart button to be an image, and not text.

So by using the button stack and adding my carts HTML code in the button text box it does in fact work as it connects the link perfectly. But as you see i get extra little versions of itself.

But surprisingly when I try to add my shopping cart HTML code into the link by way of the inspector for the button, it does not work at all.

Another way would be to link an image. I have tried to find a way to link images to external URL.

But there doesn’t seem to be a way to make a link on an image? Which seems quite a basic things to want to do. ~ So I’ve looked all over and just can’t seem to find out how to do this??

10

Did you try the suggestion (numbered #2) above on how to use the button correctly. It sounds from your comment like you didn’t. Sorry if I misinterpreted. But I think it would work just fine.

If it doesn’t, if you’d post your HTML, I can help you put it into the button correctly (or attach it to an image).

Isaiah

11

Hi Isaiah,

I did try the suggestion 2, but it didn’t seem to make a link work, perhaps i should have added or erased some of the code? It is HTML code as far as I know and not javascript.

Heres the all of it. Would be great if you can shed more light on how i can proceed. Much appreciated. Thanks :slight_smile:

‘’’

ADD TO ORDER

‘’’

I

12

Well that didn’t work despite my adding the back ticks front and back of the code.

13

you used apostrophy’s ‘’’ not back ticks ``` (on same key as ~)

14

ok got it :slight_smile:

<a href="https://www.ccnow.com/cgi-local/cart.cgi?njbeauty_NWP_http://www.naturaljapanesebeauty.com">
    ADD TO ORDER
    </a>
15

Easy peasy pie. Just do this:

To set the button link

  1. Drag a button stack to the layout.
  2. Open the info sidebar and click the Set Link button.
  3. Set the link to the URL in your code:
https://www.ccnow.com/cgi-local/cart.cgi?njbeauty_NWP_http://www.naturaljapanesebeauty.com

####To set the label

  1. Double click on the Change Me text
  2. Set it to “ADD TO ORDER”

All done!

2 Likes
16

Hi Isaiah Thank you! That worked perfectly!

So I removed all the angle brackets and html tags at the beginning and end of the code. And also removed the ‘add to order’ text which was actually left there from a previous button image. Great!

Now I can do all of the other products with the same format!
Very pleased with this outcome. Problem solved! Thanks again. :smile:

2 Likes