Recipe quantity resizer

General questions relating to Joomla! 3.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Post Reply
ud1955
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Thu Jun 24, 2021 12:32 am

Recipe quantity resizer

Post by ud1955 » Thu Jun 24, 2021 12:40 am

Hello,
I would like to add a recipe quantity resizer to Joomla template to cahnge by the user the Ingredients for 4 Servings to any required value.
I have no experience with code writing....How do i get the quantity valuse from Joomla custom field?
I think it can be very useful and hope for help.
Thanks!

Fields group = recipe
Fields: quantity, unit,ingredient, calories

govb8_fields
govb8_fields_groups
govb8_fields_values

Ingredients example

Ingredients for: 4 servings
650 grams of mutton cubes
6 Lamb fat / olive oil / other oil
1 teaspoon salt
1 glass of beer
2 glasses of water
1.5 - 2 pieces of chopped onion
2 pieces of leek
3 cups chopped arugula
1.5 cup chopped shallots
1 cup chopped fresh coriander
4 kg of fresh red beets cut into cubes
1 teaspoon cumin
10 cloves of garlic
Ingredients for decoration
2 teaspoons dried coriander seeds
½ A cup of finely chopped coriander
½ cup chopped leek
2 teaspoons coarsely crushed coriander seeds

HERE IS THE CODE:

<!DOCTYPE html>

<html>
<head>
<!-- todo: * refactoring (variablenames!) -->

<div class="servings">servings: <input type="number" size="3" value="4" id="servings"></div>

<ul id="ingredients"></ul>
<style>
//reset
@import "https://codepen.io/seagullcodepen/pen/EGJVxB.css";
//center
@import "https://codepen.io/seagullcodepen/pen/xmeGNv.css";

body {
flex-direction: column;
}

// ---

.servings {
padding-bottom: 2em;
input {
text-align: right;
}
}

#ingredients {
list-style-type: none;
li + li {
margin-top: 0.5em;
}
}

.additional-info[data-isset="true"] {
color: dimgray;
font-size: 0.8em;
&::before {
content: "- ";
}
}
</style>

<script>
console.clear();

let template = <li> <span class="value" data-initvalue="{{value}}"> {{value}} </span> <span class="unit"> {{unit}} </span> <span class="item"> {{item}} </span> <span class="additional-info" data-isset="{{additional-isset}}"> {{additional}} </span> </li>;
// get rid of new lines and more than two whitespaces
// template = template.replace(/(\n|\s{2,})/g,'');

// data is retrived via backend, api, or whatever
data = [
{
item: "flour",
value: 250,
unit: "g",
additional: ""
},
{
item: "starch flour",
value: 80,
unit: "g",
additional: "corn, potato"
},
{
item: "water",
value: 200,
unit: "ml",
additional: "lukewarm"
}
];

const container = document.querySelector("#ingredients");

function mustache(template, view) {
let result = template;
const entries = Object.entries(view);
// pure view transforms
for (let [property, value] of entries) {
const regex = new RegExp({{${property}}}, "g");
if (property == "additional") {
// value = ', ' + value;
}
result = result.replace(regex, value);
}
// custom transforms
if (view.additional != "") {
result = result.replace(/{{additional-isset}}/g, "true");
} else {
result = result.replace(/{{additional-isset}}/g, "false");
}
return result;
}

data.forEach((item) => {
container.innerHTML += mustache(template, item);
});

const serving_el = document.querySelector("#servings");

serving_el.addEventListener("input", handleInput);

function handleInput() {
const value_els = document.querySelectorAll(".value");
const newServingSize = serving_el.value;
value_els.forEach((item) => {
const initValue = item.dataset.initvalue;
const factor = (1 / 4) * newServingSize;
const newValue = initValue * factor;
item.innerText = newValue;
});
}

</script>

<style>
.changePortions {
widht: 300px;
}
</style>

<script>
(function(){
window.recipe = function(config){
var self = this,
globalAmmount = []; //global så att man inte ändrar hur mycket som krävs per portion

//default värden om inget config objekt skickats med
var defaults ={
slider: "#slider",
list: ".ingredientsList",
portions: ".portionsChange",
timeEl: ".timeChange",
time: 0,
val: 1,
max: 5,
min: 1,
unit: "st",
ingredientsList: [],
ingredientsListAmmount: [],
ingredientsListUnit: []
}

var model = {
increment: function (event, ui) {

if (ui) {
self.object.val = ui.value;
};


var i;
for (i = 0; i < self.object.ingredientsListAmmount.length; ++i) {
globalAmmount =self.object.ingredientsListAmmount * self.object.val;
}
view.output();
}
}

var view = {
output: function(){
$(self.object.list).html(""); //resettar listan
$(self.object.portions).html(self.object.val);
$(self.object.timeEl).html(self.object.time*self.object.val);// sätter tiden

var i;
for (i = 0; i < self.object.ingredientsListAmmount.length; ++i) {
var $el = $('<li class="ingredient"><p><span class="amount">'+globalAmmount+'</span> '+self.object.ingredientsListUnit+' '+self.object.ingredientsList+'</p></li>');
$(self.object.list).append($el);
}
}
}

// om ett värde inte är satt sätt det till default
self.object = $.extend({}, defaults, config);

$(self.object.slider).slider({
min: self.object.min,
max: self.object.max,
value: self.object.val,
step: 1,
slide: model.increment
});

model.increment();
}

})();

// Såhär gör du när du lägger till ett nytt recept på sidan då (Du behöver inte speca alla endel är defaults om du kommar på funktionen ovan)
var apple = new recipe({
slider:"#slider",
list: ".ingredientsList",
portions: ".portionsChange",
timeEl: ".timeChange",
time: 60,//per portion
val: 2,
max: 12,
min: 1,
ingredientsList: ["äpple","banan"],
ingredientsListAmmount: [3, 5],
ingredientsListUnit: ["kg", "st"]
});
</script>

</html>

Post Reply

Return to “General Questions/New to Joomla! 3.x”