ShopSite Forums

Your source for ShopSite user collaboration

Skip to content

Add to cart form

Questions and answers about ShopSite Custom Templates
Post a reply

Add to cart form

Postby alanrichardtex » Thu Dec 07, 2023 8:26 pm

Hi, I would like to be able to use an add to cart form for some of the products we sell rather than the drop down menus. Something like what is shown on this page https://www.rowleycompany.com/diamond-head-upholstery-nails . Is there a way to do something like this in shopsite?
Thanks
alanrichardtex
 
Posts: 11
Joined: Fri Mar 24, 2023 10:30 pm
Top

Re: Add to cart form

Postby ShopSite Lauren » Fri Dec 08, 2023 4:10 pm

This would be a 'multi add-to-cart' page where you can add multiple items to the cart with one add to cart button. In order to do this, instead of having an add to cart form for each product, you would start the add to cart form in the page template above all the products on the page, then end the add to cart form and include the add to cart button in the page template below all the products assigned to the page.

In the PAGE template, this code goes above the LOOP PRODUCTS tag:
Code: Select all
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
<input type="hidden" name="storeid" value="[-- STORE.Id --]">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">

<!-- add this code for a basic table...don't include this code if you are using DIVs -->
<table>


In the PAGE template, this code goes below the LOOP PRODUCTS tag:
Code: Select all
<!-- Add the closing table tag if you opened the table tag above...don't include the closing table tag if you are using DIVs -->
</table>

<input type="submt" value="Add to Cart">
</form>



Then, for this page template, you would want to force products on this page to use a specific product template that displays the products in the table-like structure of the example website you sent. In order to do this, find the [-- PRODUCTS --] tag, and add the name of the template you want to create, such as [-- PRODUCTS ART-Multi-Add.sst --]. Now you can go to Merchandising > Custom Templates > Page/Product Templates, and create a new product template that is called ART-Multi-Add.sst.

In the PRODUCT template, you will want to include the form tags for any product options, the product quantity field, and the checkbox to add that product to the cart. Note, in order to not have the checkbox you will need to add JavaScript to dynamicly check a hidden checkbox (or an equivalent function). In the DEFINE PRODUCT section of the product template, you would have something similar to this (note this is very simplified...you can beef this up as much as you want to get the look you are after).

Code: Select all
[-- DEFINE PRODUCT --]
<tr>
<td>[--PRODUCT.Name--]</td>
<td>[-- IF PRODUCT.SaleAmount --]<strike>[--PRODUCT.Price--]</strike> [-- PRODUCT.SaleAmount --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --]</td>
<td>Add? <input type="checkbox" name="itemnum" value="[-- PRODUCT.RECORDNUMBER --]"></td>
<td>Qnty <input type="text" size="2" name="[-- PRODUCT.RECORDNUMBER --]:qnty" value="1"></td>
<td>[-- IF PRODUCT.DisplayOrderingOptions --][-- PRODUCT.OptionText --] [-- ORDER_OPTION_MENU LINE --][-- END_IF --]</td>
</tr>
[-- END_DEFINE PRODUCT --]


Here is a template cookbook page that also talks about the basic set up for a multi add to cart page template:
https://www.shopsite.com/templates/cookbook/tips-multiaddtocart-page.shtml
- ShopSite Lauren
Contact me for help with any of your
custom ShopSite template questions.
ShopSite Lauren
 
Posts: 887
Joined: Fri Aug 11, 2006 1:35 pm
Location: Orem, UT
Top

Re: Add to cart form

Postby alanrichardtex » Fri Dec 08, 2023 9:48 pm

thank you Lauren. I am still a little confused with some of it though. I think i correctly edited the page template, but i'm not following on how to do the product template. If i change the product template to a new one then if someone tries to view the products individual more info page wont it look weird?

here is the updated page template after adding the code you mentioned.
Code: Select all
[--DEFINE LINK_TO_PAGE--][-- IF PAGE.LinkGraphic --]<a href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]"><img src="[-- PAGE.LinkGraphic URL_ONLY --]" class="card-img-top" alt="[-- PAGE.LinkGraphicDesc --]"></a>[-- END_IF --]<div class="p-2">[-- IF PAGE.LinkName --]<a class="h6 card-title" href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]" title="[-- PAGE.LinkName --]">[-- PAGE.LinkName --]</a>[-- ELSE_IF PAGE.LinkGraphic --][-- ELSE --]<a class="h6 card-title" href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">[-- PAGE.Name --]</a>[-- END_IF --][-- IF PAGE.LinkText --]<div class="card-text pt-1">[-- PAGE.LinkText --]</div>[-- END_IF --]</div>[--END_DEFINE LINK_TO_PAGE--]
###################################################################################
[-- DEFINE PAGE --][-- VAR.Type "page" --][-- VAR.Secure "no" --][-- INCLUDE Element-DOCTYPE.sst PROCESS --]
[-- IF PAGE.Layout "Left Aligned" --][-- VAR.Alignment "left" --][-- ELSE_IF PAGE.Layout "Right Aligned" --][-- VAR.Alignment "right" --][-- ELSE --][-- VAR.Alignment "center" --][-- END_IF --]
[-- IF PAGE.DisplayColumnBorders --][-- VAR.Borders "true" --][-- VAR.ProdPad "px-4" --][-- ELSE --][-- VAR.Borders "false" --][-- VAR.ProdPad "px-2" --][-- END_IF --]
[-- IF PAGE.MetaKeywords --]<meta name="keywords" content="[-- PAGE.MetaKeywords --]">[-- END_IF --]
[-- IF PAGE.MetaDescription --]<meta name="description" content="[-- PAGE.MetaDescription --]">[-- END_IF --]
<title>[-- IF PAGE.Title --][-- PAGE.Title --][-- ELSE --][-- PAGE.Name HTML_ENCODE --][-- END_IF --][-- IF PAGE.PaginatedPageNum GT 1 --] | Page [-- PAGE.PaginatedPageNum --][-- END_IF --]</title>
<link rel="canonical" href="[-- OUTPUT_DIRECTORY_URL --]/[-- PAGE.FileName --]">
[-- INCLUDE Element-Head.sst PROCESS --][-- IF VAR.MorePageSpeed "yes" --][-- INCLUDE Element-PreEndHead.sst PROCESS --][-- INCLUDE EndHead.sst --][-- ELSE --]</head>[-- END_IF --]

  <body class="desktop notouch taop tbop [-- VAR.SideMenus --]">
[-- INCLUDE Element-Header.sst PROCESS --]
    <main id="main-content">
      <div class="py-4">
        <div class="container">
[-- IF VAR.Breadcrumbs "yes" --][-- IF PAGE.FileName "index.html" --][-- ELSE_IF PAGE.FileName "index.htm" --][-- ELSE_IF PAGE.FileName "index.php" --][-- ELSE_IF PAGE.FileName "index.asp" --][-- ELSE --]          <div id="breadcrumbs"><nav aria-label="breadcrumb"><ol class="breadcrumb" id="bootcrumbs"><li class="breadcrumb-item"><a href="[-- MyStoreURL --]">[-- STORE.Home --]</a></li></ol></nav></div>[-- END_IF --][-- END_IF --]
[-- IF PageLinks.Left --][-- IF PageLinks.Right --]<div class="row d-md-flex align-items-stretch align-self-start"><div class="col-12 col-md-9 col-xl-8 order-1 order-md-2">[-- ELSE --]<div class="row d-md-flex align-items-stretch align-self-start"><div class="col-12 col-md-9 order-1 order-md-2">[-- END_IF --][-- ELSE_IF PageLinks.Right --]<div class="row d-lg-flex align-items-stretch align-self-start"><div class="col-12 col-md-9 order-1">[-- END_IF --]
[-- IF PayPal_Credit_Message --]<div class="pb-2">[-- PayPal_Credit_Message Flex VeryWide --]</div>[-- END_IF --]
          <div id="pg-intro" class="text text-[-- VAR.Alignment --]">
            <div>[-- INCLUDE Element-Carousel.sst PROCESS --][-- IF PAGE.DisplayName --]<h1>[-- PAGE.Name --]</h1>[-- END_IF --][-- IF PAGE.Text1 --]<div class="py-1 textfield  img-fluid-div" id="text1">[-- PAGE.Text1 --]</div>[-- END_IF --]</div>
          </div>
