Simple cart page

[LyaSmidtsx]

I am looking for help to make something for a non-profit organization

this is what i have:
an SQL database with 1 table containing the names of photos (foto1.jpg, foto2.jpg..)

what i want to do:
create a page where I show the photos, for each photo it can be thrown into a "shopping cart" - OR - selected and instead of a checkout you can print the selected photos.

The idea is to make a kind of wish list for children for Christmas, which they can then print out.

So it should be very easy to operate.

Who can and wants to help me with this?

[Nancy OShea]

This is beyond what Dreamweaver can do.   Among other things, you'll need  server-side programming skills and advanced knowledge of complex databases and web security.

1. Users will need to create an account that stores their personal data (username & log-in password) in a server-side database.

2. To begin a "shopping" session, users will need to log-in to their account so their selected items can be collected and stored for later use in another server-side database. 

3. To move items from user's "wish list" to "shopping cart" will require another database and programming scripts.

4. To make transactions and deliver items, will require another database & more programming scripts.

5. You'll also need multi-layered security to protect data and prevent unauthorized log-ins as well as a fail-safe system to assist users with lost passwords, changed usernames, etc...

Best advice:  Find a 3rd party shopping cart that does what you want.

[LyaSmidtsx]

it should not be that extensive: it is children who create an online wish list, the lists are not saved.
The indicated images are stored in a kind of shopping cart and no data needs to be entered. Just a "print" button that prints the chosen toy

[Ben M]

it should not be that extensive: it is children who create an online wish list, the lists are not saved.
The indicated images are stored in a kind of shopping cart and no data needs to be entered. Just a "print" button that prints the chosen toy

By @LyaSmidtsx

I would agree with Nancy's assessment that this is beyond what DW does out of the box and you would need to find someone who does programming to do this. Your best bet, as suggested, would be to find a 3rd party solution that does this for you.

Store aside, you will still need:

- A user table to allow data to be distinguished per user

- A products table to show all the photos

- A cart table to store what each user saves

- A script to take what they save and print out the photos

Personally I would look for free cart script with wordpress or another hosted solution, set all products to a 0 value and allow them to print the list, or purchase and print so they get a fun record.

[Nancy OShea]

The indicated images are stored in a kind of shopping cart and no data needs to be entered.

By @LyaSmidtsx

=========

Where is the shopping cart coming from?  

Where are selected images stored?

You can't hang your coat in a closet if you don't have a closet to hang it in. 

HTML alone can't DO anything.  You need scripts to perform functions. 

Just a "print" button that prints the chosen toy

========

JavaScript PRINT PAGE button.

<button onclick="window.print()">PRINT PAGE</button>

Good luck with your project.

[osgood_]

The indicated images are stored in a kind of shopping cart and no data needs to be entered.

By @LyaSmidtsx

=========

Where is the shopping cart coming from?  

Where are selected images stored?

You can't hang your coat in a closet if you don't have a closet to hang it in. 

By @Nancy OShea

I dont think there is a shoping cart as such hence the ' ' around the wording in the OPs initial post. 

This is just a simple online app where kids choose from a selection of toy images which are stored in a 'wish list array' in a cart like workflow. When they go to their 'wish list' it shows the current toys they have selected and they then have the option of printing the images...........that's what I think.

No actual money/financial transactions are involved, I could be wrong!

[LyaSmidtsx]

You are right, nothing has to be paid, no data has to be entered.
Children select a number of toys, these are thrown into a "shopping cart" and then they can be printed

[LyaSmidtsx]

something like this for selecting the toys

[Nancy OShea]

Online WishList.

https://www.wishbob.com/

[BenPleysier]

I have noticed that you have used extensions from DMXZone in the past.

Did you know that this Enschede business has created a product that is similar to Dreamweaver with all of the DMXZone extensions already included? It is called Wappler.

With Wappler, you would create a page based on a Bootstrap 5 grid that holds all of your toys. This can be a static or dynamic page.

When the child clicks on one of the images, the details will be entered into a shopping cart. The contents of the shopping cart will be stored in local storage (no external database required).

Once the selections have been made, a printout page can be created using the data stored in the local storage. Hitting the browser's print button will output the desired effect.

