customer re-order from account page

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 btn">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 class="hulk_title_bar">
<div class="hulk_list-title hulk_item"><span>Item</span></div>
<div class="hulk_list-title hulk_price"><span>Price</span></div>
<div class="hulk_list-title hulk_quantity"><span>Quantity</span></div>
<div class="hulk_list-title hulk_action"><span></span></div>
</div>
</div>

<div class="reorder_wholediv">


{% for lineitem in order.line_items %}


<div class="recart__itemrow">

<div class="reitm_wrapper">
<div class="recarts_img">
<img class="rcart__image" src="{{lineitem.image |img_url:'small'}}" style="cursor: pointer;">
</div>


<div class="reitem__title">
<div class="grid-product__title"> {{lineitem.title}} </div>
{%comment%}
{{lineitem.variant.inventory_quantity}}
{%endcomment%}<br>
{%if lineitem.variant.inventory_quantity <= 15 %} <span class="danger" style="color:red;"> soldout</span>{%endif%}
</div>

</div>

<div class="reitm_prics">
<div class="reprice_text grid-product__price">{{lineitem.price | money}} </div>
</div>

<div class="recart__qtys">
<input class="cart__qty-input" type="number" name="updates[]" id="" value="{{lineitem.quantity}}" min="0" pattern="[0-9]*" data-quantity-item="1" style="width:65%;">
<input type="checkbox" {%if lineitem.variant.inventory_quantity <=15 %} disabled {%endif%} value="{{lineitem.variant_id}}" data-quantity="{{lineitem.quantity}}" class="click_check">
</div>

</div>
{% endfor %}

</div>



<div class="modal-footer" style="">

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

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

</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="";
$(".click_check: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(){
console.log($('.click_check').prop('checked'));
if($(this).prop('checked') == false){
$(this).parent().parent().parent().parent().find('#Re_orderbtnz').attr('disabled','disabled');

}else{
$(this).parent().parent().parent().parent().find('#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;
}
#Re_orderbtnz {
margin: 15px 10px 15px 10px;
float: right;
}
.popcontent {
background-color: #fefefe;
margin: auto;
/* padding: 16px 25px 32px 25px; */
border: 1px solid #888;
width: 70%;
max-width: 700px;
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
}
.reorder_wholediv .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 {
color: #000;
position: absolute;
font-size: 28px;
font-weight: bold;
top: 5px;
right: 32px;
}

.hulk_title_bar {
display: flex;
align-items: center;
padding: 10px 20px;

}
.hulk_item {
width: 65%;
text-align: left;
}
.hulk_quantity {
width: 15%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.hulk_price {
width: 15%;
}
.recart__itemrow {
overflow-y: auto;
width: 100%;
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid #eaecee;
}
.reitm_wrapper {
width: 65%;
text-align: left;
display: flex;
align-items: center;
}
.recart__qtys {
width: 15%;
text-align: left;
}
.reorder_wholediv {
max-height: 45vh;
overflow-y: auto;
}
.reitm_prics {
width: 15%;
}
.reitem__title {
padding: 15px;
}
.modal-footer {
background: #e3e3e347;
}

@media (max-width: 600px){
.popcontent {
width: 96%;
}

.reorder_wholediv .click_check {
margin-left: 10px !important;
}

.recart__qtys {
width: 50%;
float: left;
}
.reitm_prics {
width: 50%;
float: left;
}
.reitm_wrapper {
width: 100%;
text-align: left;
display: flex;
align-items: center;
}
.recart__itemrow {
overflow-y: auto;
width: 100%;
display: block;
align-items: center;
padding: 15px;
border-bottom: 1px solid #eaecee;
}
}
</style>

0 Likes