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
  • Views 637
  • Created
  • Last Reply
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.