Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Hiding Pricing/Buying Options

If not logged into a customer account, all pricing and buying buttons across the site are replaced with a "login or register to view pricing" message, accompanied by "login" and "register" buttons.

Industries

  • Wholesale

Wireframes

Product Page

Product Page

Product Thumbnail

Product Thumbnail (List View)

Product Thumbnail

Product Thumbnail (Box/Sidebar View)

Box/Sidebar View

Coding Instructions

There are two phases for this tweak; the first involves setting up customer groups, and then implementing the tweaks to all the files that display prices & purchase options.

It's worth noting that while common sense would indicate that is is best to check if a customer has a username or not, to tell if they are logged in, but this is not the case. The Neto Web Accelerator does not respect usernames but it does respect user-groups, meaning if using user groups for this purpose is preferable as AJAX will not need to be used at all.

Setting up the groups

Price/User Groups will be used to distinguish between three different customer types: guests, members and wholesalers.

Price groups are configured under Admin > Customisable Fields > Customer Price Groups. Rename the price groups using logical names.

Customer price groups

In this example, Pricegroup A may be Guests, Pricegroup B may be Customers and Pricegroup A may be Wholesalers.

Under Admin > System Setup > Customer Settings, set the default pricegroup for different customer types.

Customer settings

Setting up the template logic

The code for testing the user group and applying the buying options is as follows:

[%if [@user:group_id@] ne '1'%] <!--Buying options go here--> [%else%] <!--Message to users to either log in, sign up, etc.--> [%/if%]

By default, Skeletal will display information that needs this logic applied to the following templates :

  • skeletal/products/includes/buying_options.template.html

  • skeletal/products/includes/header.template.html

  • skeletal/products/includes/child_products.template.html

  • skeletal/thumbs/product/template.html

  • skeletal/thumbs/product/list.template.html

  • skeletal/thumbs/product/box.template.html

The code for each template applying the new logic assuming a default base set-up is as follows:

Use the code as a guideline as to what files to edit and the kind of code to hide

skeletal/products/includes/buying_options.template.html

[%if [@user:group_id@] ne '1'%]
  <!-- All your pricing & buying options here -->
[%else%]
  <p>
    <a class="btn btn-primary btn-block" href="[%url page:'account' type:'login' /%]">Login to see pricing &amp; purchase</a>
  </p>
[%/if%]

skeletal/products/includes/header.template.html

In this case we don't have an else case, because we are assuming your login prompt button or message is on the buying_options template.

[%if [@user:group_id@] ne '1'%]
  <!-- Pricing data here -->
[%/if%]

skeletal/products/includes/child_products.template.html

For this template, this tag will need to be implemented a few times to hide the columns that are not relevant to the user as well as the add to cart button with the usual message to the user.

For the header of the table, it will look something like this:

<tr>
  [%if [@user:group_id@] ne '1'%]<th width="1">Quantity</th>[%/if%]
  <th width="72">Image</th>
  <th>Name</th>
  [%if [@user:group_id@] ne '1'%]<th width="47">Price</th>[%/if%]
</tr>

Then wrap each of the columns underneath in the body param:

[%if [@user:group_id@] ne '1'%]
  <!-- Quantity td here -->
[%/if%]
[%if [@user:group_id@] ne '1'%]
  <!-- Pricing td here -->
[%/if%]

Finally, hide the multi-item add to cart and replace it with our "login" prompt button at the bottom under the table:

<div class="cta-area">
  [%if [@user:group_id@] ne '1'%]
    <!-- Add to cart button here -->
  [%else%]
    <p><a class="btn btn-primary btn-block" href="[%url page:'account' type:'login' /%]">Login to see pricing &amp; purchase</a></p>
  [%/if%]
</div>

skeletal/thumbs/product/template.html

The pricing will be hidden in two places, the pricing in the <p> tag and the buying options in the <form>.

<p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  [%if [@user:group_id@] ne '1'%]
    <!-- Pricing data -->
  [%/if%]
  <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
</p>

For the buying options, use an else statement to retain the button where the user can learn more about the product, including the login prompt to display pricing.

<form class="form-inline buying-options">
  [%if [@user:group_id@] ne '1'%]
    <!-- Inputs and buying option buttons -->
  [%else%]
    <a href="[@URL@]" title="Buying Options" class="btn btn-primary btn-block btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">See Options</a>
  [%/if%]
</form>

Hide any savings container as this will often have price-related data.

[%if [@user:group_id@] ne '1'%]        
  <div class="savings-container">
    <!-- Promotion pricing data -->
  </div>
[%/if%]

skeletal/thumbs/product/list.template.html

Just as with our standard thumbnail template, we want to hide the pricing data & the buying options in both parts of the template.

<p class="price lead" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
  [%if [@user:group_id@] ne '1'%]
    <!-- Pricing and promo data here -->
  [%/if%]
</p>

Include an else with a button prompt for the user to go to the product page and learn more about the product.

<form class="form-inline buying-options">
  [%if [@user:group_id@] ne '1'%]
    <!-- inputs and add to cart buttons -->
  [%else%]
    <a href="[@URL@]" title="Buying Options" class="btn btn-primary btn-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">See Buying Options</a>
  [%/if%]
</form>

skeletal/thumbs/product/box.template.html

Use this code to hide the savings container and the pricing data and print another little "see options" text block:

[%if [@user:group_id@] ne '1'%]
  <!-- Savings container -->
[%/if%]
[%if [@user:group_id@] ne '1'%]
  <!-- Pricing data -->
[%else%]
  <p><a href="[@url@]">See options</a></p>
[%/if%]

3 related articles found: