Recipe Counter

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.

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  ⬇️