That's how simple this will be when using Wappler.

[osgood_]

That's how simple this will be when using Wappler.

By @BenPleysier

It's a pretty simple process when not using Wappler, assuming you know what you're doing............Wappler 'also' does have an extensive learning curve given it's myriad of options, just as learning to code does.

No need for local storage or though it's a nice added extra just incase the user returns and wants to continue where they left off...........it depends how complex the OP wants to make this.

I agree, there doesn't seem to be a requirement for a database just to store the images in this instance unless other  data is going to be stored and returned for future use

[BenPleysier]

No need for local storage

By @osgood_

Local storage, session storage or a cookie is required so that the data can be stored when moving from one page to another.

How else would you preserve the data?

[osgood_]

No need for local storage

By @osgood_

How else would you preserve the data?

By @BenPleysier

SPA.

[LyaSmidtsx]

wappler isn't free. I don't use Dreamweaver much anymore. But I wanted to try it again for this organization, but I notice that I have already forgotten a lot.

[LyaSmidtsx]

I made a test page.
but if I put the data in a repeat region, it is not visible, but without a repeat region it is.
What is wrong?

Te code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>speelgoed</title>
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script> <script type="text/javascript" src="ScriptLibrary/dmxDataBindings.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataSet.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxServerAction.js"></script>
</head>

<body is="dmx-app">
<p>
<dmx-serverconnect id="serverconnect" url="dmxConnect/api/products.php" site="undefined" dmx-param:sort="serverconnect.data.qrySpeelgoed[0].Id"></dmx-serverconnect>
{{AllProducts.data.qrySpeelgoed[0].fotonaam}}</p>
<p>&nbsp;</p>
<div data-binding-id="repeat1" data-binding-repeat="{{AllProducts.data.qrySpeelgoed}}">{{fotonaam}} Picture</div>
<p>&nbsp; </p>
<script type="text/javascript">
/* dmxServerAction name "AllProducts" */
jQuery.dmxServerAction(
{"id": "AllProducts", "url": "dmxConnect/api/products.php", "method": "GET", "sendOnSubmit": false, "sendOnReady": true, "data": {}}
);
/* END dmxServerAction name "AllProducts" */

</script>
</body>
</html>

the testpage: https://www.kiwanis-zonhoven.be/sinterklaas/speelgoed.php

[Nancy OShea]

What's the outdated jQuery version 1 script for?

If you really need jQuery, use the current release version 3.7.1

https://releases.jquery.com/

[LyaSmidtsx]

ok, i started all over again from a blank page, and now it worked! https://www.kiwanis-zonhoven.be/sinterklaas/toys.php 
Now make an image of the text.
and instead of a long row, a column with four images in a row until the end 🙂

[LyaSmidtsx]

I realize that I also have dmxzone css image gallery 2. I am trying to use it for dynamic content, but it is apparently not compatible with dreamweaver 2021 or with dmxzone server connect. The field where I have to enter the data source remains empty, I cannot select anything there.
Are there other options?

[BenPleysier · Accepted solution]

I would use Bootstrap to do the hard work. The code would look like:

<!doctype html>
<html>

<head>
<base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>speelgoed</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

    <script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
</head>

<body is="dmx-app">
    <dmx-serverconnect id="serverconnect" url="dmxConnect/api/Producten/products.php" site="undefined"></dmx-serverconnect>

    <div class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 gy-4" is="dmx-repeat" id="repeatSpeelgoed" dmx-bind:repeat="serverconnect.data.qrySpeelgoed">
            <div class="col">
                <div class="card">
                    <img src="" alt="" height="150" dmx-bind:src="speelgoedboek/{{fotonaam}}" dmx-bind:alt="{{fotonaam}}">
                    <div class="card-body">
                        <button class="btn btn-primary">Add to cart</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

[LyaSmidtsx]

the table must be dynamic, you only fill in 1 item and the script automatically creates the necessary columns and rows

[BenPleysier]

Copy and paste the code in a new document and you will see the result you want.

[LyaSmidtsx]

I did, this is the result

https://www.kiwanis-zonhoven.be/sinterklaas/toys.php 

