Show and hide the drop-down menus on the page of the product, based on selected values

Hello.

I wish that my product page to view different drop-down lists following, based on the values of individual drop-down list.


I managed to achieve this through JavaScript, but I don't like how it works.

As far as I know, there is no identifier for each individual drop-down list to determine who it is, so I can't for the moment is to rely on their order in the DOM, which is bad and it is difficult for me to create a solution that might work for all products.

For example, if the following is a single attribute:

< div class = "catProductAttributeGroup" style = "" display: none; "> < div class ="catProdAttributeTitle"> metal Foiling < / div > < div class ="catProdAttributeItem"> < select > < option value =" ">--please select--< / option > < option value ="6051720"> not necessary < / option > < option value ="6051721"> sheet ONE side + £45 < / option > < option value ="6051722"> Foiling BOTH sides + £75 < / option > < / select > < / div > < / div >"

I would like to than the div outermost having some sort of html attribute that contains the product id attribute. Something like: data-attribute id = "XXXXXXX". Is this possible?

Here's what I have so far:

I use {tag_attributes_json}, {tag_product_json} and {tag_currency} to get these values in javascript on the page loading, so I can use them later.


Then, I hang on to change the events of the drodpowns I have and then toggle their visibility based on those who are selected. I rely on the jequery ': eq (n)' selector to achieve, I don't like. Is there an option with {tag_attributes} which to add additional information (such as the ID attribute on the menu drop-down) on the generated HTML code?

All works in the beginning, but if I can 'Add to Cart', the product element get ajax-reloaded and events are suddenly off the hook, so it no longer works. For this one, there are two options:

1. I could hang on to an event that triggers once the product added to the shopping cart and the page is ready. Is there such an event?

2. I could set up my own add to cart using bcInternals.shop.addToCart. I tried to do this, but I have two problems with it.

a. addToCart seems add my selection twice, for some reason any. Any ideas what I could do wrong?

b. the news of cart in the upper right corner don't refresh. Apparently, he's trying to refresh, but there is a kind of access error in the script. This part is not yet fully added to the page, but there is a function which would add it to the basket at the bottom of the largest block of script. Am I using the function addToCart incorrectly?

It's the page, sure I have the feature added partial implementation:

Matt Laminated business cards

The scripts are currently embedded in the HTML code. Once I put it in place correctly, I would like to extract in a separate file. Search for "'$productAttributesElement ' to find the block with the features and for 'productInfo' to find the part where I store the product with tags. _json data "

Hello

No worries, na not know if you have solved or that the answer was not helpful

You need trigger the script you in the presentation of product details model, or you can add a listener for the container of the product and to trigger the script if changes are detected.

Concerning

Tags: Business Catalyst

