customer can choose to reorder an entire order

Kumar2573
Explorer
80 5 8

<!--- popup --->
{% for order in customer.orders %}

<div class="center hideform" id="order_number{{forloop.index}}">
<div class="popcontent">
<div class="ordersum">
<p class="advance_reorder_popup_title">
<span class="advance_reorder_mobilehide">Order Summary</span>
<span class="advance_reorder_mobilehide"> | </span>
<span class="odertolpric">47,93</span>
<p class="close" style="float: right;">X</p>
</p>
</div>



<table>
<thead class="cart__row">
<tr>
<th scope="col">Image</th>
<th c scope="col">Product Tiltle</th>
<th class="itmprice" scope="col">Price</th>
<th class="ats" scope="col">Quantity</th>
</tr>
</thead>
{% for lineitem in order.line_items %}
<tbody>

<tr class="cart__row border-bottom line1 border-top">
<td class="cart__image-wrapper">
<div>
<img class="cart__image" src="{{lineitem.image |img_url:'medium'}}" style="cursor: pointer;">
</div>
</td>
<td class="cart__meta small--text-left">
<div class="list-view-item__title">
<a href=""> {{lineitem.title}} </a>
</div>

</td>
<td class="text-right small--hide">
<div> {{lineitem.price | money}} </div>

</td>
<td class="text-right small--hide">
<div class="cart__qty">
<label for="" class="cart__qty-label">Quantity</label>
<input class="cart__qty-input" type="number" name="updates[]" id="" value="{{lineitem.quantity}}" min="0" pattern="[0-9]*" data-quantity-item="1">
<input type="checkbox" value="{{lineitem.variant_id}}" data-quantity="{{lineitem.quantity}}" class="product_info">
</div>
</td>

</tr>


</tbody>
{% endfor %}
</table>
<div class="modal-footer" style="">
<input type="submit" value="Add to cart" class="btn btn-checkout" />

</div>


</div>

</div>

{% endfor %}

<script>

$(document).ready(function(){
$('.show').on('click', function () {
var show = $(this).attr("data-pop");
$('#'+show).show();
})
$('.close').on('click', function () {
$('.center').hide();
})
$(".btn-checkout").click(function(){
var comb="";
$(".product_info:checked").each(function(){
var qty = $(this).attr("data-quantity");
var variant=$(this).attr("value");
comb=comb+""+variant+":"+qty+","
})
console.log(comb);
var comb_final= comb;
var url= "/cart/"+comb+"?checkout";
window.location.href=url;

});

});

</script>

