#DailyBloggingChallenge (328/365)

The initial partial that is created is a button for #paypal.

This is done by saving a `paypal` param in the meta data of the article and then injected as an anchor tag onto the button.

The styling of the button is saved in a custom header partial that the theme provides.

#DailyBloggingChallenge (329/365)

This approach sounds quite good on paper, but #paypal carts don't work so simplistically.

Although this might sound like a headache initially, in the long run it is quite beneficial.

The paypal cart or form has a couple values which are important.

The main one is the form id. This exists in either case of purchasing an item from a single button or from a dropdown.

In the case of a dropdown selection, then the keys and values of the table cells are important.

#DailyBloggingChallenge (330/365)

Now that these factors are known, one gets start building the params' structure. The easiest is to have a param for the form id and an array of items for the store catalogue.

Each item of the array has a key, a value, and a image.

Further one can setup special params for the other table variables, though from brief comparison over three separate forms, they seem to stay constant.

#DailyBloggingChallenge (338/365)

The #HTML code from #PayPal looks like the image with these variables:

- `<PAYPAL_TOKEN>` is the main PayPal hook, so it knows how to update the store relative to all further actions taken within the form
- `<PAYPAL_INIT_REFERENCE>` usually as `on0`
- `<PAYPAL_INIT_VALUE>` is usually equivalent to `<PAYPAL_ITEM_1_VALUE>`
- `<PAYPAL_INIT_NAME>` is usually equivalent to `<PAYPAL_ITEM_1_NAME>`
- `<PAYPAL_ITEM_1_NAME>` is usually equal to `<PAYPAL_ITEM_1_VALUE>`
- `<PAYPAL_ITEM_2_NAME>` is usually equal to `<PAYPAL_ITEM_2_VALUE>`

#DailyBloggingChallenge (339/365)

Through the abstraction of these variables and using the power of an array in the meta of #Hugo as #toml, one can create an item like in the image.

The array in this example is called `paypalItems` and each element has the properties: `name, value, image`. Further properties of the meta are `paypal` as the `<PAYPAL_TOKEN>`, `price` should align with the price within the #paypal cart, `paypalHeadName` as `<PAYPAL_INIT_REFERENCE>`
paypalHeadValue as `<PAYPAL_INIT_VALUE>`.

Of course one could optimize the code somewhat by removing the variables that have `INIT_(VALUE|NAME)` within them and replacing them by the first item `1_(VALUE|NAME)`. And replacing `<PAYPAL_INIT_REFERENCE>` with `on0`.

#DailyBloggingChallenge (340/365)

Now we will create a partial called `paypal-button.html` within the `layouts/partials/` directory. We want to call this partial like

`{{ partial "paypal-button" (dict "paypal" .Params.paypal "items" .Params.paypalItems "headName" .Params.paypalHeadName "headValue" .Params.paypalHeadValue) }}`

within a list template (either the default or another partial).

#Hugo

#DailyBloggingChallenge (341/365)

The question now is how to build the partial. Since #Hugo is a static site generator that focuses on using static elements like raw #HTML and #CSS, one quickly realizes the options to continue further are not many.

One could try to use the CSS `option:checked` property and other pseudo classes within the `<option>` HTML tag to turn on and off the various choices within the array. Though this becomes quite difficult to reference items outside of the `<option>` tag and can make the whole thing an UX nightmare.

#DailyBloggingChallenge (342/365)

First we want to resolve the UX nightmare issue by designing the UI usable.

Let's go with this arrangement of items:

- title of item
- image of item
- drop-down to choose the item

This means we want to create some kind of callback that updates the prior two components that are dependent on the selection within the drop-down. Thus, we will need to extend #Hugo with #JavaScript while using #golang.

#DailyBloggingChallenge (343/365)

Time to make an overview of what we have so far:

(image Initial)

Since we are already using the callback approach, it would be better to move out everything that is not viable to the #paypal form. Thus making the overview more like

(image Reformed)

#Hugo #HTML #XML

#DailyBloggingChallenge (344/365)

Let's say we would implement this pseudo code for the subdirectory `content/post/store`. It would work fine for one product in the subdirectory `store`.

Now let's add a second product that also has the same form (339) with different values.

If one would change either drop-down, both would update. The reason is that the #JavaScript callback is only checking for the #CSS class change and not for an unique class.

References

- 339: https://qoto.org/@barefootstache/112786502951083139

#DailyBloggingChallenge (345/365)

