kgkraeer Posted June 29, 2022 Share Posted June 29, 2022 (edited) Site URL: https://thewestcoastkraeers.com Hey guys, site password is "css-for-days". Been looking into this for a while now without much luck. I followed this tutorial: https://kerstinmartin.com/blog/file-upload to make a File Upload Custom Form for our "Coffee Mug with Custom Artwork" product page. It all works fine, and links to a dropbox folder: Except when I click here in the shopping cart: I see the ugly href link instead of the upload button that was there. Can I just hide that text block entirely in this particular popup window? Thanks in advance for any advice! Edited June 29, 2022 by kgkraeer Link to comment
creedon Posted June 29, 2022 Share Posted June 29, 2022 What you are seeing is one of the downsides of using input fields that don't explicitly say they accept HTML. What may work in one place, may not in another. SS has been slowly fixing these input fields that accept HTML that don't explicitly say they do. The site URL you provided doesn't work so I can't provide exact CSS for your issue. Add the following to Design > Custom CSS as a possible first try. .cart-product-form-field-container:first-child { display : none; } I suggest not hiding that field but instead using some JavaScript to make the HTML in the label active again. That would provide a more consistent user experience. I don't have JS at hand to do that and it's actually a bit involved because of how the cart page works. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kgkraeer Posted June 29, 2022 Author Share Posted June 29, 2022 Thanks Creedon, sorry the site URL didn't work, it should be fixed now: https://www.thewestcoastkraeers.com/ Tried that code but no luck so far. I'll see what I can dig up by way of Javascript. Would you by chance have ideas for a fallback method? Am I overthinking this problem or overlooking a simpler way to let users upload a custom image? Link to comment
Solution creedon Posted June 30, 2022 Solution Share Posted June 30, 2022 Now that I can see your site, any way you slice this thing there are going to be issues. If you try to replicate the product page form behaviour that will be complex and require JavaScript. If you go CSS only and hide stuff then you lose the ability for the customer to upload an image from the cart page. Although if that feature is maintained it has its own issue in that you could get more than one image for an order item. Which one is the one the customer wants? The last one? How do you determine that? Plus there are several other issues matching up pics with customer's order items. SS and Dropbox are not aware of what each other is doing. If you go with CSS you should be able to hide the edit form or some of its elements. The downside here is if the customer didn't upload on product page then you don't get an image. Contact customer and spend time getting image. If you go the CSS only route it might be easier to hide the Edit Details link. Using a service like DropBox I don't see an easier way to upload files. They'd all have a similar experience. I don't know of a more elegant solution interface wise. No easy answers on this one. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kgkraeer Posted June 30, 2022 Author Share Posted June 30, 2022 Thanks so much for this Creedon, that might actually work for us. I'll need to run it by the client - my wife! While we're here - you may have noticed some css rollover flourishes at the top of the page; stars and lines that scale out from the nav options. Because I'm using this CSS: Quote @media (pointer:fine), (hover:hover) { .ProductItem .ProductItem-details { padding-top: 0; margin-top: -2em; } } section[data-section-id="62a6d615ecc8760408b7d342"] { margin-top:-5em; } the flourishes are covered up by the page content (background?) of the shop. Is there a way to make the section background on those pages transparent, so we can see the flourishes? Or should we revert this CSS and learn to live with the large empty space at the top of the shop pages? With the default spacing, you can see the rollovers. Thanks again for taking the time to look at this! Link to comment
kgkraeer Posted June 30, 2022 Author Share Posted June 30, 2022 (edited) Actually was able to solve the section background issue by implementing some CSS by tuanphan in a thread from last year: [data-section-id="62a6d615ecc8760408b7d342"] { background-color:transparent !important; } [data-section-id="62a6d615ecc8760408b7d342"] .section-background { background-color:transparent !important; } Where the id is the section containing the product gallery and product details content. Thanks again for all your help! Edited June 30, 2022 by kgkraeer Link to comment
kgkraeer Posted June 30, 2022 Author Share Posted June 30, 2022 Last post I swear - building on Creedon's post, I hid the "Edit Details" link in the cart, and replaced it with an unclick-able "Custom File Uploaded" notification: #cart [aria-label="Coffee Mug with Custom Artwork"] ~ .cart-row-edit { font-size: 0; pointer-events: none; text-decoration:none; } #cart [aria-label="Coffee Mug with Custom Artwork"] ~ .cart-row-edit:after { font-size: 1rem; pointer-events: none; decoration:none; color:#98b6bb; content: 'Custom File Uploaded'; font-family: 'button' !important; } Of course, we don't know that the user ACTUALLY uploaded anything. All they have to do is hit "Add to Cart" on the upload popup. But for our purposes it should work; we'll cross that bridge when we get to it if there are any issues. 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