A.K.A. WIX for a webcomic?? (Possibly) useful tips if you want to have working "previous" and "back" buttons on your dynamic pages.

Eey oop. I'll try to keep this short 'n' sweet! Perhaps it'll help someone, somewhere.

(Tedious Details on request -- this quick write-up assumes you're using the Wix help pages, which go into these steps in detail -- I'm just adding the bits that took a while to find, or which didn't initially work for me, specifically, the JavaScript to call the pages, from a database, in the right order, when a user hits the "previous" and "next" buttons).

I should make clear that I have absolutely no idea what I'm talking about, and this should be immediately apparent. Before I somehow wangled the code into shape, I kept getting an error about a "topline" or summink. I mean, I wouldn't know what a "topline error" was if I found it eating my dinner.

Anyway, as the more observant of you will have noticed, I'm not using WordPress with ComicPress or Toocheke or any of those popular ways to present one's work. I'm using good ol' drag-'n'-drop Wix, who, to be fair, have been working really hard to improve over the years.

My usage of this platform might ultimately be a mistake, but I am not technically inclined and I don't have the ££s to pay a code-wizard, so what I have done is tracked down a way to tweak Wix's JavaScript (on a dynamic-page + database setup) in order to achieve a similar feel to the classic webcomic site-navigation. (I'll post the code at the bottom of this post if you want to try it.)

Before we get into it, just a caveat that may affect whether you want to bother: I, for one, cannot for the life of me get my images to display in the quality I'd like on Wix. I have no idea why this happens. They're fine right until the publishing stage. Then live, they're blurry. Playing with the "sharpen" feature, or uploading a larger file, or changing the display ratio does nothing. I'm not even sure I can blame it on the enforced webP image format, either... Ho hum. That's where also using other platforms comes in, I guess.

So, that aside, if you prefer Wix over a more code-heavy alternative, here's some things I found so far...

100 static-page limit

Let's say that, unlike me, you have a lot of art to showcase. Just remember that Wix imposes a limit of 100 static pages on your website. 

A way to get around that is to use dynamic pages instead. (These are pages which use the same template over and over but are linked to a custom dataset, and you specify what displays where, and in what order). You can access all this and more by turning on "Dev Mode" from the top menu. 

Once you've created a dynamic ("title") page and a static archive page, remember to link the elements, like your text or image boxes, to whichever row in the dataset is most appropriate. (F'r instance, the archive thumbnail-images on my site are linked to a column I've called, funnily enough, "archive thumbs". It contains archive thumbs! ;p) 

The default display order is by date posted, but you can change this from "Settings". Simply apply a "sort" to a column of your choosing (do this from the icon on the page you're working on, not from within the dataset, or it won't affect how your content actually displays). 

For instance, I created one called "ORDER", which sorts by number high > low. I've applied this rule to dataset "items" and the dataset as a whole. (Sorry for the lack of detail, but if you're actually doing this, you'll probably know what I'm on about). This means that the comic pages display, for example, in the archive repeater, with the latest (as I've defined "latest") at the top, and are called in the correct order when the navigation buttons are used.

WHY NOT JUST LINK THE NAV BUTTONS, YA EEJIT?!

Well, if you want that classic "NEXT" "BACK" comic-navigation function to actually work, in the right order, you can't just link the buttons, because of the way dynamic URLs work. Nope. Here's where that code comes in. 

It's 99% not mine -- that honour belongs to the Wix dev team and helpful people on the forums, whose full names I don't know. For me, it didn't work as-copied-and-pasted, and I had to rearrange it a bit, which took a long time, because I KNOW NO JAVASCRIPT. This is exactly what's on my own pages, but nevertheless use at your own risk. Ehee.

Wherever you see a #farlane below, of course you should change it to the name of your own dataset, or the names of your own buttons. You can see mine are #previous and #next, but yours might be #back and #onward! for example. Doesn't matter, but make sure the name of the object agrees with what's in the code. If you have Dev Mode turned on, you can see and rename elements/objects on your page as you like.

For the relevant forum page, and a much more thorough walkthrough for this part, try: https://support.wix.com/en/article/velo-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code

 FWD/BACK BUTTON CODE

FOR THE INDEX ("Archive") PAGE, I replaced what was there with:


// API Reference: https://www.wix.com/velo/reference/api-overview/introduction

// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world

import {local} from 'wix-storage';




const linkField = "link-farlane-title";


$w.onReady(function () {

  $w("#farlane").onReady(() => {

    const numberOfItems = $w("#farlane").getTotalCount();

  

    $w("#farlane").getItems(0, numberOfItems)

      .then( (result) => { 

        const dynamicPageURLs = result.items.map(item => item[linkField]);

        local.setItem('dynamicPageURLs', dynamicPageURLs);

      } )

      .catch( (err) => {

        console.log(err.code, err.message);

      } );

  } );

} );


// Write your JavaScript here


// To select an element by ID use: $w("#elementID")


// Click "Preview" to run your code


------------------------------

JS FOR THE DYNAMIC PAGE:


import {local} from 'wix-storage';

import wixLocation from 'wix-location';



$w.onReady(function () {

  $w("#next").disable();

  $w("#previous").disable();

 

  if (local.getItem('dynamicPageURLs')) {

    const dynamicPageURLs = local.getItem('dynamicPageURLs').split(',');


    const currentPage = '/' + wixLocation.prefix + '/' + wixLocation.path.join('/');

    const currentPageIndex = dynamicPageURLs.indexOf(currentPage);


    if (currentPageIndex > 0) {

      $w("#next").link = dynamicPageURLs[currentPageIndex - 1];

      $w("#next").enable();

    }


    if (currentPageIndex < dynamicPageURLs.length - 1) {

      $w("#previous").link = dynamicPageURLs[currentPageIndex + 1];

      $w("#previous").enable();

    }

  }

} );