Dynamic Dropdowns with charateristics & options

jschroeder
Topic Author
Offline

12 years 7 months ago - 12 years 7 months ago #144524 by jschroeder

Dynamic Dropdowns with charateristics & options was created by jschroeder

-- url of the page with the problem -- : 209.59.173.183/mattresses/1-sleep-pedic-hotel-firm.html?popup=1
-- HikaShop version -- : 2.3.0
-- Joomla version -- : 3.2.2
-- PHP version -- : x.x.x
-- Browser(s) name and version -- : XXXXX x.x.x
-- Error-message(debug-mod must be tuned on) -- : Error_message

I am trying to create a dynamic dropdown with my product options and characteristics dropdown. Here are both of my dropdowns below.

Code:

select id="hikashop_product_characteristic_1" name="hikashop_product_characteristic[1]" class="inputbox" size="1" onchange="return hikashopUpdateVariant(this);">
    <option value="2" selected="selected">Twin</option>
    <option value="6">Full</option>
    <option value="7">Queen</option>
    <option value="8">King</option>
    <option value="9">Cal King</option>
</select>
<select id="hikashop_product_option_1" name="hikashop_product_option[1]" class="inputbox" size="1"  onchange="hikashopChangeOption();">
    <option value="0" selected="selected">No</option>
    <option value="775"> Twin ( + 

    $39.99 
 )</option>
    <option value="774"> Twin Heavy Duty ( + 

    $49.99 
 )</option>
    <option value="769"> Twin Heavy Duty Glideamatic ( + 

    $59.99 
 )</option>
    <option value="772"> Twin XL ( + 

    $39.99 
 )</option>
    <option value="771"> Twin XL Heavy Duty ( + 

    $49.99 
 )</option>
    <option value="770"> Twin XL Heavy Duty Glideamatic ( + 

    $59.99 
 )</option>
    <option value="776"> Full ( + 

    $39.99 
 )</option>
    <option value="777"> Full Heavy Duty ( + 

    $49.99 
 )</option>
    <option value="778"> Full Heavy Duty Glideamatic ( + 

    $59.99 
 )</option>
    <option value="773"> Queen ( + 

    $49.99 
 )</option>
    <option value="779"> Queen Heavy Duty ( + 

    $59.99 
 )</option>
    <option value="780"> Queen Heavy Duty Glideamatic ( + 

    $99.99 
 )</option>
    <option value="781"> King ( + 

    $59.99 
 )</option>
    <option value="782"> King Heavy Duty ( + 

    $69.99 
 )</option>
    <option value="783"> King Heavy Duty Glideamatic ( + 

    $99.99 
 )</option>
    <option value="784"> Cal King ( + 

    $59.99 
 )</option>
    <option value="785"> Cal King Heavy Duty ( + 

    $69.99 
 )</option>
    <option value="786"> Cal King Heavy Duty Glideamatic ( + 

    $99.99 
 )</option>
</select>

The problem I am having is on inital page load: it is loading all the values under hikashop_product_option_1 and I only want it to show the value based off what the initial default value is in hikashop_product_characteristic_1
Here is my code on JS Fiddle
jsfiddle.net/HYQpj/4/

I have tried for over 10 Hours today and have been unsuccessful at this. What can I do to get this to work?

Thanks,

Josh

Last edit: 12 years 7 months ago by jschroeder.

Please Log in or Create an account to join the conversation.

Eliot
Offline

12 years 7 months ago #144570 by Eliot

Replied by Eliot on topic Dynamic Dropdowns with charateristics & options

Hi Josh,

I guess you should try to execute your js function at the page load.
You could put your code in a function, give it a name, and call it when the page load with the right option.
Something like this:

Code:

productcharacteristics.change(myDropdownFunction());

function myDropdownFunction() {
    var visibleOptions = subselectContains[this.options[this.selectedIndex].textContent];

    if (visibleOptions.length != 0) {
        solutionOptions.hide();


        solutionOptions.each(function () {
            for (var i = 0; i <= visibleOptions.length; i++) {
                if (this.value == visibleOptions[i]) {
                    $(this).show();
                }
            }
        });
    } else {
        solutionOptions.show();
    }
};