[-- IF PAGE.NumLinks GE 1 --]
[-- VAR.CountLinkCardGroup 0 --][-- VAR.LinkCount 0 --]
[-- IF PAGE.LinkColumns "One Column" --][-- VAR.LinkRowNum 1 --][-- VAR.LinkCardGroupBreak 1 --]
[-- ELSE_IF PAGE.LinkColumns "Two Columns" --][-- VAR.LinkRowNum 2 --][-- VAR.LinkCardGroupBreak 2 --]
[-- ELSE_IF PAGE.LinkColumns "Three Columns" --][-- VAR.LinkRowNum 3 --][-- VAR.LinkCardGroupBreak 3 --]
[-- ELSE_IF PAGE.LinkColumns "Four Columns" --][-- VAR.LinkRowNum 4 --][-- VAR.LinkCardGroupBreak 4 --]
[-- ELSE --][-- VAR.LinkRowNum 5 --][-- VAR.LinkCardGroupBreak 5 --]
[-- END_IF --]
<div id="looplinks">
<div class="card-deck rowcount-[-- VAR.LinkRowNum --]">
[-- VAR.LinkPosition 0 --][-- LOOP LINKS --][-- VAR.CountLinkCardGroup INC --][-- VAR.LinkCount INC --][-- VAR.LinkPosition INC --]<div class="card pb-5 impressionclick" data-position="[-- VAR.LinkPosition --]">[-- LINK Element-Page.sst --]</div>
[-- IF VAR.CountLinkCardGroup VAR.LinkCardGroupBreak --][-- VAR.CountLinkCardGroup 0 --]</div><div class="card-deck rowcount-[-- VAR.LinkRowNum --]">[-- END_IF --]
[-- END_LOOP LINKS --]
[-- IF VAR.CountLinkCardGroup 0 --][-- ELSE --][-- VAR.CountLinkCardGroup INC --]<div class="card"></div>[-- IF VAR.CountLinkCardGroup LT VAR.LinkCardGroupBreak --][-- VAR.CountLinkCardGroup INC --]<div class="card"></div>[-- END_IF --][-- IF VAR.CountLinkCardGroup LT VAR.LinkCardGroupBreak --][-- VAR.CountLinkCardGroup INC --]<div class="card"></div>[-- END_IF --][-- IF VAR.CountLinkCardGroup LT VAR.LinkCardGroupBreak --][-- VAR.CountLinkCardGroup INC --]<div class="card"></div>[-- END_IF --][-- END_IF --]
</div>
</div>
[-- END_IF --]
          [-- IF PAGE.NumProducts GE 1 --]
