woocommerce – Using custom post type to feed a dropdown (Woo order-id into wpforms)

Using the plugin wpForms, I can auto-populate a dropdown with Custom Post Types (they call it “Dynamic Post Type Source”). Say I wanted to use this functionality to auto-populate a dropdown with order-ids from WooCommerce, so a logged-in-user can choose between the users orders.

I’ve written the code for getting a logged-in-user order-id’s, so how would I make a CPT that would not really create new posts, but instead be populated with a logged-in-users order-ids at run time (while the user is at a page with the form dropdown on it)?

Already asked wpForms for support, they did not want to help.

Code for getting the User Order-ids:

function woo_get_orderids_per_user( $content) {

$userID = get_current_user_id();

if( $userID > 0 ) {

        $orders= wc_get_orders(array(
            'customer_id' => $userID,
            'return' => 'ids',
        )); 

        foreach ($orders as $oids) {

            $order = wc_get_order( $oids );
            $items = $order->get_items();

            foreach ( $items as $item ) {
                $product = wc_get_product( $item('product_id') );
                $productname = $product->get_name();
                echo('<br> Product name: ');
                print_r($productname . ' (ordrenummer: ' . $oids . ')');
            }
        }

$content = str_replace( '{woo_orderid}', $productname . ' (Ordre ID: ' . $oids . ')', $content );

return $content;
}

else {
    return;
}

}

html – meu dropdown bootstrap não está abrindo, alguem sabe o erro?

Pagina com bootstrap

 <nav class="navbar navbar-expand-lg navbar-light" aria-haspopup="true" aria-expanded="false">
     <a class="navbar-brand" href="#">
         <img src="https://pt.stackoverflow.com/img/Pictures-icon.png" width="70px">
    </a>

    <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#conheça-nos">conheça-nos</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#atendimento">atendimento</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">parceiros</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Ação</a>
                  <a class="dropdown-item" href="#">Outra ação</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Algo mais aqui</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Desativado</a>
              </li>
        </ul>
    </div> 
 </nav>

plugin development – Adding dropdown list to tutor lms registration form

Tutor lms plugin gives instructions of adding phome number field to its registration form as in this link
https://docs.themeum.com/tutor-lms/developers/custom-field-on-registration/

I have added dropdown list field that appears on the frontend yet I can’t display the result of this field on the backend and I don’t know what is the alternative code in the profile.php file and user-profile.php metabox file as mentioned for the phone number example on tutor website for the dropdown list field.

Would someone please help me regarding that. I am new to coding.
——-‐———–
For coding I entered this code through code snippet to frontend
if(isset($_POST(‘formSubmit’)))
{
$aUniversities = $_POST(‘formUniversities’);

  if(!isset($aUniversities)) 
  {
    echo("<p>You didn't select any Universities!</p>n");
  } 
  else 
  {
    $nUniversities = count($aUniversities);

    echo("<p>You selected $nUniversities Universities: ");
    for($i=0; $i < $nUniversities; $i++)
    {
      echo($aUniversities($i) . " ");
    }
    echo("</p>");
  }
}

//Then I entered this code in the registration.php file of the the plugin

‘Select your University:

Ahram Canadian University
Misr International University
Other


I tried similarcode on profile.php and user-profile-fields.php (of the metabox) but they don’t seem to work

What is wrong or missing? Kindly advise.

javascript – Popup box after user select certain values in a few dropdown menu fields

I have a multi-step signup form with multiple fields. Relevant to this question are fields asking for the user’s country, whether they are employed/earn a steady salary and if they would like to pay for services in installments or upfront.

I would like to show a popup page in cases where the user selects the country as Nigeria, indicates that they are employed and that they would like to pay for services in installments.

So the popup form would occur the moment the person selects yes to wanting to pay in installments after having selected Nigeria as a country and indicating that they are employed.

