Jump to content

Is this code for an 'Add to Cart' button ok to use?

Recommended Posts

Guest TopDoris

Hi,

I'm hoping someone can verify if the code I'm using for a manually added 'Add to Cart' button is valid and will not cause issues.

The button code sits within a standard SQSP Markdown block.  When clicked the button should add a specific 'Service' product, defined by 'data-item-id', to the cart.

<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-item-id="70221edaf456fe6e9b6b675c" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Coming Soon</div></div>

Also, I can't find any information about the 'data-product-type' to confirm if "1" is correct for a 'Service' product type. Does anyone know?  

Thanks

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Hi,
If you haven't received an answer yet, you can post on some FB groups
+ Squarespace Customization Resource Groups
+ Squarespace Community
+ Squarespace Entrepreneur
+ Squarespace Rockstars

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

You'll want to add the following attribute to the first div in your code.

data-original-label="Coming Soon"

SS needs that attribute to put the original label for the button back in place after changing it during the add process.

Otherwise I think that code should work OK. Will it work like a real SS add to cart button? I don't know doing this kind of thing is a bit of a hack in the first place. In the testing I just did my custom button worked OK.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
Guest TopDoris
18 hours ago, creedon said:

I just looked at the code for an add to cart button for a service product and the data-product-type attribute value is 3.

 

17 hours ago, creedon said:

You'll want to add the following attribute to the first div in your code.


data-original-label="Coming Soon"

SS needs that attribute to put the original label for the button back in place after changing it during the add process.

Otherwise I think that could should work OK. Will it work like a real SS add to cart button? I don't know doing this kind of thing is a bit of a hack in the first place. In the testing I just did my custom button worked OK.

Thanks for that Tom, much appreciated.

You mentioned you'd 'looked at the code for an add to cart button' - can you advise how/where you were able to look at the button code so I can do some digging myself? I have a similar requirement for a 'Form' button, where I want to be able to have a button on several different sections and pages but that points visitors to a single, specific form, and so need to understand the code behind form buttons as well. Thanks again.     

Link to comment

Many browsers have developer tools built in. Use a search engine, type in your browser name and developer tools inspect. For example "chrome developer tools inspect".

That should get you started.

Then to use the tools in general you right click on an element of a page and select inspect and a whole world of info is available for your inspection.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.