Jquery UI sortable has image among sort item - javascript

I have a sortable list like the above image, each sortable block has a icon between them.
The current code in jquery UI sortable is like this:
if (count($track_list) > 0) {
echo "<ul class='sortable_panel'>";
foreach ($track_list as $key => $video) {
?>
<li class="video_bar">
.....
</li>
<?php
if ($key != count($track_list) - 1) {
echo "<div style='text-align:center;'><i class='fa fa-link icon-flipped'></i></div>";
}
}
echo "</ul>";
}
Javascript:
$('.sortable_panel').sortable();
The problem is , how to
1) make the icon not sortable
2) if the first item is drag to last item, how to make the second item become the first item and above the icon?
Thanks a lot for helping.

Related

How to work with custom shopping cart in php

I have successfully built a shopping cart and everything works fine.
Here is what i want to accomplish:
if a user clicks on the add to cart button, it should add to the cart and refreshe the same page with the added item update.
If a user clicks on the image or View button, it displays the image of the item.
my problem is as follows:
1. IF a user clicks on the add to cart button, it adds but redirects to the cart.php file (Which is not what i want, I want the page to reload with the added item update)
2. I tried using:
$head = $_SERVER['HTTP_REFERER'];
echo '<script>location.href="'.$head.'"</script>';
exit();
It seems to work well, when a user clicks add to cart button, but when a user clicks on image or click on view button, it refrehes the same page without allowing the user to view the image.
Below is my code.
//My custom shopping cart script
if (isset($_GET['pid'])) {
$pid = $_GET['pid'];
$wasFound = false;
$i = 0;
// If the cart session variable is not set or cart array is empty
if (!isset($_SESSION["cart_array"]) || count($_SESSION["cart_array"]) < 1) {
// RUN IF THE CART IS EMPTY OR NOT SET
$_SESSION["cart_array"] = array(0 => array("item_id" => $pid, "quantity" => 1));
} else {
// RUN IF THE CART HAS AT LEAST ONE ITEM IN IT
foreach ($_SESSION["cart_array"] as $each_item) {
$i++;
while (list($key, $value) = each($each_item)) {
if ($key == "item_id" && $value == $pid) {
// That item is in cart already so let's adjust its quantity using array_splice()
array_splice($_SESSION["cart_array"], $i-1, 1, array(array("item_id" => $pid, "quantity" => $each_item['quantity'] + 1)));
$wasFound = true;
} // close if condition
} // close while loop
} // close foreach loop
if ($wasFound == false) {
array_push($_SESSION["cart_array"], array("item_id" => $pid, "quantity" => 1));
}
}
$head = $_SERVER['HTTP_REFERER'];
//header("location: $head");
echo '<script>location.href="'.$head.'"</script>';
exit();
}?>
<!--My Products item Display-->
<div class="col-md-4">
<div class="product-img product-img-brd">
<img class="full-width img-responsive" src="../../backend/'.$product_img.'" alt="'.$product_name.'">
<a class="product-review" href="pro_single.php?pid='.$id.'">Quick review</a>
<a class="add-to-cart" href="cart.php?pid='.$id.'" ><i class="fa fa-shopping-cart"></i> Add to cart </a>
<div class="product-price">
<span class="title-price">$'.$price.'</span>
</div>
</div>
Instead of making it a link (with an anchor tag <a>), you'll want to write some JavaScript that will use one of the many different ways to call it with AJAX.
A simple version might look like this:
// update <a> in HTML
<a onclick="addToCart(' . $id . ')">Add to Cart</a>
// JavaScript
const addToCart = id => fetch('cart.php?pid=' + id).then(response => { /* do something with response here */ });
This is a simple version, but it gives you an idea. There are tons of guides for AJAX with all the different methods (I prefer the newer fetch(), but there is jQuery.ajax() and pure XMLHttpRequest too, amongst others).
When you use an anchor with a link, it's saying "go to this place", which isn't what you want. Using AJAX, you can pull down data without affecting the flow of the page itself.
Side note: ideally, change your <a> to a <button> as well. This will make it more semantic, since a button is a thing to click to do thing and an anchor is a link to another page.

Insert a div after the 3rd product in woocommerce shop [duplicate]

