Jump to content

Recipe Counter

Recommended Posts

  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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 by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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