Similar Questions

  • Show and hide the scroll bar

    Hello!

    How could I show and hide the scroll bar attached to a dynamic text field depending on the size of the text?
    I tried different solutions based on bottomScroll and maxcroll, but nothing works...

    Thank you very much in advance for your help.

    Best regards
    Gerry

    If you use a text field, you can do a simple test:

    If (textInstance.textHeight > textInstance._height) {}
    show the ScrollBar
    }

    --
    Dave-
    Developer leader
    http://www.blurredistinction.com
    Adobe Community Expert
    http://www.Adobe.com/communities/experts/

  • I don't seem to have you show them on your drop-down menus help page. For example, I have no option to import under 'file '.

    your help page refers to the menu option that I don't seem to have. There's no option 'Firefox' on the top menu line or on any menu line. I checked all the option toolbar for the menu drop down. Also, I try to import bookmarks from Safari, but there is no option to 'import' in the menu drop down "file".

    You can find the entry menu import into the Manager of bookmarks (library)

    See also:

  • Responsive Design - Show and hide the div tags

    Hello

    I am building a website using sensitive design. I want a certain div tag to be read on a desktop and a tablet but then to disappear and a different div be made visible on the mobile device.

    I realized the above with the code below, but I found a problem. The problem I found is that the div is hidden here still an empty space remains there then it creates a large empty space. Anyway is to hide this great space?

    (mobile)

    {#tab-container}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    line-height: 30px;

    }

    (Tablet)

    {#tab-container}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    (office)

    {#tab-container}

    display: block;

    visibility: visible;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 70%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    {#phone-tabs}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 70%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 0px;

    padding-bottom: 0px;

    text-align: center;

    border-top-width: 0px;

    border-bottom-width: 0px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

    }

    Thanks for your help!

    Alex

    Try to delete the two lines, as shown below.

    Display: block overrides display: no because it is further down in the code.

    For this reason, visibility: hidden comes into play. This statement is exactly intended to hide the contents, while leaving the blank space.

    Edit: I think that really is all you need:

    {#tab-container}

    display: none;

    }

    (mobile)

    {#tab-container}

    display: none;

    visibility: hidden;

    Clear: both;

    float: none;

    left margin: 0;

    Width: 96%;

    display: block;

    margin-right: auto;

    left margin: auto;

    padding-top: 10px;

    padding-bottom: 10px;

    text-align: center;

    border-top-width: 1px;

    border-bottom-width: 1px;

    border-top-style: solid;

    border-bottom-style: solid;

    border-bottom-color: #000;

    border-bottom-color: #000;

  • Show and hide the problem of groups (topics) of Param

    My plugin brought fairly complex has quite a few settings, I've grouped using topics to keep things neat. The user can choose which limits to start or stop using a checkbox for each. Turn on a checkbox displays the settings group; turn off, cover the group settings. I use the following code in a function called from PF_Cmd_USER_CHANGED_PARAM and PF_Cmd_UPDATE_PARAMS_UI:

    AEGP_StreamRefH wfm_streamH = NULL;

    A_Boolean hide_wfmB =! params [QPGA_SCOPE_OPTION_WFM]->u. bd. value ;     The value hide_wfmB to the inverse of the value of the checkbox

    AEGP_EffectRefH                    meH                                                  = NULL;

    AEGP_SuiteHandler suites (in_data->pica_basicP);

    ERR (suites. PFInterfaceSuite1 ()->AEGP_GetNewEffectForEffect(NULL, ->effect_ref, & meH in_data));

    Example - waveform monitor only, but in the code for real there is one of these for each of the groups of five range

    ERR (suites. StreamSuite2 ()->AEGP_GetNewEffectStreamByIndex(NULL, meH, QPGA_WFM_TOPIC_START, & wfm_streamH));

    etc...

    Visibility Toggle of the parameters

    ERR (suites. DynamicStreamSuite2 ()->AEGP_SetDynamicStreamFlag(wfm_streamH, AEGP_DynStreamFlag_HIDDEN, FALSE, hide_wfmB));

    etc...

    if (meH) {

    Err2 (suites. EffectSuite2 ()->AEGP_DisposeEffect(meH));

    }

    if (wfm_streamH) {

    Err2 (suites. StreamSuite2 ()->AEGP_DisposeStream(wfm_streamH));

    }

    etc...

    It works fine when the check box is selected, but the problem is if I save my instance effect as a preset of effects. When I apply the preset to a new layer, I get for example, all parameters in the hidden groups appear less their group themes, when they should be hidden. These two images show what controls should look like, and what they look like:

    Expected result:

    qpga_params_correct.jpg

    Actual result if the application via an effect preset:

    qpga_params_incorrect.jpg

    Settings between the red lines are those of the four other groups that should not be displayed.

    I hope this makes sense. My hunch is that I have to disable sur-ou * every * parameter within a group. This will require a lot of flow Ref handles well and seems a little inelegant/inefficient!

    One thing I do not use sequence data - I tried this because he was part of the sample project (master of work, I think), but it did not affect the result. I thought that the sequences were a red herring here anyway.

    Thanks in advance!

    Christian

    Unfortunately, you can't hide/show each param within a group, or such bugs happen. (for example, which appears in the timeline panel is touch-ups)

    However, as the coding of the problems come, is not a problem. only a nuisance.

    (and you're right, the sequences have nothing to do with this problem)

  • Web site Flash - from the drop down Menus to Main Page

    Hello

    I'm doing a site purely on flash (actionscript 2.0), for a school project, and I put in place a framework for each page. I also did a drop down menu, but unfortuantely I can't link to the actual pages from the menu drop-down is a clip, if I use an actionscript such as:

    {We (Release)}

    gotoAndStop (3);

    }

    He goes to the 3rd image in the clip and not on the main stage.

    Can anyone help?

    Thank you.

    Try:

    {We (Release)}

    _parent.gotoAndStop (3);

    }

  • Show and hide the text in a page of questions / answers

    I need to create a FAQ page in Flex3. The page initially lists all questions with a "Show" button after each question.

    A click of a button 'Show', the answer to this specific question is inserted and displayed below

    the question and the button becomes "hide the answer.

    A click on the button "Hide the answer," despairs the answer to this question, the questions (and answers if there is)

    below moves upward to support the space and the button becomes «See the answer»

    Suggestions or examples? DataGrid with masking of rows? Directly using state transitions?

    I would use visible and includeInLayout properties

    Alex Harui

    Flex SDK Developer

    Adobe Systems Inc..

    Blog: http://blogs.adobe.com/aharui

  • One button - show and hide the function

    Hi I want to use it to be able to click the button once to show a subfield and click again to hide

    I hide the code to the click event and click to show works of stage, but the second click does nothing

    my code is:

    If (help1vidlist.presence = "hidden") {}

    help1vidlist. Presence = "visible";

    } else if (help1vidlist.presence = 'visible') {}

    help1vidlist. Presence = "hidden";

    }

    any ideas?

    Thank you

    I think that you should use the operator 'is' under the conditions, it is;

    If (help1vidlist.presence == 'hidden') {}

    help1vidlist. Presence = "visible";

    } Else if (help1vidlist.presence == 'visible') {}

    help1vidlist. Presence = "hidden";

    }

    Concerning

    Bruce

  • Show and hide the symbols on the click event

    Hello

    I have 4 text overlays. Each of them can be clicked and opened individually. Any combination of them could be opened at any time. It can also be closed individually buttons within the same window.

    In the assets Panel, I have a set of buttons that sit on the text overlays. What I want to do is to start with the visible buttons. Once all 4 text overlays is open the buttons are hidden. Once all 4 text collections are closed the buttons must be visible again.

    I would be grateful for anyone's help.

    You can set your buttons to display off the coast in the interface user, then show(); in your case.

    Example:

    SYM.$('elementName'). Show();

    You can use an indicator of close all when the flag is true:

    Insert a variable in each symbol example

    A = 1;

    B = 1;

    C = 1;

    D = 1;

    then have a conditional in each event which will check the variable

    If (A == 1 & B == 1 & C == 1 & D == 1) {}

    code to display your buttons

    } else {}

    code to hide your buttons

    }

  • Show or hide the buttons of the model using JavaScript

    Can someone tell me to know to disable, show and hide the buttons of the model using JavaScript? In my case, I use AJAX for validation and the validation failed, I want to deprive the person's ability to submit the form. I did successfully using the HTML buttons but they seem ugly and do not correspond to the theme of the application. I really want to do using the model based buttons. Anyone know the answer to that?

    You can find that here:

    http://Apex.Oracle.com/pls/OTN/f?p=31517:143

    The only problem you have to solve is to assign an id to each template button. Rather than use an id string coded hard = "buttonHide1" as in my example, you could use id = "" #LABEL # "If there are a lot of different buttons you need to display / hide on a single page." However, at the same time make sure that the processes are also conditional and follow the logic. To hide a button, this isn't a guarantee that a process can not be executed.

    Denes Kubicek
    -------------------------------------------------------------------
    http://deneskubicek.blogspot.com/
    http://www.Opal-consulting.de/training
    http://Apex.Oracle.com/pls/OTN/f?p=31517:1
    -------------------------------------------------------------------

  • How can I disable the "hand-with-a-pen-icon" in the seizure, drop-down menus and check boxes boxes in IE 10?

    How can I turn off the hand-with-a-pen-icon that appear in the entries of the form (for example, text boxes, drop-down menus and check boxes) in IE 10? I'm running updated Windows 7, 64-bit desktop with without a touchscreen. I have the Wacom tablet with a pen, but I disabled the handwriting feature in Windows.

    And also how to disable query points that appear in the scroll bars in the browser? Sometimes the mark points will blink, then this hand-with-a-pen-icon appears between. It does not appear in other browsers or programs and its was not in IE 9.

    -It is very annoying, especially when dealing with checkboxes and drop-down menus, I know never it is checked or not. --

    I have not found all the settings for this in IE 10 settings or control panel.

    Same problem here.
    I have w7 x 64 office services and tablet and writing are disabled.
    However, I see the shit 'hand with a pencil icon' in all the check boxes and drop down menus.
    It is not even recognizable on small boxes and is a total bore.
    I run my desktop PC with w7 x 64 for over a year and the symbol appeared after I've upgraded to IE10.
    I couldn't find an appropriate solution in the links provided in this thread, and I hope that it will be a good solution soon.
    To give an idea, I downloaded 2 screenshots on my skydrive
    https://SkyDrive.live.com/?CID=1C240C8A7B1412A2&ID=1C240C8A7B1412A2! 110 #cid = 1C240C8A7B1412A2 & id = 1C240C8A7B1412A2. 110

    Meanwhile, I think that I found the real cause.
    I had turned off the segue UI fonts during the day even when I updated to IE10.
    Strange as appears only in IE10 I assumed it it was due to the update.
    As explained in this thread that it is obviously a police problem well.
    http://answers.Microsoft.com/en-us/IE/Forum/IE10-Windows_7/IE10-shows-square-blocks-on-every-dropdown-menu/068079a1-47AB-496a-8358-4391b564aaee
    I still have not solved not satisfactory, but at least I now know the cause.

    IT FIXED:
    to do my reading sharper, I had turned off cleartype according to http://www.davidjnice.com/articles/windows7_fonts.html
    I'm now setting replace to

    "Segoe UI Symbol (TrueType)"="seguisym.ttf" and voila, the handwriting symbol in IE10 is gone again.
    
  • Just upgraded to 32.0.1 and drop down menus were shifted to the left. How can I fix this?

    I just upgraded to 32.0.1 for Mac, and from the drop down menus were shifted to the left. I tried to reset. I tried to reset Firefox and the problem was not resolved.

    Start Firefox in Safe Mode to check if one of the extensions (Firefox/tools > Modules > Extensions) or if hardware acceleration is the cause of the problem.

    • Put yourself in the DEFAULT theme: Firefox/tools > Modules > appearance
    • Do NOT click on the reset button on the startup window Mode safe

    You can check for problems caused by plugins and all the plugins to "Ask to activate" on the page "Firefox/tools > Modules > Plugins" (plugins are not affected by the Mode of Firefox safe)

  • Update the drop-down menus and jQuery sortable collide with the 16.0.2

    The drop-down menus that are contained in a table sortable jquery act as if they are disabled. By clicking on them, doesn't matter. I can tab in the menu drop down and control it with the arrow keys, but the mouse does nothing. The menus outside of the table still work very well. This problem only occurs in Firefox 16.0.2 on several computers, all equipped with Windows 7. The problem does not occur in IE9, Chrome or Safari. In addition, the problem does not occur in Firefox 15, but it occurs in Firefox 17 Beta. I did not see anything addressing this specific issue, so I guess this isn't a known issue.

    The problem has been resolved.

  • The drop-down menus, context menus and menu for Auto-filling items are not displayed!

    I FF4 beta, it started from FF4 beta 7. I'm working on Windows 7 ultimate 64-bit.

    The problem is that I can't see drop-down menus unless they have many elements, or context menus (such as highlighting a text then right click on it), auto fill bars no longer view AutoFill info is entered before... the menu itself appears a bit. but it is transparent and I can not display the items, do not know where to click to select the thing I want.

    I don't have this problem before 4.0b7... after I got it, I thought it was one of the plugins, so I disabled them all but still have the problem!

    A picture describing the problem encountered is taken here, now on this page, I've highlighted a text and right click on it: here you can see the menu appears somehow, surrounded by the red border, but I'm not!

    Tools > Options > advanced

    Under navigation try disabling use hardware acceleration when available. It shouldn't affect the context menus like this, but who knows with NVIDIA cards.

  • How to add radio buttons and drop-down menus to forms of the muse

    I want to put a contact form on my site that I am building in muse of adobe but it leaves me not to add drop-down menus or boxes option in my forms, so would like to know how I can get the widget of forms to make me add these fields, I would like to me also can have different fields displayed on a form based on the value selected in a drop-down list and also to send data submitted to an e-mail address which is determined by the value of field drop-down list.

    can someone help me to implement these things?

    Alternatively, you can go with Andrew widget:

    https://creative.Adobe.com/addons/products/3124#.VEO37Mlsiks

    Here's the demo:

    https://widgets.Mu/se/FormsPlus/demo/

    Thank you

    Sanjit

Maybe you are looking for

  • IPhone apps

    I tried to load a free app and Apple wants the auditing of the accounts.  I didn't need than before.  I did something in the settings of my phone or do you really need to provide credit card information?

  • Controller SM bus for windows 7

    Hello Sir, My name is Naila and I m using the hp because of its service product is very fast, recently I format my laptop with a question, I install all updates but the sm controller is missing I have also try to update automatically but I couldn't f

  • Audio and video files that has already worked on my computer no longer works.

    Audio and video files that has already worked on my computer no longer works and I get one of the three messages which are as follows: (1) the file can be used (but it is not used by another program, and then media player that I use to try to read th

  • Alienware Aurora ALX lights does not work master of e/s part #.

    I tried to get the lights on my Alienware Aurora ALX job. The only lights that works are the head alien and the flange. Work, I mean that they are white. When I Command Center, it doesn't even show fan/readings of temperature or light speeds. I think

  • Install with bad language

    I have installation CC with the wrong language. How to uninstall and reinstall in English?