And edit the view to call this function. it's an idea.

Please Log in or Create an account to join the conversation.

jschroeder
Topic Author
Offline

12 years 7 months ago - 12 years 7 months ago #144632 by jschroeder

Replied by jschroeder on topic Dynamic Dropdowns with charateristics & options

Hi, i updated your code in js fiddle with with the code you suggested below, but now the js does not work at all any ideas. All of the dropdowns show all the time. Also, maybe I am a little confused what would you put in the view file? are you talking about in my show_default.php file for the product page? Also, how would i go about calling the function. I am by no means a javascript expert.

Thanks,

Josh

Last edit: 12 years 7 months ago by jschroeder.

Please Log in or Create an account to join the conversation.

Eliot
Offline

12 years 7 months ago #144640 by Eliot

Replied by Eliot on topic Dynamic Dropdowns with charateristics & options

Alright, then here is a way easier solution:

Just make every option like this one except the "Twin" ones.

Code:

<option value="776" style="display:none;"> Full ( + 
	
	$39.99 
 )</option>

Basically I just added style="display:none;" in the tag. it will hide it on load.

Please Log in or Create an account to join the conversation.

jschroeder
Topic Author
Offline

12 years 7 months ago - 12 years 7 months ago #144642 by jschroeder

Replied by jschroeder on topic Dynamic Dropdowns with charateristics & options

Hi where would I go to add the display:none? These options are added on the fly in php so how would i add display=none? This is essentially what the javascript does that I sent you earlier only it will not work when the page loads.

Also, this solution would not work because there are times where there may be no twin mattresses and the default option is full, queen, or king instead so i see a javascript solution like i posted above being the only option.

Last edit: 12 years 7 months ago by jschroeder.

Please Log in or Create an account to join the conversation.

Eliot
Offline

12 years 7 months ago #144731 by Eliot

Replied by Eliot on topic Dynamic Dropdowns with charateristics & options

My bad, i kind of forget that point.
So back to the first solution. What you can do is modify the view.html.php file of product to load your js.
It must be added in the form() function like this:

Code:

$js = 'yourcode';
$doc = JFactory::getDocument();
$doc->addScriptDeclaration($js);

And you can call the script in the view like this:

Code:

<script language="javascript" type="text/javascript">myDropdownFunction(nameOfTheFirstItem);</script>

You can find the name of the first item in the php var $this->element->variants[0]->product_name.
So basically the code is loaded in the page thanks to the three lines I gave you and then you call it inside the view with the first variant. You might not need the first code I gave you but the second is definitely the one that will allow you to execute your JS on page load.

Please Log in or Create an account to join the conversation.

jschroeder
Topic Author
Offline

12 years 7 months ago - 12 years 7 months ago #144907 by jschroeder

Replied by jschroeder on topic Dynamic Dropdowns with charateristics & options

Hi, this does not seem to work at all. I tried added this code below inside view.html.php and it does not seem to work I do not know if there is a snytax error or what in the code you gave me? All I get is a Parse error: syntax error, unexpected T_VARIABLE, expecting T_FUNCTION

Code:

productcharacteristics.change(myDropdownFunction());

function myDropdownFunction() {
    var visibleOptions = subselectContains[this.options[this.selectedIndex].textContent];

    if (visibleOptions.length != 0) {
        solutionOptions.hide();


        solutionOptions.each(function () {
            for (var i = 0; i <= visibleOptions.length; i++) {
                if (this.value == visibleOptions[i]) {
                    $(this).show();
                }
            }
        });
    } else {
        solutionOptions.show();
    }
};

Last edit: 12 years 7 months ago by jschroeder.

Please Log in or Create an account to join the conversation.

jschroeder
Topic Author
Offline

12 years 7 months ago - 12 years 7 months ago #144913 by jschroeder