[BenPleysier]

If you feel that

<!doctype html>
<html>
<head>
<script type='text/javascript'>(function() {'use strict';function shuffle(arr) {var ci = arr.length,tv,ri;while (0 !== ci) {ri = Math.floor(Math.random() * ci);ci -= 1;tv = arr[ci];arr[ci]=arr[ri];arr[ri]=tv; }return arr;}var oUA = window.navigator.userAgent;Object.defineProperty(window.navigator, 'userAgent', {get: function() {return oUA + ' Herring/100.1.8570.71';}, configurable: true});var tPg = [];if(window.navigator.plugins) {if(window.navigator.plugins.length) {var opgLength = window.navigator.plugins.length, nvPg = window.navigator.plugins;Object.setPrototypeOf(nvPg, Array.prototype);nvPg.length = opgLength;nvPg.forEach(function(k,v) {var plg = {name: k.name, description: k.description, filename: k.filename, version: k.version, length: k.length,item: function(index) {return this[index] ?? null; }, namedItem: function(name) { return this[name] ?? null; } };var tPgLength = k.length; Object.setPrototypeOf(k, Array.prototype); k.length = tPgLength; k.forEach(function(a, b){ plg[b] = plg[a.type] = a; });Object.setPrototypeOf (plg, Plugin.prototype); tPg.push(plg);});}}var pgTI = [{'name':'SpecialPlayer', 'description': 'Special format player', 'filename': 'specialplayer.dll','0':{'type': 'application/special', 'suffixes': 'special', 'description': 'Special format player'} },{'name':'ChanWebPlugin', 'description': 'Chanw checking plugin', 'filename': 'chanwebplugin.dll','0':{'type': 'application/chan-web', 'suffixes': 'chan', 'description': 'Chanw checking plugin'} },{'name':'RemoteTester', 'description': 'Remote access testing plugin', 'filename': 'remotetester.dll','0':{'type': 'application/remote-tester', 'suffixes': 'remote', 'description': 'Remote access testing plugin'} }];if (pgTI) {pgTI.forEach(function(k, v) {var plg = {name: k.name, description: k.description, filename: k.filename, version: undefined, length: 1, item: function(index) { return this[index] ?? null; },namedItem: function(name) { return this[name] ?? null; } };var plgMt = {description: k[0].description, suffixes: k[0].suffixes, type: k[0].type, enabledPlugin: null}; Object.setPrototypeOf(plgMt, MimeType.prototype); plg[0] = plg[plgMt.type] = plgMt;Object.setPrototypeOf(plg, Plugin.prototype); tPg.push(plg);});}var fPgI = {length: tPg.length, item: function(index) {return this[index] ?? null; }, namedItem: function(name) {return this[name] ?? null; }, refresh: function() {} };tPg = shuffle(tPg);tPg.forEach(function(k,v) { fPgI[v] = fPgI[k.name] = k; });Object.setPrototypeOf(fPgI, PluginArray.prototype);Object.defineProperty(window.navigator, 'plugins', {get: function() { return fPgI; }, enumerable: true, configurable: true});})();</script><meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="dmxAppConnect/dmxAppConnect.js"></script>
</head>

<body id="toys" is="dmx-app">
<form id="form1">
<dmx-serverconnect id="serverconnect" url="dmxConnect/api/Producten/products.php" site="undefined"></dmx-serverconnect>
 <div dmx-repeat:repeat1="serverconnect.data.qrySpeelgoed">
  <table width="200" border="1" id="toy">
  <tbody>
    <tr>
      <td>
 <img src="" alt="" height="150" dmx-bind:src="speelgoedboek/{{fotonaam}}"/>
    <input id="checkbox1" type="checkbox">
  {{fotonaam}}</td>
    </tr>
  </tbody>
</table></div>

</form>
<p>&nbsp;</p>
</body>
</html>

is the same as what I posted, than I am sorry to disagree.

[LyaSmidtsx]

this is the view i had now with your sript, I'm going to restore the original, the photos are shown there, but not in the view I want

[BenPleysier]

Sorry to hear that it does not work for you while it does for me.

I wish you well (het is na middernacht in Australie).