Multiple options with SCM

Posting some code would make it easier to debug what’s going on. Could you show us what code is generating the drop down menu?

Posting some code would make it easier to debug what’s going on. Could you show us what code is generating the drop down menu?

Hello Roger,

Here’s the template code where the dropdown is needed.

If you notice, I’ve tried two different methods to output the data. Once as a SQL query and later down using the {option} tag. If it’s helpful I will include a link to the rendered template. http://is.gd/CRlSN3

Thank you for taking time to help.

Thanks for posting the code, that will help others provide better feedback. Where is your {option} field coming from, and what type of field is that?

Hello Roger,

Sorry I didn’t reply for a few days, I decided to trace back my steps to make sure I had followed the tutorial correctly. Let me attempt to answer your questions by going over what I’ve done with you, perhaps I’ll be enlightened in the process.

Ok, so I’m attempting to set up a web store where options can be assigned to items. Options such as t-shirt sizes in a clothing store, print sizes for a photo shop, or length of subscription in the case of my web site.

I need 3 choices available per item. It could me Small, Medium and Large; or 12 months, 6 months and 1 month.

For this tutorial to work I had to understand the concept of related entries and use a “multi-relationships” extension. Since the extension provided in the tutorial is made to work only on EE 1.5.0 I improvised and installed what seems to be a similar solution called NSM Entry Select - Simple entry relationships [readme]

This made a new fieldtype. Fig 1.

There are two channels at play in this configuration. The store channel is {catalog} which carries the main information on each item. Fig 2. Here as you can see, one of the fieldtypes is the entry relationship NSM Entry Select.

This fieldtype, named {option} is related to the channel {types}. The channel {types} is just one custom field to enter title and price for the option type.

With this, I’m now able to insert a new item item to the store and use the multi-select menu for the options available for this item. Fig 3.

Now as I type this, I see I did not include a JavaScript function which seems to define an ID for the related entries channel and a way to separate each object of the string as a separate item. (My programming terminology could be off). This creates the pair tag {related_entries} which is now reflected this way on the template:

<label for="amount">Package:</label>
        <!--
        function setSize(selObj, formObj) {
        for (var i = 0; i < selObj.length; i++)
          if (selObj.options[i].selected && i != 0) {
            {related_entries id="types"}
              if (selObj.options[i].value == '{type_price}') { formObj.elements['os0'].value = '{title}'; }
            {/related_entries}
          }
        }
        //-->


<select name="amount">
  <option value="">Please choose</option>
 {related_entries id="types"}
 <option value="{type_price}">{option} | {type_price}</option>
 {/related_entries}
</select>

Technically this should now provide me with a drop-down menu showing 3 options for this item. However the field is empty with only the “Please choose” option available.

If I look at the rendered HTML code however, I can see something is happening there:

<label for="amount">Package:</label> 
        <!--
        function setSize(selObj, formObj) {
        for (var i = 0; i < selObj.length; i++)
          if (selObj.options[i].selected && i != 0) {
            {REL[types]amCx57zQREL}
          }
        }
        //--> 
 
 
<select name="amount"> 
  <option value="">Please choose</option> 
 {REL[types]oQttCCvrREL}
</select>

There seems to be some code being generated

{REL[types]amCx57zQREL}

and

{REL[types]oQttCCvrREL}

I don’t know what this means, I can only notice that the code generated is different in the drop-down area than it is in the JavaScript above. Perhaps they should match?

Every time I refresh the page both codes change randomly.

I think I’m on to something, but I don’t know where I should direct my attention now. My theory is that the entry relationships solution I’m using for this tutorial could not be suited for this purpose. I’m learning about something called Playa as a possible alternative if it was found to be the issue.

Roger, thank you for all your help. I appreciate your thoughts.

-David.

You need to setup a different template with the nsm related fields and then embed it in your main template.

success!

You need to setup a different template with the nsm related fields and then embed it in your main template. success!

Hello Ikiro,

Thank you for your suggestion. Can’t believe how simple a solution could be sometimes. However I’m not getting success using your method.

Initially I copy and pasted the JavaScript and drop-down HTML into a new template and embedded it to the main template. When I did that it no longer generated the codes it did before. So I try a few different combinations to see if it would change things. Among them:

• I set the template as JavaScript and then reverted back to Web Page.
• I left only the JavaScript in the new template and not the drop-down HTML.

And now I tried this configuration which again renders the codes I mentioned above when the template is viewed individually, but for some reason does not render in the main template, even though it is embedded into it.

The drop-down menu is still not populated.

Here’s the code I have now:

<!-- template: "en/package" -->

{exp:channel:entries channel="types"
    sort="asc"
    limit="1"
    disable="member_data|trackbacks"
    }

<!--
function setSize(selObj, formObj) {
for (var i = 0; i < selObj.length; i++)
  if (selObj.options[i].selected && i != 0) {
    {related_entries id="types"}
      if (selObj.options[i].value == '{type_price}') { formObj.elements['os0'].value = '{title}'; }
    {/related_entries}
  }
}
//-->

<label for="amount">Package:</label>
<select name="amount">
<option value="">Please choose</option>
{related_entries id="types"}
<option value="{type_price}">{title} | {type_price}</option>
{/related_entries}
</select> 

{/exp:channel:entries}

Any ideas?

You need to pass true the related ids. So if “option”contains your NSM entry select field you do:

{exp:channel:entries channel="catalog" sort="asc" limit="9"}

{embed="site/my_options" related_options="{option}"}

{/exp:channel:entries}

And in your embedded template:

<label for="amount">Package:</label>
<select name="amount">
<option value="">Please choose</option>
{exp:channel:entries channel="types" entry_id="{embed:related_options}" sort="asc" disable="member_data|trackbacks"}
<option value="{type_price}">{title} | {type_price}</option>
{/exp:channel:entries} 
</select>

Try to populate the dropdownmenu first with the correct values and after that continue with the js functions.