This question already has answers here:
Add content in between product rows in WooCommerce archives
(2 answers)
Closed 2 years ago.
I am using 3 columns grid in woocommerce shop
[] [] []
[] [] []
[] [] []
How can I insert a div after the 3rd grid
Something like this
[][][inserted div]
[][][]
[][][]
So I can put anything in there, thanks.
All the product loaded from a loop script just initiate any $variable= 0 and after every product loaded $variable incremented by 1 and check $variable %3 == 0 if success add the div
e.g.
$variable = 0;
{ //product loop start
//product load
$variable ++; // variable increment
if($variable%3 == 0){
// Add Div here
}
} //product loop end
You can place this inside your post loop just before the loop ends. It will output your desired div (ad) after the 2nd post. Just make sure you add in any necessary CSS classes to the div, and of course your ad code or image.
<?php if ( $wp_query->current_post == 1 ) { ?>
<div>Put Ad Here</div>
<?php } ?>
So it should look something like this within your post loop:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/content' ); ?>
<?php if ( $wp_query->current_post == 1 ) { ?>
<div>Put Ad Here</div>
<?php } ?>
<?php endwhile; endif; ?>
This works by using the $current_post property of the WP_Query class. It retrieves the index of your current post in the loop.
Hope this helps!
you can achieve this by using jQuery also,
Try the CSS selector :nth-child():
$("#holder > div:nth-child(2)").after("<div>add div</div>");

PHP/SQL Dynamic menu depending on different tables

I'm trying to manage a dynamic menu based on results from tables in my database.
Code below is so far i have come.. But i can't get it to display as i want to.
i have 3 tables in my database looking like this.
ws_categories
id
maincat (name of main-category)
ws_subcategories
id
subcat (Name of sub-category)
parentcat (id of main-category)
ws_subsubs
id
subsub (Name of 2nd-sub-category)
parentsub (id of sub-category)
What i want to achieve?
Having a simple vertical menu, that outputs main categories, and onclick, submenue alternatives related to that main category will show, if a sub category has a 3rd submenu/submenues, they will show under..
Code below is so far i have come.. But i don't seem to understand why it output main category several times and not just once..
To be clear, i do not understand how i should use join to achieve this. I want to be able to echo all main categories once, and subcategories once, and if there is one or more 2nd sub categories i want them to echo too.. How do i achieve this with join? is it even possible or am i looking the wrong way?
Thanks in advance.
PHP
<?php
echo '<div class="dl_parent">';
$results = mysqli_query($link, "SELECT * FROM `ws_categories` INNER JOIN `ws_subcategories` ON `ws_categories`.`id` = `ws_subcategories`.`parentcat`;") or die (mysqli_error($link));
while($row = mysqli_fetch_array($results)){
echo '
<div class="dl_parent">
<div class="dl_link">'.$row['maincat'].'</div>
<div class="dl_sub_dd">
<ul>
<li>'.$row['subcat'].'</li>
</ul>
</div>
</div>
';
}
?>
Javascript
$(window).on('load',function(){
//CLICK-HANDLERS=============================
$('.dl_link').click(function(){
var submenu = $(this).parent().children('.dl_sub_dd');
if (submenu.css('display') == 'none') {
$('.dl_sub_dd').hide(); //first hide any previously showing submenu's
submenu.show(); //then show the current submenu
} else {
submenu.hide(); //hide the current submenu again
}
});
});
CSS
/*LINK------------------------*/
.dl_link {
cursor:pointer;
}
/*DROPMENU--------------------*/
.dl_sub_dd {
display:none;
}
Your SQL request will give you for each main category as many rows as it has sub categories:
row 1: maincat1 | subcat1
row 2: maincat1 | subcat2
etc...
You could make a request to select all maincats, and for each maincat, make another request to select all its subcats. Something like this:
PHP
<?php
$results = mysqli_query($link, "SELECT * FROM `ws_categories`;") or die (mysqli_error($link));
while($row = mysqli_fetch_array($results)){
echo '
<div class="dl_parent">
<div class="dl_link">'.$row['maincat'].'</div>
<div class="dl_sub_dd">
<ul>';
$query = mysqli_query($link, "SELECT * FROM `ws_categories` INNER JOIN `ws_subcategories` ON `ws_categories`.`id` = `ws_subcategories`.`parentcat` WHERE `ws_categories`.`id` = " . $row['id'] . ";") or die (mysqli_error($link));
while($row2 = mysqli_fetch_array($query)) {
echo '<li>'.$row2['subcat'].'</li>';
}
echo '</ul>
</div>
</div>
';
}
?>