[-- IF PAGE.LinkName --][-- VAR.PageLinkName PAGE.LinkName --][-- ELSE --][-- VAR.PageLinkName PAGE.Name --][-- END_IF --][-- VAR.PageFileName PAGE.FileName --]
[-- VAR.CountCardGroup 0 --][-- VAR.ProdCount 0 --]
[-- IF PAGE.Columns "One Column" --][-- VAR.ProdRowNum 1 --][-- VAR.CardGroupBreak 1 --]
[-- ELSE_IF PAGE.Columns "Two Columns" --][-- VAR.ProdRowNum 2 --][-- VAR.CardGroupBreak 2 --]
[-- ELSE_IF PAGE.Columns "Three Columns" --][-- VAR.ProdRowNum 3 --][-- VAR.CardGroupBreak 3 --]
[-- ELSE_IF PAGE.Columns "Four Columns" --][-- VAR.ProdRowNum 4 --][-- VAR.CardGroupBreak 4 --]
[-- ELSE --][-- VAR.ProdRowNum 5 --][-- VAR.CardGroupBreak 5 --]
[-- END_IF --]
[-- IF PAGE.ProductsPerPage NE 0 --]<div id="top-pagination" class="pagination d-flex flex-wrap justify-content-center align-items-center mb-4"><span class="pr-2 font-weight-bold">[-- STORE.454 --]</span> [-- PrevNext NoCenter --]</div>[-- END_IF --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
<input type="hidden" name="storeid" value="[-- STORE.Id --]">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">

<!-- add this code for a basic table...don't include this code if you are using DIVs -->
<table>
<div id="loopproducts">
<div class="card-group rowcount-[-- VAR.ProdRowNum --]">[-- VAR.PageFileName PAGE.FileName --][-- VAR.PageName PAGE.Name --][-- IF PAGE.LinkName --][-- VAR.PageName PAGE.LinkName --][-- END_IF --]
[-- IF VAR.DisplaySameCategoryProducts "yes" --][-- VAR.ProductNum 1 --][-- END_IF --][-- VAR.Position 0 --][-- LOOP PRODUCTS --][-- VAR.CountCardGroup INC --][-- VAR.ProdCount INC --][-- VAR.Position INC --]<div class="card pb-5 impressionclick" data-position="[-- VAR.Position --]">[-- PRODUCT --]</div>
[-- IF VAR.CountCardGroup VAR.CardGroupBreak --][-- VAR.CountCardGroup 0 --]</div><div class="card-group rowcount-[-- VAR.ProdRowNum --]">[-- END_IF --]
[-- END_LOOP PRODUCTS --]
<!-- Add the closing table tag if you opened the table tag above...don't include the closing table tag if you are using DIVs -->
</table>

<input type="submt" value="Add to Cart">
</form>
[-- IF VAR.CountCardGroup 0 --][-- ELSE --][-- VAR.CountCardGroup INC --]<div class="card"></div>[-- IF VAR.CountCardGroup LT VAR.CardGroupBreak --][-- VAR.CountCardGroup INC --]<div class="card"></div>[-- END_IF --][-- IF VAR.CountCardGroup LT VAR.CardGroupBreak --][-- VAR.CountCardGroup INC --]<div class="card"></div>[-- END_IF --][-- IF VAR.CountCardGroup LT VAR.CardGroupBreak --][-- VAR.CountCardGroup INC --]<div class="card"></div>[-- END_IF --][-- END_IF --]
</div>
</div>
[-- IF PAGE.ProductsPerPage NE 0 --]<div id="bottom-pagination" class="pagination d-flex flex-wrap justify-content-center align-items-center mt-4"><span class="pr-2 font-weight-bold">[-- STORE.454 --]</span> [-- PrevNext NoCenter --]</div>[-- END_IF --]
[-- IF VAR.QuantityPricing "yes" --]<div id="quantity-pricing-flag" class="small text-muted">[-- STORE.QuantityPricingFlag --][-- STORE.QuantityPricingMsg --]</div>[-- END_IF --]
[-- IF VAR.VariablePricing "yes" --]<div id="quantity-pricing-flag" class="small text-muted">[-- STORE.VariablePricingFlag --][-- STORE.VariablePricingMsg --]</div>[-- END_IF --]
          [-- END_IF --]
[-- IF PAGE.Text2 --]<div id="text2" class="py-3 img-fluid-div">[-- PAGE.Text2 --]</div>[-- END_IF --]
[-- IF PAGE.Text3 --]<div id="text3" class="py-3 img-fluid-div">[-- PAGE.Text3 --]</div>[-- END_IF --]
<div class="d-flex social-share flex-wrap justify-content-end align-items-center">[-- SOCIAL_SHARE --][-- IF TellAFriend --][-- VAR.TF_Link PAGE.Name --]<span class="share">[-- TellAFriend VAR.TF_Link --]</span>[-- END_IF --]</div>
[-- IF VAR.DisplayRecentlyViewed "yes" --]<div id="recently-viewed"></div>[-- END_IF --]
[-- IF PageLinks.Left --][-- IF PageLinks.Right --]</div><div id="left-nav" class="col-12 col-md-3 col-xl-2 text-left border-right order-2 order-md-1">[-- INCLUDE Element-LeftNav.sst PROCESS --]</div><div id="right-nav" class="col-12 col-xl-2 text-left border-left order-3">[-- INCLUDE Element-RightNav.sst PROCESS --]</div></div>[-- ELSE --]</div><div id="left-nav" class="col-12 col-md-3 text-left border-right order-2 order-md-1">[-- INCLUDE Element-LeftNav.sst PROCESS --]</div></div>[-- END_IF --][-- ELSE_IF PageLinks.Right --]</div><div class="col-12 col-lg-3 col-xl-2 text-left order-3">[-- INCLUDE Element-RightNav.sst PROCESS --]</div></div>[-- END_IF --]
       </div>
      </div>
    </main>

[-- IF PAGE.NumProducts GT 20 --][-- IF PAGE.ProductsPerPage GT 20 --][-- VAR.EchoLazyLoadCode "yes" --][-- END_IF --][-- ELSE_IF PAGE.GlobalCrossSell --][-- VAR.EchoLazyLoadCode "yes" --][-- END_IF --]
[-- VAR.Type "page" --]
[-- IF VAR.Breadcrumbs "yes" --]<script>var pgfilename = "";var pglinkname = "";var crumb = "";[-- IF PAGE.FileName "index.html" --]localStorage.removeItem("crumbs");[-- ELSE_IF PAGE.FileName "index.htm" --]localStorage.removeItem("crumbs");[-- ELSE_IF PAGE.FileName "index.php" --]localStorage.removeItem("crumbs");[-- ELSE_IF PAGE.FileName "index.asp" --]localStorage.removeItem("crumbs");[-- ELSE --]var pgfilename = "[-- PAGE.FileName --]";var pglinkname = escape("[-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name REMOVE_HTML --][-- END_IF --]");var crumb = "[-- IF PAGE.LinkName --][-- PAGE.LinkName --][-- ELSE --][-- PAGE.Name REMOVE_HTML --][-- END_IF --]~/[-- PAGE.FileName --]";[-- END_IF --]</script>[-- END_IF --]
[-- INCLUDE Element-Footer.sst PROCESS --]
<script>
[-- IF VAR.DisplayPrevNext "yes" --]var catitems = [];ss_jQuery("#loopproducts a.catitem").each(function(){var catitem=ss_jQuery(this).attr("href");catitems.push(catitem)});sessionStorage.setItem("catitems",catitems);[-- END_IF --]
ss_jQuery(window).on('load', onLoad("page","","","[-- IF VAR.EchoLazyLoadCode "yes" --]lazyload[-- END_IF --]",[-- IF PAGE.NumProducts GE 2 --]"hasproducts"[-- END_IF --]));
</script>
[-- IF VAR.MorePageSpeed "yes" --][-- INCLUDE Element-PreEndBody.sst PROCESS --][-- INCLUDE EndBody.sst --][-- ELSE --]</body>[-- END_IF --]
</html>[-- END_DEFINE PAGE --]


and here is the current product template
Code: Select all
[-- DEFINE SUBPRODUCT --][-- VAR.SubSubAllowed "yes" --][-- IF PRODUCT.SubProduct --][-- IF VAR.SubProductType NE "upsell" --][-- VAR.SubSubAllowed "no" --][-- END_IF --][-- END_IF --][-- IF VAR.SubSubAllowed "yes" --][-- VAR.ProductType "sub" --][-- IF VAR.SubProductType "select" --]<option value="[-- PRODUCT.RecordNumber --]" data-id="[-- IF PRODUCT.SKU --][-- PRODUCT.Sku --][-- ELSE --][-- PRODUCT.RecordNumber --][-- END_IF --]" data-price="[-- IF PRODUCT.SaleAmount --][-- PRODUCT.SaleAmount RAW_NUMBER --][-- ELSE --][-- PRODUCT.Price RAW_NUMBER --][-- END_IF --]">[-- IF PRODUCT.DisplayName --][-- PRODUCT.Name REMOVE_HTML --][-- ELSE_IF PRODUCT.ProductDescription --][-- PRODUCT.ProductDescription --][-- ELSE_IF PRODUCT.Sku --][-- PRODUCT.Sku --][-- ELSE --][-- PRODUCT.RecordNumber --][-- END_IF --]</option>[-- ELSE --]<div class="form-check"><input type="[-- IF VAR.SubProductType "upsell" --]checkbox[-- ELSE --][-- VAR.SubProductType --][-- END_IF --]" name="itemnum" class="form-check-input" id="subProduct[-- PRODUCT.RecordNumber --]" data-id="[-- IF PRODUCT.SKU --][-- PRODUCT.SKU --][-- ELSE --][-- PRODUCT.RecordNumber --][-- END_IF --]" value="[-- PRODUCT.RecordNumber --]" [-- IF VAR.SubProductType "radio" --][-- VAR.SubSelected --][-- END_IF --]><label class="form-check-label" for="subProduct[-- PRODUCT.RecordNumber --]"><span class="sub-name">[-- IF PRODUCT.DisplayName --][-- PRODUCT.Name REMOVE_HTML --][-- ELSE_IF PRODUCT.ProductDescription --][-- PRODUCT.ProductDescription --][-- ELSE_IF PRODUCT.Sku --][-- PRODUCT.Sku --][-- ELSE --][-- PRODUCT.RecordNumber --][-- END_IF --]</span> <span class="subprice">[-- INCLUDE Element-ProductPrice.sst PROCESS --]</span></label></div>[-- END_IF --][-- END_IF --][-- END_DEFINE SUBPRODUCT --]
####################################################################################
[-- DEFINE PRODUCT --][-- IF VAR.ProductType "searchresult" --][-- ELSE --][-- VAR.ProductType "regular" --][-- END_IF --][-- INCLUDE Element-ProductDefine.sst PROCESS --][-- END_DEFINE PRODUCT --]
####################################################################################
[-- DEFINE PRODUCT_CROSS_SELL --][-- VAR.ProductType "crosssell" --][-- INCLUDE Element-ProductDefine.sst PROCESS --][-- END_DEFINE PRODUCT_CROSS_SELL --]
####################################################################################
[-- DEFINE MORE_INFO_PAGE --][-- VAR.Type "moreinfo" --][-- VAR.Secure "no" --][-- INCLUDE Element-DOCTYPE.sst PROCESS --]
[-- VAR.DisplaySizeFit "no" --][-- VAR.SizeFitModal "no" --][-- IF PRODUCT.SizeFitGuide EQ I --][-- IF PRODUCT.SizeFitGuideImage --][-- VAR.DisplaySizeFit "yes" --][-- VAR.SizeFitModal "yes" --][-- END_IF --][-- ELSE_IF PRODUCT.SizeFitGuide EQ T --][-- IF PRODUCT.SizeFitGuideText --][-- VAR.DisplaySizeFit "yes" --][-- VAR.SizeFitModal "yes" --][-- END_IF --][-- END_IF --]
[-- IF PRODUCT.MoreInformationMetaKeywords --]
<meta name="keywords" content="[-- PRODUCT.MoreInformationMetaKeywords --]">
[-- END_IF --][-- IF PRODUCT.MoreInformationMetaDescription --]
<meta name="description" content="[-- PRODUCT.MoreInformationMetaDescription --]">
[-- END_IF --]
<meta property="og:url" content="[-- PRODUCT.MoreInfoURL --]">
<meta property="og:title" content="[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name HTML_ENCODE --][-- IF PRODUCT.Sku --] [-- PRODUCT.Sku --][-- END_IF --][-- END_IF --]">
<meta property="og:type" content="product">
[-- IF PRODUCT.OneLineAd --]<meta property="og:description" content="[-- PRODUCT.OneLineAd --]">[-- ELSE_IF PRODUCT.MoreInformationMetaDescription --]<meta property="og:description" content="[-- PRODUCT.MoreInformationMetaDescription --]">
[-- END_IF --][-- IF PRODUCT.DisplayPrice --]
<meta property="og:price:amount" content="[-- IF PRODUCT.SaleAmount --][-- IF PRODUCT.SaleOn --][-- PRODUCT.SaleAmount NUMBER --][-- ELSE --][-- PRODUCT.Price NUMBER --][-- END_IF --][-- ELSE --][-- PRODUCT.Price NUMBER --][-- END_IF --]">
[-- END_IF --][-- IF Locale_Name "en-US" --]
<meta property="og:price:currency" content="USD">
[-- END_IF --][-- IF PRODUCT.MoreInformationGraphic --]
<meta property="og:image" content="[-- PRODUCT.MoreInformationGraphic URL_ONLY --]">
<meta property="og:image:secure_url" content="[-- STORE.SC_Secure_Image_URL --]/media/[-- IMAGE PRODUCT.MoreInformationGraphic --]">
[-- ELSE_IF PRODUCT.Graphic --]
<meta property="og:image" content="[-- PRODUCT.Graphic URL_ONLY --]">
<meta property="og:image:secure_url" content="[-- STORE.SC_Secure_Image_URL --]/media/[-- IMAGE PRODUCT.Graphic --]">
[-- END_IF --]
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name HTML_ENCODE --][-- IF PRODUCT.Sku --] [-- PRODUCT.Sku --][-- END_IF --][-- END_IF --]">
[-- IF PRODUCT.OneLineAd --]
<meta property="twitter:description" content="[-- PRODUCT.OneLineAd --]">[-- ELSE_IF PRODUCT.MoreInformationMetaDescription --]<meta name="twitter:description" content="[-- PRODUCT.MoreInformationMetaDescription --]">
[-- END_IF --]
<title>[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name HTML_ENCODE --][-- IF PRODUCT.Sku --] | [-- PRODUCT.Sku --][-- END_IF --][-- IF STORE.Name --] | [-- STORE.Name HTML_ENCODE --][-- END_IF --][-- END_IF --]</title>
<link rel="canonical" href="[-- PRODUCT.MoreInfoURL --]">
[-- INCLUDE Element-Head.sst PROCESS --][-- IF VAR.MorePageSpeed "yes" --][-- INCLUDE Element-PreEndHead.sst PROCESS --][-- INCLUDE EndHead.sst --][-- ELSE --]</head>[-- END_IF --]

[-- VAR.ProductType "moreinfo" --]
  <body class="desktop notouch taop tbop [-- VAR.SideMenus --]">
[-- INCLUDE Element-Header.sst PROCESS --]
#          Calculate the number of product information sections.  If only 1 section, display under the add to cart button.  If more than 1 section, display below the image.
[-- VAR.NumSections 0 --][-- IF PRODUCT.MoreInformationText --][-- VAR.NumSections INC --][-- ELSE_IF PRODUCT.ProductDescription --][-- VAR.NumSections INC --][-- END_IF --][-- IF PRODUCT.ShippingDetails --][-- VAR.NumSections INC --][-- END_IF --][-- IF PRODUCT.Returns --][-- VAR.NumSections INC --][-- ELSE_IF PRODUCT.Warranty --][-- VAR.NumSections INC --][-- END_IF --][-- IF PRODUCT.Specifications --][-- VAR.NumSections INC --][-- END_IF --][-- IF PRODUCT.Materials --][-- VAR.NumSections INC --][-- END_IF --][-- IF PRODUCT.HowToUse --][-- VAR.NumSections INC --][-- END_IF --]
    <main id="main-content">
      <div class="py-4">
        <div class="container">
[-- IF VAR.Breadcrumbs "yes" --]          <div id="breadcrumbs"><nav aria-label="breadcrumb"><ol class="breadcrumb" id="bootcrumbs"><li class="breadcrumb-item"><a href="[-- MyStoreURL --]">[-- STORE.Home --]</a></li></ol></nav></div>[-- END_IF --]
[-- IF PageLinks.Left --][-- IF PageLinks.Right --]<div class="row d-md-flex align-items-stretch align-self-start"><div class="col-12 col-md-9 col-xl-8 order-1 order-md-2">[-- ELSE --]<div class="row d-md-flex align-items-stretch align-self-start"><div class="col-12 col-md-9 order-1 order-md-2">[-- END_IF --][-- ELSE_IF PageLinks.Right --]<div class="row d-lg-flex align-items-stretch align-self-start"><div class="col-12 col-md-9 order-1">[-- END_IF --]
          <div class="row">
            [-- IF PRODUCT.MoreInformationGraphic --]<div class="col-md-[-- IF VAR.SideMenus "none" --]7[-- ELSE --]6[-- END_IF --] text-center" id="mi-img">[-- INCLUDE Element-ProductMoreInfoImageRow.sst PROCESS --][-- IF REVIEWS --][-- IF REVIEWS_COUNT_NUMBER LT 1 --]<div class="py-4">[-- REVIEWS_WRITE_FIRST --]</div>[-- END_IF --][-- END_IF --]</div>[-- END_IF --]
            <div class="col-md-[-- IF PRODUCT.MoreInformationGraphic --][-- IF VAR.SideMenus "none" --]5[-- ELSE --]6[-- END_IF --][-- ELSE --]12[-- END_IF --] text-left" id="mi-side"><div id="product[-- PRODUCT.RecordNumber --]" data-id="[-- IF PRODUCT.Sku --][-- PRODUCT.SKU --][-- ELSE --][-- PRODUCT.RecordNumber --][-- END_IF --]">[-- IF PRODUCT.DisplayName --]<h1 class="product-name h2[-- IF VAR.DisplayBrand "yes" --][-- IF PRODUCT.Brand --] mb-0[-- END_IF --][-- END_IF --]">[-- PRODUCT.Name --]</h1>[-- END_IF --][-- IF PRODUCT.Brand --][-- IF VAR.DisplayBrand "yes" --][-- IF SearchOnStorePages --]<a href="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.Id --]&amp;search_field=[-- PRODUCT.Brand --]" class="product-brand d-block text-muted mb-2">[-- PRODUCT.Brand --]</a>[-- ELSE --]<h2 class="h6 text-muted mt-0 py-0 mb-2 product-brand">[-- PRODUCT.Brand --]</h2>[-- END_IF --][-- END_IF --]<span class="d-none product-brand">[-- PRODUCT.Brand --]</span>[-- ELSE --]<span class="d-none product-brand"></span>[-- END_IF --]
              [-- IF REVIEWS --][-- IF REVIEWS_COUNT_NUMBER GE 1 --]<div class="pr-rvs mb-1"><a href="#mi-reviews" title="[-- STORE.Reviews_Header --]">[-- REVIEWS_STARS NO_MICRODATA --]<span class="d-inline-block small px-1">(<span class="reviews-jump-link">[-- REVIEWS_COUNT_NUMBER --]</span>)</span></a></div>[-- END_IF --][-- END_IF --]
              [-- IF PRODUCT.DisplayPrice --]<span class="product-price d-block">[-- INCLUDE Element-ProductPrice.sst PROCESS --]</span>[-- END_IF --]
              [-- IF PRODUCT.MoreInformationText --][-- IF PRODUCT.ProductDescription --]<div id="product-description-container"><div class="[-- PRODUCT.DescriptionStyle --] [-- PRODUCT.DescriptionSize --]"><div>[-- PRODUCT.ProductDescription --]</div></div></div>[-- END_IF --][-- END_IF --]
              [-- IF PRODUCT.DisplaySku --][-- IF PRODUCT.Sku --]<span class="d-block product-sku font-weight-light font-italic">[-- STORE.Sku --] [-- PRODUCT.Sku --]</span>[-- END_IF --][-- END_IF --]
               [-- IF PRODUCT.QuantityPricing --][-- IF PRODUCT.DisplayQuantityPricing --]<div class="mt-4 quantity-price">[-- PRODUCT.QuantityPricing VERTICAL --]</div>[-- END_IF --][-- END_IF --]
