[Product Feature] Linear Meter Sell

[Madbits]

So far I have done the following:

Edit product.tpl and implement 2 buttons around our select element as follows:

 

<div id="minusBtn">-</div>
	<select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="form-control attribute_select no-print">
	{foreach from=$group.attributes key=id_attribute item=group_attribute}
		<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if} title="{$group_attribute|escape:'html':'UTF-8'}">
		{$group_attribute|escape:'html':'UTF-8'}</option>
	{/foreach}
	</select>
<div id="plusBtn">+</div>

 

Then changed their style in product.css so they would look nicer.

 

Then implemented some custom JS into Custom Code as follows:

the following JS code:

var count = 1

document.getElementById('plusBtn').addEventListener('click', function()
{
  if(count < document.getElementById('group_1').options.length)
  {
    count++
    document.getElementById('group_1').value = count
    } else
    {
      document.getElementById('group_1').value = 5
    }
 })


document.getElementById('minusBtn').addEventListener('click', function(){
  if(count > 1){
    count--
  document.getElementById('group_1').value = count
  
    } else{
      document.getElementById('group_1').value = 1
    }
 })

Now issue is that this will use the code on all pages, something which I do not desire, I only want this piece of code on Product.tpl page, although adding it as in <script> tags, crashes the site(error 500).

Besides that, the price does not increase as in when chosing the option from the select element like a dropdown( this product has a combination list that impacts the price ) and when adding the product to cart, it does not add the chosen option, but the default one, as if it wasn't even chosen to begin with.

[wakabayashi]

This custom code isn't the right place, to add new functionality. This is made for adding external js files (like Google Analytics or so). 

You can add the js code also in product.tpl. Just use something like:

{literal}<script>Your code...</script>{/literal}

 

[Madbits]

30 minutes ago, wakabayashi said:

This custom code isn't the right place, to add new functionality. This is made for adding external js files (like Google Analytics or so). 

You can add the js code also in product.tpl. Just use something like:

{literal}<script>Your code...</script>{/literal}

 

Do you know what could be the reason of why the options are chosen only "client-side"?

When the + button is pressed, the option does change, but when adding the product to the cart, it is added with the "default" option.

Eg:

Choosing to buy 1.4m of curtain (ignore the dropdown button, I keep it for testing, if choosing our 1.4m by dropdown button, it works perfectly) :

now pressing add to cart button, results in:

 

Edit:

 

Just discovered that when increasing product meter by pressing the "+" button and THEN refreshing the page, saves it with the amount chosen via "+" or "-" buttons.

Edited August 4, 2020 by Madbits

[wakabayashi]

I am no JS Expert. I normally work with Jquery. But Vanilla JS is completly fine. Maybe a link to the site makes it easier to understand...

[Madbits]

On 8/4/2020 at 6:12 PM, wakabayashi said:

I am no JS Expert. I normally work with Jquery. But Vanilla JS is completly fine. Maybe a link to the site makes it easier to understand...

Link to product with the said feature: Click Here

 

 

Edited August 11, 2020 by Madbits

[wakabayashi]

1 hour ago, Madbits said:

document.getElementById('plusBtn').addEventListener('click', function() { if(count < document.getElementById('group_1').options.length) { count++ document.getElementById('group_1').value = count } else { document.getElementById('group_1').value = 5 } })

Your code is very unclear to me... What is count?

Not sure but maybe you also need something like 

document.getElementById('group_1').selectedIndex = count;

 

[wakabayashi]

Probably you should use this: https://stackoverflow.com/questions/7373058/changing-the-selected-option-of-an-html-select-element/7373115

[Wartin]

1 hour ago, Madbits said:

I only want this piece of code on Product.tpl

In templates files you can do:

{if $page_name=='product'}
   blabla
{else}
   otherblabla
{/if}

 

Edited August 4, 2020 by Wartin

[Briljander]

Do TB stock handle decimals? 

[wakabayashi]

24 minutes ago, Briljander said:

Do TB stock handle decimals? 

No. He is probably using attributes...

[Madbits]

On 8/4/2020 at 8:08 PM, wakabayashi said:

No. He is probably using attributes...

I am using attributes as I do not really care about the stock/inventory.

On 8/4/2020 at 6:25 PM, wakabayashi said:

Your code is very unclear to me... What is count?

Not sure but maybe you also need something like 

document.getElementById('group_1').selectedIndex = count;

 

Basically we use count to determine the incrementation/decrementation of the list.

But if you read the code, it's really easy to figure it out, if count increment -> the selected option in the list is equal to count, eg: count is 2, the second option in the list is selected.

Although no matter what you still need a "count" to "save" latest position.

Although I have tried to run it without count and I had the exact same results.

On 8/4/2020 at 6:28 PM, wakabayashi said:

Probably you should use this: https://stackoverflow.com/questions/7373058/changing-the-selected-option-of-an-html-select-element/7373115

I will come back with the results in regards to this.

 

On 8/4/2020 at 6:54 PM, Wartin said:

In templates files you can do:

{if $page_name=='product'}
   blabla
{else}
   otherblabla
{/if}

 

Thank you. Good to know.

Edited October 14, 2020 by Madbits

[datakick]

Call function getProductAttribute() every time you change attribute value. Something like this:

document.getElementById('group_1').value = count;
getProductAttribute();

That should do the trick

[Madbits]

7 minutes ago, datakick said:

Call function getProductAttribute() every time you change attribute value. Something like this:

document.getElementById('group_1').value = count;
getProductAttribute();

That should do the trick

Mhmm, is that function predefined in JS anywhere? Gonna give it a try right now.

 

YES, YES IT WORKED, YOU DID IT. ❤️

 

Where can I find some documentation with more functions like that?

Edited August 5, 2020 by Madbits

[datakick]

4 minutes ago, Madbits said:

Where can I find some documentation with more functions like that?

nowhere 🙂

In fact, this function is defined in product.js, which is part of your theme. But it's not guaranteed that this function exists in all themes -- it's really theme specific. Which is a shame.

One of the great things that ps17 did is they introduced core javascript interface. Modules can use this interface to subscribe to events on page, and to modify content such as change attribute, etc. All ps17 themes support this. That makes ui development much more easier.

TB should definitely introduce something similar, if you ask me

[Madbits]

3 minutes ago, datakick said:

nowhere 🙂

In fact, this function is defined in product.js, which is part of your theme. But it's not guaranteed that this function exists in all themes -- it's really theme specific. Which is a shame.

One of the great things that ps17 did is they introduced core javascript interface. Modules can use this interface to subscribe to events on page, and to modify content such as change attribute, etc. All ps17 themes support this. That makes ui development much more easier.

TB should definitely introduce something similar, if you ask me

It truly is a shame and indeed if TB would do this, it would make things so much easier for developers.

Well, at least now that I know this, when I'll start developing themes for TB, I'll include sets of functions too, hopefully we will see something like this in the next TB version, a folder with lots of specific calls like this one that we just used.

 

Oh man, you saved me so much time with you reply.

Thank you.