How to make a product page in Wordpress - javascript

I am learning Wordpress currently so far I know how to design the webpage, but what I want to do next is to make a product page without ordering. What I want is the following:
List all my products and if one clicks on a product it will show the detail page of that product
The products can be added to a list and then there will be a contact form which will take the list and send it to me in a pdf or excel (but at first enough if only names are sent via email) so I can answer it with the asked question.
I sadly could not find any starting point I do not even know if there is such a plugin, if not can I make one myself? I know javascript so I think I could Programm it myself but would prefer if there is some plugin I can use due to time issues.

You can also use woocommerce. If you don't want a user to order something with a "Add to cart" button you could hide this button with your code or a pluging for example https://de.wordpress.org/plugins/yith-woocommerce-catalog-mode/

Related

how do i display user input on the same page, with the option to delete

Good day programmers. I am very new to jsp/javascript but this site has helped me a lot so far, but i can use some more help or guidance for a problem i am having.
I am making a web app for creating and saving recipes. For my "add recipe" process, i have the user enter a recipe name, they are then directed to another page where they can choose an ingredient from a dropdown (populated from a sql db), enter a quantity, and then click a button to ad another ingredient.
What i wish to do is have the ingredient selected and the amount displayed to the user on the same page where they are choosing the ingredients. I also want to add a button at the end of the "print out" that allows the user to remove that ingredient.
So far i am thinking that i should use a table and have a row created when the user adds an ingredient, then use the deleterow() method to remove that ingredient if desired.
Does anyone think this can work? or have a better solution.
PS: i am very new to jsp and javascript.
thanks in advance for any assistance rendered.
You can use ajax to achieve this. For that using jQuery will make you writing a lot less number of lines of code.
So it will work like this, they have entered the recipe name. Now using onblur on that field input, you load the dropdown of ingredients and give them option of entering quantity and selecting the ingredient with a button to save that data.
When they click on the button to save, after it getting saving into the database, you make an ajax call to load the recent added item with a button to delete it and when they click on delete, you make another ajax call to the database to delete it.
Here is a guide to ajax on javaScript
https://developer.mozilla.org/en-US/docs/AJAX

Change items in drop down box in Wordpress Website

I am new to Wordpress, and I am attempting to build a website using it. I am trying to create a contact us page. What I am trying to do is almost exactly what Amazon's Contact Us page does.
I am going to display some buttons, and when the user clicks the button, I want data that is in a dropdown box to change so the user can click on an item in the dropdown box. I have no clue how to achieve this in WordPress. I have searched, but I don't think I am wording my searches correctly, and I am not sure if regular websites would work the same. I can't even figure out how to make my own PHP or Javascript's in WordPress, I am looking more into that now.
Any help would be appreciated! Thanks!
I suggest you to use Contact Form 7 to build a contact page.

Auto update table fields and disabled function using javaScript, Ruby on Rails and/or JQuery

Versions
Mac OS: OSX 10.10.2
Ruby: 2.2.1p85
Rails: 4.2.0
Bootstrap-SASS: 3.3.4 #For Web UI
Bootstrap-Switch-Rails: 3.0.0 #For Toggles
Context
I am building a site where someone can create a packing event to make bags for the homeless. I am using Ruby on Rails to create this webapp, Bootstrap to design the user interface, and am open to using JQuery, javaScript, HTML, and CSS to get the desired functionality. Though my working knowledge of the first two languages is minimal.
In the user's event creation and edit pages I have a list of items that a person can add to their bags. This list is in a table view as seen through the link below.
Dropbox link
Desired Functionality
I am wanting to do 2 things.
When the user enters the number of bags they plan on packing, I want to be able to update the column "Number Needed" for each item. So, for instance in the example scenario shown in the image above, the "Number Needed" for "Raise Money" would be "$6,500", for "Volunteers" would not be added, for "Water" would be "1000" and for "Food" would be "1000".
I want the user to be able to toggle whether to include an item on their event page. So, in the example picture, the user wants to show on their event page that they are raising money for their event, and requesting donations for water and food; but they do not need volunteers to pack the bags. In this scenario, I would like to disable the form fields of "Number Needed", "Currently Have" and "Number Remaining to Get" for the row "Volunteers".
Questions
For the first desired functionality specified above: Should I just have the table on a separate page maybe so that the fields are populated before the table is actually shown? Or, my preferred ability, do I need to put a button after the "Number of Bags" field that when clicked updates the table? And how would I do that?
For the second desired functionality specified above: Is there a way to have this done dynamically when the user toggles the "Include" column to "Yes" or "No"? How would I disable the desired form fields dynamically once a user toggles that row to "No"?
Let me know if you need any more information. And thank you in advance for your expertise.
First things first, I would put this in the comment, but I don't have enough reputation to do that yet.
Ok so there's a few ways to solve your problem. The first and ugly solution would be to rerender the page everytime something gets updated. You really shouldn't do it that way because that required the user to hit a button to submit the form and the controller would render the same page again with updated results.
Instead, you want to use jQuery to add event listeners to your form fields and the button mentioned in the second functionality. On those event listeners, put some handlers to update the desired field. It's hard to direct you on the jQuery if I don't know your HTML structure. As Santiago mentioned, there are many tutorials out on the internet for putting event listeners and creating the proper handlers.
Additionally, you should consider AJAX to asynchronously communicate with your controller to keep the front-end (what the users see on the browser) and the back-end (data stored in the database) in sync. Again, plenty of guides out there on the internet for this, but definitely look into the Rails functionality of "remote: true" on your form to make the set up of the AJAX process easier.

Button to open new page and auto fill some form elements

I sell a tremendous number of products that require finance of one kind or another. I also use 8 different lending sources for financing. Problem is that each lender works with certain product types and ages, etc. I can not use a generic application form due to the differences in each lenders requirements. I have added APPLY NOW Button(s) to each individual product but cannot use simple "goto" link.
Example(s):
Customer 1 views product ID#20, unit is 20 years old and only one particular lender will work.
Customer 2 views product ID#55, unit is brand new and all will work with it, but I send all new products to one lender in particular.
Apply Now Button is always the same image, but I need for the button to open the application page specific to that product, and auto fill the input fields such as Vendor Name, Product Name and Description, Price, Etc as most customers are unfortunately lazy and simply won't do that once they have been taken away from the product page. I figure I will need to code the button individually based on individual products to open the correct application, but want all to fill in the information. All items for AutoFill are stored in the Store Database as well as the Vendor (Store) Info.
Maybe I am in the wrong area or simply missed the answer somewhere else, but I am getting snow blind trying to find the answers...even a point in the right direction would help.
It sounds to me like you need to link the product with a lender type, this would make it easier to grab lander data and auto populate the form fields when the page loads. This way you would not need to change the "Apply Now" link.
In short I would suggest creating a link table between product/product type to the lender table.

Fetching product details on mouseover

I want to integrate a function into my website, whereby if a user hovers their mouse on the name of a product, a box appears which will show the details of this product. For this I would preferably like to use either CSS or Javascript, I am not really sure how I would go about doing this though. Can anyone offer me some guidance please? I am currently using the JQuery UI with essentially the same code as the shopping cart code seen here :
http://jqueryui.com/demos/droppable/#shopping-cart
Thnk you very much for the help.
If you want to be fancy and use jquery, here is a list of popup plugins that you can browse.
If the product information isn't too complicated I would suggest using CSS as it is simpler. Also, you probably want to have the data already loaded, so the user doesn't have to wait a round trip to your server every time they mouse over a product. Here is a simple CSS popup tutorial.

Categories