Guest TopDoris Posted February 9, 2021 Share Posted February 9, 2021 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
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 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
creedon Posted February 14, 2021 Share Posted February 14, 2021 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 best , and see my profile. Thanks for your support! Link to comment
creedon Posted February 14, 2021 Share Posted February 14, 2021 (edited) 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 February 14, 2021 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 Posted February 14, 2021 Share Posted February 14, 2021 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
creedon Posted February 14, 2021 Share Posted February 14, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment