Help make such a function on the site. There are pictures that depict goods for sale. There is a form for sending the order. Is it possible to make it so that when you click on the image, the product depicted in this image is added to the order form. I would be very grateful for the help, where to start and where to go. Can someone tell me how to look for it correctly

    1 answer 1

    For an exact answer to your question, you need to formulate it more precisely. Those. Give an example of the code of the form and the items you are working with (in your case it is an example of product markup, for example), also indicate the plugins that are used in Wordpress and participate in shaping the delivery of goods and sending letters (if such are used). Since this task can be implemented in many ways. Below is an example of the simplest solution that does not imply the use of wordpress plugins.

    You can use jquery:

    1 Take your form, let's say it with the id "order". In the form we need to add an invisible input field where you will store the value (image link), for example:

    <form id="order"> ... <input type="hidden" name="selectedProduct"/> ... </form>

    2 Create a handler for clicking on the image, for example, the pictures will be with the "product-image" classes. When clicking on them, it is necessary to take src images and transfer this value to the "selectedProduct" field:

     $('.product-image').click(function(){ $('#order input[name="selectedProduct"]').val($(this).attr('src')); });

    Now when you submit the form, you will have the "selectedProduct" parameter with the url of the selected image. It will remain to be processed and added to the mailing.

    If it is necessary to display a picture in the form itself, it is necessary to add an img tag to the form with the image we received. To do this, add a div with the class "selected-product-image" to the form and change our click handler a bit:

    The form:

     <form id="order"> ... <div class="selected-product-image"></div> ... <input type="hidden" name="selectedProduct"/> ... </form>

    Click Processing:

     $('.product-image').click(function(){ var $imgSrc=$(this).attr('src'); $('#order input[name="selectedProduct"]').val($imgSrc); $('#order .selected-product-image').html('<img src="'+$imgSrc+'" alt="товар"/>'); });