Creating input front-end for merchant

[MaddyLIN]

Your issue/question: I'm creating a plug-in where I would need an additional box in the position shown in the first Screenshot below. Could you tell me how I can do that?

What you expect to achieve I want that box to be called Recommended Retail Price, and it will be a text input field. It's located on the item upload page on the merchant's page.

Screenshots

[Arcadier]

Hey Maddy, before we help you, can you tell us how are you intending to insert whichever code into your marketplace? Is it through custom code or as plug-in?

[MaddyLIN]

I'm trying to do this using custom code for now, and my marketplace is chocopups.sandbox.arcadier.io

[Chloe-blue]

Hey Maddy, I've done this before. Try using jQuery: This is what the page looks like originally:

<div class="un-inputs">
  <div class="item-form-group">
  </div>
  <div class="item-form-group">
    <div class="col-md-6">
      <label>Item Name</label>
      <input/>
    </div>
  </div>
<div class="item-form-group">
    <div class="col-md-6">
      <label>Price</label>
      <input/>
    </div>
  </div>
<div class="item-form-group">
    <div class="col-md-6">
      <label>SKU</label>
      <input/>
    </div>
  </div>
<div class="item-form-group">
    <div class="col-md-12">
      <label>Item Description</label>
      <input/>
    </div>
  </div>
</div>

And you want your box to appear after the SKU field and before the Item description field. So you will have to select the 3rd 'div' child element from the div with class ="un-inputs". The code is:

$( ".un-inputs div:nth-child(3)" ).append("<div class=\"col-md-6\">Whatever</div>");

Replace "Whatever" with your field's code.

[MaddyLIN]

Hey Chloe,

I did it and it worked but there's a slight misalignment as shown in the screenshot. What am I doing wrong?

this is the exact code I'm writing

$( ".un-inputs div:nth-child(3)" ).append("<div class=\"col-md-6\">Recommended Retail Price</div>").append("<div class=\"col-md-6\"><input type=\"text\" name=\"rrp\"></div>);

[Chloe-blue]

Try this instead

$( ".un-inputs div:nth-child(3)" ).append("<div class=\"col-md-6\"><label>Recommended Retail Price</label><input type=\"text\" name=\"rrp\"></div>");

[MaddyLIN]

@Chloe-blue Thank You. It worked.