The next step is to create an unique value. Luckily #Hugo has a built in command via

`{{ $uniqueID := .File.UniqueID }}`

which needs to be placed within a range tag meaning within

`{{ range .Pages }}`

So the whole `list.html` file would look like the image. We are also passing in the `"uniqueID" $uniqueID` as the last parameter in the `dict` for the `partial "paypal-button"`.

#DailyBloggingChallenge (348/365)

In 342 the first mention of using a callback function is used without any concrete description of how it shall be built. From the last image one needs to change the partial reference to be saved as a variable which is then piped with `safeHTML`, so

`{{ $itemsOutput := partial "paypal-button" (dict "paypal" .Params.paypal "items" .Params.paypalItems "headName" .Params.paypalHeadName "headValue" .Params.paypalHeadValue "uniqueID" $uniqueID) }}`

and the rendering is done via

`{{ $itemsOutput | safeHTML }}`

- 342: https://qoto.org/@barefootstache/112786710916723982

#DailyBloggingChallenge (349/365)

Further within the partial, since `safeHTML` will be used one can parse string using #HTML and #JavaScript syntax within #GoLang. As an example

`{{ $output := "" }}`

`{{ $output = print $output "<span>Example</span>" }}`

`{{ return $output }}`

This creates a `<span>`-tag with the text `Example` after `safeHTML` pipe is applied.

#DailyBloggingChallenge (350/365)

Now wrap the #HTML code (338) with a `<div>` and a #CSS class that extends the `uniqueID` (345) in its name. The pseudo code looks like the image.

- 338: https://qoto.org/@barefootstache/112786449265511946
- 345: https://qoto.org/@barefootstache/112786991862960301

#DailyBloggingChallenge (351/365)

Now that the #PseudoCode exists, it shall be converted into #Hugo syntax as described in 349. As in the image, some #GoLang functions are used like `printf` and other Hugo functions to loop over the variables that are saved as an array type.

- 349: https://qoto.org/@barefootstache/112915585198772399

#DailyBloggingChallenge (352/365)

This code will generate dynamically based off of the length of the `paypalItem` or `.items` variable and use the first element of it as the default value (line 9).

Next one will extend the code with more CSS classes to ease the referencing of the JavaScript actions.

#DailyBloggingChallenge (353/365)

Looking at the #JavaScript code in the image that will be parsed over #GoLang using the `printf` function.

First one creates a `change` event listener function that is bound to the id of `item-select-$uniqueID`. The `<select>`-tag shall be added the `id` attribute in line 13 (351).

Additionally a custom attribute `data-image` shall be created and placed on the `<option>`-tag in line 15 (351). This holds the path to the image value within the `paypalItems` element.

Outside of the partial the #CSS classes `selected-value` and `selected-image` need to be defined. They present the respective values from `paypalItems` element.

In the initial case, lines 10-11 will be called that take the value from the first element in the `paypalItems` array. Defined from `{{ $selectedValue := index .items 0 }}` which shall be prepended before the JavaScript code.

- 351: https://qoto.org/@barefootstache/112915802181947117

#DailyBloggingChallenge (354/365)

The whole code of the partial looks like in the image.

A lot of this code can be squashed to save space for the cost of readability.

@barefootstache Great read actually and clarity... worthy preparation for the client - they should pay you in explaining it all! :)

What about payment options or ever done an exchange of services or material? (chances are low but if happen to find someone, say me to do some audio editing / podcast work in exchange for a site - I'm not asking btw)...
I know moolah 🏦 is #1 but both paying and also getting charged for it is a bit like hmm,...
And chances are low like every 100 Fediverse person you meet can do something if even chances are still super-low but well what do you think - do you have wishlist of project you could hand off a bit to someone else to start / continue / finish?.

yeah ACTUALLY matching wants would be cool - what do you think... actually like a website with #wishlist ?
Would by-pass somewhat the dirty rotten middle-men and at the same time encouraging those who have skills on #Fediverse! 🤔 🤔 ?

@barefootstache Sure from their view, and from another view those that are more intentional perhaps "For the Fediverse" (in very short) and other reasons (not the only one, we still genuinely give and take what we can and exchange meanwhile in other ways too). But practising / experimenting / a bit of self-development could go a long way else not losing much... We have a good wishlist to show each other at the end and perhaps pin it to our profile :)

