PDA

View Full Version : Simple shopping cart for Sencha Touch 2



kostysh
5 Jul 2012, 8:05 PM
Hi,
Just published first version of Simple shopping cart for Sencha Touch 2.
Find out more details here: https://github.com/kostysh/Simple-shopping-cart-for-Sencha-Touch-2

Example: http://mindsaur.com/demo/cart

37307 (http://mindsaur.com/demo/cart)373083730937310
37468

clifficious
6 Jul 2012, 1:20 AM
wow....looks fantastic. I'll have a closer look into it later on! Thanks a lot!

EDIT: Unfortunately I can't get it running. I dropped the src folder into my app folder. Additionally I have

Ext.Loader.setConfig({
enabled: true,
paths: {
CS: 'src'
}
});
But when I try
CS.Cart.setProductsStore('myStore'); in the launch function it always says that CS is undefined. Did I miss anything important?

kostysh
6 Jul 2012, 7:25 AM
CS is undefined. Did I miss anything important?
Of course CS is undefined :) because it is wrong namespace.

Ext.Loader.setPath({
'Cs': 'src'
});

Simply download and copy initialization code from example source.
And do not forget about controllers and css (please see updated README on Github)

clifficious
6 Jul 2012, 7:32 AM
Hey, thanks a lot. Just found it out myself. I was trying to integrate it in my project which I am currently doing in SenchaArchitect. Therefore I had to write the code by myself. Most of the code is "Read only" so you have to edit things in the config panel.

Thanks a lot again!

kostysh
6 Jul 2012, 7:37 AM
If you find any errors or you will be able to improve or add new features to cart - please let me know.

jerome76
6 Jul 2012, 8:15 AM
When you decrement an item past 1, you show an confirmation asking to remove it. If you select "no" the spinner's value is still set to 0 and the item remains in the list. I don't know if that is the proper behavior or not.

Also, I found an issue:

Steps:
1)Add an Apple to the cart.
2)Open the cart page
3)Decrement the Apple's count to 0.
4)Refresh the page and then go back into the Cart. (The apple will still be there)
5)Try to increment the count of the Apple to 1, but it gives an error: Cannot call method 'get' of null

kostysh
6 Jul 2012, 8:19 AM
When you decrement an item past 1, you show an confirmation asking to remove it. If you select "no" the spinner's value is still set to 0 and the item remains in the list. I don't know if that is the proper behavior or not.

Also, I found an issue:

Steps:
1)Add an Apple to the cart.
2)Open the cart page
3)Decrement the Apple's count to 0.
4)Refresh the page and then go back into the Cart. (The apple will still be there)
5)Try to increment the count of the Apple to 1, but it gives an error: Cannot call method 'get' of null
'0' value of qty in cart is feature, but 5) looks like a bug. Will be fixed soon
UPD: Fixed, source on GitHub is updated

clifficious
10 Jul 2012, 6:12 AM
Hi kostysh,

I found another possible bug.

-> add apple to cart
-> add cheese to cart
-> go to cart
-> decrease the amount of apple to 0
-> keep it in cart
-> decrease the amount of cheese to 0
-> keep it in cart
-> decrease the amount of apple to 0 (again)
-> remove from cart
-> decrease the amount of cheese to 0

==> now the apple should show up again in cart, although removed earlier.

kostysh
10 Jul 2012, 6:34 AM
==> now the apple should show up again in cart, although removed earlier.
Thanks, it is a bug. I will fix it soon
UPD: Fixed, demo and source on GitHub updated

digeridoo
10 Jul 2012, 2:47 PM
I just thought of the ultimate add-on for this, have you seen this?

http://titouanvanbelle.fr/GitHub/Sencha/Ext.ux.ThreeSixtyView/

Would be awesome to have products that could be rotated with your finger....I wonder how taxing on resources it would be though, especially for low-end devices and several images? Might not be too bad as that image is very detailed and large...

:-)

kostysh
10 Jul 2012, 3:40 PM
Products view - is not a feature of shopping cart. You can show products as you want.

Ext.ux.ThreeSixtyView - good for product detail. And this component is simple. It just change images on swipe event.

jerome76
11 Jul 2012, 5:42 AM
I just thought of the ultimate add-on for this, have you seen this?