Here is my html and what I have tried:

    <div class="row">
        {% if form.errors %}
            <div class="alert alert-error">
                <ul>
                    {% for error in form.non_field_errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
    </div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <!--  -->
            <form  id="msform" method="post" action="" > 
                {% csrf_token %}
                <input type="hidden" name="next" value="{{ next }}" class="form-control">
                <ul id="progressbar">
                    <li>More about you</li>
                    <li>Contact Details</li>
                </ul>
                <fieldset>
                    <h2 class="fs-title">More about you</h2>
                    {{form.city}}
                    <br>
                    <select name='country' required class="form-control my-2">
                        <option value="" disabled selected hidden>Country</option>
                        {% for value, name in form.fields.country.choices %}
                            <option value="{{value}}">{{name}}</option>
                        {% endfor %}
                    </select>
                    <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                    <input type="button" name="next" class="next action-button" value="Next" />
                </fieldset>
                <fieldset>
                    <h2 class="fs-title">Contact Details</h2>
                    <select name='installments' required class="form-control my-2">
                        <option value="" disabled selected hidden>Would you like to pay the $350 fee upfront or in installments?</option>
                        {% for value, name in form.fields.installments.choices %}
                            <option value="{{value}}">{{name}}</option>
                        {% endfor %}
                    </select>
                    <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                    <input type="submit"  class="submit action-button" value="Sign Up" />

                </fieldset>
            </form>
        </div>
    </div>
    {% endblock %}
{% block mainjs %}
{% endblock mainjs %}
{% block extrajs %}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script >

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.
      ;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    previous_fs.show(); 
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 0.8 + (1 - now) * 0.2;
            left = ((1-now) * 50)+"%";
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return true;
})
</script>
<script>
    $("#installments").bind("change", function() {
        var value = this.value;
        switch (value) {
            case "installments":
            window.open("https://www.google.com/", "Google");
            break;
            }
    });
</script>
{% endblock extrajs %}

Dropdown with search features validation

Imagine a dropdown list with search features where I can type or paste some text. What will be the best way to validate my dropdown:

  • A: Comparing the text with the database text after click outside the box
  • B: Clear the dropdown if the user doesn’t click on something in the search list

how to add new dynamic dropdown to billing/shipping address on create new order

how to add new dynamic dropdown to billing/shipping address on create new order from admin? I don’t know how to change anything on that page let alone add dynamic dropdown. I tried with attribute but it does not take its value dynamically. And how do you remove fields? I tried disabling them from customer configuration but its still there.

enter image description here

javascript – Custom react dropdown

Last night I had to build dropdown for the menu on the website that I’m working on. As I’m still React newbie I first looked if there is some package for what I’m trying to achieve but there wasn’t, so I had to try to build it on my own.

So the menu has its menu items, whichever is hovered it should show its content and so on. The one thing I’m concered about is that I used too much code for the dropdown and I’m sure this can be builded with less code. So I only want you to tell me what should be changed in a code and which approach isn’t good from my side.

Object:

const options = (
  {
    index: '1',
    label: 'Title 1',
    links: (
      'demo link',
      'demo link',
      'demo link',
      'demo link',
    ),
    image: 'imageURL',
  },
  {
    index: '2',
    label: 'Title 2',
    links: (
      'demo link',
      'demo link',
      'demo link',
      'demo link',
    ),
    image: 'imageURL',
  },
  {
    index: '3',
    label: 'Title 3',
    image: 'imageURL',
  },
);

Code:

import React, { Component } from 'react';
import classNames from 'classnames';
import css from './demo.css';

const list = options => {
  return options.map(option => ({
    index: option.index,
    label: option.label,
    links: option.links,
  }));
};

class SecondaryNav extends Component {
  constructor(props) {
    super(props);
    this.onMouseEnter = this.onMouseEnter.bind(this);
    this.onMouseLeave = this.onMouseLeave.bind(this);

    this.state = {
      hideDropdown: true,
      dropdownIndex: null,
      activeLabel: null,
      columns: null,
    };
  }

  onMouseEnter(index, label, links) {
    if (links != null) {
      this.setState({
        hideDropdown: false,
        dropdownIndex: index,
        activeLabel: label,
        columns: links.length,
      });
    } else {
      this.setState({
        hideDropdown: true,
        dropdownIndex: null,
        activeLabel: null,
        columns: null,
      });
    }
  }

  onMouseLeave() {
    this.setState({
      hideDropdown: true,
      dropdownIndex: null,
      activeLabel: null,
      columns: null,
    });
  }

  render() {
    // Form object array and return navigation items
    const items = list(options);
    const navItems = items.map(item => {
      const index = item.index;
      const label = item.label;
      const links = item.links;
      const isActive = item.index === this.state.dropdownIndex ? css.active : null;
      return (
        <li
          className={isActive}
          onMouseOver={() => this.onMouseEnter(index, label, links)}
          key={item.index}
        >
          {item.label}
        </li>
      );
    });

    // Form array of navigation items that have links
    const selected = options
      .filter(option => option.index === this.state.dropdownIndex)
      .map(selected => selected.links);
    const dropdownLinks = selected(0);

    // Define active content in dropdown
    const activeContent =
      this.state.dropdownIndex != null &&
      dropdownLinks.map((label, key) => <li key={key}>{label}</li>);

    // Define list label for the first dropdown
    const listLabel =
      this.state.dropdownIndex === '1' ? classNames(css.dropdown, css.listLabel) : css.dropdown;

    // Put content in two rows
    const columns = this.state.columns >= 8 ? css.twoColumns : null;

    // Define dropdown image
    const dropdownImage = options
      .filter(image => image.index === this.state.dropdownIndex)
      .map((single, key) => {
        return <img src={single.image} key={key} alt={this.state.activeLabel} />;
      });

    // Form dropdown container
    const dropdown = !this.state.hideDropdown ? (
      <div className={css.dropdownContainer}>
        <h2 className={css.dropdownLabel}>{this.state.activeLabel}</h2>
        <div className={css.dropdownContent}>
          <ul className={classNames(listLabel, columns)}>{activeContent}</ul>
          <div className={css.dropdownImage}>{dropdownImage}</div>
        </div>
      </div>
    ) : null;

    return (
      <div className={css.secondaryNav} onMouseLeave={this.onMouseLeave}>
        <div className={css.navContainer}>
          <ul className={css.secondNav}>{navItems}</ul>
        </div>
        {dropdown}
      </div>
    );
  }
}

export default SecondaryNav;

So everything works as I wanted and as I said I’m just concered that I haven’t used good aproaches as I’m still a newbie. So any suggestion will mean a lot.

Best!

magento2 – How to prevent dropdown menu from closing when moving between top level items?

We’re using a dropdown menu modified from snowdog and magento, and our top level items have 6 options. It’s a pretty standard menu; when hovering over the top level items it drops down and shows the subnav items. However, when moving in between the main items, the menu briefly closes before reopening with the options for the next item. My initial thought was to write some javascript to detect when the menu is already open, and if so, prevent the event from bubbling up the DOM, but I have a feeling the answer is probably more simple than this solution. Maybe using a transition delay to make the hovering more forgiving?

If I were to try adding a transition delay, would this be done in our navigation.less file? I inherited this code base and things are a little messy, so I’m not positive how to start going about this.

plugin development – Save meta box data from selected dropdown list in bbpress reply form

I hope to customize bbpress reply form area with dropdown selection list.
I could not find any previous post reporting similar case in bbpress.
Referring to post “Save meta box data from selected dropdown list” with link
https://stackoverflow.com/questions/17755973/save-meta-box-data-from-selected-dropdown-list
I prepared similar code for the bbpress reply post condition, but failed to achieve the goal.

 add_action( 'bbp_theme_before_reply_form_content', 'so_custom_meta_box' );
//add_action( 'add_meta_boxes', 'so_custom_meta_box' );

function so_custom_meta_box($post){
    add_meta_box('so_meta_box', 'Custom Box', 'custom_element_grid_class_meta_box', $post->post_type, 'normal' , 'high');
}

add_action('bbp_theme_before_reply_content', 'so_save_metabox');

function so_save_metabox(){ 
    global $post;
    if(isset($_POST("custom_element_grid_class"))){
         //UPDATE: 
        $meta_element_class = $_POST('custom_element_grid_class');
        //END OF UPDATE

        update_post_meta($reply_id, 'custom_element_grid_class_meta_box', $meta_element_class);
        //print_r($_POST);
    }
}
function custom_element_grid_class_meta_box($post){
    $reply_id = bbp_get_reply_id();
    $meta_element_class = get_post_meta($reply_id, 'custom_element_grid_class_meta_box', true); //true ensures you get just one value instead of an array
    ?>   
    <label>Choose the size of the element :  </label>

    <select name="custom_element_grid_class" id="custom_element_grid_class">
      <option value="normal" <?php selected( $meta_element_class, 'normal' ); ?>>normal</option>
      <option value="square" <?php selected( $meta_element_class, 'square' ); ?>>square</option>
      <option value="wide" <?php selected( $meta_element_class, 'wide' ); ?>>wide</option>
      <option value="tall" <?php selected( $meta_element_class, 'tall' ); ?>>tall</option>
    </select>
    <?php
}

Could anybody can provide kind help to solve the problem? Thanks!