I am studying how to create online store on WordPress and WooCommerce with own design. In other words, I have created html+css layout pages. And for now I need to wrap to Woocommerce
I have faced with a little problem. Products in this store have variations depending on the capacity of jar (the theme of store is honey).
And I don't know how to wrap standard select and input of quantity to my design.
I know about copying templates of WooCommerce to folder with my Wordpress theme. And I'm using it. Everything is okay about title, short description (i'm working with content-product-single.php file.
I have something like that for now (code snippet):
<div class="container content details">
<div class="col-lg-3">
<img class="img-responsive img-thumbnail" src="<?php the_post_thumbnail_url(); ?>">
</div>
<div class="col-lg-6">
<h2><?php the_title();?></h2>
<p><?php the_excerpt();?></p>
</div>
<div class="col-lg-3">
<h4>Price: <span id="price"><?php global $product; echo $product->get_price_html(); ?></span></h4>
<label for="value">Capacity:</label>
<select class="form-control" id="value">
<option>Example 1</option>
<option>Example 2</option>
<option>Example 3</option>
<option>Example 4</option>
</select>
<label id="q" for="quantity">Quantity:</label>
<input type="number" class="form-control" id="quantity" name="quant" value="1" min="1" max="5">
<button type="button" class="btn btn-danger">Add to cart</button>
</div>
As you can see I need to wrap standard select and input of variation form to my bootstrap layout. Could you tell me please how I can do it? Thank you for advance!
Related
I'm about to change a script, and right know the script are using an <select> with one options and echo to be used to show the products.
Now I'll like to change the <select> to a <input> so I can scan a barcode, and the information from the product should be added to the DB as it is right now, but I'm lost, I have used several hours to figuere out how to change it, I thought the solution was to use a hidded but then I can't add the first knowen product to my list.
Could someone please help me? :)
I've tried to use more boxes to get the products, but that was a big mess.
<div class="col-md-6">
<div class="form-group">
<label for="date">Product Name</label>
<select class="form-control select2" name="prod_name" tabindex="1" autofocus required>
<?php
$branch=$_SESSION['branch'];
$cid=$_REQUEST['cid'];
include('../dist/includes/dbcon.php');
$query2=mysqli_query($con,"select * from product where branch_id='$branch' order by prod_name")or die(mysqli_error());
while($row=mysqli_fetch_array($query2)){
?>
<option value="<?php echo $row['prod_id'];?>"><?php echo $row['prod_name']." Available(".$row['prod_qty'].")";?></option>
<?php }?>
</select>
<input type="hidden" class="form-control" name="cid" value="<?php echo $cid;?>" required>
</div><!-- /.form group -->
</div>
<div class=" col-md-2">
<div class="form-group">
<label for="date">Quantity</label>
<div class="input-group">
<input type="number" class="form-control pull-right" id="date" name="qty" placeholder="Quantity" tabindex="2" value="1" required>
</div><!-- /.input group -->
</div><!-- /.form group -->
</div>
<div class="col-md-2">
<div class="form-group">
<label for="date"></label>
<div class="input-group">
<button class="btn btn-lg btn-primary" type="submit" tabindex="3" name="addtocart">+</button>
</div>
</div>
The code should be changed to use a <input> or something simular, so I can use a barcode scanner to add my items to a list.
What I did to get my result was:
I changed the prod_id to be the barcode, and on scan the form is submitted to a temp_db, to show every items, and then added a "finish db" called inStock, and everything was as it should be! :)
/Kenneth
enter image description hereI am new to coding. I just started building a website and I am currently working on the profile page. I wanted the input fields to be populated by the information the user has provided (see attached picture). This I have achieved.
My problem now is... I can't spit information from the database to the select tag.
For the other input fields, I just had to echo the data spooled from the database as seen in my HTML below:
<div class="col-sm-6 white-bg">
<div class="row">
<div class="col-sm-6">
<label>
<span class="text-left">FIRST NAME</span>
<input type="text" name="fname" value="<?php echo $first_name ?>" disabled>
</label>
</div>
<div class="col-sm-6">
<label>
<span class="text-left">LAST NAME</span>
<input type="text" name="lname" value="<?php echo $last_name ?>" disabled>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>
<span class="text-left">GENDER</span>
<select name="gender">
<option value="" disabled hidden selected>--Select--</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Others">Others</option>
</select>
</label>
</div>
<div class="col-sm-6">
<label>
<span class="text-left">DATE OF BIRTH</span>
<input type="DATE" name="dob" value="<?php echo $dob ?>">
</label>
</div>
</div>
</div>
But I can't do the same for the select tag. How do I have an option selected based on the information the user has provided such that the Male option is selected if the user entered male or the the Female option is selected if the user entered Female.
You should add the keyword based on the value returned from your DB.
So in your code add something like
-- For your default select option do
<?php echo(empty($theGender)?" selected":""); ?>
-- For Male/Female do, checking for value you stored
<option value="Female"<?php echo(($theGender === "female")?" selected":""); ?> >Female</option>
here is my problem,
I have to build a custom interface for map-editing. These maps are svg files, i chose svgEdit from Google. But i need to customize it... I use jQuery 1.10.x and Bootstrap3
I do not need the default functionnalities, and i don't really want to keep the standard svgEdit interface, i need to simplify it, i just do need some functionnalities, and i have to remove toolbars & so on... to make the editor quite empty... the buttons & functionnalities have to be externalized, they are on the container page, but they have to be out of the svgEdit iframe... (is it possible?)
For the editor, I just need these functionnalities :
I have to set the default canvas (a map) on click on a list (when i choose a map, it has to appear on svgEdit tool - i DO HAVE the map, svg file, on my server)
I have to set the main image to fit perfectly the canvas, no scroll x or y far away from the image... now i have scrollbars all around the "default empty canvas" that allows me to go far away from the image... and thus, i should allow mouse wheel to zoom in/out on the map... (which seems to be disabled by default...)
I have to let the user the possibility to add a "layer" on a map (i have a "pseudo-form" with an input text and a confirm button, on click on it, it should add an empty layer on the main map which is then the "current layer")... The user should be able to add as many layers as he wants... and display the ones he wants...
I have to let the user add some icons by drag&drop OR click on image then click on the canvas to place it anywhere on the current layer (not on the map, on the layer), draw a line, a polygon, and add text on the current layer and save these objects on the layer (then i have to let the possibility to edit / delete these objects)
I also need a "save" button which saves the current layers on my server.
Well, i don't really know if all I'm talking about is just possible, but this is what I'm tryin' to do. Here is, for example, a short idea of what the page should look like (Bootstrap inside...) :
<div class="panel panel-success" style="margin-top:30px;">
<div class="panel-heading">
<a class="btn btn-success" href="#" title="Add Map" style="float:right;">Add a new Map</a>
<h3>Maps : </h3>
</div>
<div class="panel-body" style="text-align:center;">
<div class="col-lg-4" style="border-right:1px dotted grey;">
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Select Place :
</legend>
<div class="input-group">
<span class="input-group-addon">
Map :
</span>
<select class="form-control" name="mapChoice" id="mapChoice">
</select>
</div>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Display Layers :
</legend>
<label class='btn col-lg-6' style='text-align:left;'><input type='checkbox' style='width:10px;float:left;' class='displayLayer' name='displayLayer' value='1'/> Layer 1 </label>
<label class='btn col-lg-6' style='text-align:left;'><input type='checkbox' style='width:10px;float:left;' class='displayLayer' name='displayLayer' value='2'/> Layer 2</label>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Add New Layer :
</legend>
<div class="input-group">
<span class="input-group-addon">
Layer Name :
</span>
<input class="form-control" type="text" name="newLayerName" id="newLayerName" value=""/>
</div>
<br>
<div style="text-align:right;">
<label class="btn btn-success" id="send_name_layer">Confirm</label>
</div>
<br>
</fieldset>
<fieldset class="borderShadOne" style="margin-bottom:20px;">
<legend>
Layer Edit :
</legend>
<div class="input-group">
<span class="input-group-addon">
Layer to Edit :
</span>
<select class="form-control" type="text" name="currentLayerToEdit" id="currentLayerToEdit">
<option value="0">None</option>
<option value="1">Layer 1</option>
<option value="2">Layer 2</option>
</select>
</div>
<br>
<fieldset style="margin-left:10px;">
<legend style="text-align:left;">
Icons :
</legend>
<label style="height:32px;width:32px;float:left;margin-left:10px;">
<img class="icon" style="width:24px;height:24px;" src="./files/icons/icon1.jpg" alt="" title="Icon1"/>
</label>
<label style="height:32px;width:32px;float:left;margin-left:10px;">
<img class="icon" style="width:24px;height:24px;" src="./files/icons/icon2.jpg" alt="" title=""/>
</label>
<br>
<label class="info small italic">
Drag & drop on the "current Layer"
</label>
</fieldset>
<br>
<fieldset style="margin-left:10px;">
<legend style="text-align:left;">
Tools :
</legend>
<label class="btn btn-warning" id="toolline" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-pencil"></i> | Draw a Line</label>
<label class="btn btn-info" id="toolselector" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-location-arrow"></i> | Select Objects</label>
<label class="btn btn-danger" id="tooltext" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-bold"></i> | Add Text</label>
<label class="btn btn-default" id="toolpolygon" style="float:left;margin-left:5px;margin-right:5px;"><i class="fa fa-square"></i> | Draw Polygon</label>
</fieldset>
</fieldset>
</div>
<div class="col-lg-8">
<div class="row col-lg-12">
<b><i>Display box : </i></b>
</div>
<div style="clear:both;"></div>
<div class="mixSize" style="border:1px solid black;position:relative;margin:0 auto;max-width:1000px;width:100%;border-radius:8px;">
<iframe class="svgEditIframe" src='./js/svgedit26/svg-editor.html' width=100% height=100% ></iframe>
</div>
<br>
<div>
<div class="col-lg-6">
<fieldset>
<legend>
What I am doing :
</legend>
<!-- Should here display information about what I am doing, what is selected, give possibility to save Layer or delete selected items on it -->
</fieldset>
</div>
</div>
</div>
</div>
Here is some CSS...
(the main thing is this ":before" which forcess my svgEdit container to have a height set as its width...)
<style>
.mixSize:before{
content:"";
display:block;
padding-top:80%;
}
.svgEditIframe{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
</style>
Thanks for reading, thanks for help!
I am trying to make a input form dropdown using bootstrap(BootStrap version 2.3.2), but my form dropwdown make a irrelevant space with it.
This is my code:
<div class="control-group" >
<label class="control-label">Event Name</label>
<div class="controls">
<div class="input-prepend">
<? $result=$this->db->get("EventType")->result();
foreach($result as $res){
$event[$res->Id]=$res->Name;
}
$event["Select"]="Select";
$js = 'id="events" class="input-large" onChange="some_function();"';
echo form_dropdown("event_type",$event, 'Select',$js); ?>
</div>
<? echo '<span style=color:red>'.form_error('event_name').'</span>'; ?>
</div>
</div>
Rendered HTML:
<div class="control-group">
<label class="control-label">Event Name</label>
<div class="controls">
<div class="input-prepend">
<select name="event_type" id="events" class="width" onChange="some_function();">
<option value="6">Music</option>
<option value="7">Seminar</option>
<option value="8">Sports</option>
<option value="9">Movie</option>
<option value="11">Conference</option>
<option value="Select" selected="selected">Select</option>
</select>
</div> <span style=color:red></span>
</div>
</div>
This is my output image
There is a gap between button of a dropdown and input text(Right side gap of the text). How can I remove this gap?
But, I want to make this input form dropdown like as
No extra space of right side.
May be there is a style in your css for select or textarea.
Whatever, You can use this style for select.
.select,
textarea,
input[type="text"]{
padding:0px;
}
I hope you will success.So,Try it.
I've looked all over the place and it seems that people only want to open a lightbox AFTER submitting a form. I however want to submit the form FROM a lightbox. All my code works until I put the form into a lightbox so I'm wondering if this is even possible.
Form submit code (PHP):
if(isset($_POST['updatemain'])) {
$company = $_POST['conameu'];
$vault = $_POST['vnameu'];
$q = "UPDATE siteinformation SET SiteName = :company, VaultName = :vault";
$query = $db->prepare($q);
$results = $query->execute(array(
":company" => $company,
":vault" => $vault
));
header('Location: vault.php');
}
Form in the lightbox code:
<div class="backdrop"></div>
<div class="box"><div class="close"><img src="images/close.png" /></div>
<fieldset>
<legend>Pick a Section to Work on</legend>
<div id="prompt">Select a Section:</div>
<div id="answer">
<select id="sectionchange">
<option value="main">Main Titles</option>
<option value="organ">Emergency Organizations</option>
<option value="number">Common Numbers</option>
<option value="website">Common Websites</option>
<option value="quicklink">Quick Links</option>
</select>
</div>
</fieldset>
<div id="mainsection">
<form id="updatemain" action="" method="post">
<fieldset>
<legend><strong>Main Title Information</strong></legend>
<div id="prompt">Client Company Name:</div><div id="answer"><input type="text" name="conameu" id="conameu" /></div>
<div id="prompt">Web Tool Name:</div><div id="answer"><input type="text" name="vnameu" id="vnameu" /></div>
<div id="prompt"><input type="submit" id="updatemain" value="Update Information" /></div>
</fieldset>
</form>
</div>
</div>
</div>
Like I said, this works FINE until it is in the light box so I'm kind of stumped at this point.
Any ideas?
Thanks in advance for your time!
Per the comment section:
Add a name attribute with the value updatemain to your submit button.
Without this, PHP will not have a POST value $_POST['updatemain'] set, so the first if statement will always be false.
Updated to reflect that the "name" must be present in the submit button for this to work, even though for whatever reason it didnt need to be before. Thanks again #andbeyond
<div class="backdrop"></div>
<div class="box"><div class="close"><img src="images/close.png" /></div>
<fieldset>
<legend>Pick a Section to Work on</legend>
<div id="prompt">Select a Section:</div>
<div id="answer">
<select id="sectionchange">
<option value="main">Main Titles</option>
<option value="organ">Emergency Organizations</option>
<option value="number">Common Numbers</option>
<option value="website">Common Websites</option>
<option value="quicklink">Quick Links</option>
</select>
</div>
</fieldset>
<div id="mainsection">
<form id="updatemain" action="" method="post">
<fieldset>
<legend><strong>Main Title Information</strong></legend>
<div id="prompt">Client Company Name:</div><div id="answer"><input type="text" name="conameu" id="conameu" /></div>
<div id="prompt">Web Tool Name:</div><div id="answer"><input type="text" name="vnameu" id="vnameu" /></div>
<div id="prompt"><input type="submit" id="updatemain" name="updatemain" value="Update Information" /></div>
</fieldset>
</form>
</div>
</div>
</div>