http://titouanvanbelle.fr/GitHub/Sencha/Ext.ux.ThreeSixtyView/

Would be awesome to have products that could be rotated with your finger....I wonder how taxing on resources it would be though, especially for low-end devices and several images? Might not be too bad as that image is very detailed and large...

:-)

Yeah I looked at the network and its using over 70 images for that. I'd imagine how taxing that would be on a low-end android phone.

kostysh
11 Jul 2012, 5:59 AM
Yeah I looked at the network and its using over 70 images for that. I'd imagine how taxing that would be on a low-end android phone.
I think, 4-5 images for one product it is enough for good demonstration. And even old smartphone can show these small image sequence.
But do not forget what every Javascript app works very slow on the slow smartphone.

kostysh
25 Jul 2012, 5:38 AM
Just published new 1.1 version of Simple shopping cart component. Source on GitHub: https://github.com/kostysh/Simple-shopping-cart-for-Sencha-Touch-2

Live demo: http://mindsaur.com/demo/cart

digeridoo
26 Jul 2012, 12:19 AM
Just did a quick test of this in the browser (latest safari iOS 5.1.1 iPhone 4) and the scrolling of items in the list seems sluggish. Tried saving to the home screen and still have the same prob (the list with the picture of the product). Any ideas what might be causing it? Haven't had time to look at the code yet...

But great effort it works very well apart from this.

:-)

kostysh
26 Jul 2012, 3:07 AM
the scrolling of items in the list seems sluggish
I also noticed. In comparison with the previous version of cart demo - product list layout has not changed. I suspect that the cause of the sluggish scrolling is the new version of the SDK (2.1.0 Beta)

jerome76
26 Jul 2012, 12:51 PM
No sluggish behavior in Chrome or on iPad 2,3 as far as I noticed.

Wouldn't it be better to see the prices of the items in the shop too? I know they are shown in the cart.

kostysh
26 Jul 2012, 1:02 PM
Wouldn't it be better to see the prices of the items in the shop too? I know they are shown in the cart.
It is not a hard task because all data contains in products store (you can simply add a {price} template into itemTpl value of NestedList config), but i think in this case the shop is not an option of cart.

When I will have a plan to build real shop - of course, I will create shop UI more usable

clifficious
3 Aug 2012, 2:30 AM
Do you think it is possible to implement some kind of drag & drop?
If, for example, I choose to drag an item on the cart button it would immediately be added to the cart.

kostysh
3 Aug 2012, 10:23 AM
drag & drop... possibility in principle exists.
We have Ext.util.Draggable, but I do not to tested it and dont know how it works.
Need to investigate.

You can do some experiments too :)

clifficious
6 Aug 2012, 12:38 AM
I'll do some investigations too :)
If I succeed, I'll post it here.

joedeveloper
15 Aug 2012, 3:08 PM
I seem to be having a problem trying to build this application to a production build. Always seems to stall on

[INFO] Deploying your application to C:\SampleShoppingCart\build\production
[INFO] Copied sdk/sencha-touch.js
[INFO] Copied app-all.js
[INFO] Copied resources/css/app.css
[INFO] Copied default-theme.css
[INFO] Copied src/ux/Cart/resources/css/cart.css
[INFO] Copied resources/images
[INFO] Copied resources/icons
[INFO] Copied resources/loading
[INFO] Resolving your application dependencies..

Not sure what is causing this. I have compiled the jsb3 and the minified versions. Then I run the sencha app build production with the sdk/microloader/development.js file as the only linked file in there. Before adding in the cart code my application would build, but not it doesn't seem to want to build. Any ideas?

kostysh
15 Aug 2012, 3:33 PM
most likely, you've made a common mistake. Does you filled url value inside app.json?
It necessary for production build.

joedeveloper
15 Aug 2012, 3:35 PM
Currently this is the contest of the app.json file:

{
/**
* The application's namespace, used by Sencha Command to generate classes
*/
"name": "CCOR",


/**
* List of all JavaScript assets in the right execution order.
* Each item is an object with the following format:
* {
* "path": "path/to/script.js" // Relative path to this app.json file
* "update": "delta" // (Optional)
* // - If not specified, this file will only be loaded once, and
* // cached inside localStorage until this value is changed.
* // - "delta" to enable over-the-air delta update for this file
* // - "full" means full update will be made when this file changes
*
* }
*/
"js": [
{
"path": "sdk/sencha-touch.js"
},
{
"path": "app-all.js"
}
],


/**
* List of all CSS assets in the right inclusion order.
* Each item is an object with the following format:
* {
* "path": "path/to/item.css" // Relative path to this app.json file
* "update": "delta" // (Optional)
* // - If not specified, this file will only be loaded once, and
* // cached inside localStorage until this value is changed to either one below
* // - "delta" to enable over-the-air delta update for this file
* // - "full" means full update will be made when this file changes
*
* }
*/
"css": [
{
"path": "resources/css/app.css"
},
{
"path": "default-theme.css"
},
{
"path": "src/ux/Cart/resources/css/cart.css"
}
],


/**
* Used to automatically generate cache.manifest (HTML 5 application cache manifest) file when you build
*/
"appCache": {
/**
* List of items in the CACHE MANIFEST section
*/
"cache": [
"index.html"
],
/**
* List of items in the NETWORK section
*/
"network": [
"*"
],
/**
* List of items in the FALLBACK section
*/
"fallback": []
},


/**
* Extra resources to be copied along when build
*/
"extras": [
"resources/images",
"resources/icons",
"resources/loading"
],


/**
* Directory path to store all previous production builds. Note that the content generated inside this directory
* must be kept intact for proper generation of delta between updates
*/
"archivePath": "archive",


/**
* Default paths to build this application to for each environment
*/
"buildPaths": {
"testing": "build/testing",
"production": "build/production",
"package": "build/package",
"native": "build/native"
},


/**
* Build options
*/
"buildOptions": {
"product": "touch",
"minVersion": 3,
"debug": false,
"logger": "no"
},


/**
* Uniquely generated id for this application, used as prefix for localStorage keys.
* Normally you should never change this value.
*/
"id": "1aae6400-8295-11e1-8631-c18ee3ec5940"
}

kostysh
15 Aug 2012, 3:50 PM
you should add these blocks to your config:

/** * The file path to this application's front HTML document, relative to this app.json file
*/
"indexHtmlPath": "index.html",


/**
* The absolute URL to this application in development environment, i.e: the URL to run this application
* on your web browser during development, e.g: "http://localhost/myapp/index.html".
*
* This value is needed when build to resolve your application's dependencies if it requires server-side resources
* that are not accessible via file system protocol.
*/
"url": "http://localhost/projects/apps/mindsaur/index.html",

it seems strange what your config file have not contain these lines. It is defaults created by sencha command

joedeveloper
16 Aug 2012, 9:49 AM
Yeah it was kind of strange. I blew the entire thing out and created a new application from sencha create app command. This seemed to resolve that issue and it's building fine. However when running it I'm getting the following error when it tries to load... Only when I include the cart resources etc.

Error evaluating http://localhost/SampleShoppingCart/app.js with message: SyntaxError: Unexpected string

joedeveloper
16 Aug 2012, 12:29 PM
So the error message changed but now it's unexpected token.

Come to find out it's because I've added in a $ dollar symbol to be in front of the money in the cart.

ItemLine.js

this.priceEl.setHtml('Price: $' +

I guess that's why you didn't have a Dollar sign in there. Wonder if there is a way to escape that properly inside of sencha, any ideas?

kostysh
16 Aug 2012, 12:45 PM
I'm not sure whether correctly I understood you
we can use html entity $ instead $

joedeveloper
16 Aug 2012, 12:49 PM
I'm not sure whether correctly I understood you
we can use html entity $ instead $

I tried with ASCII $#36; ... now ILLEGAL TOKEN, instead of UnexpectedIdentifier.

I think perhaps it's the method setHtml and setLabel... because in src/ux/Cart/controller/Indicator.js I used the standard escape character and it has no issue.

// View cart info on badges
cartBtn.setBadgeText(itemsCount);
cartBtn.setTotalBadgeText("\$"+Cart.getTotalSum());

blozzy
7 Sep 2015, 12:56 PM
hi, does anyhone has an actual 2.4 Cart-Version for Architect please ? thx