[-- IF PRODUCT.DisplayAddToCart NE "Not Displayed"  --]<div id="mi-add">[-- INCLUDE Element-ProductAddToCart.sst PROCESS --]</div>[-- END_IF --]
[-- IF PayPal_Credit_Message --][-- PayPal_Credit_Message Text Wide --][-- END_IF --]
              [-- VAR.DisplaySocialWithReviews "no" --][-- IF REVIEWS --][-- IF REVIEWS_COUNT_NUMBER GE 1 --][-- VAR.DisplaySocialWithReviews "yes" --][-- END_IF --][-- END_IF --]
              <div id="wishes-share" class="d-flex flex-wrap justify-content-start align-items-center social-share">[-- IF WishList --][-- WishList --][-- END_IF --][-- IF VAR.DisplaySocialWithReviews "no" --][-- SOCIAL_SHARE --][-- IF TellAFriend --][-- VAR.TF_Link PRODUCT.Name --]<span class="share">[-- TellAFriend VAR.TF_Link --]</span>[-- END_IF --][-- END_IF --]</div>
              [-- IF PRODUCT.AsSeenInImage --]<div id="asseenin" class="mt-3"><span class="d-block h6 mb-0">[-- STORE.AsSeenIn --]</span><img src="[-- PRODUCT.AsSeenInImage URL_ONLY --]" [-- IF PRODUCT.AsSeenInImageDesc --]alt="[-- PRODUCT.AsSeenInImageDesc --]" title="[-- PRODUCT.AsSeenInImageDesc --]"[-- ELSE --]alt="[-- PRODUCT.Name REMOVE_HTML --] [-- STORE.AsSeenIn --]" title="[-- PRODUCT.Name REMOVE_HTML --] [-- STORE.AsSeenIn --]"[-- END_IF --]></div>[-- END_IF --]
                           [-- IF VAR.NumSections 1 --]<section id="mi-details"><div id="info-section" class="py-4">
                [-- IF PRODUCT.MoreInformationText --]<div><h2 class="h4">[-- STORE.MoreDetails --]</h2>[-- PRODUCT.MoreInformationText --]</div>[-- ELSE_IF PRODUCT.ProductDescription --]<div><h2 class="h4">[-- STORE.MoreDetails --]</h2>[-- PRODUCT.ProductDescription --]</div>[-- END_IF --]
                [-- IF PRODUCT.ShippingDetails --]<div><h3 class="h4">[-- STORE.ShippingDetails --]</h3>[-- PRODUCT.ShippingDetails --]</div>[-- END_IF --]
                [-- IF PRODUCT.Returns --]<div><h3 class="h4">[-- STORE.Returns --]</h3>[-- PRODUCT.Returns --][-- IF PRODUCT.Warranty --]<div class="mt-2"><h5>[-- STORE.Warranty --]</h5>[-- PRODUCT.Warranty --]</div>[-- END_IF --]</div>[-- ELSE_IF PRODUCT.Warranty --]<div class="mb-4"><h3 class="h4">[-- STORE.Warranty --]</h3>[-- PRODUCT.Warranty --]</div>[-- END_IF --]
                [-- IF PRODUCT.Specifications --]<div><h3 class="h4">[-- STORE.Specifications --]</h3>[-- PRODUCT.Specifications --]</div>[-- END_IF --]
                [-- IF PRODUCT.Materials --]<div><h3 class="h4">[-- STORE.Materials --]</h3>[-- PRODUCT.Materials --]</div>[-- END_IF --]
                [-- IF PRODUCT.HowToUse --]<div><h3 class="h4">[-- STORE.HowToUse --]</h3>[-- PRODUCT.HowToUse --]</div>[-- END_IF --]
[-- IF VAR.AdditionalImages GT "0" --][-- ELSE_IF PRODUCT.Video --]<div><div class="embed-responsive embed-responsive-16by9">[-- PRODUCT.Video --]</div></div>[-- END_IF --]
              </div></section>
              [-- END_IF --]
            </div></div>
          </div>
#     End of product image row (above)
[-- IF VAR.SideMenus "none" --]</div></div>[-- END_IF --]
[-- IF VAR.NumSections GT 1 --]<section id="mi-details" class="wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.2s"><div class="[-- IF VAR.SideMenus "none" --]container [-- END_IF --]py-4"><div class="row pt-4" id="mobileAccordion"><div class="col-md-6 text-left">
  [-- IF PRODUCT.MoreInformationText --]<div class="card"><h2 class="h4"><span class="d-none d-md-block">[-- STORE.MoreDetails --]</span><button class="d-block d-md-none" type="button" data-toggle="collapse" data-target="#collapseDetails" aria-expanded="true" aria-controls="collapseDetails" aria-label="[-- STORE.MoreDetails --]">[-- STORE.MoreDetails --]</button></h2><div id="collapseDetails" class="collapse show" data-parent="#mobileAccordion"><div class="pb-4">[-- PRODUCT.MoreInformationText --]</div></div></div>[-- ELSE_IF PRODUCT.ProductDescription --]<div class="mb-4"><h2 class="h4">[-- STORE.MoreDetails --]</h2>[-- PRODUCT.ProductDescription --]</div>[-- END_IF --]
  [-- IF PRODUCT.Specifications --]<div class="card"><h3 class="h4"><span class="d-none d-md-block">[-- STORE.Specifications --]</span><button class="d-block d-md-none" type="button" data-toggle="collapse" data-target="#collapseSpecs" aria-expanded="true" aria-controls="collapseSpecs" aria-label="[-- STORE.Specifications --]">[-- STORE.Specifications --]</button></h3><div id="collapseSpecs" class="collapse show" data-parent="#mobileAccordion"><div class="pb-4">[-- PRODUCT.Specifications --]</div></div></div>[-- END_IF --]
  [-- IF PRODUCT.Materials --]<div class="card"><h3 class="h4"><span class="d-none d-md-block">[-- STORE.Materials --]</span><button class="d-block d-md-none" type="button" data-toggle="collapse" data-target="#collapseMaterials" aria-expanded="true" aria-controls="collapseMaterials" aria-label="[-- STORE.Materials --]">[-- STORE.Materials --]</button></h3><div id="collapseMaterials" class="collapse show" data-parent="#mobileAccordion"><div class="pb-4">[-- PRODUCT.Materials --]</div></div></div>[-- END_IF --]
  </div><div class="col-md-6 text-left">
  [-- IF PRODUCT.HowToUse --]<div class="card"><h3 class="h4"><span class="d-none d-md-block">[-- STORE.HowToUse --]</span><button class="d-block d-md-none" type="button" data-toggle="collapse" data-target="#collapseHow" aria-expanded="true" aria-controls="collapseHow" aria-label="[-- STORE.HowToUse --]">[-- STORE.HowToUse --]</button></h3><div id="collapseHow" class="collapse show" data-parent="#mobileAccordion"><div class="pb-4">[-- PRODUCT.HowToUse --]</div></div></div>[-- END_IF --]
  [-- IF PRODUCT.ShippingDetails --]<div class="card"><h3 class="h4"><span class="d-none d-md-block">[-- STORE.ShippingDetails --]</span><button class="d-block d-md-none" type="button" data-toggle="collapse" data-target="#collapseShipping" aria-expanded="true" aria-controls="collapseShipping" aria-label="[-- STORE.ShippingDetails --]">[-- STORE.ShippingDetails --]</button></h3><div id="collapseShipping" class="collapse show" data-parent="#mobileAccordion"><div class="pb-4">[-- PRODUCT.ShippingDetails --]</div></div></div>[-- END_IF --]
  [-- IF PRODUCT.Returns --]<div class="card"><h3 class="h4"><span class="d-none d-md-block">[-- STORE.Returns --]</span><button class="d-block d-md-none" type="button" data-toggle="collapse" data-target="#collapseReturns" aria-expanded="true" aria-controls="collapseReturns" aria-label="[-- STORE.Returns --]">[-- STORE.Returns --]</button></h3><div id="collapseReturns" class="collapse show" data-parent="#mobileAccordion"><div class="pb-4">[-- PRODUCT.Returns --][-- IF PRODUCT.Warranty --]<div class="mt-2"><h5>[-- STORE.Warranty --]</h5>[-- PRODUCT.Warranty --]</div>[-- END_IF --]</div></div></div>[-- ELSE_IF PRODUCT.Warranty --]<div><h3 class="h4"><span class="d-none d-md-block">[-- STORE.Warranty --]</span><button class="d-block d-md-none" type="button" data-toggle="collapse" data-target="#collapseWarranty" aria-expanded="true" aria-controls="collapseWarranty" aria-label="[-- STORE.Warranty --]">[-- STORE.Warranty --]</button></h3><div id="collapseWarranty" class="collapse show pb-4" data-parent="#mobileAccordion"><div class="pb-4">[-- PRODUCT.Warranty --]</div></div></div>[-- END_IF --]
