• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
2

Simple cart page

Explorer ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

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?

TOPICS
How to

Views

836

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 21, 2023 Oct 21, 2023

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="
...

Votes

Translate

Translate
Community Expert ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

quote

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. 

 

quoteJust a "print" button that prints the chosen toy

========

JavaScript PRINT PAGE button.

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

 

Good luck with your project.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

quote
quote

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

LyaSmidtsx_0-1697750434345.png

something like this for selecting the toys

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

Online WishList.

https://www.wishbob.com/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 19, 2023 Oct 19, 2023

Copy link to clipboard

Copied

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.

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 20, 2023 Oct 20, 2023

Copy link to clipboard

Copied

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 20, 2023 Oct 20, 2023

Copy link to clipboard

Copied

quote

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?

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 20, 2023 Oct 20, 2023

Copy link to clipboard

Copied

quote
quote

No need for local storage


By @osgood_

 

How else would you preserve the data?


By @BenPleysier

 

SPA.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 20, 2023 Oct 20, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 20, 2023 Oct 20, 2023

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 20, 2023 Oct 20, 2023

Copy link to clipboard

Copied

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/

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

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 🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

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?

LyaSmidtsx_0-1697887022282.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

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>
Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

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.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

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

LyaSmidtsx_0-1697894090368.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2023 Oct 21, 2023

Copy link to clipboard

Copied

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).

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines