JS Noob, what's the best way to achieve this?

JavaScript
1

Hey guys,

I’m a serious JS noob and have no idea how to do this

So have the monogramming feature set up here https://tinyurl.com/y6waod2s (written by another developer)

At the moment the customer can enter a Birthdate and Initials but we need to only allow them to select one based on what Monogramming they select in the dropdown.

Each dropdown if different for each item and Im not sure the best JS to achieve this is.

What are your thoughts?

2

JavaScript is the wrong tool for the job.

As you’re using OpenCart on the backend, the most secure solution is for server-side PHP to filter out the initials or birthdate based on what has been ordered. You can do that as an include, which can also then be used by JavaScript as an ajax request, to find out what is allowed too.

That way you have the one central “business logic” area that determines what is allowed.

The basic rule is to use the PHP server-side code to determine what is allowed, and only once that is working to then have JavaScript interact with the PHP to help improve the user experience.

Attempting to improve the user experience first tends to result in catastrophic failure. Some examples are where the JavaScript ordering allows people to give themselves negative prices for items.

Get the server-side PHP working appropriately first, and then use Ajax to connect the JavaScript side up to the PHP code. That’s the recommendation here.

3

Hey Paul, I had a feeling it might be but really have no idea how to approach it.

When you say use PHP filter, do you mean an IF ELSE statement?

4

Our people in the PHP forum will be able to help better with that.

5

Ok so still haven’t solved this one

Trying a JQuery approach…

This is the current code being used on the product.twig
Code: Select all

{% if options %}
              <div class="options {{ journal2.settings.get('product_page_options_push_classes') }}">
                <h3>{{ text_option }}</h3>
                {% for option in options %}
                  {% if option.type == 'select' %}
                    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
                      <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
                      <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
                        <option value="">{{ text_select }}</option>
                        {% for option_value in option.product_option_value %}
                          <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
                            {% if option_value.price %}
                              ({{ option_value.price_prefix }}{{ option_value.price }})
                            {% endif %} </option>
                        {% endfor %}
                      </select>
                    </div>
                  {% endif %}

I can hide them on load easy enough but getting the IF ELSE statement to work is tricky.

// when the page loads
$( ".option-date" ).hide();
$( ".option-text" ).hide();

So if Initials is selected from Monogramming show the DIV option-text

$( ".option-text" ).show();

or if DOB is selected from Monogramming show the DIV option-date

$( ".option-date" ).show();
I thought about approaching this with PHP but I think JQuery might be easier.

I’m wondering should I get the text first as the option id/class is different for each product page

Then if it equals DOB or Initials then show “option-text” or “option-date”

Tried this but didn’t seem to work

<script>
$(function() {    // Makes sure the code contained doesn't run until
                  //     all the DOM elements have loaded

    $('#input-option{{ option.product_option_id }}').change(function(){
        $('.option-text').hide();
        $('.option-date').hide();
        $('#input-option{{ option.product_option_id }}' + $(this).val()).show();
    });

});
</script>

This shows the initial if you select anything


$(".option-date").hide();
$(".option-text").hide();

$(function() {
  $('.option-select').change(function(){
    $('.option-date').hide();
    $('.option-text' + $(this).val()).show();
  });
});

Regards,
Motion

6

JavaScript (including jQuery) are not the primary solution for your problem. I also see that you haven’t yet attempted to approach the PHP forum about this either.

7

Hi Paul, guilty as charged.

How should I go about it? Start a new post in the PHP Forum?

Regards,
Motion

1 Like
8

Yes indeed. Please feel free to direct them to this thread too, so that they can easily gain further details about things too.

9

No dramas, thank you Paul :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.