/******popup css********/
.center {
margin: auto;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.hideform {
display: none;
}
th, td {
width: 100px;
text-align: left;
border: 1px solid #e8e9eb;
padding: 10px 14px;
}
.popcontent {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
button.show {
background-color: #4CAF50;
border: none;
color: white;
padding: 9px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.ordersum {
padding: 15px;
border-bottom: 2px solid #e5e5e5;
}
span.advance_reorder_mobilehide {
font-weight: bold;
color: #ff0000;
font-size: 22px;
}
span.odertolpric {
font-weight: bold;
color: #3a3535;
font-size: 22px;
}
p.close {
cursor: pointer;
float: right;
position: absolute;
right: 235px;
top: 121px;
font-weight: 600;
font-size: 27px;
}

0 Likes
Kumar2573
Explorer
80 5 8

{% paginate customer.orders by 20 %}

<div class="page-width page-content">
<header class="section-header{% unless settings.type_headers_align_text %} section-header--with-link{% endunless %}">
<h1 class="section-header__title">{{ 'customer.account.title' | t }}</h1>
<a href="{{ routes.account_logout_url }}" class="btn btn--secondary btn--small section-header__link">{{ 'layout.customer.log_out'| t }}</a>
</header>

<div class="grid">

<div class="grid__item medium-up--two-thirds">
<h2>{{ 'customer.orders.title' | t }}</h2>

{% if customer.orders.size != 0 %}

<table class="table--responsive table--small-text tbl_border">
<thead>
<tr>
<th>Re-order</th>
<th>{{ 'customer.orders.order_number' | t }}</th>
<th>{{ 'customer.orders.date' | t }}</th>
<th>{{ 'customer.orders.payment_status' | t }}</th>
<th>{{ 'customer.orders.fulfillment_status' | t }}</th>
<th>{{ 'customer.orders.total' | t }}</th>
</tr>
</thead>
<tbody>
{% for order in customer.orders %}
<tr class="table__section">
<td><a href="#" data-pop="order_number{{forloop.index}}" class="show">Reorder</a></td>
<td data-label="{{ 'customer.orders.order_number' | t }}" style="text-decoration: underline;"><a class="oder_nme" href="{{order.customer_url}}">{{ order.name }}</a></td>
<td data-label="{{ 'customer.orders.date' | t }}">{{ order.created_at | date: format: 'month_day_year' }}</td>
<td data-label="{{ 'customer.orders.payment_status' | t }}">{{ order.financial_status_label }}</td>
<td data-label="{{ 'customer.orders.fulfillment_status' | t }}">{{ order.fulfillment_status_label }}</td>
<td data-label="{{ 'customer.orders.total' | t }}">{{ order.total_price | money }}</td>
</tr>
{% endfor %}
</tbody>
</table>

<hr class="hr--clear">

{% else %}

<p>{{ 'customer.orders.none' | t }}</p>

{% endif %}
</div>

<div class="grid__item medium-up--one-third">
<h3>{{ 'customer.account.details' | t }}</h3>

<p class="h5">{{ customer.name }}</p>

{{ customer.default_address | format_address }}

<p><a href="{{ routes.account_addresses_url }}" class="text-link account_hyper">{{ 'customer.account.view_addresses' | t }} ({{ customer.addresses_count }})</a></p>

{% comment %}
<p><a href="/account?view=my-rewards" class="text-link">My Rewards</a></p>
{% endcomment %}
<p><a href="/pages/rewards" class="text-link account_hyper">My Rewards</a></p>
<p><a href="/a/wishlist" class="text-link account_hyper">My Wishlist</a></p>
</div>

</div>

{% if paginate.pages > 1 %}
{% include 'pagination' %}
{% endif %}
</div>
{% endpaginate %}


<!--- Reorder popup start --->
{% for order in customer.orders %}

<div class="center hideform" id="order_number{{forloop.index}}">
<div class="popcontent">
<div class="ordersum">
<h2 class="cssxiejj">Select products to Reorder</h2>
</div>

<table>
<thead class="cart__row">
<tr>
<th>Image</th>
<th>Product Tiltle</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>

{% for lineitem in order.line_items %}

<tbody>
<tr class="cart__row border-bottom line1 border-top">
<td class="cart__image-wrapper">
<div>
<img class="cart__image" src="{{lineitem.image |img_url:'small'}}" style="cursor: pointer;">
</div>
</td>
<td class="cart__meta small--text-left">
<div class="list-view-item__title">
<a href=""> {{lineitem.title}} </a>
{{lineitem.variant.inventory_quantity}}
{%if lineitem.variant.inventory_quantity <= 15 %} <span class="danger" style="color:red;"> soldout</span>{%endif%}
</div>

</td>
<td class="text-right small--hide">
<div> {{lineitem.price | money}} </div>
</td>
<td class="text-right small--hide">
<div class="cart__qty">

<input class="cart__qty-input" type="number" name="updates[]" id="" value="{{lineitem.quantity}}" min="0" pattern="[0-9]*" data-quantity-item="1" style="width:40%;">

<input type="checkbox" {%if lineitem.variant.inventory_quantity <=15 %} disabled {%endif%} value="{{lineitem.variant_id}}" data-quantity="{{lineitem.quantity}}" class="click_check">
</div>
</td>

</tr>

</tbody>
{% endfor %}
</table>
<div class="modal-footer" style="">

<input id="Re_orderbtnz" type="submit" disabled value="Reorder & Checkout" class="btn btn-checkout" />

</div>
</div>

<p class="close" style="float: right;">&times;</p>

</div>


{% endfor %}

<script>

$(document).ready(function(){
$('.show').on('click', function () {
var show = $(this).attr("data-pop");
$('#'+show).show();
})
$('.close').on('click', function () {
$('.center').hide();
})
$(".btn-checkout").click(function(){
var comb="";
$(".product_info:checked").each(function(){
var qty = $(this).attr("data-quantity");
var variant=$(this).attr("value");
comb=comb+""+variant+":"+qty+","
})
console.log(comb);
var comb_final= comb;
var url= "/cart/"+comb+"?checkout";
window.location.href=url;

});

// remove button disabled

$(".click_check").click(function(event){
event.preventDefault();
$('.click_check').prop('checked', true);
$('#Re_orderbtnz').removeAttr("disabled")
});

});

</script>

<style>
.center {
display: none;
position: fixed;
z-index: 9;
padding-top: 0px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
background-color: rgba(0, 0, 0, 0.4);
}

.hideform {
display: none;
}
th, td {
width: 100px;
text-align: left;
border: 1px solid #e8e9eb;
padding: 10px 14px;
}
.popcontent {
background-color: #fefefe;
margin: auto;
padding: 16px 25px 32px 25px;
border: 1px solid #888;
width: 70%;
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
}
button.show {
background-color: #4CAF50;
border: none;
color: white;
padding: 9px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.ordersum {
padding: 15px;
border-bottom: 2px solid #e5e5e5;
}
span.advance_reorder_mobilehide {
font-weight: bold;
color: #ff0000;
font-size: 22px;
}
span.odertolpric {
font-weight: bold;
color: #3a3535;
font-size: 22px;
}
.center .close {
float: right;
color: #000;
position: absolute;
font-size: 28px;
font-weight: bold;
top: 172px;
right: 233px;
}
</style>

0 Likes