单击href链接时如何将查询字符串参数添加到相同的URL

Question

 //script to show magnific popup <script> $('.gallery-lb').each(function() { // the containers for all your galleries $(this).magnificPopup({ delegate: 'a', // the selector for gallery item type: 'image', gallery: { enabled:true }, mainClass: 'mfp-fade' }); }); </script> //script to show popup (function ($) { [ Show modal1 ]*/ $('.js-show-modal1').on('click',function(e){ e.preventDefault(); $('.js-modal1').addClass('show-modal1'); }); $('.js-hide-modal1').on('click',function(){ $('.js-modal1').removeClass('show-modal1'); }); })(jQuery); 

 <?php //Quick View link at index.php page if(count($product) > 0) { foreach ($product as $products){ echo' <a href="?qid='.$products['Product_ID'].'" class="block2-btn flex-cm stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">Quick View </a> ';}?> <!-- Display product details on magnific modal popup --> <div class="wrap-modal1 js-modal1 pt-60 pb-20"> <div class="overlay-modal1 js-hide-modal1"></div> <div class="container"> <div class="row"> <div class="slick3 gallery-lb"> <?php //check if query string exist in URL if(isset($_GET['qid']) && !empty($_GET['qid'])){ //get selected product details from database and display at magnific modal popup $selectedproduct =$app->getProductDetails($_GET['qid']); if(count($selectedproduct) > 0){ foreach ($selectedproduct as $productdetail){ echo ' <div class="item-slick3" data-thumb="'.$productdetail['Product_Image'].'"> <div class="wrap-pic-w pos-relative"> <img src="'.$productdetail['Product_Image'].'" alt="IMG-PRODUCT"> <a class="flex-cm size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Image'].'"> <i class="fa fa-expand"></i></a> </div> </div> <div class="item-slick3" data-thumb="'.$productdetail['Product_Detail_Image01'].'"> <div class="wrap-pic-w pos-relative"> <img src="'.$productdetail['Product_Detail_Image01'].'" alt="IMG-PRODUCT"> <a class="flex-cm size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Detail_Image01'].'"><i class="fa fa-expand"></i></a> </div> </div> <div class="item-slick3" data-thumb="'.$productdetail['Product_Detail_Image02'].'"> <div class="wrap-pic-w pos-relative"> <img src="'.$productdetail['Product_Detail_Image02'].'" alt="IMG-PRODUCT"> <a class="flex-cm size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="'.$productdetail['Product_Detail_Image02'].'"> <i class="fa fa-expand"></i></a> </div> </div>'; } } }?> </div> </div> </div> </div> 

I wanted to created an ecommerce site that displays product details in a lightbox popup when user clicks on a "Quick View" link of a particular product. However, I'm unable to do so as the query string that is appended on the product "Quick View" link is not shown on the index URL when the onclick action is performed. Hence, lightbox display empty result after clicking on the product link.

Product Quick View URL looks something like this: http://localhost/index.php?qid=(some product ID).

I am using magnific popup source code to display lightbox.

Expected result: Upon clicking the product quick view link, a lightbox will popup to show product details of the selected product in the index URL page.

How can I add query string to the index URL when onclick a href link so that appropriate product details can be fetch from database based on the query string qid (aka product id) and displayed at lightbox. Would appreciate someone to help me with this. :)

Answer 1

Something like this

 <a onclick="window.location='http://localhost/index.php'+window.location.search;">Quick View</a> 

maybe?

Answer 2

We don't need that much of code for this, if you just want to add something to the url. you can just use .pushState function on javascript.

history.pushState({}, "page title", "?qid=some_product_id or anything");

Find details here: https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries

this will also presist history.

Answer 3

You can use following code and add parameters to query string

window.history.replaceState(null, null, "?param1=value");