[-- IF VAR.AdditionalImages GT "0" --][-- ELSE_IF PRODUCT.Video --]<div class="card"><div class="embed-responsive embed-responsive-16by9">[-- PRODUCT.Video --]</div></div>[-- END_IF --]
</div></div></div></section>
[-- END_IF --]
##
## Cross Sell
[-- VAR.CrossSellHeader "Related Items:" --][-- VAR.DisplayCrossSell "no" --][-- IF PRODUCT.MoreInformationGlobalCrossSell --][-- VAR.DisplayCrossSell "yes" --][-- VAR.CrossSellHeader STORE.GlobalCrossSellHeader --][-- END_IF --][-- IF PRODUCT.MoreInformationProductCrossSell --][-- IF PRODUCT.CrossSell GT "0" --][-- VAR.DisplayCrossSell "yes" --][-- VAR.CrossSellHeader STORE.CartCrossSellHeader --][-- END_IF --][-- END_IF --]
[-- IF VAR.DisplayCrossSell "yes" --]
[-- VAR.CrossCountCardGroup 0 --][-- VAR.CrossProdCount 0 --][-- VAR.CrossProdRowNum VAR.ProdRowNum --][-- VAR.CrossProdRowNum INC --][-- IF VAR.CrossProdRowNum 5 --][-- VAR.CrossProdRowNum INC --][-- END_IF --][-- VAR.CrossCardGroupBreak VAR.CardGroupBreak --][-- VAR.CrossCardGroupBreak INC --][-- IF VAR.CrossCardGroupBreak 5 --][-- VAR.CrossCardGroupBreak INC --][-- END_IF --]
<section id="mi-crosssell" name="mi-crosssell" class="wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.2s"><div class="[-- IF VAR.SideMenus "none" --]container [-- END_IF --]py-4"><h2>[-- VAR.CrossSellHeader --]</h2>
<div id="loopproducts">
<div class="card-group rowcount-[-- VAR.CrossProdRowNum --]">
[-- VAR.CrossPosition 0 --]
[-- IF PRODUCT.MoreInformationProductCrossSell --][-- IF PRODUCT.CrossSell GT "0" --][-- LOOP PRODUCT_CROSS_SELL --]
[-- VAR.CrossCountCardGroup INC --][-- VAR.CrossProdCount INC --][-- VAR.CrossPosition INC --]<div class="card pb-5 impressionclick" data-position="[-- VAR.CrossPosition --]">[-- PRODUCT_CROSS_SELL Element-Product.sst --]</div>
[-- IF VAR.CrossCountCardGroup VAR.CrossCardGroupBreak --][-- VAR.CrossCountCardGroup 0 --]</div><div class="card-group rowcount-[-- VAR.CrossProdRowNum --]">[-- END_IF --]
[-- END_LOOP PRODUCT_CROSS_SELL --][-- END_IF --][-- END_IF --]
#
[-- IF PRODUCT.MoreInformationGlobalCrossSell --][-- LOOP GLOBAL_CROSS_SELL --]
[-- VAR.CrossCountCardGroup INC --][-- VAR.CrossProdCount INC --][-- VAR.CrossPosition INC --]<div class="card pb-5 impressionclick" data-position="[-- VAR.CrossPosition --]">[-- GLOBAL_CROSS_SELL --]</div>
[-- IF VAR.CrossCountCardGroup VAR.CrossCardGroupBreak --][-- VAR.CrossCountCardGroup 0 --]</div><div class="card-group rowcount-[-- VAR.CrossProdRowNum --]">[-- END_IF --]
[-- END_LOOP GLOBAL_CROSS_SELL --][-- END_IF --]
#
[-- IF VAR.CrossCountCardGroup 0 --][-- ELSE --][-- VAR.CrossCountCardGroup INC --]<div class="card"></div>[-- IF VAR.CrossCountCardGroup LT VAR.CrossCardGroupBreak --][-- VAR.CrossCountCardGroup INC --]<div class="card"></div>[-- END_IF --][-- IF VAR.CrossCountCardGroup LT VAR.CrossCardGroupBreak --][-- VAR.CrossCountCardGroup INC --]<div class="card"></div>[-- END_IF --][-- IF VAR.CrossCountCardGroup LT VAR.CrossCardGroupBreak --][-- VAR.CrossCountCardGroup INC --]<div class="card"></div>[-- END_IF --][-- END_IF --]
</div>
</div></div></section>
[-- END_IF --]
# End If - display cross sell
#
# Reviews
[-- IF REVIEWS --][-- IF REVIEWS_COUNT_NUMBER GE 1 --]<section id="mi-reviews" name="mi-reviews" class="wow fadeIn" data-wow-duration="1.5s" data-wow-delay="0.2s"><div class="[-- IF VAR.SideMenus "none" --]container [-- END_IF --]py-4"><div class="d-md-flex flex-wrap justify-content-md-between"><h2 class="h4">[-- STORE.Reviews_Header --]</h2><div class="d-flex flex-wrap justify-content-start align-items-center social-share">[-- SOCIAL_SHARE --][-- IF TellAFriend --][-- VAR.TF_Link PRODUCT.Name --]<span class="share">[-- TellAFriend VAR.TF_Link --]</span>[-- END_IF --]</div></div>[-- IF REVIEWS_COUNT_NUMBER GE 2 --]<div class="border-bottom mb-2 pb-2">[-- REVIEWS_STARS NO_MICRODATA --]<div class="d-inline-block px-4 small">[-- REVIEWS_COUNT --]</div><div class="d-inline-block small">[-- REVIEWS_READ_REVIEWS_LINK --]</div></div>[-- END_IF --]<div id="mi-featured-reviews">[-- REVIEWS_FEATURED --]</div>[-- REVIEWS_WRITE_REVIEW_LINK --]</div></section>[-- END_IF --][-- END_IF --]
#
#
# Recently Viewed
[-- IF VAR.DisplayRecentlyViewed "yes" --]<div id="recently-viewed"></div>[-- END_IF --]
[-- IF PageLinks.Left --][-- IF PageLinks.Right --]</div><div id="left-nav" class="col-12 col-md-3 col-xl-2 text-left border-right order-2 order-md-1">[-- INCLUDE Element-LeftNav.sst PROCESS --]</div><div id="right-nav" class="col-12 col-xl-2 text-left border-left order-3">[-- INCLUDE Element-RightNav.sst PROCESS --]</div></div>[-- ELSE --]</div><div id="left-nav" class="col-12 col-md-3 text-left border-right order-2 order-md-1">[-- INCLUDE Element-LeftNav.sst PROCESS --]</div></div>[-- END_IF --][-- ELSE_IF PageLinks.Right --]</div><div class="col-12 col-lg-3 col-xl-2 text-left order-3">[-- INCLUDE Element-RightNav.sst PROCESS --]</div></div>[-- END_IF --]
[-- IF VAR.SideMenus NE "none" --]</div></div>[-- END_IF --]
    </main>