Unset session deletes all saved items

Reading a lot about sessions and how to add and remove items. I see there are a lot of different way's to get this done. I'm having the same problem.
I hope someone here could help me out with this one. I've come along way from nothing to where I am now with the help of this community (thanks!).
This is my problem, I hope I can explain it so you can understand.
Let say I have a shop that sells t-shirts and pants. When I save a t-hirt item to my cart it display's it like it should. But I'm not able to remove the item. If I then filter my page for pans (this triggers an AJAX event) and try to remove the t-shirt, the item is removed. But ALL items are removed not just the one I clicked on to remove.
Here is my HTML to add a product:
<button type="submit"
class="btn btn-primary text-right add-product showtoast"
data-target="post-<?php the_ID(); ?>"
data-attribute="<?php the_title(); ?>"
data-product="<?php the_title(); ?>">
Add to cart
</button>
And this is the HTML to remove an item:
<div class="echo-product">
<?php echo htmlspecialchars($product); ?>
<input type="submit" class="delete-product" value="Remove">
</div>
These are my Javascripts to add and remove items:
$('.add-product').click(function() {
var productName = $(this).data('product');
$.post('http://example.com/reload.php?addparam',
{productName: productName}, function(data) {
$('.txtHint').html(data);
})
});
$('.delete-product').click(function() {
var productName = $(this).data('product');
$.post('http://examples.com/reload.php?delparam',
{productName: productName}, function(data) {
$('.txtHint').html(data);
})
});
And last but not least, my reload.php script:
<?php
session_start();
if (!array_key_exists('products', $_SESSION) || !is_array($_SESSION['products'])) {
$_SESSION['products'] = [];
}
$productName = array_key_exists('productName', $_POST) ? (string) $_POST['productName'] : '';
if(isset($_GET['delparam'])){
unset($_SESSION['products'][$productName]);
}
if(isset($_GET['addparam'])){
$_SESSION['products'][] = $productName;
}
?>
<?php foreach ($_SESSION['products'] as $product): ?>
<div class="echo-product">
<i style="color:#F60;padding-right:20px;" class="fa fa-anchor" aria-hidden="true"></i>
<?php echo htmlspecialchars($product); ?>
<input type="submit" class="delete-product" value="Remove">
</div>
<?php endforeach;?>
Is there anyone that could help me understand why (it looks like) an AJAX event has to take place before I'm able to remove items. And why it removes ALL the items when I just click on one item?
Thanks!
Compare how products are added vs. how they are deleted
if(isset($_GET['delparam'])){
unset($_SESSION['products'][$productName]);
}
if(isset($_GET['addparam'])){
$_SESSION['products'][] = $productName;
}
When adding a product, you just append the productName to an array. The entry receives an numeric index.
When deleting a product you look for the productName as index - but that does not exist!
I'm sure it doesn't answer why all products are removed, but it might help to do things right.

yii2 ul li menu sorting with foreach value

i am using ul li to display menus, menus fetched from database
$Features = $session->get('Features');
foreach ($Features as $menuItems) {
$order_priority = $menuItems->order_priority;
$name = $menuItems->name;
$path = $menuItems->path;
}
here below the menu listed ,
<li>
<a href="<?php echo Url::to($path);?>">
<?php echo $menuItems->name; ?>
</a>
</li>
my question is i want to display the menu SORT with order_priority [1,2,3,4]?
If your order_priority attribute doesn't repeats. You can try this:
$menu = [];
foreach ($session->get('Features') as $menuItems) {
$menu[$menuItems->order_priority] = Html::a($menuItems->name, $menuItems->path);
}
ksort($menu);
And for generate the list, you can do like this:
echo Html::ul($menu)
But if it does repeat, you could sort the items in your db query like #ustmaestro said in the comments.

Categories

Resources