Ecommerce Shopify WordPress Discussion

Alipne.js total not defined

I have a simple program that shows wordpress post and loads depending on category click. I was following this tutorial (second part) https://joeyfarruggio.com/wordpress/skeleton-loader/ Ive had a few bugs along the way but solved most. I have one bug left, I am getting cdn.min.js:1 Alpine Expression Error: total is not defined Expression: "total > (limit + offset)" div.text-center.mt-12_x_attributeCleanups: in the console and cant work out why this is my current code, the error above is the only error im getting. <?php /* Template Name: test */ ?> <html> <head> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script> <script> document.addEventListener('alpine:init', () => { Alpine.data("filterPosts", (adminURL) => ({ posts: null, category: null, showDefault: true, showFiltered: false, loadingNew: false, // <--- defaults to false loadingMore: false, // <--- defaults to false offset: 0, filterPosts(id) { this.loadingNew = true; this.showDefault = false; this.showFiltered = true; this.category = id; this.offset = 0; // <-- reset offset to zero this.fetchPosts(); }, loadMore() { this.loadingMore = true; this.offset += 10; this.showFiltered = true; this.fetchPosts(true); }, fetchPosts(append = false) { var formData = new FormData(); formData.append("action", "filterPosts"); formData.append("offset", this.offset); // <-- Add new data to the form // formData.append("limit", this.limit); if (this.category) { formData.append("category", this.category); } fetch(adminURL, { method: "POST", body: formData, }) .then((res) => res.json()) .then((res) => { if (append) { // Appends posts to the end of existing posts data this.posts = this.posts.concat(res.posts); } else { // Resets the posts data with new data this.posts = res.posts; } this.loading = false; // Reset both loading states // this.loadingNew = false; // this.loadingMore = false; }); }, getTotal() { var formData = new FormData(); formData.append("action", "filterPosts"); fetch(adminURL, { method: "POST", body: formData, }) .then((res) => res.json()) .then((res) => { this.total = res.total; }); }, init() { this.getTotal(); } })); }) </script> </head> <body> <div x-data="filterPosts('<?php echo admin_url('admin-ajax.php'); ?>')"> <section <?php theme_section_attr_id() ?> <?php theme_section_attr_class('main-section js-posts') ?>> <div class="container"> <div class="heading mx-0"> <?php $before_title = get_sub_field('before_title'); if ($before_title) : ?> <strong class="sub-title"><?php echo $before_title ?></strong> <?php endif ?> <?php $title = get_sub_field('title'); if ($title) : ?> <h2><?php echo $title ?></h2> <?php endif ?> </div> <!--<div class="head js-posts-search-text">--> <!-- <?php if ($search_value) : ?>--> <!-- <h2 class="h5 fw-semibold"><?php printf(__('Showing results for “%s”', 'base'), $search_value) ?></h2>--> <!-- <?php endif ?>--> <!--</div>--> <!--alipne js dynamic post start--> <div class="has-filter row flex-md-row-reverse"> <div class="col-md-8 col-lg-9 js-posts-holder"> <!-- Posts Column --> <div x-show.important="showDefault" class="row cards-area js-posts-items"> <!-- Default posts query --> <?php get_template_part( 'template-parts/posts-filter/default-query' ); ?> <!-- Load More Posts --> <div class="text-center"> <button @click="loadMore()" x-show="total > (limit + offset)" class="bg-white border border-solid border-slate-200 hover:bg-slate-100 px-4 py-2"> Load More</button> </div> </div> <!-- Filtered posts --> <div x-show.important="showFiltered" x-html="posts" class="row cards-area js-posts-items"> <!-- Default posts query --> </div> <!-- Skeleton Loader --> <template x-if="loadingNew || loadingMore"> <div class="grid grid-cols-2 gap-6"> <template x-for="i in 4"> <div> <div class="h-52 w-full bg-slate-200 rounded-lg"></div> <div class="h-8 w-1/2 bg-slate-200 rounded-lg mt-4"></div> </div> </template> </div> </template> </div> <!-- Filtered posts --> <div class="col-md-4 col-lg-3"> <aside class="sidebar"> <div class="widget widget-filter"> <button class="widget-title">Explore Topics</button> <svg class="separator" viewBox="0 0 238 11" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> <line opacity="0.3" y1="0.5" x2="101.942" y2="0.5" stroke="#3CD5AF"></line> <line opacity="0.3" y1="10.5" x2="237.5" y2="10.5" stroke="#3CD5AF"></line> </svg> <?php $categories = get_categories(); if ( ! empty( $categories ) ) : ?> <ul class="filter-list"> <?php foreach ( $categories as $category ) : // Skip "Uncategorized" category if ($category->name == 'Uncategorized') continue; ?> <li :class=" category == <?php echo $category->term_id; ?> ? '' : ''"> <a hreff="" @click="filterPosts(<?= $category->term_id; ?>)"><?= esc_html( $category->name ); ?></button> </li> <?php endforeach; ?> </ul> <?php endif; ?> </div> </aside> <!-- Filtered end --> </div> </div> </div> <!--alipne js dynamic post end--> </section> </div> </body> </html>
In your code you are using the total and limit variables but they are not defined as Alpine properties. To fix it you need to change as follows: Alpine.data("filterPosts", (adminURL) => ({ total: 0, // <<<< ADD THIS limit: 0, // <<<< AND THIS posts: null, category: null, ..... I have not tested the code logic which I assume is correct...

February 13, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.