Editing a shopping cart add to cart button


On my site I have some add to cart buttons and in the html code I have added an id and a class=editable however when the page is added to surreal cms it says there is no defined regions.

If I try and define the cart button from within the cms it wont allow me to select it. What am I doing wrong here.



It sounds like something isn’t setup right. A few possibilities:

  • Your URL and home folder aren’t pointing to the same place. You can verify this in Sites > Edit Site.

  • Your website isn’t publicly accessible (via HTTP) yet. The editor loads certain resources over HTTP, so it needs to be accessible to Surreal.

  • Your web host is blocking Surreal from viewing the page over HTTP. This is rare, but I’ve seen at least one host block requests based on user agent to prevent automated requests.

If that doesn’t help, submit a help request with more details so I can take a look at the website :slight_smile:


Hi Cory,

Thanks for the info.

I double checked the home folder and it is set to public_html and that is where all my files are so that is correct.

My site is a https site is that of any issue?

Here is a link to my site page with the editable regions on.
www.grahamscomputers.net/webdesigns.html designs.html

Here is the part that has the editable code in, there are 3 of these regions on the page identical

<div id="wb_goldpack">
<form  action="https://ww11.aitsafe.com/cf/add.cfm" method="post">
	<input type="hidden" name="userid" value="D939432">
	<input type="hidden" name="return" value="https://www.grahamscomputers.net/webdesigns.html">
<input type="hidden" name="nocart">
<div id="Gold" class="editable">
<input type="hidden" name="product" value="Gold Web Pack">
<input type="hidden" name="discountpr" value="0,1500">

the code above is part of the add to cart button and the editable part is not a actual visible part on the page.



That page is loading for me in the editor (no error message). However, the reason you don’t see the content regions is because they’re defined only with hidden inputs, making them more or less invisible:

<div id="Bronze" class="editable">
  <input type="hidden" name="product" value="Bronze Web Pack">
  <input type="hidden" name="discountpr" value="0,650">

I recommend not putting hidden elements or form inputs into editable regions. Users can’t see them so they can very easily be deleted or overwritten.

That said, if you wanted to make the button label or the details of each package editable, that’s totally fine. In that case, you’ll just need to move the editable class to the appropriate containers :slight_smile: