Liquid, JavaScript, themes, sales channels
Our dev coded us an account page that serves multiple purposes on the same page using v-if and v-show, but I'm stuck.
the main screen loads by default. When you click on orders it runs this '@click.prevent="accountView = 'orders'" and then the other sections disappear and the orders screen shows using this code: <section class="orders" v-if="accountView == 'orders'"> where the orders screen will show...
But sadly, when you click to page two, there's a page refresh and we're back to the main screen. If you click on orders, it will then show the orders like normal, but with page 2 instead.
Is there a way to have a variable pass through and survive a page load so that the orders screen will display when it's clicked.
<section class="account" v-if="accountView == 'dashboard'">
<div class="container">
<div class="max">
<div class="grid">
<div class="block"><a href="/account/addresses" class="inside">
<div class="icon person"></div>
<div class="title">My Account</div>
<div class="text">Access and edit account infomation</div></a></div>
<div class="block"><a href="/apps/downloads/orders/{{ customer.id }}" class="inside">
<div class="icon tutorials"></div>
<div class="title">My Tutorials</div>
<div class="text">Access and play purchased digital content</div></a></div>
<div class="block"><a href="/pages/orders" class="inside" .prevent="accountView = 'orders'">
<div class="icon orders"></div>
<div class="title">My Orders</div>
<div class="text">Access your Ellusionist order history</div></a></div>
<div class="block"><a href="/pages/wishlist" class="inside">
<div class="icon wish"></div>
<div class="title">My Wishlist</div>
<div class="text">Access your saved-for-later products</div></a></div>
</div>
<div class="grid hend-xs"><a href="/account/logout" class="btn center"><span>Log Out</span></a></div>
</div>
</div>
</section>
<section style="background: rgb(46, 43, 40);" class="cta" v-if="accountView == 'dashboard'">
<div class="container">
<div class="max">
CONTENT GOES HERE
</div>
</div>
</section>
<section class="orders" v-if="accountView == 'orders'">
<div class="container-fluid">
<div class="grid">
<div class="col-2-md">
<a href="/account" class="back" .prevent="accountView = 'dashboard'">Back</a>
</div>
</div>
<div class="grid hcenter-xs">
<div class="col-24-md">
<h1>My Orders</h1>
{% if customer.orders.size != 0 %}
{% paginate customer.orders by 20 %}
ORDER HTML GOES HERE
{% if paginate.pages > 1 %}
<div class="pagination">
{{ paginate | default_pagination | replace: '« Previous', '←' | replace: 'Next »', '→' }}
</div>
{% endif %}
{% endpaginate %}
{% else %}
<br/><br/>There are no orders yet.
{% endif %}
</div>
</div>
</div>
</section>
The code above shows how it's done, but for the life of me I can't figure out how to achieve what I'm looking for without breaking the orders page out to a different page.
User | RANK |
---|---|
21 | |
20 | |
13 | |
12 | |
8 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023