Replied by jschroeder on topic Dynamic Dropdowns with charateristics & options

I think I may have come up with another solution that my work as well. How can I add unique classes to each of the options under each dropdown characteristics for the options?? I have been looking inside of the options.php file but have not been able to get this to work.

Right now the charcteristics are <option value="700">. But i would like it to be like this
<option value ="700" class="option1">
<option value ="701" class="option2">

I would like to use the word option along with the variants id as the "class" name for the option.

so I know it would be class="option $variant->product_id" but I have no idea how or where to implement this in the code.

I have been trying to figure this out for the longest time. It seems the javascript is much easier if i could just have individual classes for each option value.
Thanks,

Josh

Last edit: 12 years 7 months ago by jschroeder.

Please Log in or Create an account to join the conversation.

nicolas
Away

12 years 7 months ago #145089 by nicolas

Replied by nicolas on topic Dynamic Dropdowns with charateristics & options

You can add such class by changing the line:

Code:

$this->values[] = JHTML::_('select.option', $variant->product_id,$text);

to:

Code:

$this->values[] = JHTML::_('select.option', $variant->product_id,$text,array('attr'=>'class="'.$variant->product_id.'"'));

in the file "option" of the view "product" via the menu Display>Views.

Please Log in or Create an account to join the conversation.

jschroeder
Topic Author
Offline

12 years 7 months ago #145101 by jschroeder

Replied by jschroeder on topic Dynamic Dropdowns with charateristics & options

Hi, Nicolas thanks for the response, but I could not get this to work i got the following error:

Fatal error: Cannot access empty property in /xxx/xxxxx/xxxxxxx/libraries/cms/html/select.php on line 477

How can I fix this??

Please Log in or Create an account to join the conversation.

nicolas
Away

12 years 7 months ago #145108 by nicolas

Replied by nicolas on topic Dynamic Dropdowns with charateristics & options

try like that instead:

Code:

$this->values[] = JHTML::_('select.option', $variant->product_id,$text,array('attr'=>'class="'.$variant->product_id.'"','option.attr'=>'attr'));

Please Log in or Create an account to join the conversation.

jschroeder
Topic Author
Offline

12 years 7 months ago - 12 years 7 months ago #145116 by jschroeder

Replied by jschroeder on topic Dynamic Dropdowns with charateristics & options

Hi, the error went away i changed the code like you suggested, but there is still no class showing up in the product options on the frontend

Last edit: 12 years 7 months ago by jschroeder.

Please Log in or Create an account to join the conversation.

nicolas
Away

12 years 7 months ago #145230 by nicolas

Replied by nicolas on topic Dynamic Dropdowns with charateristics & options

You apparently also need to change the line:

Code:

$html = JHTML::_('select.genericlist', $this->values, $map, 'class="inputbox" size="1"  onchange="hikashopChangeOption();"', 'value', 'text', (int)$value,$id );

to:

Code:

$html = JHTML::_('select.genericlist', $this->values, $map, array('attr'=>'class="'.$variant->product_id.'"','option.attr'=>'attr','list.attr'=>'class="inputbox" size="1"  onchange="hikashopChangeOption();"','option.key'=>'value','option.text'=>'text','list.select'=>(int)$value,'id'=>$id));

Please Log in or Create an account to join the conversation.

jschroeder
Topic Author
Offline

12 years 7 months ago #145285 by jschroeder

Replied by jschroeder on topic Dynamic Dropdowns with charateristics & options

Thank you so much that worked! How would I go about doing the same thing for the characteristics options as well? I cannot seem to find the php file that contains the select code for this.

Josh

Please Log in or Create an account to join the conversation.

nicolas
Away

12 years 7 months ago #145301 by nicolas

Replied by nicolas on topic Dynamic Dropdowns with charateristics & options

A similar modification would have to be done in the file administrator/components/com_hikashop/types/characteristic.php

Please Log in or Create an account to join the conversation.

Time to create page: 0.274 seconds