Forums / Developer / How to include an 'Add to basket' button in a list view of products?

How to include an 'Add to basket' button in a list view of products?

Author Message

Adolfo Barragán

Tuesday 16 September 2003 11:44:26 pm

In my list of products I need include the "Add to Basket" button for every product of the list.

I put this code, but it does not work:

{section name=Child loop=$:products sequence=array( bglight, bgdark )}
...
<input type="image" name="ActionAddToBasket" src={"addtocart.gif"|ezimage} width="32" height="32" alt="Add to Basket" />
...
{/section}

How can I assign $ContentObjectID to the correct value (The Object ID associated to the button pressed).

Thanks in advance
Adolfo Barragan

Paul Forsyth

Wednesday 17 September 2003 1:40:52 am

You are nearly there. This code should add an object to the basket.

{let content_object=$node.object}

<form action={"/content/action/"|ezurl} method="post">

<input type="hidden" name="ContentObjectID" value="{$content_object.id}" />

<input type="submit" name="ActionAddToBasket" value="Add to basket">

</form>

{/let}

Paul

Adolfo Barragán

Wednesday 17 September 2003 3:45:07 am

Yes, but not ... :-)

> You are nearly there. This code should add an object
> to the basket.

Remember that I have your code in a loop (and I'm newbie on web programming).

If I put the form sentences (<form ...> and </form>) outside the loop, when I push any button the form always send the ContentObjectID for last product.

I have a question: Can I put <form ..> and </form> inside the loop (as below)? If I can do, I have a form for each product? (So I have a ContentObjectID for each product). It is possible in HTML?

{let products=fetch(....)}
{section name=Product loop:$products}

{let content_object=$node.object}
<form action={"/content/action/"|ezurl} method="post">
<input type="hidden" name="ContentObjectID" value="{$content_object.id}" />
<input type="submit" name="ActionAddToBasket" value="Add to basket">
</form>
{/let}

{/section}
{/let}

Thanks in advance.
Adolfo Barragan

P.S.
I put this question in two forum becaus I'm not sure what is the appropiate. Excuse me.

Paul Forsyth

Wednesday 17 September 2003 3:53:11 am

Yes you can do something like that. It is good practise to give each of your forms a unique name. For example:

{let products=fetch(....)}

{section name=Products loop=$products}

{let content_object=$Products:item.object}

<form name={concat("AddBasket",$Products:number)} action={"/content/action/"|ezurl} method="post">

<input type="hidden" name="ContentObjectID" value="{$Products:content_object.id}" />
<input type="submit" name="ActionAddToBasket" value="Add to basket">
</form>

{/let}

{/section}

{/let}

The addition of the loop number for the form name should give a unique name to each form.

Try this out.

Paul

Adolfo Barragán

Wednesday 17 September 2003 4:01:09 am

Yes!!!, It's Ok. I just try it (without form name) and work corretly.

I'm going to modify the code to put the form name.

Againg, thank you very much :-)

Adolfo Barragan

Paul Forsyth

Wednesday 17 September 2003 4:05:09 am

Great!

I should actually stress that putting the form name in is more than good practise. If you need to refer to a particular form and you have several on your page you need unique names. Otherwise your page may fail in unexpected ways, and the effect is usually different on each browser. So, always try to put in a name, its safer :)

Oh, and when you do loops like this always have a look at the generated source to see that numbers are being appended/added/created in the way you want.

paul

eZ debug

Timing: Jan 18 2025 19:26:45
Script start
Timing: Jan 18 2025 19:26:45
Module start 'content'
Timing: Jan 18 2025 19:26:45
Module end 'content'
Timing: Jan 18 2025 19:26:45
Script end

Main resources:

Total runtime0.1774 sec
Peak memory usage2,048.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0069 587.9844180.7969
Module start 'content' 0.00690.0053 768.781397.8672
Module end 'content' 0.01230.1650 866.6484526.9531
Script end 0.1773  1,393.6016 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00402.2380200.0002
Check MTime0.00150.8368200.0001
Mysql Total
Database connection0.00130.721110.0013
Mysqli_queries0.131974.37121410.0009
Looping result0.00140.77151390.0000
Template Total0.164792.910.1647
Template load0.00090.522110.0009
Template processing0.163892.328710.1638
Override
Cache load0.00070.386710.0007
Sytem overhead
Fetch class attribute can translate value0.00100.577210.0010
XML
Image XML parsing0.00030.164010.0003
General
dbfile0.00160.9237200.0001
String conversion0.00000.003430.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0002 secs