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

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

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

Quote

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?

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.

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.

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.     

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.