inthegrid Posted November 24, 2022 Share Posted November 24, 2022 Hi community 🌝 I wonder if anyone can assist adding a recipe counter? I attach an example: https://www.pickuplimes.com/recipe/quick-garlic-chili-noodles-848 The amount of ingredients change, when serving (+/-) change. Anyone done this before? Help much needed, thank you so much in advance. Link to comment
paul2009 Posted November 25, 2022 Share Posted November 25, 2022 (edited) 20 hours ago, inthegrid said: I wonder if anyone can assist adding a recipe counter? The amount of ingredients change, when serving (+/-) change. It's a lovely site that you've linked, but I believe it is a custom build, so whilst it would likely cost 100x more than Squarespace, it will have been built to allow recipes to be added easily. On Squarespace 7.1 this isn't so easy. You'll be able to build a beautiful site more easily, but you cannot create custom post types to make recipe entry easier. Instead, you'll need to add some HTML to each and every recipe page/post. The recipe serving calculator isn't trivial either. It's straightforward for a developer but it will probably involve around 500+ lines of JavaScript code. That said, to give you an idea of what is involved, here's a summary of what you'd do to achieve this on Squarespace. I hope it helps to get you started. Use a Code Block or Code Injection to create the HTML required to show the "servings" input and +/- buttons. Something like: <div class="servings-wrapper"> <span class="servings"> <button type="button" class="btn-style" data-type="minus" data-field="quantity"> <span class="icon">-</span> </button> </span> <input type="text" name="quantity" class="" value="4" min="1" max="999" aria-label="Number of servings input"> <span class="servings"> <button type="button" class="btn-style" data-type="plus" data-field="quantity"> <span class="icon">+</span> </button> </span> </div> Use a Code Block instead of a Text Block to display the "Ingredients" panel. Give each ingredient a type that represents the units being used for that ingredient (oz, g, cups, quantity) and a value that represents the number of those units (7oz, 200g, 1 cup and so on). Here's a basic example to show what I mean: <div class="ingredient-list-wrapper"> <section> <h2>Ingredients</h2> <ul class="ingredient-list"> <li> <div class="ingredient-wrapper"> <span class="ingredient-amount" type="oz" value="7.055">7.1 oz</span> <span class="ingredient-amount-metric" value="200">(200 g)</span> <div class="ingredient-name">Flat Noodles</div> </div> </li> <li> ... </li> <li> ... </li> <li> ... </li> </ul> </section> </div> Create one line item ("li") for each ingredient, each containing the name, units and value. Write some Javascript that reacts to clicks on the plus and minus buttons so that: the servings number updates the ingredient amount updates the metric equivalent (if there is one) updates Did this help? Please give feedback by clicking an icon below ⬇️ Edited November 25, 2022 by paul2009 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? 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