- Step 1: Create Product List
- Step 2: Create Discount
- Step 3: Add Widget to Shopping Cart
- Step 4: Add Merge Codes to Widget
The powerful functionality of AmeriCommerce product lists, discounts, and product display widgets can be be combined to allow customers to chose a free item from a list of items on the shopping cart page. This article is a step-by-step walk-through on setting that up.
Step 1: Create Product List
Product lists can be created in Catalog > Power Features > Product Lists. If you're not familiar with creating product lists, see: https://support.americommerce.com/hc/en-us/articles/201906850
Step 2: Create Discount
After creating a product list, navigate to Marketing > Discounts, click New, then
Configure the discount settings
- For Method Name, enter a name for the discount (customer's will see this)
- Check Active
- Check Method is Strict
- Configure the rest of the discount settings as desired
Add a discount action
- Click New Action
- Check Action is Active
- Select Choose Free Item(s) From Product List in the Action drop-down.
- Select the product list you created in Step 1 in the Product List drop-down.
- In the Qty: box, enter the number of free items to give to the customer
- Exit back to the Discount Edit Screen (You should see Edit Discount Method at the top, not Edit Discount Action).
Add Discount Rule (s)
- On the Edit Discount Method screen, click New Rule
- Configure the rule
- Repeat for each rule you would like to create.
For more information on creating discounts, see: https://support.americommerce.com/hc/en-us/articles/201906960
Step 3: Add Widget to Shopping Cart
Navigate to Themes > Edit Theme > Shopping Cart > Widgets, and
Add a Product Display Widget:
- Click Add Widget next to the desired widget area
- Select Product Display from the widget list
Configure the Widget:
- Edit the widget you just created
- Change Product Display Type to Discount Action Product List
- Check Show Qty Boxes & Add To Cart Button (Don't worry if you don't see this. Next steps explains how to add it).
- Configure the rest of the widget settings as desired
- Click save.
Step 4: Add Merge Codes to Widget
On the widget's edit screen, click Layout. Here is where you can add the Show Qty Boxes & Add to Cart Button checkbox if it wasn't visible on the previous step. To do so, add
qtyandaddtocartbutton="True" to the ac:widget tag:
<ac:widget qtyandaddtocartbutton="True" ... >
Next, add the $$QTYBOX$$ and $$ADDTOCART$$ merge codes as show belown:
<!-- Note the qtyandaddtocartbutton="True" parameter here --> <ac:widget qtyandaddtocartbutton="True" ... > <ac:visibilityarea id="dvControl"> $$ADMINHELP$$ <div class="pad-20 pad-b-only"> <div class="pad-b-20"><h3>$$HEADER$$</h3></div> <div class=""> <ac:layoutarea id="Layout"> $$GROUP$$ </ac:layoutarea> <ac:layoutarea id="Group"> <div class="row"> $$ITEM$$</div> </ac:layoutarea> <ac:layoutarea id="Item"> ... <ac:visibilityarea id="dvControlItem"> ... <!-- Bunch of HTML here for images, etc --> ... <div class="caption center"> <h4>##PRODUCTNAME##</h4> <p class="text-muted">$$PRICE$$</p> </div> </ac:visibilityarea> <!-- Add visibility area for qty and merge code --> <ac:visibilityarea id="QuantityForCart" class="QuantityForCart"> Qty: $$QTYBOX$$ </ac:visibilityarea> ... </ac:layoutarea> </div> </div> <!-- Add To Cart goes just before last /ac:visibility tag--> $$ADDTOCART$$ </ac:visibilityarea> </ac:widget>
Widget not displaying:
- Check that the widget doesn't have Hide checked.
- If Enable Merge Code is checked, make sure the merge code is in the Shopping Cart page's HTML.
- Check the product display type. Should be set to discount action product list.
- Ensure correct discount is selected in the widget settings.
- Confirm discount AND its actions have Active checked.
Widget displays, but there's no Quantity box or add to cart:
- Check merge code placement (step 4).
- Verify Show Qty Boxes & Add to Cart Button is checked.