Knowledgebase: Products
Can I allow my customers to set the price?

Most of the pricing options on your 3dcart store involve creating products with static prices assigned to them. However, in some cases, you might need to specify a product where your shoppers can set the price.

For example, perhaps you'd like to offer a donation type of product where the amount is set by the customer, or you'd like to offer a gift certificate where the customer can personally set the gift certificate amount themselves.

For these types of situations, we've created the following article which will show you how to customize a template that will accommodate a custom price. Below are the steps to follow:

Please Note:
The following information is being provided solely as a courtesy. Please understand that 3dcart support is neither qualified nor trained to provide HTML editing support. If you are uncomfortable with editing HTML, we also have design services available which can provide this service for you. Please contact our Sales department for more information.

For this tutorial, we will detail the basic concept of creating a modified version of your store's default listing template and editing it to allow for custom pricing. You will then upload this modified file up to your store and use it for whichever products you'd like to offer custom pricing on. To successfully use this tutorial, you will need the following:

  • Some basic HTML knowledge
  • Either an HTML editor like Dreamweaver or a simple text editor like Notepad.exe
  • FTP access to your site
  • Patience and a little bit of "Trial & Error" time

Editing your Template:

The first step in the process will involve retrieving a copy of the listing template that is normally used for your product listings. We'll be editing this file and using the modified version for your custom priced products. So first, we'll need to retrieve the appropriate template file from your store's FTP folders. The process will differ depending on whether your site is using an HTML5 theme or a non-HTML5 theme.


HTML5 Theme

If your site is using one of the newer HTML5 themes, please follow these directions. (Non-HTML5 theme instructions will follow directly after.)

  1. FTP into your account's FTP folders and navigate to /web/assets/templates/common-html5
  2. Within the folder, find listing_0.html and download it to your desktop
  3. Once the file is on your desktop, rename the file and change its name from listing_0.html to listing_10.html

Tip:
You're renaming the file in this early step in order to ensure you don't mistakenly appliy it to all of the products in the store. By naming the file listing_10.html the listing style (inside your store) will appear as listing style 11. You can then safely apply this style to only the products that need custom pricing.

Now that the file is downloaded and re-named, you are ready to edit it

  1. Open up the file in your HTML or text editor.
  2. Using the program's search function (Usually CTRL-F) search for the following comment tags:

<!--START: ITEMPRICE--> and <!--END: ITEMPRICE-->

  1. In the code found between these two tags, find the "[price]" code and change it to "Enter Amount Below"
  2. Save your progress and continue

The above change is needed so that the product's "Your Price" section indicates to your shoppers that their desired amount will be entered further down the page. Of course, you may change the wording as neeed if you want it to say something other than "Enter Amount Below."

To continue:

  1. With the file still open, now search for the following comment tags:

<!--START: qtybox--> and <!--END: qtybox-->

  1. Replace the code within these tags with the following:

<label>Enter Amount</label> $
<input type="text" size="5" name="specialamount" value="0">
<input type="hidden" size=3 name="qty-0" value=1 onChange="validateValues(document.add,1);" class="txtBoxStyle" />

  1. Save your file
  2. Upload the new file to your Theme Folder

Your Theme Folder will be located via FTP by navigating to "/web/assets/templates/[theme-name]" If you do not know your site's current theme name, navigate to Settings ->Design ->Themes & Styles in your 3dcart Online Store Manager, where the name will be shown at the top next to the label "Selected Theme."


non-HTML5 Theme

Use these instructions if your store is currently using a non-HTML5 theme for its design.

  1. FTP into your account's FTP folders and navigate to /web/assets/templates/common
  2. Within the folder, find listing_0.html and download it to your desktop
  3. Once the file is on your desktop, rename the file and change its name from listing_0.html to listing_10.html

Tip:
You're renaming the file in this early step in order to ensure you don't mistakenly appliy it to all of the products in the store. By naming the file listing_10.html the listing style (inside your store) will appear as listing style 11. You can then safely apply this style to only the products that need custom pricing.

Now that the file is downloaded and re-named, you are ready to edit it

  1. Open up the file in your HTML or text editor.
  2. Using the program's search function (Usually CTRL-F) search for the following code:

<!--START: ITEMPRICE--> and <!--END: ITEMPRICE-->

  1. In the code found between these two tags, find the "[price]" code and change it to "Enter Amount Below"
  2. Now, search for "[product_quantity]" and change this tag to "Enter Amount $"
  3. Save your progress and continue

The above changes are needed so that the product's "Your Price" section indicates to your shoppers that their desired amount will be entered further down the page. The second change is to show where the amount is entered. Of course, you may change the wording as neeed if you want it to say something other than "Enter Amount Below" if you wish.

To continue:

  1. With the file still open, now search for the following comment tags:

<!--START: qtybox--> and <!--END: qtybox-->

  1. Replace the code within these tags with the following:

<input type="text" size="5" name="specialamount" value="0"><input type="hidden" size=3 name="qty-0" value=1 onChange="validateValues(document.add,1);" class="txtBoxStyle" />

  1. Save your file
  2. Upload the new file to your Theme Folder

Your Theme Folder will be located via FTP by navigating to "/web/assets/templates/[theme-name]" If you do not know your site's current theme name, navigate to Settings ->Design ->Themes & Styles in your 3dcart Online Store Manager, where the name will be shown at the top next to the label "Selected Theme."


Setting Your Product's Listing Template

Now that the template has been modified and uploaded, you will need to assign the listing template you created so that it applies to the custom price product(s).

  1. Log into your 3dcart Online tore Manager and go to Products ->View/Edit
  2. Select the product you would like to modify and click on its "Edit" button
  3. Click on the product's "Advanced" tab.
  4. For "Listing Template" select "Style 11"
Note:
If you named the listing template listing_10.html as instructed earlier, the style's number should be Style 11. However, if you've changed its name to another number, the Style listing will always be one digit more than the template's name. (i.e. listing_5 will be "Style 6," listing_20 will be "Style 21," etc.)

Once complete, the product will allow your customers to set the purchase price as they would like.



Attachments 
 

Help Desk Software by Kayako fusion