[-- IF VAR.Breadcrumbs "yes" --]<script>var miurl = "[-- PRODUCT.MoreInfoURL --]";var miprname = escape("[-- PRODUCT.Name REMOVE_HTML--]");var crumb = "[-- PRODUCT.Name --]~/[-- PRODUCT.MoreInformationFileName --]";var bootcrumbs = "<li class='breadcrumb-item'><a href='[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.PageFileName --]'>[-- VAR.PageLinkName --]<\/a><\/li>";var categorylist = ("/[-- VAR.PageFileName --]").substring([("/[-- VAR.PageFileName --]").lastIndexOf("/")+1],[("/[-- VAR.PageFileName --]").lastIndexOf(".")]);</script>[-- END_IF --]
[-- VAR.Animate "yes" --][-- VAR.Type "moreinfo" --]
[-- INCLUDE Element-Footer.sst PROCESS --]
<script>
#                                                              If Quantity Pricing is used...display the "starting at" or "as low as" pricing
[-- IF PRODUCT.QuantityPricing --][-- IF PRODUCT.DisplayQuantityPricing --]var highprc = ss_jQuery(".quantity-price table tr:nth-child(2) td:nth-child(2)").html();ss_jQuery("#high-end").html("&nbsp;- "+highprc);[-- END_IF --][-- END_IF --]
#                                                                                                                 if display recently viewed is turned on
[-- IF VAR.DisplayRecentlyViewed "yes" --]var recentid='recent[-- STORE.ID --]',recentlyviewed = localStorage.getItem(recentid),newviewed = "[-- IF PRODUCT.MoreInformationGraphic --][-- PRODUCT.MoreInformationGraphic SS_SIZE3 URL_ONLY --][-- ELSE_IF PRODUCT.Graphic --][-- PRODUCT.Graphic SS_SIZE3 URL_ONLY --][-- END_IF --]|[-- PRODUCT.MoreInfoURL --]|[-- PRODUCT.Name HTML_ENCODE --]";if(!recentlyviewed){localStorage.setItem(recentid,newviewed);recentlyviewed=newviewed}else{let recents=recentlyviewed.split('||'),i;recentlyviewed=newviewed;for(i=0;i<recents.length;i++){if(recents[i]!=newviewed)recentlyviewed=recentlyviewed+'||'+recents[i];}localStorage.setItem(recentid,recentlyviewed);}[-- END_IF --]
#                                                                           function for anything loaded after the above the fold page loads
updatePrice("product[-- PRODUCT.RecordNumber --]","[-- IF PRODUCT.SaleAmount --][-- PRODUCT.SaleAmount RAW_NUMBER --][-- ELSE --][-- PRODUCT.Price RAW_NUMBER --][-- END_IF --]");
ss_jQuery(window).on('load', onLoad("[-- VAR.Type --]","[-- IF VAR.DisplayRecentlyViewed "yes" --]recent[-- END_IF --]","[-- IF VAR.DisplaySameCategoryProducts "yes" --]related[-- END_IF --]","[-- IF VAR.EchoLazyLoadCode "yes" --]lazyload[-- END_IF --]","hasproducts"));
[-- IF VAR.DisplayPrevNext "yes" --]var catitems = (sessionStorage.getItem("catitems")).split(",");var curitemnum = 0;for (i = 0; i < catitems.length; i++) {if (catitems[i] == window.location.href) {var curitemnum = i+1;break;}};if (curitemnum == 1) {var catitemshtml = "<a class='prev' href='"+catitems[(catitems.length)-1]+"'></a> "+curitemnum+" of "+catitems.length+" <a class='next' href='"+catitems[curitemnum]+"'></a>";}else if (curitemnum == catitems.length) {var catitemshtml = "<a class='prev' href='"+catitems[curitemnum-2]+"'></a> "+curitemnum+" of "+catitems.length+" <a class='next' href='"+catitems[0]+"'></a>";}else {var catitemshtml = "<a class='prev' href='"+catitems[curitemnum-2]+"'></a> "+curitemnum+" of "+catitems.length+" <a class='next' href='"+catitems[curitemnum]+"'></a>";};if (curitemnum > 0) {ss_jQuery("#category-prev-next").html(catitemshtml)}[-- END_IF --]
[-- IF VAR.NumSections GT 1 --]if (ss_jQuery(window).width()<768) {$("#mobileAccordion .collapse.show").collapse("hide")};ss_jQuery(window).resize(debouncer(function() {if (ss_jQuery(window).width()<768) {$("#mobileAccordion .collapse.show").collapse("hide")}else {$("#mobileAccordion .card > div:not(.show)").collapse("dispose");$("#mobileAccordion .card > div:not(.show)").addClass("show")}}));[-- END_IF --]
</script>
[-- INCLUDE json-microdata.sst PROCESS --]
<script type="application/ld+json">[-- VAR.BreadCount 1 --]{"@context": "http://schema.org","@type": "BreadcrumbList","itemListElement": [{"@type": "ListItem","position": [-- VAR.BreadCount --][-- VAR.BreadCount INC --],"item": {"id": "[-- MyStoreURL --]","name": "[-- STORE.Name REMOVE_HTML --]"}}[-- IF VAR.PageFileName NE "index.html" --],{"@type": "ListItem","position": [-- VAR.BreadCount --][-- VAR.BreadCount INC --],"item": {"id": "[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.PageFileName --]","name": "[-- VAR.PageName --]"}}[-- END_IF --],{"@type": "ListItem","position": [-- VAR.BreadCount --][-- VAR.BreadCount INC --],"item": {"id": "[-- PRODUCT.MoreInfoURL --]","name": "[-- IF PRODUCT.MoreInformationTitle --][-- PRODUCT.MoreInformationTitle --][-- ELSE --][-- PRODUCT.Name JSON_ENCODE --][-- END_IF --]"}}]}</script>
[-- IF VAR.MorePageSpeed "yes" --][-- INCLUDE Element-PreEndBody.sst PROCESS --][-- INCLUDE EndBody.sst --][-- ELSE --]</body>[-- END_IF --]
</html>[-- END_DEFINE MORE_INFO_PAGE --]
alanrichardtex
 
Posts: 11
Joined: Fri Mar 24, 2023 10:30 pm
Top

Re: Add to cart form

Postby alanrichardtex » Mon Dec 11, 2023 10:19 am

Lauren, i am new to code, but I managed to make this table using dreamweaver, but i am having trouble getting the add to cart button working. Here is the code. Do you think you can fix that part for me please? Thanks

Code: Select all
<form class="product-form" action="/add-to-cart" method="post">
 <style>
 /* Styles for the table */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Styles for table cells */
td, th {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}