Something else also is there for me like the "Doing if for ourselves" | DIY ways |"For the love it" | "On the Fediverse, For the Fediverse" means many reasons can be included as people prefer things here (interface, social, anti-cap) and I guess these are what might curve or re-direct people's existing wants and why... to make it the reason also! (it's not exclusive)

Even if it's a basic list to start off with just for me and only those that actually want to chat will write it, I think it's still very interesting :) even in the lowest responses... say just you and one by one for now... (do you mind a quick wish or project list? thanks!)

But to include Fediverse also is "in order to populate / propagate work here instead of 'there'..." and that could be a sort of principle written up for this idea so that it's as a 'Manifesto' or alignment of all our efforts or even something fun.

Much like a new way or new path or new software, it might serve people almost the same in the end while providing another eco-system here all the while... (a bit of ping pong and interest will soon prove itself and well there is actually time to let it simmer or slow-cook / seed etc)

If a few people get what they want done (even without caring much) they might use things as they are already here (like #hashtags for @freemo ALL the jobs he needed 11+ maybe but I remember it was just hashtags that did it!!) What a win for #Fedihire and #Job hashtag and I helped to overload hashtags to get that (he didn't have #Fedihire which is more respected now maybe for high quality jobs)

So just to stick a wish list on their pinned list for their practise and test to see what happens... might not be too bad!

Doesn't seem to cost much and even I could throw some money to it to help incentivise or get idea clear somewhere even on another external page (lol) but somewhere clean and clear and then back to here... maybe just images of the steps I'll work on as as wishlist icon and pinned post...

Summary... (that for reading and considering problems or what sounds best to you)

A kind of "doing it for ourselves" is really what's needed so this is part of that without trying to break ourselves over it or break the bridges of reality without something too new - just us more conscious or testing perhaps...
Even Gartner-effect it while being totally honest it's just starting or if I pay the way for people's wishes to be done in order to start things off and then "pay it forward"... then so be it, I'm seriously happy to throw money at Fediverse now and also before my own educational test and attempts here are complete...

https://en.wikipedia.org/wiki/Gartner_hype_cycle#Hype_in_new_media

#Wishlist #GiveTake #Opportunities #Jobs #FediHire #Activities #WantedAds #LocalAds #etc

@barefootstache Just had a thought, without causing offence I hope,..

I wanted to delay writing but perhaps before something happens to my screen I send it...

It occurred to me perhaps in the mind of someone analytical or deeper in STEM that all these reasons I give about Fediverse, for the love of things.. etc... are basically all uninteresting for these types of person, and it's not even on the radar of interest for these types to try or more to question why one others improvement benefits them or helping people together or just human stuff overall perhaps!..

Even as test... knowing it's human to human in a chain... I think people might want the end point and to terminate when it reaches a computer... !

I mean probably not you completely but from a scientific (or other word like binary) view, a sort of "why do any of this stuff?" and it's all so messy with a person - give me a programming language instead. Seems to be something I discover a lot... so this is helping me here... where I think this might be the case with this kind of grey human stuff on a STEM server which often claims to be for some betterment but ultimately for STEM and not really humans? I think this is self evident by the amount of posts for this or the other...

I may be inaccurate but generally what I think I've see is this "all or nothing" or "tech or no tech" or "it works already or else it needs to be broken first totally before we fix it" and certainly the human relationship or unity seems not even wanted to be measured.... because it can be, love can be measured also... but almost bizarre to say it like that...

So is it just boy and toys stuck in their own matrix ? Literally sucked in somewhat into the electric toy and challenge to keep those bells and whistles going...

2 beers later and I'll claim that's the reason for sending but really I'm being real to say I might understand I "push people to think for others" as a kind of emotional intelligence or help and they are not interested frankly since they have not such feelings or skill.. Am I kind of right?

I admit over the internet all heat (if anyone had any) can be lost and needs even more compensation / faith internally in people (what I don't have problem with as this is the best we're going to get) and finds it hard not to say "this person is not on my level" and a reason why not even answer / revisit / build the conversation.

Even if it would work perhaps it feels like people would find problems or don't even believe in free!

There's something "too good" or "not the way" about it ! Maybe if it was paid or done a more scientific way it would be far for interesting but again losing the point ! :)

What do you think any truth in any of that without thinking it's personal against you - perhaps common in people in the STEM area working like soldiers (if we can represent them here somewhat knowing that's not perfect) and basically those who don't really care for the other imperfect people and areas because basically the have computer in front of them?

#STEM #Stereotypes #SomethingNotQuiteRight #Speculation