Cooking recipes ingredients field advise

[MilenKo]

Hello guys.

I am starting as a new project to work with my daughter on a cooking recipes website to use it as an initial web development learning curve (for both of us ). So far we did the main page and category listings, but now we need to find an approach for adding the ingredients. Initially I thought to add a simple TextArea field and allow to list the ingredients, quantities etc. in it, however that won't allow us to style it properly (especially if somebody else is adding recipes too).

What we are trying to achieve is an ability to add ingredients one per line and then style them with a class in between <ul> & <li> (my guess guess is we need to use some php to separate every line from the rest and make it an array or else but how to easily achieve it - that is the question)

Any ideas/suggestions how to accomplish that?

[BitPoet]

I'd probably use a repeater with fields "quantity", "unit" and "ingredient". This way, you can also do searches for individual ingredients and reorder them easily.

But you can of course go the textarea way and simply split its content on newlines.

<ul class='ingredients'>
<?php
	foreach(explode("\n", $pages->ingredients) as $ingredient) {
		echo "<li>$ingredient</li>\n"
	}
?>
</ul>

 

[MilenKo]

Thank you very much for the sharing, BitPoet. At first I thought of an repeater too, however some "tough" recipes would call for 10-15 ingredients (if not more) and it would look a bit confusing. On top of that we need to insert some dividers to group some ingredients too. I also thought to try with PageReference field however that might be even more confusing than the repeaters as only two of the four fields need to be referenced and the other two just text. Unless there is another way to have four different fields to be grouped on one line and added at once, I think we are running out of options (other than having a custom js/jquery script to do that - which is beyond our power yet).

Will give a try to split the lines and eventually use a #TEXT# to insert dividers and see how it goes from there. For sure, having a text field would also allow me to search for ingredients, and/or directions being done the same way.

Will let you know how it goes after implementing this tonight after school

 

[adrian]

I think Profields Table might be the nicest solution for this - one column each for "quantity", "unit" and "ingredient". 

[MilenKo]

Thanks for the advice @adrian. I will have to look into it for the future. As far as this is a premium project, at least it will support the development

For the moment we decided to simplify the things and go with @BitPoet suggestion as it would allow us easily to add recipes in the future by just copy/pasting ingredients from our old website to the new one.

[adrian]

Or if you up are for a little bit of a challenge and great learning experience, you could create your own custom fieldtype based off the Event fieldtype:

http://modules.processwire.com/modules/fieldtype-events/

[MilenKo]

@adrian I am thrilled by your suggestion and would give it a try once the main functionality is achieved.

For the moment both the ingredients and Cooking instructions were completed using a textarea field with 1 ingredient per line. Here is the code in case somebody needs it:

<ul class="ingredients">
  <?php foreach(explode("\n", $page->recipe_ingredients) as $ingredient) { // Explode function is to get the value before Enter key
$incr = $incr + 1; 														 // Increment is used for the checkbox 
?>
  <li>
    <input id="check-<?=$incr;?>" type="checkbox" name="check" value="check-<?=$incr;?>">
    <label itemprop="ingredients" for="check-<?=$incr;?>"><?=$ingredient;?></label>
  </li>				
  <? } ?>

</ul>