/* Responsive styles for tables */
@media only screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
 
  /* Hide table headers (if not needed) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
 
  tr {
    border: 1px solid #ddd;
    margin-bottom: 8px;
  }
 
  td {
    /* Set the behavior for each cell in smaller screens */
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding-left: 50%;
  }
 
  td:before {
    /* Define the data for each cell in smaller screens */
    text-align: left;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
}

  .product-table {
    border-collapse: collapse;
    width: 100%;
  }
  .product-table th, .product-table td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  .product-img {
    width: 100px;
    height: 100px;
  }
  .product-line td {
    width: 50px;
    text-align: center;
  }
  .quantity-input {      width: 40px; /* Adjust width as needed */      padding: 5px;      margin-left: 5px;      text-align: center;   
  }
  .product-box {
    border: 1px solid black;
    padding: 8px;
  }
  .add-to-cart-box {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>
<table width="977" border="1" cellpadding="1">
  <tbody>
    <tr>
      <th width="117" scope="col">Item</th>
      <th width="104" scope="col">Quantity</th>
      <th width="87" scope="col">Diameter</th>
      <th scope="col">Color</th>
      <th width="98" scope="col">SKU</th>
      <th width="61" scope="col">Shank Size</th>
      <th width="63" scope="col">Price</th>
      <th width="237" scope="col">Add To Cart</th>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-01Natural.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19025:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td width="87">7/16&quot;</td>
      <td width="197">#01   Natural</td>
      <td width="98">HI1009-01</td>
      <td width="61">1/2&quot;</td>
      <td align="right" width="63">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 1 add to cart -->
        <button id="submitForm19025" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-02FrenchNaturalST1.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 2 quantity -->
        <div class="options-div">
          <label>Quantity
            <input type="text" size="2" name="19026:qnty" value="1">
            <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
          </label>
        </div></td>
      <td>7/16&quot;</td>
      <td width="197">#02   French Natural ST1</td>
      <td>HI1009-02</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19026" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-03FrenchNaturalST.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 3 quantity -->
        <div class="options-div">
          <label>Quantity
            <input type="text" size="2" name="19027:qnty" value="1">
            <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
          </label>
        </div></td>
      <td>7/16&quot;</td>
      <td width="197">#03   French Natural ST</td>
      <td>HI1009-03</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 3 add to cart -->
        <button id="submitForm19027" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-06OldGoldZ.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 2 quantity -->
        <div class="options-div">
          <label>Quantity
            <input type="text" size="2" name="19028:qnty" value="1">
            <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
          </label>
        </div></td>
      <td>7/16&quot;</td>
      <td width="197">#06 Old   Gold &quot;Z&quot;</td>
      <td>HI1009-06</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19028" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-08OldGoldE.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19029:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#08 Old   Gold &quot;E&quot;</td>
      <td>HI1009-08</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19029" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-09OldSilver.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19030:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#09 Old   Silver</td>
      <td>HI1009-09</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19030" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-10Pewter1.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19031:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#10   Pewter 1</td>
      <td>HI1009-10</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19031" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-1/Draperyfabric-ss_size1/Pillow.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="-:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#11   Oxford</td>
      <td>HI1009-11</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="-" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-12OldBrass.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19033:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#12 Old   Brass</td>
      <td>HI1009-12</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19033" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-13Nickel.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="XX19034:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#13   Nickel</td>
      <td>HI1009-13</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19034" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-14BronzeRennBrass.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19035:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#14   Bronze Renaissance</td>
      <td>HI1009-14</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19035" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-15FrenchNatural7.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19036:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#15   French Natural 7</td>
      <td>HI1009-15</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19036" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-16Oxidized.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19037:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#16   Oxidized</td>
      <td>HI1009-16</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19037" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-17OldCopperPolished.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19038:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#17 Old   Copper Polished</td>
      <td>HI1009-17</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19038" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-18CopperPlated.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19039:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#18   Copper Plated</td>
      <td>HI1009-18</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19039" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-19BrassPlated.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19040:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#19   Brass Plated</td>
      <td>HI1009-19</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19040" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-21FrenchNatural5.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19041:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#21   French Natural 5</td>
      <td>HI1009-21</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19041" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-22PearlGrayAntique.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19042:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#22   Pearl Grey (Antique)</td>
      <td>HI1009-22</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19042" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-24OldNickel.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19043:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#24 Old   Nickel</td>
      <td>HI1009-24</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19043" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-25OldGoldO.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19044:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#25 Old   Gold &quot;O&quot;</td>
      <td>HI1009-25</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19044" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-27OldBrass4.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19045:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#27 Old   Brass 4</td>
      <td>HI1009-27</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19045" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-31BlackShiny.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19046:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#31   Black, Shiny</td>
      <td>HI1009-31</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19046" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-33OldGoldSpottedBrown2.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19047:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#33 Old   Gold Spotted Brown 2</td>
      <td>HI1009-33</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19047" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-37Natural1.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19048:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#37   Natural 1</td>
      <td>HI1009-37</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19048" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-38OldGoldIT.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19049:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#38 Old   Gold IT</td>
      <td>HI1009-38</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19049" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-39Platinum.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19050:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#39   Platinum</td>
      <td>HI1009-39</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19050" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"><img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-40FlatBlackDull.jpg" alt="Upholstery Nail"></div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19051:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#40 Flat   Black (Dull)</td>
      <td>HI1009-40</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19051" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-41Pewter2.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19052:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#41   Pewter 2</td>
      <td>HI1009-41</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19052" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-43OldGoldR.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19053:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#43 Old   Gold &quot;R&quot;</td>
      <td>HI1009-43</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19053" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-44BlackNickel1.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19054:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#44   Black Nickel 1</td>
      <td>HI1009-44</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19054" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-46OldGoldZ3.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19055:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#46 Old   Gold &quot;Z&quot; 3</td>
      <td>HI1009-46</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19055" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-50OldZincSpottedIT.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19057:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#50 Old   Zinc Spotted IT</td>
      <td>HI1009-50</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19057" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-52OldCopperOxford.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19058:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#52 Old   Copper Oxford</td>
      <td>HI1009-52</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19058" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-59OldGoldITBrown.jpg" alt="Upholstery Nail"></div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19059:qnty2" value="1">
          <input type="hidden" name="storeid3" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#59 Old   Gold IT Brown</td>
      <td>HI1009-59</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19059" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
    <tr>
      <td class="product-line"><div class="product-img-container"> <img class="product-img" src="https://www.alanrichardtextiles.com/store/media/Products-old/Upholstery-Supplies/decor-nails/HN/ss_size1/HI1009-87BlackBrass.jpg" alt="Upholstery Nail"> </div></td>
      <td class="product-box"><!-- Product 1 quantity -->
        <label>Quantity
          <input type="text" size="2" name="19060:qnty" value="1">
          <input type="hidden" name="storeid2" value="*105bf218a60785402fff">
        </label></td>
      <td>7/16&quot;</td>
      <td width="197">#87   Brass/Black</td>
      <td>HI1009-87</td>
      <td>1/2&quot;</td>
      <td align="right">$30.00 </td>
      <td class="add-to-cart-box"><!-- Product 2 add to cart -->
        <button id="submitForm19060" type="submit" class="btn btn-primary">Add To Cart</button></td>
    </tr>
   
  </tbody>
</table>
</form>


ShopSite Lauren wrote:This would be a 'multi add-to-cart' page where you can add multiple items to the cart with one add to cart button. In order to do this, instead of having an add to cart form for each product, you would start the add to cart form in the page template above all the products on the page, then end the add to cart form and include the add to cart button in the page template below all the products assigned to the page.

In the PAGE template, this code goes above the LOOP PRODUCTS tag:
Code: Select all
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
<input type="hidden" name="storeid" value="[-- STORE.Id --]">
<input type="hidden" name="dbname" value="products">
<input type="hidden" name="function" value="add">

<!-- add this code for a basic table...don't include this code if you are using DIVs -->
<table>


In the PAGE template, this code goes below the LOOP PRODUCTS tag:
Code: Select all
<!-- Add the closing table tag if you opened the table tag above...don't include the closing table tag if you are using DIVs -->
</table>

<input type="submt" value="Add to Cart">
</form>



Then, for this page template, you would want to force products on this page to use a specific product template that displays the products in the table-like structure of the example website you sent. In order to do this, find the [-- PRODUCTS --] tag, and add the name of the template you want to create, such as [-- PRODUCTS ART-Multi-Add.sst --]. Now you can go to Merchandising > Custom Templates > Page/Product Templates, and create a new product template that is called ART-Multi-Add.sst.

In the PRODUCT template, you will want to include the form tags for any product options, the product quantity field, and the checkbox to add that product to the cart. Note, in order to not have the checkbox you will need to add JavaScript to dynamicly check a hidden checkbox (or an equivalent function). In the DEFINE PRODUCT section of the product template, you would have something similar to this (note this is very simplified...you can beef this up as much as you want to get the look you are after).

Code: Select all
[-- DEFINE PRODUCT --]
<tr>
<td>[--PRODUCT.Name--]</td>
<td>[-- IF PRODUCT.SaleAmount --]<strike>[--PRODUCT.Price--]</strike> [-- PRODUCT.SaleAmount --][-- ELSE --][-- PRODUCT.Price --][-- END_IF --]</td>
<td>Add? <input type="checkbox" name="itemnum" value="[-- PRODUCT.RECORDNUMBER --]"></td>
<td>Qnty <input type="text" size="2" name="[-- PRODUCT.RECORDNUMBER --]:qnty" value="1"></td>
<td>[-- IF PRODUCT.DisplayOrderingOptions --][-- PRODUCT.OptionText --] [-- ORDER_OPTION_MENU LINE --][-- END_IF --]</td>
</tr>
[-- END_DEFINE PRODUCT --]


Here is a template cookbook page that also talks about the basic set up for a multi add to cart page template:
https://www.shopsite.com/templates/cookbook/tips-multiaddtocart-page.shtml
alanrichardtex
 
Posts: 11
Joined: Fri Mar 24, 2023 10:30 pm
Top
Post a reply

Return to Custom Template Questions

Who is online

Users browsing this forum: No registered users and 104 guests

Powered by phpBB® Forum Software © phpBB Group